assets/script/all.js

@@ -21,30 +21,6 @@ class Element {
         return document.querySelector('#input-export-import');
     }
 
-    /**
-     * Get the file export button element
-     * @returns {Element}
-     */
-    static getFileExportButton() {
-        return document.querySelector('#export-file');
-    }
-
-    /**
-     * Get the file import button element
-     * @returns {Element}
-     */
-    static getFileImportButton() {
-        return document.querySelector('#import-file-button');
-    }
-
-    /**
-     * Get the file import input element
-     * @returns {Element}
-     */
-    static getFileImportFileInput() {
-        return document.querySelector('#import-file');
-    }
-
     /**
      * Get the product list element
      * @returns {HTMLElement}
@@ -103,7 +79,7 @@ class Element {
 
     /**
      * Get the buttons for importing test data
-     * @returns {Element[]}
+     * @returns {Element}
      */
     static getButtonsImportTestdata() {
         return document.querySelectorAll('[data-action=import-testdata]');
@@ -235,46 +211,12 @@ class Product {
     getSettingsProductElement() {
         const productElement = TemplateElement.getSettingsProductTemplate();
         productElement.setAttribute('data-id', this.id);
-        productElement.querySelector('[data-attr=name]').textContent = this.name;
+        productElement.textContent = this.name;
-        productElement.querySelector('[data-action=delete]').addEventListener('click', () => {
+        productElement.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) => {
-                if(document.querySelector("[name=edit-product-id]").value === this.id.toString()) {
-                    productManager.removeProduct(this);
-                    productElement.remove();
-                }
-            });
-        })
         return productElement;
     }
 }
@@ -332,8 +274,8 @@ class Base64Image {
             img.crossOrigin = 'Anonymous';
             img.onload = () => {
                 const canvas = document.createElement('canvas');
-                canvas.width = 150;
+                canvas.width = 250;
-                canvas.height = 150;
+                canvas.height = 250;
                 const ctx = canvas.getContext('2d');
                 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                 const dataUrl = canvas.toDataURL();
@@ -404,34 +346,6 @@ class ProductManager {
                 console.error(e);
             }
         });
-
-        Element.getFileExportButton().addEventListener('click', () => {
-            const blob = new Blob([Element.getImportExportTextarea().value], { type: 'application/json' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'products.json';
-            document.body.appendChild(a);
-            a.click();
-            setTimeout(() => {
-                URL.revokeObjectURL(url);
-                a.remove();
-            }, 0);
-        });
-
-        Element.getFileImportButton().addEventListener('click', () => {
-            let inputJsonFile = Element.getFileImportFileInput();
-            let fileContent = inputJsonFile.files[0];
-            if (fileContent) {
-                const reader = new FileReader();
-                reader.onload = async (e) => {
-                    const json = JSON.parse(e.target.result);
-                    await productManager.convertAndSaveProductImages(json);
-                    location.reload();
-                };
-                reader.readAsText(fileContent);
-            }
-        })
     }
 
     /**
@@ -506,7 +420,7 @@ class ProductManager {
      * Reset the product settings form by clearing all input fields.
      */
     static resetProductSettingsForm() {
-        document.querySelectorAll('form input:not([type=submit], [type=reset])').forEach(inputField => inputField.value = '');
+        document.querySelectorAll('form input:not([type=submit])').forEach(inputField => inputField.value = '');
     }
 
     /**
@@ -768,26 +682,14 @@ class ThemeManager {
  * Define the CartHistoryManager class to manage the cart history.
  */
 class CartHistoryManager {
-    /**
-     * Get the cart history from local storage.
-     * @returns {string|number}
-     */
     static getTotal() {
         return localStorage.getItem('cart-total-value') || 0;
     }
 
-    /**
-     * Set the cart history value in local storage.
-     * @param value
-     */
     static setTotal(value) {
         localStorage.setItem('cart-total-value', value);
     }
 
-    /**
-     * Add to the cart history value in local storage.
-     * @param value
-     */
     static addToTotal(value) {
         const total = parseFloat(CartHistoryManager.getTotal()) + value;
         CartHistoryManager.setTotal(total);

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, .navbar-brand {
+.product-box, .cart-items, .settings-product-list, .navbar-brand {
     cursor: pointer;
 }
 /**
@@ -52,26 +52,13 @@
         cursor: default;
     }
 }
-
-/**
- * Make the cart sticky on screens wider than 768px
- */
-@media screen and (min-width: 768px) {
-    .cart {
-        position: sticky;
-        top: 1rem;
-        max-height: calc(100vh - 2rem);
-        overflow-y: auto;
-    }
-}
-
 /**
  * Product list contains all available products,
  * which are displayed in a grid layout. The grid scaling is done by bootstrap.
  */
 .product-list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 4fr));
+    grid-template-columns: repeat(auto-fill, minmax(200px, 4fr));
     gap: .4em;
     padding-bottom: 1em;
 
@@ -93,10 +80,7 @@
             -khtml-user-drag: none;
             user-drag: none;
         }
-        /* Make the product box responsive */
+
-        .card {
-            height: 100%;
-        }
         /* Break the words on the card body */
         .card-body span {
             word-wrap: break-word;
@@ -105,10 +89,6 @@
         .product-box small[data-attr=price] {
             font-weight: 400;
         }
-        /* Make the product box clickable */
-        &:active{
-            transform:scale(0.96);
-        }
     }
 }
 /* When using dark mode, use info color for price */

