added prototype

2026-08-03 14:46:13 +02:00
parent 831644667e
commit 44428b0495
310 changed files with 49133 additions and 93 deletions
--- a/webseite-gulp-ts/frontend/dev/scripts/modules/ProductManager.ts
+++ b/webseite-gulp-ts/frontend/dev/scripts/modules/ProductManager.ts
@@ -0,0 +1,619 @@
+import { Modal } from 'bootstrap'; // ohne Pfadangabe (Modul auslesen aus node_modules) funktioniert nur mit JS-Bundler (esbuild, rollup & co.)
+import Toast from './Toast';
+import { querySelectorTyped, parents } from '../utils/helpers';
+
+// 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
+
+interface DOM {
+  module: HTMLElement;
+  table: HTMLTableElement;
+  tBody: HTMLTableSectionElement;
+  inputName: HTMLInputElement;
+  inputPrice: HTMLInputElement;
+  btnAdd: HTMLButtonElement;
+  templateRow: HTMLTemplateElement;
+  btnSave: HTMLButtonElement;
+  btnReset: HTMLButtonElement;
+  modalEdit: HTMLDivElement;
+  formEdit: HTMLFormElement;
+  inputEditName: HTMLInputElement;
+  inputEditPrice: HTMLInputElement;
+  inputEditId: HTMLInputElement;
+  inputEditPosition: HTMLInputElement;
+  btnUpdate: HTMLButtonElement;
+  modalDelete: HTMLDivElement;
+  productName: HTMLDivElement;
+  btnConfirmDelete: HTMLButtonElement;
+}
+
+interface Product {
+  _id?: string;
+  name: string;
+  price: number;
+  position?: number;
+}
+
+// Factory Function
+const ProductManager = (el?: HTMLElement) => {
+  // === DOM & VARS =======
+
+  const BASE_URL = 'http://127.0.0.1:8000';
+
+  const module = el || querySelectorTyped('.product-manager');
+
+  if (!module) return;
+
+  const DOM: DOM = {
+    module,
+    table: querySelectorTyped<HTMLTableElement>('.table-products', module),
+    tBody: querySelectorTyped<HTMLTableSectionElement>('tbody', module),
+    inputName: querySelectorTyped<HTMLInputElement>('.input-product-name', module),
+    inputPrice: querySelectorTyped<HTMLInputElement>('.input-product-price', module),
+    btnAdd: querySelectorTyped<HTMLButtonElement>('.button-product-add', module),
+    templateRow: querySelectorTyped<HTMLTemplateElement>('.template-row', module),
+
+    // Nav Actions
+    btnSave: querySelectorTyped<HTMLButtonElement>('.button-products-save', module),
+    btnReset: querySelectorTyped<HTMLButtonElement>('.button-products-reset', module),
+
+    // Modal Edit
+    modalEdit: querySelectorTyped<HTMLDivElement>('.modal-edit', module),
+    formEdit: querySelectorTyped<HTMLFormElement>('.form-product-edit', module),
+    inputEditName: querySelectorTyped<HTMLInputElement>('.input-edit-name', module),
+    inputEditPrice: querySelectorTyped<HTMLInputElement>('.input-edit-price', module),
+    inputEditId: querySelectorTyped<HTMLInputElement>('.input-edit-id', module),
+    inputEditPosition: querySelectorTyped<HTMLInputElement>('.input-edit-position', module),
+    btnUpdate: querySelectorTyped<HTMLButtonElement>('.button-product-update', module),
+
+    // Modal Delete
+    modalDelete: querySelectorTyped<HTMLDivElement>('.modal-delete', module),
+    productName: querySelectorTyped<HTMLDivElement>('strong.product-name', module),
+    btnConfirmDelete: querySelectorTyped<HTMLButtonElement>('.button-confirm-delete', module),
+  };
+
+  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 = () => {
+    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 = () => {
+    // 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 = (e: PointerEvent) => {
+    const btnEl = e.currentTarget;
+
+    // async process
+    resetProducts().then((data) => {
+      if (data.success) {
+        Toast(data.msg, 'success').show();
+        loadProducts();
+      }
+    });
+  };
+
+  const onClickSave = (e: PointerEvent) => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const icon = btnEl.querySelector('i') as HTMLElement;
+
+    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) => {
+    e.preventDefault(); // Standardverhalten unterbinden (Formular nicht an action versenden)
+
+    // console.log(Object.entries(new FormData(DOM.formEdit)));
+
+    const product = {
+      name: DOM.inputEditName.value,
+      price: Number(DOM.inputEditPrice.value),
+      _id: DOM.inputEditId.value,
+      position: DOM.inputEditPosition.value,
+    };
+
+    // update async process
+    querySelectorTyped('i', DOM.btnUpdate).classList.add('fa-spin');
+    updateProduct(product).then((data) => {
+      console.log(data);
+      if (data.success) {
+        Toast(data.msg, 'success').show();
+        querySelectorTyped('i', DOM.btnUpdate).classList.remove('fa-spin');
+        loadProducts(); // All Produkte auslesen
+        resetFields();
+        bsModalEdit.hide();
+      } else {
+        Toast(data.msg, 'error').show();
+      }
+    });
+  };
+
+  const onClickAdd = () => {
+    console.log('click');
+
+    const product = {
+      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: PointerEvent) => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const currentRow = parents(btnEl, 'tr')[0];
+    const id: string = String(currentRow.dataset.id);
+
+    // async fetch
+    getProduct(id).then((data) => {
+      // console.log(data);
+      showModalEdit(data);
+    });
+  };
+
+  const onClickRemove = (e: PointerEvent) => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const currentRow = parents(btnEl, 'tr')[0];
+    const id = currentRow.dataset.id;
+
+    const productName = querySelectorTyped<HTMLTableCellElement>('.td-name', currentRow).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: PointerEvent) => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const id: string = String(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: PointerEvent) => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    // const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
+    const currentRowEl = parents(btnEl, 'tr')[0];
+
+    // 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: PointerEvent) => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    // const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
+    const currentRowEl = parents(btnEl, 'tr')[0];
+
+    // 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) => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const currentRowEl = parents(btnEl, 'tr')[0];
+    currentRowEl.draggable = true;
+  };
+
+  const onMouseUpDrag = (e: MouseEvent) => {
+    const btnEl = e.currentTarget as HTMLButtonElement;
+    const currentRowEl = parents(btnEl, 'tr')[0];
+    currentRowEl.draggable = false;
+  };
+
+  const onDragStart = (e: DragEvent) => {
+    console.log('DragEvent: ', e);
+    const currentRowEl = e.currentTarget as HTMLTableRowElement; // tr <- aktuelle Zeie, die bewegt wird
+    const idx: number = [...currentRowEl.parentNode!.children].indexOf(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) => {
+    e.preventDefault(); // WICHTIG! Sonst funktioniert drop EventHandler nicht.
+  };
+
+  const onDrop = (e: DragEvent) => {
+    const currentRowEl = e.currentTarget as HTMLTableRowElement; // tr <- Zielzeile, auf die gedroppt wird.
+    const targetIdx = [...currentRowEl.parentNode!.children].indexOf(currentRowEl);
+    const sourceIdx: number = parseInt(e.dataTransfer?.getData('text/plain') || '0');
+    //  const { sourceIdx } = JSON.parse(e.dataTransfer.getData('application/json'));
+
+    console.log({ targetIdx, sourceIdx });
+
+    // Guard wenn Element auf sich selbst losgelassen wurde, abbruch
+    if (sourceIdx === targetIdx) {
+      return;
+    }
+
+    const draggedEl = DOM.tBody.querySelector(`tr:nth-child(${sourceIdx + 1})`) as HTMLTableRowElement;
+    // const draggedEl = DOM.tBody.children[sourceIdx]
+
+    // Verschiebe das Element im DOM
+    if (sourceIdx > targetIdx) {
+      currentRowEl.before(draggedEl);
+    } else {
+      currentRowEl.after(draggedEl);
+    }
+
+    disableNonFunctionalButtons();
+  };
+
+  // === XHR/FETCH ========
+
+  // HTTP - Methode - PATCH
+  // reset products
+  const resetProducts = async () => {
+    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 = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        Toast(error.message, 'error').show();
+      } else {
+        Toast('An unknown error occurred.', 'error').show();
+      }
+
+      console.error(error);
+      return error;
+    }
+  };
+
+  // HTTP - Methode - PATCH
+  // save products
+  const saveProducts = async () => {
+    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 = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        Toast(error.message, 'error').show();
+      } else {
+        Toast('An unknown error occurred.', 'error').show();
+      }
+
+      console.error(error);
+      return error;
+    }
+  };
+
+  // HTTP - Methode - POST
+  // (C)RUD - create
+  // BRE(A)D - add - neues Produkt hinzufügen
+  const createProduct = async (product: 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 = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        Toast(error.message, 'error').show();
+      } else {
+        Toast('An unknown error occurred.', 'error').show();
+      }
+      console.error(error);
+      return error;
+    }
+  };
+
+  // HTTP - Methode - GET
+  // C(R)UD - Read
+  // (B)READ - Browse - auslesen aller Produkte
+  const getProducts = async () => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products`); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.error(error.message);
+      } else {
+        console.error('An unknown error occurred.');
+      }
+      return error;
+    }
+  };
+
+  // HTTP - Methode - GET
+  // C(R)UD - Read
+  // B(R)EAD - Read - auslesen eines Produkts
+  const getProduct = async (id: string) => {
+    try {
+      const response = await fetch(`${BASE_URL}/api/products/${id}`); // HTTP Request URL
+      if (!response.ok) {
+        throw new Error('Fetch went wrong.');
+      }
+      const data = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.error(error.message);
+      } else {
+        console.error('An unknown error occurred.');
+      }
+      return error;
+    }
+  };
+
+  // HTTP - Methode - PUT
+  // CR(U)D - update
+  // BR(E)AD - edit - Produkt aktualisieren
+  const updateProduct = async (product: any) => {
+    // TODO: Typisierung verbessern
+    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 = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        console.error(error.message);
+      } else {
+        console.error('An unknown error occurred.');
+      }
+      return error;
+    }
+  };
+
+  // HTTP - Methode - DELETE
+  // CRU(D) - delete
+  // BREA(D) - delete - Produkt löschen
+  const deleteProduct = async (id: 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 = await response.json();
+      return data;
+    } catch (error) {
+      console.error(error);
+      return error;
+    }
+  };
+
+  // === FUNCTIONS ========
+
+  const initProducts = () => {
+    getProducts().then((products: Product[]) => {
+      products.forEach((product: Product) => {
+        addProduct(product);
+      });
+      Toast('Init products').show();
+      disableNonFunctionalButtons();
+    });
+
+    // PRODUCTS.forEach((product) => {
+    //   addProduct(product);
+    // });
+    //disableNonFunctionalButtons();
+    // PRODUCTS.forEach(addProduct);
+  };
+
+  const loadProducts = () => {
+    DOM.tBody.innerHTML = '';
+    getProducts().then((data: Product[]) => {
+      data.forEach((product: Product) => {
+        addProduct(product);
+      });
+      disableNonFunctionalButtons();
+    });
+  };
+
+  const addProduct = (product: Product) => {
+    const { name, price, _id: id, position } = product;
+
+    // https://developer.mozilla.org/de/docs/Web/API/HTMLTemplateElement/content
+    const trEl = DOM.templateRow.content.firstElementChild?.cloneNode(true) as HTMLTableRowElement;
+
+    const tdNameEl = querySelectorTyped<HTMLTableCellElement>('.td-name', trEl);
+    const tdPriceEl = querySelectorTyped<HTMLTableCellElement>('.td-price', trEl);
+    const btnRemoveEl = querySelectorTyped<HTMLButtonElement>('.button-product-remove', trEl);
+    const btnMoveUpEl = querySelectorTyped<HTMLButtonElement>('.button-product-move-up', trEl);
+    const btnMoveDownEl = querySelectorTyped<HTMLButtonElement>('.button-product-move-down', trEl);
+
+    const btnDragEl = querySelectorTyped<HTMLButtonElement>('.button-drag', trEl);
+    const btnEditEl = querySelectorTyped<HTMLButtonElement>('.button-product-edit', trEl);
+
+    tdNameEl.textContent = String(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) => {
+    const { name = '', price = 0, _id: id, position } = product;
+
+    DOM.inputEditName.value = name;
+    DOM.inputEditPrice.value = String(price);
+
+    DOM.inputEditId.value = String(id);
+    DOM.inputEditPosition.value = String(position);
+  };
+
+  const resetFields = () => {
+    DOM.btnAdd.disabled = true;
+    DOM.inputPrice.value = '';
+    DOM.inputName.value = '';
+
+    DOM.formEdit.reset();
+  };
+
+  const disableNonFunctionalButtons = () => {
+    Array.from(DOM.tBody.querySelectorAll('tr')).forEach((tr) => {
+      const btnMoveUp = querySelectorTyped<HTMLButtonElement>('.button-product-move-up', tr);
+      const btnMoveDown = querySelectorTyped<HTMLButtonElement>('.button-product-move-down', tr);
+
+      btnMoveUp.disabled = !tr.previousElementSibling;
+      btnMoveDown.disabled = !tr.nextElementSibling;
+    });
+  };
+
+  init();
+
+  return {
+    init,
+    initProducts,
+    resetFields,
+  };
+};
+
+// Freigabe für import
+export default ProductManager;
--- a/webseite-gulp-ts/frontend/dev/scripts/modules/Toast.ts
+++ b/webseite-gulp-ts/frontend/dev/scripts/modules/Toast.ts
@@ -0,0 +1,59 @@
+import Toastify from 'toastify-js'; // das Modul wird von node_modules ausgelesen und gebundlet. Funktioniert nur mit JS-Bundler
+
+const Toast = (text: string = '', variant: string = 'primary') => {
+  const getColorByName = (variant: string = ''): string => {
+    let color;
+    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;