2023-05-19 16:01:43 +02:00
|
|
|
async function load() {
|
2023-05-23 11:21:48 +02:00
|
|
|
const items = await loadItems();
|
|
|
|
const lookup = {};
|
2023-05-19 16:01:43 +02:00
|
|
|
for (item of items) {
|
|
|
|
lookup[item.id] = item;
|
|
|
|
}
|
|
|
|
|
|
|
|
let cart = null;
|
2023-05-23 11:21:48 +02:00
|
|
|
const cartName = getQueryParameter("name");
|
2023-05-27 21:44:22 +02:00
|
|
|
if (cartName) {
|
|
|
|
for (c of carts) {
|
|
|
|
if (c.name == cartName) {
|
|
|
|
cart = c;
|
|
|
|
break;
|
|
|
|
}
|
2023-05-19 16:01:43 +02:00
|
|
|
}
|
2023-05-27 22:46:59 +02:00
|
|
|
|
|
|
|
// Update cart pricing info
|
|
|
|
let items = [];
|
|
|
|
for (cartItem of cart.items) {
|
|
|
|
const item = lookup[cartItem.id];
|
|
|
|
if (!item) items.push(cartItem);
|
|
|
|
else items.push(item);
|
|
|
|
}
|
|
|
|
cart.items = items;
|
|
|
|
saveCarts();
|
2023-05-19 16:01:43 +02:00
|
|
|
}
|
|
|
|
|
2023-05-27 21:44:22 +02:00
|
|
|
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);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-05-19 16:01:43 +02:00
|
|
|
if (cart == null) {
|
|
|
|
alert("Warenkorb '" + cartName + "' existiert nicht.");
|
|
|
|
location.href = "carts.html";
|
|
|
|
}
|
|
|
|
|
2023-05-27 22:46:59 +02:00
|
|
|
if (cart.name != "Momentum Eigenmarken Vergleich" && !cart.linked) showSearch(cart, items);
|
|
|
|
|
|
|
|
showCart(cart);
|
2023-05-24 16:59:43 +02:00
|
|
|
const canvasDom = document.querySelector("#chart");
|
|
|
|
document.querySelector("#sum").addEventListener("change", () => {
|
2023-05-27 22:46:59 +02:00
|
|
|
showCharts(canvasDom, cart.items);
|
2023-05-24 16:59:43 +02:00
|
|
|
});
|
2023-05-27 22:46:59 +02:00
|
|
|
document.querySelector("#billa").addEventListener("change", () => showCart(cart));
|
|
|
|
document.querySelector("#hofer").addEventListener("change", () => showCart(cart));
|
|
|
|
document.querySelector("#spar").addEventListener("change", () => showCart(cart));
|
|
|
|
document.querySelector("#dm").addEventListener("change", () => showCart(cart));
|
|
|
|
document.querySelector("#lidl").addEventListener("change", () => showCart(cart));
|
|
|
|
document.querySelector("#mpreis").addEventListener("change", () => showCart(cart));
|
|
|
|
document.querySelector("#filter").addEventListener("input", () => showCart(cart));
|
2023-05-19 16:01:43 +02:00
|
|
|
}
|
|
|
|
|
2023-05-27 22:46:59 +02:00
|
|
|
function filter(cartItems) {
|
|
|
|
const query = document.querySelector("#filter").value.trim();
|
|
|
|
const billa = document.querySelector("#billa").checked;
|
|
|
|
const spar = document.querySelector("#spar").checked;
|
|
|
|
const hofer = document.querySelector("#hofer").checked;
|
|
|
|
const dm = document.querySelector("#dm").checked;
|
|
|
|
const lidl = document.querySelector("#lidl").checked;
|
|
|
|
const mpreis = document.querySelector("#mpreis").checked;
|
|
|
|
let items = [];
|
|
|
|
if (query.charAt(0) != "!") {
|
|
|
|
for (item of cartItems) {
|
|
|
|
if (item.store == "billa" && !billa) continue;
|
|
|
|
if (item.store == "spar" && !spar) continue;
|
|
|
|
if (item.store == "hofer" && !hofer) continue;
|
|
|
|
if (item.store == "dm" && !dm) continue;
|
|
|
|
if (item.store == "lidl" && !lidl) continue;
|
|
|
|
if (item.store == "mpreis" && !mpreis) continue;
|
|
|
|
items.push(item);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
items = cartItems;
|
|
|
|
}
|
|
|
|
if (query.length >= 3) items = searchItems(items, document.querySelector("#filter").value, billa, spar, hofer, dm, lidl, mpreis, false, 0, 10000, false, false);
|
|
|
|
return items;
|
|
|
|
}
|
|
|
|
|
|
|
|
function showSearch(cart, items) {
|
2023-05-19 16:01:43 +02:00
|
|
|
const searchDom = document.querySelector("#search");
|
|
|
|
searchDom.innerHTML = "";
|
2023-05-23 20:07:26 +02:00
|
|
|
newSearchComponent(searchDom, items, null, (item) => {
|
2023-05-27 22:46:59 +02:00
|
|
|
// This would filter all items in the cart from the search
|
|
|
|
// result.
|
|
|
|
/*for (let i = 0; i < cart.items.length; i++) {
|
2023-05-19 16:01:43 +02:00
|
|
|
const cartItem = cart.items[i];
|
|
|
|
if (cartItem.id == item.id) return false;
|
2023-05-27 22:46:59 +02:00
|
|
|
}*/
|
2023-05-19 16:01:43 +02:00
|
|
|
return true;
|
|
|
|
}, (header) => {
|
|
|
|
header.append(dom("th", ""));
|
|
|
|
return header;
|
|
|
|
}, (item, itemDom) => {
|
|
|
|
const addButton = dom("input");
|
|
|
|
addButton.setAttribute("type", "button");
|
|
|
|
addButton.setAttribute("value", "+");
|
|
|
|
const cell = dom("td", "");
|
|
|
|
cell.appendChild(addButton);
|
|
|
|
itemDom.appendChild(cell);
|
|
|
|
|
|
|
|
addButton.addEventListener("click", () => {
|
|
|
|
cart.items.push(item);
|
|
|
|
saveCarts();
|
2023-05-27 22:46:59 +02:00
|
|
|
showCart(cart);
|
2023-05-19 16:01:43 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
return itemDom;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-05-27 22:46:59 +02:00
|
|
|
function showCharts(canvasDom, items) {
|
2023-05-24 16:59:43 +02:00
|
|
|
let itemsToShow = [];
|
2023-05-19 16:01:43 +02:00
|
|
|
|
2023-05-24 16:59:43 +02:00
|
|
|
if (document.querySelector("#sum").checked && items.length > 0) {
|
|
|
|
itemsToShow.push({
|
2023-05-27 22:46:59 +02:00
|
|
|
name: "Preissumme",
|
2023-05-24 16:59:43 +02:00
|
|
|
priceHistory: calculateOverallPriceChanges(items)
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-05-27 22:46:59 +02:00
|
|
|
items.forEach((item) => {
|
|
|
|
if (item.chart) itemsToShow.push(item);
|
2023-05-24 16:59:43 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
showChart(canvasDom, itemsToShow);
|
|
|
|
}
|
|
|
|
|
2023-05-27 22:46:59 +02:00
|
|
|
function showCart(cart) {
|
2023-05-24 16:59:43 +02:00
|
|
|
document.querySelector("#cartname").innerText = "Warenkorb '" + cart.name + "'";
|
|
|
|
const canvasDom = document.querySelector("#chart");
|
2023-05-27 22:46:59 +02:00
|
|
|
let items = filter(cart.items);
|
|
|
|
if (items.length == cart.items.length) {
|
|
|
|
document.querySelector("#numitems").innerText = `${cart.items.length} Artikel`;
|
|
|
|
} else {
|
|
|
|
document.querySelector("#numitems").innerText = `${items.length} / ${cart.items.length} Artikel`;
|
|
|
|
}
|
|
|
|
showCharts(canvasDom, items);
|
2023-05-24 16:59:43 +02:00
|
|
|
|
|
|
|
const itemTable = document.querySelector("#cartitems");
|
|
|
|
itemTable.innerHTML = "";
|
2023-05-26 14:09:15 +02:00
|
|
|
const header = dom("thead", `<tr><th>Kette</th><th>Name</th><th>Menge</th><th>Preis</th><th></th></tr>`);
|
2023-05-19 16:01:43 +02:00
|
|
|
itemTable.append(header);
|
|
|
|
|
2023-05-27 22:46:59 +02:00
|
|
|
items.forEach((cartItem, idx) => {
|
|
|
|
const itemDom = itemToDOM(cartItem)
|
2023-05-26 16:13:15 +02:00
|
|
|
|
|
|
|
const cell = dom("td", "");
|
2023-05-24 16:59:43 +02:00
|
|
|
const showCheckbox = dom("input", "");
|
|
|
|
showCheckbox.setAttribute("type", "checkbox");
|
|
|
|
if (cartItem.chart) showCheckbox.setAttribute("checked", true);
|
|
|
|
itemDom.append(showCheckbox);
|
|
|
|
showCheckbox.addEventListener("change", () => {
|
|
|
|
cartItem.chart = showCheckbox.checked;
|
2023-05-19 16:01:43 +02:00
|
|
|
saveCarts();
|
2023-05-27 22:46:59 +02:00
|
|
|
showCharts(canvasDom, cart.items);
|
2023-05-22 16:02:01 +02:00
|
|
|
});
|
2023-05-26 16:13:15 +02:00
|
|
|
cell.append(showCheckbox);
|
2023-05-22 16:02:01 +02:00
|
|
|
|
2023-05-27 21:44:22 +02:00
|
|
|
if (cart.name != "Momentum Eigenmarken Vergleich" && !cart.linked) {
|
2023-05-22 16:02:01 +02:00
|
|
|
const deleteButton = dom("input", "");
|
|
|
|
deleteButton.setAttribute("type", "button");
|
|
|
|
deleteButton.setAttribute("value", "-");
|
|
|
|
itemDom.append(deleteButton);
|
|
|
|
deleteButton.addEventListener("click", () => {
|
|
|
|
cart.items.splice(idx, 1);
|
|
|
|
saveCarts();
|
2023-05-27 22:46:59 +02:00
|
|
|
showCart(cart)
|
2023-05-22 16:02:01 +02:00
|
|
|
})
|
2023-05-26 16:13:15 +02:00
|
|
|
cell.appendChild(deleteButton);
|
2023-05-22 16:02:01 +02:00
|
|
|
}
|
2023-05-26 16:13:15 +02:00
|
|
|
itemDom.append(cell);
|
2023-05-22 16:02:01 +02:00
|
|
|
itemTable.append(itemDom);
|
2023-05-19 16:01:43 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
load();
|