Bearbeiten der Produkte in den Einstellungen ermöglicht

assets/script/calculator.js

@@ -8,6 +8,11 @@ class TemplateElement {
         return this.removeTemplate(element);
     }
 
+    static getSettingsProductTemplate() {
+        const element = document.querySelector('[data-template=settings-product]').cloneNode(true);
+        return this.removeTemplate(element);
+    }
+
     static removeTemplate(element) {
         element.removeAttribute('data-template');
         return element;
@@ -36,6 +41,17 @@ class Product {
         })
         return productElement;
     }
+    getSettingsProductElement() {
+        const productElement = TemplateElement.getSettingsProductTemplate();
+        productElement.setAttribute('data-id', this.id);
+        productElement.textContent = this.name;
+        productElement.addEventListener('click', () => {
+            productList.removeProduct(this);
+            productList.setExportField();
+            productElement.remove();
+        })
+        return productElement;
+    }
 }
 
 class CartLine {
@@ -47,8 +63,8 @@ class CartLine {
 
 class ProductList {
     constructor() {
-        this.fromJson(this.getProductJson())
+        this.loadFromJson(localStorage.getItem('products') ?? [])
-        this.getImportExportTextarea().textContent = this.getProductJson();
+        this.setExportField();
         this.getImportExportTextarea().addEventListener('input', (e) => {
             try {
                 const json = e.target.value;
@@ -60,18 +76,11 @@ class ProductList {
         });
     }
 
-    getProductJson() {
+    setExportField() {
-        try {
+        this.getImportExportTextarea().textContent = JSON.stringify(this.products);
-            let newVar = localStorage.getItem('products') ?? [];
-            JSON.parse(newVar)
-            return newVar;
-        } catch (e) {
-            console.error(e);
-        }
-        return [];
     }
 
-    fromJson(json) {
+    loadFromJson(json) {
         let parse = [];
         try {
             parse = JSON.parse(json);
@@ -88,11 +97,40 @@ class ProductList {
         return document.querySelector('.product-list');
     }
 
+    getSettingListElement() {
+        return document.querySelector('.settings-product-list');
+    }
+
     renderProductList() {
+        // Clear the product list element before rendering except the template
+        this.getProductListElement().querySelectorAll('[data-id]').forEach(e => {
+            if (e.getAttribute('data-template') === null) {
+                e.remove();
+            }
+        });
         this.products.forEach(e => {
             this.getProductListElement().appendChild(e.getProductElement());
+            this.getSettingListElement().appendChild(e.getSettingsProductElement());
         })
     }
+
+    addProduct(product) {
+        this.products.push(product);
+        localStorage.setItem('products', JSON.stringify(this.products));
+        this.getProductListElement().appendChild(product.getProductElement());
+        this.getSettingListElement().appendChild(product.getSettingsProductElement());
+        this.setExportField();
+    }
+
+    removeProduct(product) {
+        this.products = this.products.filter(e => e.id !== product.id);
+        const productElement = this.getProductListElement().querySelector(`[data-id="${product.id}"]`);
+        if (productElement) {
+            productElement.remove();
+        }
+        localStorage.setItem('products', JSON.stringify(this.products));
+        this.setExportField();
+    }
 }
 
 class Cart {
@@ -207,8 +245,39 @@ class Tab {
 
 let isSettingsTab = false;
 const cart = new Cart();
-new ProductList();
+const productList = new ProductList();
 
 document.querySelector('[data-toggle-tab]').addEventListener('click', (e) => {
     Tab.toggleTab();
+});
+
+document.querySelector('#create-product').addEventListener('click', (e) => {
+    e.preventDefault(); // Prevent form submission (if any)
+
+    const name = document.querySelector('#product-name').value;
+    let fieldPrice = document.querySelector('#product-price').value;
+    const image = document.querySelector('#product-image').files[0];
+
+    if(name.length === 0) {
+        alert('Name muss ausgefüllt sein');
+        return;
+    }
+
+    if (image) {
+        const reader = new FileReader();
+        reader.onloadend = function () {
+            const imageBase64 = reader.result;
+            const imageSrcWithBase64 = `data:${image.type};base64,${imageBase64.split(',')[1]}`;
+            productList.addProduct(new Product(name, fieldPrice, imageSrcWithBase64));
+            document.querySelector('#product-name').value = '';
+            document.querySelector('#product-price').value = '0,00';
+            document.querySelector('#product-image').value = '';
+        };
+        reader.readAsDataURL(image);
+    } else {
+        productList.addProduct(new Product(name, fieldPrice, `https://placehold.co/250x250?text={${name}}`));
+        document.querySelector('#product-name').value = '';
+        document.querySelector('#product-price').value = '';
+        document.querySelector('#product-image').value = '';
+    }
 });

assets/style/stylesheet.css

@@ -24,7 +24,7 @@
 [data-template] {
     display: none !important;
 }
-.cart-items, .product-list, .alert, .navbar-brand {
+.cart-items, .product-list, .alert, .navbar-brand, .settings-product-list {
     user-select: none;
     -webkit-user-select: none;
     -webkit-user-drag: none;
@@ -34,6 +34,6 @@ img {
     -webkit-user-select: none;
     -webkit-user-drag: none;
 }
-.product-box, .cart-items {
+.product-box, .cart-items, .settings-product-list {
     cursor: pointer;
 }

index.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="assets/style/stylesheet.css">
-    <title>Der Durstrechner</title>
+    <title>Durstrechner</title>
 </head>
 <body class="d-flex flex-column vh-100">
     <nav class="navbar navbar-expand-lg border-bottom mb-3">
@@ -58,25 +58,22 @@
         <div data-tab="settings" class="row d-none">
             <div class="row">
                 <div class="col">
-                    <form class="card mb-3" method="dialog">
+                    <form class="card mb-3" method="dialog" id="new-product">
                         <h5 class="card-header">Neues Produkt</h5>
                         <div class="card-body">
-                            <div class="form-floating mb-2">
+                            <div class="mb-2">
+                                <label for="product-name" class="form-label">Name des Produkts</label>
                                 <input type="text" class="form-control" placeholder="Tolles Produkt" id="product-name" required>
-                                <label for="product-name">Name des Produkts</label>
-                            </div>
-                            <div class="input-group mb-2">
-                                <div class="form-floating">
-                                    <input type="number" class="form-control" step="0.01" value="0" id="product-price" required>
-                                    <label for="product-price">Preis</label>
-                                </div>
-                                <span class="input-group-text">€</span>
                             </div>
                             <div class="mb-2">
-                                <label for="product-image">Bild auswählen</label>
+                                <label for="product-price" class="form-label">Preis</label>
+                                <input type="number" class="form-control" step="0.01" value="0.00" id="product-price" required>
+                            </div>
+                            <div class="mb-2">
+                                <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="submit" class="btn btn-success" value="Speichern">
+                            <input type="submit" class="btn btn-success" value="Speichern" id="create-product">
                         </div>
                     </form>
 
@@ -92,9 +89,11 @@
                 </div>
                 <div class="col">
                     <div class="card">
-                        <h5 class="card-header">Produkte</h5>
+                        <h5 class="card-header">Produkte entfernen</h5>
                         <div class="card-body">
-                            asd
+                            <li class="list-group-item" data-template="settings-product">Test</li>
+                            <ul class="list-group settings-product-list">
+                            </ul>
                         </div>
                     </div>
                 </div>