webseite-ts-claude/frontend/assets/js/build.js

@@ -1,3 +1,4 @@
+"use strict";
 (() => {
   var __create = Object.create;
   var __defProp = Object.defineProperty;
@@ -5499,7 +5500,7 @@
   enableDismissTrigger(Toast);
   defineJQueryPlugin(Toast);
 
-  // dev/scripts/modules/Toast.js
+  // dev/scripts/modules/Toast.ts
   var import_toastify_js = __toESM(require_toastify(), 1);
   var Toast2 = (text = "", variant = "primary") => {
     const getColorByName = (variant2 = "") => {
@@ -5532,7 +5533,7 @@
           break;
         default:
           console.warn("variant not found");
-          color: "white";
+          color = "white";
       }
       return color;
     };
@@ -5558,34 +5559,42 @@
   };
   var Toast_default = Toast2;
 
-  // dev/scripts/modules/ProductManager.js
+  // dev/scripts/modules/ProductManager.ts
   var ProductManager = (el = null) => {
     const BASE_URL = "http://127.0.0.1:8000";
-    const module = el || document.querySelector(".product-manager") || console.error("Product Manager not found");
-    if (!module) return;
+    const module = el ?? document.querySelector(".product-manager");
+    if (!module) {
+      console.error("Product Manager not found");
+      return null;
+    }
+    const query2 = (root, selector) => {
+      const found = root.querySelector(selector);
+      if (!found) throw new Error(`ProductManager: Element "${selector}" nicht gefunden.`);
+      return found;
+    };
     const DOM = {
       module,
-      table: module.querySelector(".table-products"),
-      tBody: module.querySelector("tbody"),
-      inputName: module.querySelector(".input-product-name"),
-      inputPrice: module.querySelector(".input-product-price"),
-      btnAdd: module.querySelector(".button-product-add"),
-      templateRow: module.querySelector(".template-row"),
+      table: query2(module, ".table-products"),
+      tBody: query2(module, "tbody"),
+      inputName: query2(module, ".input-product-name"),
+      inputPrice: query2(module, ".input-product-price"),
+      btnAdd: query2(module, ".button-product-add"),
+      templateRow: query2(module, ".template-row"),
       // Nav Actions
-      btnSave: module.querySelector(".button-products-save"),
-      btnReset: module.querySelector(".button-products-reset"),
+      btnSave: query2(module, ".button-products-save"),
+      btnReset: query2(module, ".button-products-reset"),
       // Modal Edit
-      modalEdit: module.querySelector(".modal-edit"),
-      formEdit: module.querySelector(".form-product-edit"),
-      inputEditName: module.querySelector(".input-edit-name"),
-      inputEditPrice: module.querySelector(".input-edit-price"),
-      inputEditId: module.querySelector(".input-edit-id"),
-      inputEditPosition: module.querySelector(".input-edit-position"),
-      btnUpdate: module.querySelector(".button-product-update"),
+      modalEdit: query2(module, ".modal-edit"),
+      formEdit: query2(module, ".form-product-edit"),
+      inputEditName: query2(module, ".input-edit-name"),
+      inputEditPrice: query2(module, ".input-edit-price"),
+      inputEditId: query2(module, ".input-edit-id"),
+      inputEditPosition: query2(module, ".input-edit-position"),
+      btnUpdate: query2(module, ".button-product-update"),
       // Modal Delete
-      modalDelete: module.querySelector(".modal-delete"),
-      productName: module.querySelector("strong.product-name"),
-      btnConfirmDelete: module.querySelector(".button-confirm-delete")
+      modalDelete: query2(module, ".modal-delete"),
+      productName: query2(module, "strong.product-name"),
+      btnConfirmDelete: query2(module, ".button-confirm-delete")
     };
     console.log(DOM);
     const bsModalEdit = new Modal(DOM.modalEdit, {
@@ -5609,11 +5618,10 @@
       DOM.formEdit.addEventListener("submit", onSubmitEdit);
       window.addEventListener("keyup", onKeyUp);
     };
-    const onKeyUp = (e) => {
+    const onKeyUp = () => {
       DOM.btnAdd.disabled = DOM.inputName.value === "" || DOM.inputPrice.value === "";
     };
-    const onClickReset = (e) => {
-      const btnEl = e.currentTarget;
+    const onClickReset = () => {
       resetProducts().then((data) => {
         if (data.success) {
           Toast_default(data.msg, "success").show();
@@ -5623,7 +5631,7 @@
     };
     const onClickSave = (e) => {
       const btnEl = e.currentTarget;
-      const icon = btnEl.querySelector("i");
+      const icon = query2(btnEl, "i");
       icon.classList.add("fa-jello");
       saveProducts().then((data) => {
         if (data.success) {
@@ -5640,14 +5648,15 @@
         name: DOM.inputEditName.value,
         price: Number(DOM.inputEditPrice.value),
         _id: DOM.inputEditId.value,
-        position: DOM.inputEditPosition.value
+        position: Number(DOM.inputEditPosition.value)
       };
-      DOM.btnUpdate.querySelector("i").classList.add("fa-spin");
+      const icon = query2(DOM.btnUpdate, "i");
+      icon.classList.add("fa-spin");
       updateProduct(product).then((data) => {
         console.log(data);
         if (data.success) {
           Toast_default(data.msg, "success").show();
-          DOM.btnUpdate.querySelector("i").classList.remove("fa-spin");
+          icon.classList.remove("fa-spin");
           loadProducts();
           resetFields();
           bsModalEdit.hide();
@@ -5676,22 +5685,22 @@
     const onClickEdit = (e) => {
       const btnEl = e.currentTarget;
       const currentRow = parents(btnEl, "tr")[0];
-      const id = currentRow.dataset.id;
-      getProduct(id).then((data) => {
-        showModalEdit(data);
+      const id = currentRow.dataset.id ?? "";
+      getProduct(id).then((product) => {
+        if (product) showModalEdit(product);
       });
     };
     const onClickRemove = (e) => {
       const btnEl = e.currentTarget;
       const currentRow = parents(btnEl, "tr")[0];
-      const id = currentRow.dataset.id;
-      const productName = currentRow.querySelector(".td-name").textContent.trim();
+      const id = currentRow.dataset.id ?? "";
+      const productName = query2(currentRow, ".td-name").textContent?.trim() ?? "";
       DOM.btnConfirmDelete.dataset.id = id;
       DOM.productName.textContent = productName;
     };
     const onClickConfirmDelete = (e) => {
       const btnEl = e.currentTarget;
-      const id = btnEl.dataset.id;
+      const id = btnEl.dataset.id ?? "";
       deleteProduct(id).then((data) => {
         if (data.success) {
           Toast_default(data.msg, "success").show();
@@ -5706,14 +5715,14 @@
     const onClickMoveUp = (e) => {
       const btnEl = e.currentTarget;
       const currentRowEl = parents(btnEl, "tr")[0];
-      currentRowEl.previousElementSibling.before(currentRowEl);
+      currentRowEl.previousElementSibling?.before(currentRowEl);
       console.log("move up");
       disableNonFunctionalButtons();
     };
     const onClickMoveDown = (e) => {
       const btnEl = e.currentTarget;
       const currentRowEl = parents(btnEl, "tr")[0];
-      currentRowEl.nextElementSibling.after(currentRowEl);
+      currentRowEl.nextElementSibling?.after(currentRowEl);
       console.log("move down");
       disableNonFunctionalButtons();
     };
@@ -5730,8 +5739,8 @@
     const onDragStart = (e) => {
       console.log("DragEvent: ", e);
       const currentRowEl = e.currentTarget;
-      const idx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
-      e.dataTransfer.setData("text/plain", idx);
+      const idx = indexOfRow(currentRowEl);
+      e.dataTransfer?.setData("text/plain", String(idx));
       console.log("tr index:", idx);
     };
     const onDragOver = (e) => {
@@ -5739,13 +5748,14 @@
     };
     const onDrop = (e) => {
       const currentRowEl = e.currentTarget;
-      const targetIdx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
-      const sourceIdx = parseInt(e.dataTransfer.getData("text/plain"));
+      const targetIdx = indexOfRow(currentRowEl);
+      const sourceIdx = parseInt(e.dataTransfer?.getData("text/plain") ?? "");
       console.log({ targetIdx, sourceIdx });
-      if (sourceIdx === targetIdx) {
+      if (Number.isNaN(sourceIdx) || sourceIdx === targetIdx) {
         return;
       }
       const draggedEl = DOM.tBody.querySelector(`tr:nth-child(${sourceIdx + 1})`);
+      if (!draggedEl) return;
       if (sourceIdx > targetIdx) {
         currentRowEl.before(draggedEl);
       } else {
@@ -5753,6 +5763,11 @@
       }
       disableNonFunctionalButtons();
     };
+    const toErrorResponse = (error) => ({
+      msg: error instanceof Error ? error.message : String(error),
+      status: 0,
+      success: false
+    });
     const resetProducts = async () => {
       try {
         const response = await fetch(`${BASE_URL}/api/products/reset`, {
@@ -5768,9 +5783,10 @@
         const data = await response.json();
         return data;
       } catch (error) {
-        Toast_default(error, "error").show();
+        const result = toErrorResponse(error);
+        Toast_default(result.msg, "error").show();
         console.error(error);
-        return error;
+        return result;
       }
     };
     const saveProducts = async () => {
@@ -5788,9 +5804,10 @@
         const data = await response.json();
         return data;
       } catch (error) {
-        Toast_default(error, "error").show();
+        const result = toErrorResponse(error);
+        Toast_default(result.msg, "error").show();
         console.error(error);
-        return error;
+        return result;
       }
     };
     const createProduct = async (product) => {
@@ -5808,9 +5825,10 @@
         const data = await response.json();
         return data;
       } catch (error) {
-        Toast_default(error, "error").show();
+        const result = toErrorResponse(error);
+        Toast_default(result.msg, "error").show();
         console.error(error);
-        return error;
+        return result;
       }
     };
     const getProducts = async () => {
@@ -5823,7 +5841,7 @@
         return data;
       } catch (error) {
         console.error(error);
-        return error;
+        return [];
       }
     };
     const getProduct = async (id) => {
@@ -5836,7 +5854,7 @@
         return data;
       } catch (error) {
         console.error(error);
-        return error;
+        return null;
       }
     };
     const updateProduct = async (product) => {
@@ -5855,7 +5873,7 @@
         return data;
       } catch (error) {
         console.error(error);
-        return error;
+        return toErrorResponse(error);
       }
     };
     const deleteProduct = async (id) => {
@@ -5873,7 +5891,7 @@
         return data;
       } catch (error) {
         console.error(error);
-        return error;
+        return toErrorResponse(error);
       }
     };
     const initProducts = () => {
@@ -5896,16 +5914,18 @@
     };
     const addProduct = (product) => {
       const { name, price, _id: id, position } = product;
-      const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);
-      const tdNameEl = trEl.querySelector(".td-name");
-      const tdPriceEl = trEl.querySelector(".td-price");
-      const btnRemoveEl = trEl.querySelector(".button-product-remove");
-      const btnMoveUpEl = trEl.querySelector(".button-product-move-up");
-      const btnMoveDownEl = trEl.querySelector(".button-product-move-down");
-      const btnDragEl = trEl.querySelector(".button-drag");
-      const btnEditEl = trEl.querySelector(".button-product-edit");
+      const templateEl = DOM.templateRow.content.firstElementChild;
+      if (!templateEl) throw new Error('ProductManager: <template class="template-row"> ist leer.');
+      const trEl = templateEl.cloneNode(true);
+      const tdNameEl = query2(trEl, ".td-name");
+      const tdPriceEl = query2(trEl, ".td-price");
+      const btnRemoveEl = query2(trEl, ".button-product-remove");
+      const btnMoveUpEl = query2(trEl, ".button-product-move-up");
+      const btnMoveDownEl = query2(trEl, ".button-product-move-down");
+      const btnDragEl = query2(trEl, ".button-drag");
+      const btnEditEl = query2(trEl, ".button-product-edit");
       tdNameEl.textContent = name;
-      tdPriceEl.textContent = price;
+      tdPriceEl.textContent = String(price);
       btnEditEl.addEventListener("click", onClickEdit);
       btnRemoveEl.addEventListener("click", onClickRemove);
       btnMoveUpEl.addEventListener("click", onClickMoveUp);
@@ -5916,15 +5936,15 @@
       trEl.addEventListener("dragover", onDragOver);
       trEl.addEventListener("drop", onDrop);
       trEl.dataset.id = id;
-      trEl.dataset.position = position;
+      trEl.dataset.position = String(position);
       DOM.tBody.appendChild(trEl);
     };
     const showModalEdit = (product) => {
       const { name = "", price = 0, _id: id, position } = product;
       DOM.inputEditName.value = name;
-      DOM.inputEditPrice.value = price;
+      DOM.inputEditPrice.value = String(price);
       DOM.inputEditId.value = id;
-      DOM.inputEditPosition.value = position;
+      DOM.inputEditPosition.value = String(position);
     };
     const resetFields = () => {
       DOM.btnAdd.disabled = true;
@@ -5934,18 +5954,26 @@
     };
     const disableNonFunctionalButtons = () => {
       Array.from(DOM.tBody.querySelectorAll("tr")).forEach((tr) => {
-        const btnMoveUp = tr.querySelector(".button-product-move-up");
-        const btnMoveDown = tr.querySelector(".button-product-move-down");
+        const btnMoveUp = query2(tr, ".button-product-move-up");
+        const btnMoveDown = query2(tr, ".button-product-move-down");
         btnMoveUp.disabled = !tr.previousElementSibling;
         btnMoveDown.disabled = !tr.nextElementSibling;
       });
     };
+    const indexOfRow = (rowEl) => {
+      const siblings = rowEl.parentElement ? Array.from(rowEl.parentElement.children) : [];
+      return siblings.indexOf(rowEl);
+    };
     const parents = (el2, selector) => {
-      const parents2 = [];
-      while ((el2 = el2.parentNode) && el2 !== document) {
-        if (!selector || el2.matches(selector)) parents2.push(el2);
+      const result = [];
+      let current = el2.parentNode;
+      while (current && current !== document) {
+        if (current instanceof Element && (!selector || current.matches(selector))) {
+          result.push(current);
+        }
+        current = current.parentNode;
       }
-      return parents2;
+      return result;
     };
     init();
     return {
@@ -8525,7 +8553,7 @@
   Splide.defaults = {};
   Splide.STATES = STATES;
 
-  // dev/scripts/main.js
+  // dev/scripts/main.ts
   (() => {
     const DOM = {};
     const init = () => {
@@ -8537,7 +8565,7 @@
       console.log(path);
       switch (path) {
         case "/":
-        case "/index.html":
+        case "/index.html": {
           console.log("HOME");
           const splider = new Splide(".splide", {
             type: "loop",
@@ -8546,10 +8574,12 @@
             autoHeight: true
           }).mount();
           break;
-        case "/projects/product-manager.html":
+        }
+        case "/projects/product-manager.html": {
           console.log("PRODUCT_MANAGER");
           const pm = ProductManager_default();
           break;
+        }
         default:
           console.warn("Page not found");
       }

webseite-ts-claude/frontend/dev/scripts/main.ts

@@ -0,0 +1,51 @@
+// import 'bootstrap'; // ohne Pfadangabe (Modul auslesen aus node_modules) funktioniert nur mit JS-Bundler (esbuild, rollup & co.)
+
+import ProductManager from './modules/ProductManager'; // Dateiendung kann weggelassen werden, wenn ein Bundler eingesetzt wird (esbuild, webpack, rollup, etc.)
+import Splide from '@splidejs/splide';
+
+(() => {
+  // === DOM & VARS =======
+  const DOM = {};
+
+  // === INIT =============
+  const init = (): void => {
+    console.log('init');
+    router();
+  };
+
+  // === EVENTHANDLER =====
+
+  // === XHR/FETCH ========
+
+  // === FUNCTIONS ========
+  const router = (): void => {
+    const path = window.location.pathname;
+
+    console.log(path);
+
+    switch (path) {
+      case '/':
+      case '/index.html': {
+        console.log('HOME');
+        const splider = new Splide('.splide', {
+          type: 'loop',
+          fixedHeight: '100%',
+          height: '100%',
+          autoHeight: true,
+        }).mount();
+
+        // nur Skripte, die für Home relevant ausführen
+        break;
+      }
+      case '/projects/product-manager.html': {
+        console.log('PRODUCT_MANAGER');
+        const pm = ProductManager();
+        break;
+      }
+      default:
+        console.warn('Page not found');
+    }
+  };
+
+  init();
+})();

webseite-ts-claude/frontend/dev/scripts/modules/ProductManager.ts

@@ -0,0 +1,616 @@
+import { Modal } from 'bootstrap'; // ohne Pfadangabe (Modul auslesen aus node_modules) funktioniert nur mit JS-Bundler (esbuild, rollup & co.)
+import Toast from './Toast';
+import type { ApiResponse, Product, ProductDraft } from '../types';
+
+// import * as bootstrap from 'bootstrap';
+// import 'bootstrap';
+
+// import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js'; // würde auch ohne Bundler funktionieren
+// import '../../../node_modules/bootstrap/dist/js/bootstrap.esm.js'; // würde auch ohne Bundler funktionieren
+
+export interface ProductManagerApi {
+  init: () => void;
+  initProducts: () => void;
+  resetFields: () => void;
+}
+
+// Factory Function
+const ProductManager = (el: HTMLElement | null = null): ProductManagerApi | null => {
+  // === DOM & VARS =======
+
+  const BASE_URL = 'http://127.0.0.1:8000';
+
+  const module = el ?? document.querySelector<HTMLElement>('.product-manager');
+
+  if (!module) {
+    console.error('Product Manager not found');
+    return null;
+  }
+
+  /** querySelector mit Typ-Angabe: wirft einen Fehler, wenn das Element fehlt. */
+  const query = <T extends HTMLElement>(root: ParentNode, selector: string): T => {
+    const found = root.querySelector<T>(selector);
+    if (!found) throw new Error(`ProductManager: Element "${selector}" nicht gefunden.`);
+    return found;
+  };
+
+  const DOM = {
+    module,
+    table: query<HTMLTableElement>(module, '.table-products'),
+    tBody: query<HTMLTableSectionElement>(module, 'tbody'),
+    inputName: query<HTMLInputElement>(module, '.input-product-name'),
+    inputPrice: query<HTMLInputElement>(module, '.input-product-price'),
+    btnAdd: query<HTMLButtonElement>(module, '.button-product-add'),
+    templateRow: query<HTMLTemplateElement>(module, '.template-row'),
+
+    // Nav Actions
+    btnSave: query<HTMLButtonElement>(module, '.button-products-save'),
+    btnReset: query<HTMLButtonElement>(module, '.button-products-reset'),
+
+    // Modal Edit
+    modalEdit: query<HTMLElement>(module, '.modal-edit'),
+    formEdit: query<HTMLFormElement>(module, '.form-product-edit'),
+    inputEditName: query<HTMLInputElement>(module, '.input-edit-name'),
+    inputEditPrice: query<HTMLInputElement>(module, '.input-edit-price'),
+    inputEditId: query<HTMLInputElement>(module, '.input-edit-id'),
+    inputEditPosition: query<HTMLInputElement>(module, '.input-edit-position'),
+    btnUpdate: query<HTMLButtonElement>(module, '.button-product-update'),
+
+    // Modal Delete
+    modalDelete: query<HTMLElement>(module, '.modal-delete'),
+    productName: query<HTMLElement>(module, 'strong.product-name'),
+    btnConfirmDelete: query<HTMLButtonElement>(module, '.button-confirm-delete'),
+  };
+
+  console.log(DOM);
+  const bsModalEdit = new Modal(DOM.modalEdit, {
+    backdrop: 'static', // true
+    keyboard: true,
+  });
+
+  const bsModalDelete = new Modal(DOM.modalDelete, {
+    backdrop: 'static', // true
+    keyboard: true,
+  });
+
+  // === INIT =============
+  const init = (): void => {
+    console.log('init');
+    // Funktionaufrufe zu beginn der Anwendung
+    initProducts();
+
+    // Event-Lauscher zu beginn der Anwendung
+    DOM.btnReset.addEventListener('click', onClickReset);
+    DOM.btnSave.addEventListener('click', onClickSave);
+
+    DOM.btnAdd.addEventListener('click', onClickAdd);
+    DOM.btnAdd.disabled = true;
+    DOM.btnConfirmDelete.addEventListener('click', onClickConfirmDelete);
+    DOM.formEdit.addEventListener('submit', onSubmitEdit);
+    window.addEventListener('keyup', onKeyUp);
+  };
+
+  // === EVENTHANDLER =====
+  const onKeyUp = (): void => {
+    // if (DOM.inputName.value === '' && DOM.inputPrice.value === '') {
+    //   DOM.btnAdd.disabled = true;
+    // } else {
+    //   DOM.btnAdd.disabled = false;
+    // }
+    DOM.btnAdd.disabled = (DOM.inputName.value === '' || DOM.inputPrice.value === ''); // prettier-ignore
+  };
+
+  const onClickReset = (): void => {
+    // async process
+    resetProducts().then((data) => {
+      if (data.success) {
+        Toast(data.msg, 'success').show();
+        loadProducts();
+      }
+    });
+  };
+
+  const onClickSave = (e: MouseEvent): void => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const icon = query<HTMLElement>(btnEl, 'i');
+
+    icon.classList.add('fa-jello');
+
+    // async process
+    saveProducts().then((data) => {
+      if (data.success) {
+        setTimeout(() => {
+          icon.classList.remove('fa-jello');
+        }, 500);
+        Toast(data.msg, 'success').show();
+      }
+    });
+  };
+
+  const onSubmitEdit = (e: SubmitEvent): void => {
+    e.preventDefault(); // Standardverhalten unterbinden (Formular nicht an action versenden)
+
+    // console.log(Object.entries(new FormData(DOM.formEdit)));
+
+    const product: Product = {
+      name: DOM.inputEditName.value,
+      price: Number(DOM.inputEditPrice.value),
+      _id: DOM.inputEditId.value,
+      position: Number(DOM.inputEditPosition.value),
+    };
+
+    // update async process
+    const icon = query<HTMLElement>(DOM.btnUpdate, 'i');
+    icon.classList.add('fa-spin');
+    updateProduct(product).then((data) => {
+      console.log(data);
+      if (data.success) {
+        Toast(data.msg, 'success').show();
+        icon.classList.remove('fa-spin');
+        loadProducts(); // All Produkte auslesen
+        resetFields();
+        bsModalEdit.hide();
+      } else {
+        Toast(data.msg, 'error').show();
+      }
+    });
+  };
+
+  const onClickAdd = (e: MouseEvent): void => {
+    console.log('click');
+
+    const product: ProductDraft = {
+      name: DOM.inputName.value,
+      price: Number(DOM.inputPrice.value),
+    };
+
+    createProduct(product).then((data) => {
+      console.log(data);
+      if (data.success) {
+        console.log('add');
+        Toast(data.msg, 'success').show();
+        loadProducts();
+        resetFields();
+      }
+    });
+
+    // addProduct(product);
+
+    disableNonFunctionalButtons();
+  };
+
+  const onClickEdit = (e: MouseEvent): void => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const currentRow = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
+    const id = currentRow.dataset.id ?? '';
+
+    // async fetch
+    getProduct(id).then((product) => {
+      // console.log(product);
+      if (product) showModalEdit(product);
+    });
+  };
+
+  const onClickRemove = (e: MouseEvent): void => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const currentRow = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
+    const id = currentRow.dataset.id ?? '';
+
+    const productName = query<HTMLElement>(currentRow, '.td-name').textContent?.trim() ?? '';
+
+    DOM.btnConfirmDelete.dataset.id = id;
+    DOM.productName.textContent = productName;
+
+    // async fetch
+    // deleteProduct(id).then((data) => {
+    //   if (data.success) {
+    //     Toast(data.msg, 'success').show();
+    //     console.log('delete: success', data);
+    //     loadProducts();
+    //   } else {
+    //     Toast(data.msg, 'error').show();
+    //     console.error(data);
+    //   }
+    // });
+  };
+
+  const onClickConfirmDelete = (e: MouseEvent): void => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const id = btnEl.dataset.id ?? '';
+
+    // async fetch
+    deleteProduct(id).then((data) => {
+      if (data.success) {
+        Toast(data.msg, 'success').show();
+        bsModalDelete.hide();
+        loadProducts();
+      } else {
+        Toast(data.msg, 'error').show();
+        console.error(data);
+      }
+    });
+  };
+
+  const onClickMoveUp = (e: MouseEvent): void => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    // const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
+    const currentRowEl = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
+
+    // ParentNode.insertBefore(referenceElement, targetElement)
+    // DOM.tBody.insertBefore(currentRowEl, currentRowEl.previousElementSibling);
+
+    // targetElement.before(referenceElement)
+    currentRowEl.previousElementSibling?.before(currentRowEl);
+
+    console.log('move up');
+    disableNonFunctionalButtons();
+  };
+
+  const onClickMoveDown = (e: MouseEvent): void => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    // const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
+    const currentRowEl = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
+
+    // ParentNode.insertBefore(referenceElement, targetElement)
+    // DOM.tBody.insertBefore(currentRowEl, currentRowEl.nextElementSibling.nextElementSibling);
+
+    // targetElement.after(referenceElement)
+    currentRowEl.nextElementSibling?.after(currentRowEl);
+
+    console.log('move down');
+    disableNonFunctionalButtons();
+  };
+
+  // Drag 'n Drop EventHandler
+  const onMouseDownDrag = (e: MouseEvent): void => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const currentRowEl = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
+    currentRowEl.draggable = true;
+  };
+
+  const onMouseUpDrag = (e: MouseEvent): void => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const currentRowEl = parents(btnEl, 'tr')[0] as HTMLTableRowElement;
+    currentRowEl.draggable = false;
+  };
+
+  const onDragStart = (e: DragEvent): void => {
+    console.log('DragEvent: ', e);
+    const currentRowEl = e.currentTarget as HTMLTableRowElement; // tr <- aktuelle Zeie, die bewegt wird
+    const idx = indexOfRow(currentRowEl);
+
+    e.dataTransfer?.setData('text/plain', String(idx));
+    // e.dataTransfer?.setData('application/json', JSON.stringify({idx, name: sourceElement}));
+    console.log('tr index:', idx);
+  };
+
+  const onDragOver = (e: DragEvent): void => {
+    e.preventDefault(); // WICHTIG! Sonst funktioniert drop EventHandler nicht.
+  };
+
+  const onDrop = (e: DragEvent): void => {
+    const currentRowEl = e.currentTarget as HTMLTableRowElement; // tr <- Zielzeile, auf die gedroppt wird.
+    const targetIdx = indexOfRow(currentRowEl);
+    const sourceIdx = parseInt(e.dataTransfer?.getData('text/plain') ?? '');
+    //  const { sourceIdx } = JSON.parse(e.dataTransfer.getData('application/json'));
+
+    console.log({ targetIdx, sourceIdx });
+
+    // Guard wenn Element auf sich selbst losgelassen wurde, abbruch
+    if (Number.isNaN(sourceIdx) || sourceIdx === targetIdx) {
+      return;
+    }
+
+    const draggedEl = DOM.tBody.querySelector<HTMLTableRowElement>(`tr:nth-child(${sourceIdx + 1})`);
+    // const draggedEl = DOM.tBody.children[sourceIdx]
+
+    if (!draggedEl) return;
+
+    // Verschiebe das Element im DOM
+    if (sourceIdx > targetIdx) {
+      currentRowEl.before(draggedEl);
+    } else {
+      currentRowEl.after(draggedEl);
+    }
+
+    disableNonFunctionalButtons();
+  };
+
+  // === XHR/FETCH ========
+
+  /** Fehler eines fetch-Aufrufs in eine ApiResponse umwandeln. */
+  const toErrorResponse = <TData = unknown>(error: unknown): ApiResponse<TData> => ({
+    msg: error instanceof Error ? error.message : String(error),
+    status: 0,
+    success: false,
+  });
+
+  // HTTP - Methode - PATCH
+  // reset products
+  const resetProducts = async (): Promise<ApiResponse> => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products/reset`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ reset: true }),
+      }); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data: ApiResponse = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error) {
+      const result = toErrorResponse(error);
+      Toast(result.msg, 'error').show();
+
+      console.error(error);
+      return result;
+    }
+  };
+
+  // HTTP - Methode - PATCH
+  // save products
+  const saveProducts = async (): Promise<ApiResponse> => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products/save`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ save: true }),
+      }); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data: ApiResponse = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error) {
+      const result = toErrorResponse(error);
+      Toast(result.msg, 'error').show();
+
+      console.error(error);
+      return result;
+    }
+  };
+
+  // HTTP - Methode - POST
+  // (C)RUD - create
+  // BRE(A)D - add - neues Produkt hinzufügen
+  const createProduct = async (product: ProductDraft): Promise<ApiResponse<Product>> => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(product),
+      }); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data: ApiResponse<Product> = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error) {
+      const result = toErrorResponse<Product>(error);
+      Toast(result.msg, 'error').show();
+
+      console.error(error);
+      return result;
+    }
+  };
+
+  // HTTP - Methode - GET
+  // C(R)UD - Read
+  // (B)READ - Browse - auslesen aller Produkte
+  const getProducts = async (): Promise<Product[]> => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products`); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data: Product[] = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error) {
+      console.error(error);
+      return [];
+    }
+  };
+
+  // HTTP - Methode - GET
+  // C(R)UD - Read
+  // B(R)EAD - Read - auslesen eines Produkts
+  const getProduct = async (id: string): Promise<Product | null> => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products/${id}`); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data: Product = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error) {
+      console.error(error);
+      return null;
+    }
+  };
+
+  // HTTP - Methode - PUT
+  // CR(U)D - update
+  // BR(E)AD - edit - Produkt aktualisieren
+  const updateProduct = async (product: Product): Promise<ApiResponse<Product>> => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(product),
+      }); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data: ApiResponse<Product> = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error) {
+      console.error(error);
+      return toErrorResponse(error);
+    }
+  };
+
+  // HTTP - Methode - DELETE
+  // CRU(D) - delete
+  // BREA(D) - delete - Produkt löschen
+  const deleteProduct = async (id: string): Promise<ApiResponse<string>> => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products/${id}`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+
+      const data: ApiResponse<string> = await response.json();
+      return data;
+    } catch (error) {
+      console.error(error);
+      return toErrorResponse(error);
+    }
+  };
+
+  // === FUNCTIONS ========
+
+  const initProducts = (): void => {
+    getProducts().then((products) => {
+      products.forEach((product) => {
+        addProduct(product);
+      });
+      Toast('Init products').show();
+      disableNonFunctionalButtons();
+    });
+
+    // PRODUCTS.forEach((product) => {
+    //   addProduct(product);
+    // });
+    //disableNonFunctionalButtons();
+    // PRODUCTS.forEach(addProduct);
+  };
+
+  const loadProducts = (): void => {
+    DOM.tBody.innerHTML = '';
+    getProducts().then((data) => {
+      data.forEach((product) => {
+        addProduct(product);
+      });
+      disableNonFunctionalButtons();
+    });
+  };
+
+  const addProduct = (product: Product): void => {
+    const { name, price, _id: id, position } = product;
+
+    // https://developer.mozilla.org/de/docs/Web/API/HTMLTemplateElement/content
+    const templateEl = DOM.templateRow.content.firstElementChild;
+    if (!templateEl) throw new Error('ProductManager: <template class="template-row"> ist leer.');
+
+    const trEl = templateEl.cloneNode(true) as HTMLTableRowElement;
+
+    const tdNameEl = query<HTMLTableCellElement>(trEl, '.td-name');
+    const tdPriceEl = query<HTMLTableCellElement>(trEl, '.td-price');
+    const btnRemoveEl = query<HTMLButtonElement>(trEl, '.button-product-remove');
+    const btnMoveUpEl = query<HTMLButtonElement>(trEl, '.button-product-move-up');
+    const btnMoveDownEl = query<HTMLButtonElement>(trEl, '.button-product-move-down');
+
+    const btnDragEl = query<HTMLButtonElement>(trEl, '.button-drag');
+    const btnEditEl = query<HTMLButtonElement>(trEl, '.button-product-edit');
+
+    tdNameEl.textContent = name;
+    tdPriceEl.textContent = String(price);
+
+    btnEditEl.addEventListener('click', onClickEdit);
+    btnRemoveEl.addEventListener('click', onClickRemove);
+    btnMoveUpEl.addEventListener('click', onClickMoveUp);
+    btnMoveDownEl.addEventListener('click', onClickMoveDown);
+
+    // Drag 'n Drop Events
+    btnDragEl.addEventListener('mousedown', onMouseDownDrag);
+    btnDragEl.addEventListener('mouseup', onMouseUpDrag);
+
+    trEl.addEventListener('dragstart', onDragStart);
+    trEl.addEventListener('dragover', onDragOver);
+    trEl.addEventListener('drop', onDrop);
+
+    trEl.dataset.id = id; // <tr data-id="..." >...</tr>
+    trEl.dataset.position = String(position); // <tr data-position="..." >...</tr>
+
+    DOM.tBody.appendChild(trEl); // Im DOM hinzufügen
+  };
+
+  const showModalEdit = (product: Product): void => {
+    const { name = '', price = 0, _id: id, position } = product;
+
+    DOM.inputEditName.value = name;
+    DOM.inputEditPrice.value = String(price);
+
+    DOM.inputEditId.value = id;
+    DOM.inputEditPosition.value = String(position);
+  };
+
+  const resetFields = (): void => {
+    DOM.btnAdd.disabled = true;
+    DOM.inputPrice.value = '';
+    DOM.inputName.value = '';
+
+    DOM.formEdit.reset();
+  };
+
+  const disableNonFunctionalButtons = (): void => {
+    Array.from(DOM.tBody.querySelectorAll('tr')).forEach((tr) => {
+      const btnMoveUp = query<HTMLButtonElement>(tr, '.button-product-move-up');
+      const btnMoveDown = query<HTMLButtonElement>(tr, '.button-product-move-down');
+
+      btnMoveUp.disabled = !tr.previousElementSibling;
+      btnMoveDown.disabled = !tr.nextElementSibling;
+    });
+  };
+
+  /** Position einer Zeile innerhalb ihres Elternelements. */
+  const indexOfRow = (rowEl: HTMLTableRowElement): number => {
+    const siblings = rowEl.parentElement ? Array.from(rowEl.parentElement.children) : [];
+    return siblings.indexOf(rowEl);
+  };
+
+  // Helferfunktion aus jQuery (youmightnotjquery)
+  const parents = (el: Element, selector?: string): Element[] => {
+    const result: Element[] = [];
+    let current: Node | null = el.parentNode;
+
+    while (current && current !== document) {
+      if (current instanceof Element && (!selector || current.matches(selector))) {
+        result.push(current);
+      }
+      current = current.parentNode;
+    }
+    return result;
+  };
+
+  init();
+
+  return {
+    init,
+    initProducts,
+    resetFields,
+  };
+};
+
+// Freigabe für import
+export default ProductManager;

webseite-ts-claude/frontend/dev/scripts/modules/Toast.ts

@@ -0,0 +1,74 @@
+import Toastify from 'toastify-js'; // das Modul wird von node_modules ausgelesen und gebundlet. Funktioniert nur mit JS-Bundler
+
+export type ToastVariant =
+  | 'primary'
+  | 'secondary'
+  | 'warning'
+  | 'success'
+  | 'info'
+  | 'error'
+  | 'danger'
+  | 'light'
+  | 'dark';
+
+export interface ToastApi {
+  show: () => void;
+}
+
+const Toast = (text = '', variant: ToastVariant = 'primary'): ToastApi => {
+  const getColorByName = (variant = ''): string => {
+    let color: string;
+    switch (variant.trim().toLowerCase()) {
+      case 'primary':
+        color = '#0d6efd';
+        break;
+      case 'secondary':
+        color = '#6c757d';
+        break;
+      case 'warning':
+        color = '#ffc720';
+        break;
+      case 'success':
+        color = '#13653f';
+        break;
+      case 'info':
+        color = '#25cff2';
+        break;
+      case 'error':
+      case 'danger':
+        color = '#a52834';
+        break;
+      case 'light':
+        color = '#babbbc';
+        break;
+      case 'dark':
+        color = '#373b3e';
+        break;
+
+      default:
+        console.warn('variant not found');
+        color = 'white';
+    }
+    return color;
+  };
+
+  const show = (): void => {
+    Toastify({
+      text: text,
+      duration: 2000,
+      className: variant,
+      gravity: 'top', // `top` or `bottom`
+      position: 'center', // `left`, `center` or `right`
+      stopOnFocus: true, // Prevents dismissing of toast on hover
+      style: {
+        background: getColorByName(variant),
+      },
+    }).showToast();
+  };
+
+  return {
+    show,
+  };
+};
+
+export default Toast;

webseite-ts-claude/frontend/dev/scripts/types/index.ts

@@ -0,0 +1,20 @@
+// Gemeinsame Typen für die Anwendung
+
+/** Ein Produkt, so wie es vom Backend geliefert wird. */
+export interface Product {
+  _id: string;
+  name: string;
+  price: number;
+  position: number;
+}
+
+/** Ein neues Produkt, das noch keine _id und keine position vom Backend hat. */
+export type ProductDraft = Pick<Product, 'name' | 'price'>;
+
+/** Standard-Antwort des Backends bei schreibenden Operationen. */
+export interface ApiResponse<TData = unknown> {
+  msg: string;
+  status: number;
+  success: boolean;
+  data?: TData;
+}

webseite-ts-claude/frontend/package.json

@@ -5,10 +5,12 @@
   "main": "index.js",
   "scripts": {
     "start": "run-p server css js",
-    "js": "npx esbuild dev/scripts/main.js --watch --bundle --sourcemap --outfile=assets/js/build.js",
+    "js": "npx esbuild dev/scripts/main.ts --watch --bundle --sourcemap --outfile=assets/js/build.js",
+    "build:js": "npx esbuild dev/scripts/main.ts --bundle --sourcemap --outfile=assets/js/build.js",
     "http-server": "npx http-server -p 3000 -c-1",
     "server": "npx browser-sync start --server --files 'assets/css/*.css, assets/js/*.js, **/*.html, *.html'",
     "css": "sass dev/scss/main.scss:assets/css/main.css -w -q",
+    "typecheck": "tsc --noEmit",
     "dev": "run-p server css js"
   },
   "keywords": [],
@@ -16,10 +18,13 @@
   "license": "ISC",
   "type": "module",
   "devDependencies": {
+    "@types/bootstrap": "^5.2.10",
+    "@types/toastify-js": "^1.12.4",
     "browser-sync": "^3.0.4",
     "esbuild": "^0.28.1",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.101.3"
+    "sass": "^1.101.3",
+    "typescript": "^5.9.3"
   },
   "dependencies": {
     "@splidejs/splide": "^4.1.4",

webseite-ts-claude/frontend/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+
+    /* Bundler (esbuild) kompiliert - tsc wird nur zum Typprüfen genutzt */
+    "noEmit": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+
+    /* Strenge Typprüfung */
+    "strict": true,
+    "noImplicitOverride": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+
+    "skipLibCheck": true
+  },
+  "include": ["dev/scripts/**/*.ts"]
+}