Import & Export Textfeld, Einstellungs Tab implementiert und Formular vorbereitet

assets/script/calculator.js

@@ -47,13 +47,43 @@ class CartLine {
 
 class ProductList {
     constructor() {
-        this.products = [];
+        this.fromJson(this.getProductJson())
-        for (let i = 1; i < 50; i++) {
+        this.getImportExportTextarea().textContent = this.getProductJson();
-            this.products.push(new Product(`Product ${i}`, 1, `https://placehold.co/250x250?text=Product ${i}`));
+        this.getImportExportTextarea().addEventListener('input', (e) => {
+            try {
+                const json = e.target.value;
+                localStorage.setItem('products', json);
+                window.location = window.location;
+            } catch (e) {
+                console.error(e);
+            }
+        });
+    }
+
+    getProductJson() {
+        try {
+            let newVar = localStorage.getItem('products') ?? [];
+            JSON.parse(newVar)
+            return newVar;
+        } catch (e) {
+            console.error(e);
         }
+        return [];
+    }
+
+    fromJson(json) {
+        let parse = [];
+        try {
+            parse = JSON.parse(json);
+        } catch (e) {}
+        this.products = parse.map(e => new Product(e.name, e.price, e.image));
         this.renderProductList();
     }
 
+    getImportExportTextarea() {
+        return document.querySelector('#input-export-import');
+    }
+
     getProductListElement() {
         return document.querySelector('.product-list');
     }
@@ -156,5 +186,29 @@ class Cart {
     }
 }
 
+class Tab {
+    static toggleTab() {
+        if(!isSettingsTab) {
+            this.switchTab('settings');
+        } else {
+            this.switchTab('products');
+        }
+        isSettingsTab = !isSettingsTab;
+    }
+    static switchTab(tab) {
+        const tabs = document.querySelectorAll('[data-tab]');
+        tabs.forEach(e => {
+            e.classList.add('d-none');
+        });
+        const activeTab = document.querySelector(`[data-tab=${tab}]`);
+        activeTab.classList.remove('d-none');
+    }
+}
+
+let isSettingsTab = false;
 const cart = new Cart();
-const productList = new ProductList();
+new ProductList();
+
+document.querySelector('[data-toggle-tab]').addEventListener('click', (e) => {
+    Tab.toggleTab();
+});

index.html

@@ -19,13 +19,13 @@
             <a class="navbar-brand" href="#">Der Durstrechner</a>
             <form class="d-flex" role="search" method="dialog">
                 <button class="btn" data-toggle-bs-theme><i class="bi bi-lightbulb-fill"></i> Tag / Nacht</button>
-                <button class="btn"><i class="bi bi-gear"></i> Einstellungen</button>
+                <button class="btn" data-toggle-tab><i class="bi bi-gear"></i> Einstellungen</button>
             </form>
         </div>
     </nav>
 
     <main class="container-fluid flex-grow-1">
-        <div class="row">
+        <div data-tab="products" class="row">
             <div class="col-12 col-md-4">
                 <li class="list-group-item d-flex justify-content-between" data-template="product-line-item">
                         <span class="line-item-details">
@@ -55,6 +55,51 @@
                 </div>
             </div>
         </div>
+        <div data-tab="settings" class="row d-none">
+            <div class="row">
+                <div class="col">
+                    <form class="card mb-3" method="dialog">
+                        <h5 class="card-header">Neues Produkt</h5>
+                        <div class="card-body">
+                            <div class="form-floating mb-2">
+                                <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>
+                                <input type="file" class="form-control" placeholder="Tolles Produkt" id="product-image">
+                            </div>
+                            <input type="submit" class="btn btn-success" value="Speichern">
+                        </div>
+                    </form>
+
+                    <div class="card">
+                        <h5 class="card-header">Export / Import</h5>
+                        <div class="card-body">
+                            <label class="w-100">
+                                Daten importieren oder exportieren (Kopieren und Einfügen)
+                                <textarea class="form-control mt-1" id="input-export-import"></textarea>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="card">
+                        <h5 class="card-header">Produkte</h5>
+                        <div class="card-body">
+                            asd
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </main>
 
     <script src="assets/script/all.js" type="module"></script>