2023-05-31 16:42:41 +02:00
|
|
|
const shoppingCarts = new ShoppingCarts();
|
|
|
|
shoppingCarts.load();
|
|
|
|
|
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) {
|
2023-05-30 20:02:03 +02:00
|
|
|
lookup[item.store + item.id] = item;
|
2023-05-19 16:01:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
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) {
|
2023-05-29 19:05:02 +02:00
|
|
|
for (c of shoppingCarts.carts) {
|
2023-05-27 21:44:22 +02:00
|
|
|
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
|
2023-06-02 14:23:34 +02:00
|
|
|
const items = [];
|
2023-05-27 22:46:59 +02:00
|
|
|
for (cartItem of cart.items) {
|
2023-05-30 20:02:03 +02:00
|
|
|
const item = lookup[cartItem.store + cartItem.id];
|
2023-06-02 14:23:34 +02:00
|
|
|
if (!item) items.push(cartItem);
|
2023-05-27 22:46:59 +02:00
|
|
|
else items.push(item);
|
|
|
|
}
|
|
|
|
cart.items = items;
|
2023-05-29 19:05:02 +02:00
|
|
|
shoppingCarts.save();
|
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: [],
|
2023-06-02 16:45:54 +02:00
|
|
|
linked: true,
|
2023-05-27 21:44:22 +02:00
|
|
|
};
|
|
|
|
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", () => {
|
2023-05-29 19:05:02 +02:00
|
|
|
let index = shoppingCarts.carts.findIndex((c) => c.name === cart.name);
|
2023-05-27 21:44:22 +02:00
|
|
|
if (index != -1) {
|
|
|
|
if (confirm("Existierenden Warenkorb '" + cart.name + " überschreiben?")) {
|
2023-05-29 19:05:02 +02:00
|
|
|
shoppingCarts.carts[index] = cart;
|
2023-05-27 21:44:22 +02:00
|
|
|
}
|
|
|
|
} else {
|
2023-05-29 19:05:02 +02:00
|
|
|
shoppingCarts.carts.push(importedCart);
|
2023-05-27 21:44:22 +02:00
|
|
|
}
|
|
|
|
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);
|
|
|
|
|
2023-05-24 16:59:43 +02:00
|
|
|
const canvasDom = document.querySelector("#chart");
|
2023-06-01 15:54:44 +02:00
|
|
|
document.querySelector("#sum").addEventListener("change", () => updateCharts(canvasDom, filter(cart.items)));
|
|
|
|
document.querySelector("#sumstores").addEventListener("change", () => updateCharts(canvasDom, filter(cart.items)));
|
|
|
|
document.querySelector("#todayonly").addEventListener("change", () => updateCharts(canvasDom, filter(cart.items)));
|
2023-06-01 17:40:11 +02:00
|
|
|
document.querySelector("#start").addEventListener("change", () => updateCharts(canvasDom, filter(cart.items)));
|
|
|
|
document.querySelector("#end").addEventListener("change", () => updateCharts(canvasDom, filter(cart.items)));
|
|
|
|
document.querySelector("#start").value = getOldestDate(cart.items);
|
|
|
|
document.querySelector("#end").value = currentDate();
|
2023-06-01 15:47:17 +02:00
|
|
|
|
2023-05-28 21:26:49 +02:00
|
|
|
const filtersStore = document.querySelector("#filters-store");
|
2023-06-04 21:30:55 +02:00
|
|
|
filtersStore.innerHTML =
|
|
|
|
`<label><input id="all" type="checkbox" checked="true"><strong>Alle</strong></label>` +
|
|
|
|
STORE_KEYS.map((store) => `<label><input id="${store}" type="checkbox" checked="true">${stores[store].name}</label>`).join(" ");
|
|
|
|
filtersStore.querySelectorAll("input").forEach((input) => {
|
|
|
|
if (input.id == "all") return;
|
|
|
|
input.addEventListener("change", () => showResults(items, currentDate()));
|
|
|
|
});
|
|
|
|
filtersStore.querySelector("#all").addEventListener("change", () => {
|
|
|
|
STORE_KEYS.forEach((store) => (filtersStore.querySelector(`#${store}`).checked = filtersStore.querySelector("#all").checked));
|
|
|
|
});
|
2023-05-28 21:37:42 +02:00
|
|
|
document.querySelector("#filter").addEventListener("input", () => showCart(cart));
|
2023-05-28 21:26:49 +02:00
|
|
|
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();
|
2023-06-02 16:45:54 +02:00
|
|
|
const storeCheckboxes = STORE_KEYS.map((store) => document.querySelector(`#${store}`));
|
|
|
|
const checkedStores = STORE_KEYS.filter((store, i) => storeCheckboxes[i].checked);
|
2023-05-27 22:46:59 +02:00
|
|
|
let items = [];
|
|
|
|
if (query.charAt(0) != "!") {
|
|
|
|
for (item of cartItems) {
|
2023-05-28 21:26:49 +02:00
|
|
|
if (!checkedStores.includes(item.store)) continue;
|
2023-05-27 22:46:59 +02:00
|
|
|
items.push(item);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
items = cartItems;
|
|
|
|
}
|
2023-05-28 21:26:49 +02:00
|
|
|
if (query.length >= 3) items = searchItems(items, document.querySelector("#filter").value, checkedStores, false, 0, 10000, false, false);
|
2023-05-27 22:46:59 +02:00
|
|
|
return items;
|
|
|
|
}
|
|
|
|
|
|
|
|
function showSearch(cart, items) {
|
2023-05-19 16:01:43 +02:00
|
|
|
const searchDom = document.querySelector("#search");
|
|
|
|
searchDom.innerHTML = "";
|
2023-06-02 16:45:54 +02:00
|
|
|
newSearchComponent(
|
|
|
|
searchDom,
|
|
|
|
items,
|
|
|
|
null,
|
|
|
|
null,
|
|
|
|
(header) => {
|
2023-06-04 14:45:05 +02:00
|
|
|
header.innerHTML += "<th></th>";
|
2023-06-02 16:45:54 +02:00
|
|
|
return header;
|
|
|
|
},
|
|
|
|
(item, itemDom) => {
|
|
|
|
const cell = dom("td", `<input type="button" value="+">`);
|
|
|
|
cell.children[0].addEventListener("click", () => {
|
|
|
|
cart.items.push(item);
|
|
|
|
shoppingCarts.save();
|
|
|
|
document.querySelector("#start").value = getOldestDate(cart.items);
|
|
|
|
document.querySelector("#end").value = currentDate();
|
|
|
|
showCart(cart);
|
|
|
|
});
|
|
|
|
itemDom.appendChild(cell);
|
|
|
|
return itemDom;
|
|
|
|
}
|
|
|
|
);
|
2023-06-04 14:45:05 +02:00
|
|
|
searchDom.querySelector("input").setAttribute("placeholder", "Produkte suchen und hinzufügen...");
|
2023-05-19 16:01:43 +02:00
|
|
|
}
|
|
|
|
|
2023-06-01 15:54:44 +02:00
|
|
|
function updateCharts(canvasDom, items) {
|
2023-06-01 17:40:11 +02:00
|
|
|
let startDate = document.querySelector("#start").value;
|
|
|
|
let endDate = document.querySelector("#end").value;
|
|
|
|
if (start > endDate) {
|
|
|
|
let tmp = start;
|
|
|
|
start = endDate;
|
|
|
|
endDate = tmp;
|
|
|
|
}
|
|
|
|
showCharts(
|
|
|
|
canvasDom,
|
|
|
|
items,
|
|
|
|
document.querySelector("#sum").checked,
|
|
|
|
document.querySelector("#sumstores").checked,
|
|
|
|
document.querySelector("#todayonly").checked,
|
|
|
|
startDate,
|
|
|
|
endDate
|
|
|
|
);
|
2023-05-24 16:59:43 +02:00
|
|
|
}
|
|
|
|
|
2023-05-27 22:46:59 +02:00
|
|
|
function showCart(cart) {
|
2023-06-04 14:45:05 +02:00
|
|
|
if (cart.items.length == 0) {
|
|
|
|
document.querySelector("#noproducts").classList.remove("hide");
|
|
|
|
document.querySelector("#hasproducts").classList.add("hide");
|
|
|
|
} else {
|
|
|
|
document.querySelector("#noproducts").classList.add("hide");
|
|
|
|
document.querySelector("#hasproducts").classList.remove("hide");
|
|
|
|
}
|
|
|
|
|
2023-06-02 16:45:54 +02:00
|
|
|
let link = encodeURIComponent(cart.name) + ";";
|
2023-05-28 21:43:50 +02:00
|
|
|
for (cartItem of cart.items) {
|
2023-05-30 20:02:03 +02:00
|
|
|
link += cartItem.store + cartItem.id + ";";
|
2023-05-28 21:43:50 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
document.querySelector("#cartname").innerHTML = "Warenkorb '" + cart.name + `' <a href="cart.html?cart=${link}">Teilen</a>`;
|
2023-05-24 16:59:43 +02:00
|
|
|
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`;
|
|
|
|
}
|
2023-06-01 15:54:44 +02:00
|
|
|
updateCharts(canvasDom, items);
|
2023-05-24 16:59:43 +02:00
|
|
|
|
|
|
|
const itemTable = document.querySelector("#cartitems");
|
|
|
|
itemTable.innerHTML = "";
|
2023-06-04 19:54:28 +02:00
|
|
|
header = dom("thead", `<tr><th>Kette</th><th>Name</th><th>Menge</th><th>Preis <span class="expander">+</span></th><th></th></tr>`);
|
2023-06-04 02:19:13 +02:00
|
|
|
const showHideAll = header.querySelectorAll("th:nth-child(4)")[0];
|
|
|
|
showHideAll.style["cursor"] = "pointer";
|
|
|
|
showHideAll.showAll = true;
|
|
|
|
showHideAll.addEventListener("click", () => {
|
2023-06-04 14:45:05 +02:00
|
|
|
showHideAll.querySelector(".expander").innerText = showHideAll.querySelector(".expander").innerText == "+" ? "-" : "+";
|
2023-06-04 02:19:13 +02:00
|
|
|
itemTable.querySelectorAll(".priceinfo").forEach((el) => (showHideAll.showAll ? el.classList.remove("hide") : el.classList.add("hide")));
|
|
|
|
showHideAll.showAll = !showHideAll.showAll;
|
|
|
|
});
|
2023-05-19 16:01:43 +02:00
|
|
|
itemTable.append(header);
|
|
|
|
|
2023-05-27 22:46:59 +02:00
|
|
|
items.forEach((cartItem, idx) => {
|
2023-06-02 16:45:54 +02:00
|
|
|
const itemDom = itemToDOM(cartItem);
|
2023-05-26 16:13:15 +02:00
|
|
|
|
2023-06-02 16:45:54 +02:00
|
|
|
const cell = dom(
|
|
|
|
"td",
|
|
|
|
`
|
2023-06-04 19:54:28 +02:00
|
|
|
<label><input type="checkbox">📈</label>
|
2023-06-01 15:47:17 +02:00
|
|
|
<input type="button" value="-">
|
2023-06-04 19:54:28 +02:00
|
|
|
<input type="button" value="▲">
|
|
|
|
<input type="button" value="▼">
|
2023-06-02 16:45:54 +02:00
|
|
|
`
|
|
|
|
);
|
2023-06-01 15:47:17 +02:00
|
|
|
|
|
|
|
if (cartItem.chart) cell.children[0].setAttribute("checked", true);
|
|
|
|
cell.children[0].addEventListener("change", () => {
|
2023-06-05 08:12:29 +02:00
|
|
|
cartItem.chart = cell.children[0].children[0].checked;
|
2023-05-29 19:05:02 +02:00
|
|
|
shoppingCarts.save();
|
2023-06-01 15:54:44 +02:00
|
|
|
updateCharts(canvasDom, items);
|
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-06-01 15:47:17 +02:00
|
|
|
cell.children[1].addEventListener("click", () => {
|
2023-05-22 16:02:01 +02:00
|
|
|
cart.items.splice(idx, 1);
|
2023-05-29 19:05:02 +02:00
|
|
|
shoppingCarts.save();
|
2023-06-01 17:40:11 +02:00
|
|
|
document.querySelector("#start").value = getOldestDate(cart.items);
|
|
|
|
document.querySelector("#end").value = currentDate();
|
2023-06-02 16:45:54 +02:00
|
|
|
showCart(cart);
|
2023-06-01 15:47:17 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
cell.children[2].addEventListener("click", () => {
|
2023-05-30 21:42:47 +02:00
|
|
|
if (idx == 0) return;
|
|
|
|
let otherItem = cart.items[idx - 1];
|
|
|
|
cart.items[idx - 1] = cartItem;
|
|
|
|
cart.items[idx] = otherItem;
|
|
|
|
shoppingCarts.save();
|
2023-06-02 16:45:54 +02:00
|
|
|
showCart(cart);
|
2023-06-01 15:47:17 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
cell.children[3].addEventListener("click", () => {
|
2023-05-30 21:42:47 +02:00
|
|
|
if (idx == cart.items.length - 1) return;
|
|
|
|
let otherItem = cart.items[idx + 1];
|
|
|
|
cart.items[idx + 1] = cartItem;
|
|
|
|
cart.items[idx] = otherItem;
|
|
|
|
shoppingCarts.save();
|
2023-06-02 16:45:54 +02:00
|
|
|
showCart(cart);
|
2023-06-01 15:47:17 +02:00
|
|
|
});
|
|
|
|
} else {
|
2023-06-02 16:45:54 +02:00
|
|
|
cell.querySelectorAll("input[type='button']").forEach((button) => button.classList.add("hide"));
|
2023-05-22 16:02:01 +02:00
|
|
|
}
|
2023-06-01 15:47:17 +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
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-06-02 16:45:54 +02:00
|
|
|
load();
|