Aufräumen der neuen Export und Importfunktion (Dateien)

assets/script/all.js

@@ -21,14 +21,26 @@ 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');
     }
@@ -91,7 +103,7 @@ class Element {
 
     /**
      * Get the buttons for importing test data
-     * @returns {Element}
+     * @returns {Element[]}
      */
     static getButtonsImportTestdata() {
         return document.querySelectorAll('[data-action=import-testdata]');
@@ -358,6 +370,34 @@ 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);
+            }
+        })
     }
 
     /**
@@ -694,14 +734,26 @@ 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);
@@ -715,40 +767,4 @@ const cartManager = new CartManager();
 const productManager = new ProductManager();
 const tabManager = new TabManager();
 const themeManager = new ThemeManager();
-const cartHistoryManager = new CartHistoryManager();
+const cartHistoryManager = new CartHistoryManager();
-
-
-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);
-    }
-})
-
-document.addEventListener('touchstart', function (e) {
-    if (window.scrollY === 0) {
-        e.preventDefault();
-    }
-});
-

index.html

@@ -110,6 +110,35 @@
                 <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.
@@ -117,24 +146,6 @@
                             lädt die Software das Bild herunter und speichert es in der JSON-Datei als Base64-kodierte
                             Version. Die ursprüngliche URL wird dabei nicht mehr gespeichert.
                         </p>
-
-
-                        <div class="">
-                            <button class="btn btn-primary" id="export-file">
-                                Datei exportieren
-                            </button>
-
-                            <span>|</span>
-
-                            <input class="form-control" type="file" id="import-file">
-
-
-                            <button class="btn btn-primary ms-2" data-action="import" id="import-file-button">
-                                Datei importieren
-                            </button>
-                        </div>
-
-
                         <label class="w-100 form-label">
                             <b>Text zum Kopieren und Einfügen:</b>
                             <textarea class="form-control mt-1" id="input-export-import" spellcheck="false"></textarea>