Style fixes and cart import/export.

site/carts.html

@@ -17,10 +17,14 @@
             <a href="changes.html">Tagespreisänderungen</a>
             <a href="carts.html"><strong>Warenkörbe</strong></a>
         </div>
-        <button id="newcart">Neuer Warenkorb</button>
-        <table id="carts"></table>
-        <table id="result"></table>
+        <div class="filters">
+            <button id="newcart">Neuer Warenkorb</button>
+            <button id="export">Exportieren</button>
+            <button id="import">Importieren</button>
+        </div>
+        <table id="carts" class="carts"></table>
     </div>
+    <input type="file" id="fileInput" style="display: none;">
     <script src="utils.js"></script>
     <script src="carts.js"></script>
 </body>

site/carts.js

@@ -1,3 +1,15 @@
+function downloadFile(filename, content) {
+    const blob = new Blob([content], { type: 'text/plain' });
+    const element = document.createElement('a');
+    element.href = URL.createObjectURL(blob);
+    element.download = filename;
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+    URL.revokeObjectURL(element.href);
+}
+
 async function load() {
     const items = await loadItems();
     lookup = {};
@@ -5,6 +17,18 @@ async function load() {
         lookup[item.id] = item;
     }
 
+    // Update carts with latest price info
+    for (cart of carts) {
+        const items = [];
+        for (cartItem of cart.items) {
+            const item = lookup[cartItem.id];
+            if (!item) continue;
+            items.push(item);
+        }
+        cart.items = items;
+    }
+    saveCarts();
+
     if (carts.findIndex(cart => cart.name == "Momentum Eigenmarken Vergleich") == -1) {
         response = await fetch("momentum-cart.json");
         momentumCart = await response.json();
@@ -26,6 +50,47 @@ async function load() {
         location.href = "/cart.html?name=" + name;
     });
 
+    const exportButton = document.querySelector("#export");
+    exportButton.addEventListener("click", () => {
+        downloadFile("carts.json", JSON.stringify(carts, null, 2));
+    });
+
+    const importButton = document.querySelector("#import");
+    importButton.addEventListener("click", () => {
+        document.getElementById('fileInput').value = null
+        document.getElementById('fileInput').click();
+    });
+
+    document.querySelector("#fileInput").addEventListener('change', function (event) {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+        reader.onload = function (event) {
+            const contents = event.target.result;
+            const importedCarts = JSON.parse(contents);
+            for (importedCart of importedCarts) {
+                const items = [];
+                for (cartItem of cart.items) {
+                    const item = lookup[cartItem.id];
+                    if (!item) continue;
+                    items.push(item);
+                }
+                importedCart.items = items;
+
+                let index = carts.findIndex(cart => cart.name == importedCart.name);
+                if (index != -1) {
+                    if (confirm("Existierenden Warenkorb '" + importedCart.name + " überschreiben?")) {
+                        carts[index] = importedCart;
+                    }
+                } else {
+                    carts.push(importedCart);
+                }
+            }
+            saveCarts();
+            showCarts(lookup);
+        };
+        reader.readAsText(file);
+    });
+
     showCarts(lookup);
 }
 
@@ -68,6 +133,7 @@ function showCarts(lookup) {
             deleteButton.setAttribute("value", "Löschen");
             const deleteDom = dom("td", ``);
             deleteDom.appendChild(deleteButton);
+            priceDom.setAttribute("data-label", "Delete");
             row.appendChild(deleteDom);
 
             deleteButton.addEventListener("click", () => {

site/style.css

@@ -124,10 +124,26 @@ td:nth-child(4) {
     padding-left: 0.5em;
 }
 
-td:nth-child(4):before {
+.searchresults td:nth-child(4):before {
     content: "€ "
 }
 
+.carts td:nth-child(1) {
+    text-align: left;
+}
+
+.carts td:nth-child(2) {
+    text-align: center;
+}
+
+.carts td:nth-child(3):before {
+    content: "€ "
+}
+
+.carts td:nth-child(3) {
+    text-align: left;
+}
+
 .itemname {
     word-wrap: break-word;
     word-break: break-all;

site/utils.js

@@ -245,7 +245,7 @@ function newSearchComponent(parentElement, items, searched, filter, headerModifi
             <label><input id="exact-${id}" type="checkbox"> Exaktes Wort</label>
         </div>
         <div id="numresults-${id}"></div>
-        <table id="result-${id}"></table>
+        <table id="result-${id}" class="searchresults"></table>
     `;
 
     const searchInput = parentElement.querySelector(`#search-${id}`);
@@ -266,6 +266,7 @@ function newSearchComponent(parentElement, items, searched, filter, headerModifi
 
     let search = (query) => {
         let hits = [];
+        let now = performance.now();
         try {
             hits = searchItems(items, query,
                 billa.checked, spar.checked, hofer.checked, dm.checked, lidl.checked, mpreis.checked,
@@ -274,6 +275,7 @@ function newSearchComponent(parentElement, items, searched, filter, headerModifi
         } catch (e) {
             console.log("Query: " + query + "\n" + e.message);
         }
+        console.log("Search took " + (performance.now() - now) / 1000.0 + " secs");
         if (searched) hits = searched(hits);
         if (filter) hits = hits.filter(filter);
         table.innerHTML = "";
@@ -289,14 +291,16 @@ function newSearchComponent(parentElement, items, searched, filter, headerModifi
         thead.appendChild(header);
         table.appendChild(thead);
 
+        now = performance.now();
         let num = 0;
         hits.every(hit => {
             let itemDom = itemToDOM(hit);
             if (itemDomModifier) itemDom = itemDomModifier(hit, itemDom, hits);
             table.appendChild(itemDom);
             num++;
-            return num <= 1000;
+            return num < 500;
         });
+        console.log("Building DOM took: " + (performance.now() - now) / 1000.0 + " secs");
         numResults.innerHTML = "Resultate: " + hits.length + (num < hits.length ? ", " + num + " angezeigt" : "");
     }