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-22 16:02:01 +02:00
|
|
|
for (c of carts) {
|
|
|
|
if (c.name == cartName) {
|
|
|
|
cart = c;
|
|
|
|
break;
|
2023-05-19 16:01:43 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (cart == null) {
|
|
|
|
alert("Warenkorb '" + cartName + "' existiert nicht.");
|
|
|
|
location.href = "carts.html";
|
|
|
|
}
|
|
|
|
|
2023-05-23 20:07:26 +02:00
|
|
|
if (cart.name != "Momentum Eigenmarken Vergleich") showSearch(cart, items, lookup);
|
2023-05-19 16:01:43 +02:00
|
|
|
showCart(cart, lookup);
|
|
|
|
}
|
|
|
|
|
2023-05-23 20:07:26 +02:00
|
|
|
function showSearch(cart, items, lookup) {
|
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-19 16:01:43 +02:00
|
|
|
for (let i = 0; i < cart.items.length; i++) {
|
|
|
|
const cartItem = cart.items[i];
|
|
|
|
if (cartItem.id == item.id) return false;
|
|
|
|
}
|
|
|
|
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();
|
|
|
|
showCart(cart, lookup);
|
|
|
|
});
|
|
|
|
|
|
|
|
return itemDom;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function showCart(cart, lookup) {
|
|
|
|
const cartDom = document.querySelector("#cart");
|
|
|
|
cartDom.innerHTML = "";
|
|
|
|
cartDom.append(dom("h2", "Warenkorb '" + cart.name + "'"));
|
2023-05-22 16:02:01 +02:00
|
|
|
const canvasDom = dom("canvas", "");
|
|
|
|
cartDom.append(canvasDom);
|
2023-05-23 20:07:26 +02:00
|
|
|
const items = [];
|
|
|
|
cart.items.forEach((cartItem) => {
|
|
|
|
const item = lookup[cartItem.id];
|
|
|
|
if (!item) return;
|
|
|
|
if(cartItem.chart) items.push(item);
|
|
|
|
});
|
|
|
|
showChart(canvasDom, items, lookup);
|
2023-05-19 16:01:43 +02:00
|
|
|
|
|
|
|
const itemTable = dom("table", "");
|
|
|
|
const header = dom("tr", `<th>Kette</th><th>Name</th><th>Menge</th><th>Preis</th><th></th>`);
|
|
|
|
itemTable.append(header);
|
|
|
|
|
2023-05-23 20:07:26 +02:00
|
|
|
cart.items.forEach((cartItem, idx) => {
|
|
|
|
const item = lookup[cartItem.id];
|
2023-05-19 16:01:43 +02:00
|
|
|
if (!item) return;
|
|
|
|
const itemDom = itemToDOM(item)
|
|
|
|
|
2023-05-22 16:02:01 +02:00
|
|
|
const checkBox = dom("input", "");
|
|
|
|
checkBox.setAttribute("type", "checkbox");
|
2023-05-23 20:07:26 +02:00
|
|
|
if (cartItem.chart) checkBox.setAttribute("checked", true);
|
2023-05-22 16:02:01 +02:00
|
|
|
itemDom.append(checkBox);
|
|
|
|
checkBox.addEventListener("change", () => {
|
2023-05-23 20:07:26 +02:00
|
|
|
cartItem.chart = checkBox.checked;
|
2023-05-19 16:01:43 +02:00
|
|
|
saveCarts();
|
2023-05-23 20:07:26 +02:00
|
|
|
const items = [];
|
|
|
|
cart.items.forEach((cartItem) => {
|
|
|
|
const item = lookup[cartItem.id];
|
|
|
|
if (!item) return;
|
|
|
|
if(cartItem.chart) items.push(item);
|
|
|
|
});
|
|
|
|
showChart(canvasDom, items);
|
2023-05-22 16:02:01 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
if (cart.name != "Momentum Eigenmarken Vergleich") {
|
|
|
|
const deleteButton = dom("input", "");
|
|
|
|
deleteButton.setAttribute("type", "button");
|
|
|
|
deleteButton.setAttribute("value", "-");
|
|
|
|
itemDom.append(deleteButton);
|
|
|
|
deleteButton.addEventListener("click", () => {
|
|
|
|
cart.items.splice(idx, 1);
|
|
|
|
saveCarts();
|
|
|
|
showCart(cart, lookup)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
itemTable.append(itemDom);
|
2023-05-19 16:01:43 +02:00
|
|
|
});
|
|
|
|
cartDom.append(itemTable);
|
|
|
|
}
|
|
|
|
|
|
|
|
load();
|