From dee74f925e21ce4901f5d0ad3d13ee7662f193ac Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Sat, 27 May 2023 21:44:22 +0200
Subject: [PATCH] Share carts via link and allow to save them to own cart list.
 Limited by maximum URL length but easier than export/import.

---
 site/cart.html |  1 +
 site/cart.js   | 41 +++++++++++++++++++++++++++++++++++------
 site/carts.js  | 19 ++++++++++++++-----
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/site/cart.html b/site/cart.html
index 39438d0..286a019 100644
--- a/site/cart.html
+++ b/site/cart.html
@@ -19,6 +19,7 @@
         </div>
         <div id="cart" class="cart">
             <h3 id="cartname"></h3>
+            <input type="button" id="save" value="Speichern" class="hide">
             <canvas id="chart"></canvas>
             <div class="filters" style="margin-top: 1em;">
                 <label><input type="checkbox" id="sum" checked> Summe</label>
diff --git a/site/cart.js b/site/cart.js
index 8ec45fc..d421cbf 100644
--- a/site/cart.js
+++ b/site/cart.js
@@ -7,19 +7,48 @@ async function load() {
 
     let cart = null;
     const cartName = getQueryParameter("name");
-    for (c of carts) {
-        if (c.name == cartName) {
-            cart = c;
-            break;
+    if (cartName) {
+        for (c of carts) {
+            if (c.name == cartName) {
+                cart = c;
+                break;
+            }
         }
     }
 
+    const cartDesc = getQueryParameter("cart");
+    if (cartDesc) {
+        let tokens = cartDesc.split(";");
+        cart = {
+            name: tokens[0],
+            items: [],
+            linked: true
+        };
+        for (let i = 1; i < tokens.length; i++) {
+            const item = lookup[tokens[i]];
+            if (item) cart.items.push(item);
+        }
+        let saveButton = document.querySelector("#save");
+        saveButton.classList.remove("hide");
+        saveButton.addEventListener("click", () => {
+            let index = carts.findIndex(c => c.name == cart.name);
+            if (index != -1) {
+                if (confirm("Existierenden Warenkorb '" + cart.name + " überschreiben?")) {
+                    carts[index] = cart;
+                }
+            } else {
+                carts.push(importedCart);
+            }
+            location.href = "/cart.html?name=" + encodeURIComponent(cart.name);
+        });
+    }
+
     if (cart == null) {
         alert("Warenkorb '" + cartName + "' existiert nicht.");
         location.href = "carts.html";
     }
 
-    if (cart.name != "Momentum Eigenmarken Vergleich") showSearch(cart, items, lookup);
+    if (cart.name != "Momentum Eigenmarken Vergleich" && !cart.linked) showSearch(cart, items, lookup);
     showCart(cart, lookup);
     const canvasDom = document.querySelector("#chart");
     document.querySelector("#sum").addEventListener("change", () => {
@@ -188,7 +217,7 @@ function showCart(cart, lookup) {
         });
         cell.append(showCheckbox);
 
-        if (cart.name != "Momentum Eigenmarken Vergleich") {
+        if (cart.name != "Momentum Eigenmarken Vergleich" && !cart.linked) {
             const deleteButton = dom("input", "");
             deleteButton.setAttribute("type", "button");
             deleteButton.setAttribute("value", "-");
diff --git a/site/carts.js b/site/carts.js
index f155c75..307fbf6 100644
--- a/site/carts.js
+++ b/site/carts.js
@@ -109,38 +109,47 @@ function showCarts(lookup) {
     carts.forEach(cart => {
         let oldPrice = 0;
         let currPrice = 0;
+        let link = cart.name + ";"
         for (cartItem of cart.items) {
             const item = lookup[cartItem.id];
             if (!item) continue;
             oldPrice += item.priceHistory[item.priceHistory.length - 1].price;
             currPrice += item.priceHistory[0].price;
+            link += item.id + ";";
         }
         const increase = Math.round((currPrice - oldPrice) / oldPrice * 100);
 
         const row = dom("tr", ``);
+
         const nameDom = dom("td", `<a href="cart.html?name=${cart.name}">${cart.name}</a>`);
         nameDom.setAttribute("data-label", "Name");
         row.appendChild(nameDom);
+
         const itemsDom = dom("td", cart.items.length);
         itemsDom.setAttribute("data-label", "Produkte");
         row.appendChild(itemsDom);
-        const priceDom = dom("td", `<span style="color: ${currPrice > oldPrice ? "red" : "green"}">${currPrice.toFixed(2)}`);
+
+        const priceDom = dom("td", `<span style="color: ${currPrice > oldPrice ? "red" : "green"}">${currPrice.toFixed(2)} ${(increase > 0 ? "+" : "") + increase + "%"}`);
         priceDom.setAttribute("data-label", "Preis");
         row.appendChild(priceDom);
+
+        const actionsDom = dom("td", ``);
+        const linkDom = dom("a", "Teilen");
+        linkDom.setAttribute("href", "cart.html?cart=" + link);
+        actionsDom.appendChild(linkDom);
+
         if (cart.name != "Momentum Eigenmarken Vergleich") {
             let deleteButton = dom("input");
             deleteButton.setAttribute("type", "button");
             deleteButton.setAttribute("value", "Löschen");
-            const deleteDom = dom("td", ``);
-            deleteDom.appendChild(deleteButton);
-            priceDom.setAttribute("data-label", "Delete");
-            row.appendChild(deleteDom);
+            actionsDom.appendChild(deleteButton);
 
             deleteButton.addEventListener("click", () => {
                 removeCart(cart.name);
                 showCarts(lookup);
             });
         }
+        row.appendChild(actionsDom);
         cartsTable.appendChild(row);
     });
 }