index.html

@@ -101,9 +101,7 @@
                         <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>
 
@@ -112,35 +110,6 @@
                 <div class="card-body">
                     <details class="mb-2">
                         <summary>Exportieren und Importieren</summary>
-                        <div class="row">
-                            <div class="col-12 mb-2 mt-2">
-                                <p>
-                                    Hier kann die JSON-Datei exportiert werden. Dafür auf "Produkte herunterladen" klicken.
-                                    Die Datei wird dann im Download-Ordner gespeichert. Die Daten können nach eigenen
-                                    Belieben bearbeitet werden. Die Daten können auch wieder importiert werden.
-                                </p>
-                                <button class="btn btn-primary" id="export-file">
-                                    Produkte herunterladen
-                                </button>
-                                <hr>
-                            </div>
-                            <div class="col-12">
-                                <p>
-                                    Hier kann die JSON-Datei importiert werden. Dafür die Datei
-                                    auswählen und auf "Hochladen" klicken. Die Daten werden dann in die Software
-                                    importiert.
-                                </p>
-                                <div class="input-group">
-                                    <input class="form-control" type="file" id="import-file">
-                                    <button class="btn btn-primary ms-2" data-action="import" id="import-file-button">
-                                        Hochladen
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </details>
-                    <details class="mb-2">
-                        <summary>Testdaten einspielen</summary>
                         <p>
                             Die Daten können im JSON-Format exportiert und importiert werden.
                             Um Speicherplatz zu sparen, sollte das Bild im Format 1:1 vorliegen.
@@ -179,18 +148,10 @@
         </aside>
         <div class="col-12 col-md-6 mt-2 mt-md-0">
             <div class="card">
-                <h5 class="card-header">Produkte</h5>
+                <h5 class="card-header">Produkte entfernen</h5>
                 <div class="card-body">
-                    <p class="mb-2">Hier können Produkte entfernt oder bearbeitet werden.</p>
+                    <p class="mb-2">Hier können Produkte entfernt werden, die nicht mehr benötigt werden.</p>
-                    <li class="list-group-item" data-template="settings-product">
+                    <li class="list-group-item" data-template="settings-product">Test</li>
-                        <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"><i class="bi bi-pen"></i></button>
-                                <button class="mx-auto btn btn-warning btn-sm" data-action="delete"><i class="bi bi-trash"></i></button>
-                            </span>
-                        </span>
-                    </li>
                     <ul class="list-group settings-product-list">
                     </ul>
                 </div>