webseite/frontend/assets/js/build.js

@@ -5179,6 +5179,7 @@
       templateRow: module.querySelector(".template-row"),
       // Modal
       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"),
@@ -5194,6 +5195,23 @@
       console.log("init");
       initProducts();
       DOM.btnAdd.addEventListener("click", onClickAdd);
+      DOM.formEdit.addEventListener("submit", onSubmitEdit);
+    };
+    const onSubmitEdit = (e) => {
+      e.preventDefault();
+      const product = {
+        name: DOM.inputEditName.value,
+        price: Number(DOM.inputEditPrice.value),
+        _id: DOM.inputEditId.value,
+        position: DOM.inputEditPosition.value
+      };
+      updateProduct(product).then((data) => {
+        console.log(data);
+        if (data.success) {
+          loadProducts();
+          bsModalEdit.hide();
+        }
+      });
     };
     const onClickAdd = (e) => {
       console.log("click");
@@ -5201,7 +5219,13 @@
         name: DOM.inputName.value,
         price: Number(DOM.inputPrice.value)
       };
-      addProduct(product);
+      createProduct(product).then((data) => {
+        console.log(data);
+        if (data.success) {
+          console.log("add");
+          loadProducts();
+        }
+      });
       disableNonFunctionalButtons();
     };
     const onClickEdit = (e) => {
@@ -5268,7 +5292,26 @@
       }
       disableNonFunctionalButtons();
     };
-    const fetchProducts = async () => {
+    const createProduct = async (product) => {
+      try {
+        const response = await fetch(`${BASE_URL}/api/products`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(product)
+        });
+        if (!response.ok) {
+          throw new Error("Fetch went wrong.");
+        }
+        const data = await response.json();
+        return data;
+      } catch (error) {
+        console.error(error);
+        return error;
+      }
+    };
+    const getProducts = async () => {
       try {
         const response = await fetch(`${BASE_URL}/api/products`);
         if (!response.ok) {
@@ -5294,14 +5337,42 @@
         return error;
       }
     };
+    const updateProduct = async (product) => {
+      try {
+        const response = await fetch(`${BASE_URL}/api/products`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(product)
+        });
+        if (!response.ok) {
+          throw new Error("Fetch went wrong.");
+        }
+        const data = await response.json();
+        return data;
+      } catch (error) {
+        console.error(error);
+        return error;
+      }
+    };
     const initProducts = () => {
-      fetchProducts().then((products) => {
+      getProducts().then((products) => {
         products.forEach((product) => {
           addProduct(product);
         });
         disableNonFunctionalButtons();
       });
     };
+    const loadProducts = () => {
+      DOM.tBody.innerHTML = "";
+      getProducts().then((data) => {
+        data.forEach((product) => {
+          addProduct(product);
+        });
+        disableNonFunctionalButtons();
+      });
+    };
     const addProduct = (product) => {
       const { name, price, _id: id, position } = product;
       const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);

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

@@ -24,6 +24,7 @@ const ProductManager = (el = null) => {
 
     // Modal
     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'),
@@ -45,9 +46,30 @@ const ProductManager = (el = null) => {
 
     // Event-Lauscher zu beginn der Anwendung
     DOM.btnAdd.addEventListener('click', onClickAdd);
+    DOM.formEdit.addEventListener('submit', onSubmitEdit);
   };
 
   // === EVENTHANDLER =====
+  const onSubmitEdit = (e) => {
+    e.preventDefault(); // Standardverhalten unterbinden (Formular nicht an action versenden)
+
+    const product = {
+      name: DOM.inputEditName.value,
+      price: Number(DOM.inputEditPrice.value),
+      _id: DOM.inputEditId.value,
+      position: DOM.inputEditPosition.value,
+    };
+
+    // update async process
+    updateProduct(product).then((data) => {
+      console.log(data);
+      if (data.success) {
+        loadProducts(); // All Produkte auslesen
+        bsModalEdit.hide();
+      }
+    });
+  };
+
   const onClickAdd = (e) => {
     console.log('click');
 
@@ -56,7 +78,15 @@ const ProductManager = (el = null) => {
       price: Number(DOM.inputPrice.value),
     };
 
-    addProduct(product);
+    createProduct(product).then((data) => {
+      console.log(data);
+      if (data.success) {
+        console.log('add');
+        loadProducts();
+      }
+    });
+
+    // addProduct(product);
 
     disableNonFunctionalButtons();
   };
@@ -171,10 +201,34 @@ const ProductManager = (el = null) => {
 
   // === XHR/FETCH ========
 
+  // HTTP - Methode - POST
+  // (C)RUD - create
+  // BRE(A)D - add - neues Produkt hinzufügen
+  const createProduct = async (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) {
+      console.error(error);
+      return error;
+    }
+  };
+
   // HTTP - Methode - GET
   // C(R)UD - Read
   // (B)READ - Browse - auslesen aller Produkte
-  const fetchProducts = async () => {
+  const getProducts = async () => {
     try {
       const response = await fetch(`${BASE_URL}/api/products`); // HTTP Request URL
       if (!response.ok) {
@@ -207,10 +261,34 @@ const ProductManager = (el = null) => {
     }
   };
 
+  // HTTP - Methode - PUT
+  // CR(U)D - update
+  // BR(E)AD - edit - Produkt aktualisieren
+  const updateProduct = async (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 = await response.json(); // HTTP-Response
+
+      return data;
+    } catch (error) {
+      console.error(error);
+      return error;
+    }
+  };
+
   // === FUNCTIONS ========
 
   const initProducts = () => {
-    fetchProducts().then((products) => {
+    getProducts().then((products) => {
       products.forEach((product) => {
         addProduct(product);
       });
@@ -224,6 +302,16 @@ const ProductManager = (el = null) => {
     // PRODUCTS.forEach(addProduct);
   };
 
+  const loadProducts = () => {
+    DOM.tBody.innerHTML = '';
+    getProducts().then((data) => {
+      data.forEach((product) => {
+        addProduct(product);
+      });
+      disableNonFunctionalButtons();
+    });
+  };
+
   const addProduct = (product) => {
     const { name, price, _id: id, position } = product;
 

webseite/frontend/projects/product-manager.html

@@ -165,6 +165,8 @@
                             type="number"
                             name="price"
                             id="input-edit-price"
+                            min="0"
+                            step="0.01"
                             class="form-control input-edit-price" />
                           <span class="input-group-text">&euro;</span>
                         </div>