webseite/frontend/dev/scripts/main.js

@@ -1,6 +1,7 @@
 // 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 =======
@@ -26,6 +27,13 @@ import ProductManager from './modules/ProductManager'; // Dateiendung kann wegge
       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':

webseite/frontend/dev/scripts/modules/ProductManager.js

@@ -26,6 +26,10 @@ const ProductManager = (el = null) => {
     btnAdd: module.querySelector('.button-product-add'),
     templateRow: module.querySelector('.template-row'),
 
+    // Nav Actions
+    btnSave: module.querySelector('.button-products-save'),
+    btnReset: module.querySelector('.button-products-reset'),
+
     // Modal Edit
     modalEdit: module.querySelector('.modal-edit'),
     formEdit: module.querySelector('.form-product-edit'),
@@ -59,6 +63,9 @@ const ProductManager = (el = null) => {
     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);
@@ -76,6 +83,35 @@ const ProductManager = (el = null) => {
     DOM.btnAdd.disabled = (DOM.inputName.value === '' || DOM.inputPrice.value === ''); // prettier-ignore
   };
 
+  const onClickReset = (e) => {
+    const btnEl = e.currentTarget;
+
+    // async process
+    resetProducts().then((data) => {
+      if (data.success) {
+        Toast(data.msg, 'success').show();
+        loadProducts();
+      }
+    });
+  };
+
+  const onClickSave = (e) => {
+    const btnEl = e.currentTarget;
+    const icon = btnEl.querySelector('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) => {
     e.preventDefault(); // Standardverhalten unterbinden (Formular nicht an action versenden)
 
@@ -264,6 +300,56 @@ const ProductManager = (el = null) => {
 
   // === 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) {
+      Toast(error, '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) {
+      Toast(error, 'error').show();
+
+      console.error(error);
+      return error;
+    }
+  };
+
   // HTTP - Methode - POST
   // (C)RUD - create
   // BRE(A)D - add - neues Produkt hinzufügen