Bearbeiten von Produkten ermöglichen

assets/script/all.js

@@ -235,12 +235,47 @@ class Product {
     getSettingsProductElement() {
         const productElement = TemplateElement.getSettingsProductTemplate();
         productElement.setAttribute('data-id', this.id);
-        productElement.textContent = this.name;
+        productElement.querySelector('[data-attr=name]').textContent = this.name;
-        productElement.addEventListener('click', () => {
+        productElement.querySelector('[data-action=delete]').addEventListener('click', () => {
             productManager.removeProduct(this);
             productManager.setExportFieldJsonValue();
             productElement.remove();
         })
+        productElement.querySelector('[data-action=edit]').addEventListener('click', () => {
+            const nameInputField = document.querySelector('#product-name');
+            const priceInputField = document.querySelector('#product-price');
+            const depositInputField = document.querySelector('#product-deposit');
+            const imageInputField = document.querySelector('#product-image');
+            const editProductId = document.querySelector("[name=edit-product-id]");
+            nameInputField.value = this.name;
+            priceInputField.value = this.price;
+            depositInputField.value = this.deposit;
+            editProductId.value = this.id;
+
+            // Set the image input field, create a new file object and set it to the input field by base64
+            const base64Image = this.image.split(',')[1];
+            const byteCharacters = atob(base64Image);
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            const blob = new Blob([byteArray], { type: 'image/png' });
+            const file = new File([blob], 'image.png', { type: 'image/png' });
+            const dataTransfer = new DataTransfer();
+            dataTransfer.items.add(file);
+            imageInputField.files = dataTransfer.files;
+            imageInputField.dispatchEvent(new Event('change'));
+
+            // Remove the product element from the settings list if the product has been saved
+            Element.getCreateNewProductButton().addEventListener('click', (e) => {
+                console.log(document.querySelector("[name=edit-product-id]"), this.id.toString());
+                if(document.querySelector("[name=edit-product-id]").value === this.id.toString()) {
+                    productManager.removeProduct(this);
+                    productElement.remove();
+                }
+            });
+        })
         return productElement;
     }
 }
@@ -472,7 +507,7 @@ class ProductManager {
      * Reset the product settings form by clearing all input fields.
      */
     static resetProductSettingsForm() {
-        document.querySelectorAll('form input:not([type=submit])').forEach(inputField => inputField.value = '');
+        document.querySelectorAll('form input:not([type=submit], [type=reset])').forEach(inputField => inputField.value = '');
     }
 
     /**

assets/style/stylesheet.css

@@ -20,7 +20,7 @@
  * Make product boxes, cart items and settings product list clickable
  * This is generally used for product list and cart items
  */
-.product-box, .cart-items, .settings-product-list, .navbar-brand {
+.product-box, .cart-items, .navbar-brand {
     cursor: pointer;
 }
 /**

index.html

@@ -101,7 +101,9 @@
                         <label for="product-image" class="form-label">Bild auswählen</label>
                         <input type="file" class="form-control" placeholder="Tolles Produkt" id="product-image">
                     </div>
+                    <input type="hidden" name="edit-product-id">
                     <input type="submit" class="btn btn-success" value="Speichern" id="create-product">
+                    <input type="reset" class="btn btn-secondary" value="Zurücksetzen" onclick="document.querySelector('[name=edit-product-id]').value = ''">
                 </div>
             </form>
 
@@ -177,10 +179,20 @@
         </aside>
         <div class="col-12 col-md-6 mt-2 mt-md-0">
             <div class="card">
-                <h5 class="card-header">Produkte entfernen</h5>
+                <h5 class="card-header">Produkte</h5>
                 <div class="card-body">
-                    <p class="mb-2">Hier können Produkte entfernt werden, die nicht mehr benötigt werden.</p>
+                    <p class="mb-2">Hier können Produkte entfernt oder werden.</p>
-                    <li class="list-group-item" data-template="settings-product">Test</li>
+                    <li class="list-group-item" data-template="settings-product">
+                        <span class="d-flex justify-content-between">
+                            <span data-attr="name"></span>
+                            <span>
+                                <button class="mx-auto btn btn-secondary btn-sm" data-action="edit">Bearbeiten</button>
+                            <button class="mx-auto btn btn-warning btn-sm" data-action="delete">Entfernen</button>
+                            </span>
+
+                        </span>
+
+                    </li>
                     <ul class="list-group settings-product-list">
                     </ul>
                 </div>