2023-06-13 01:16:27 +02:00
|
|
|
const { downloadJSON, dom } = require("../js/misc");
|
2023-06-09 00:37:29 +02:00
|
|
|
const { View } = require("./view");
|
|
|
|
|
|
|
|
class CartsList extends View {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.innerHTML = /*html*/ `
|
2023-06-09 01:31:30 +02:00
|
|
|
<table class="w-full">
|
2023-06-09 00:37:29 +02:00
|
|
|
<thead>
|
|
|
|
<tr class="bg-primary text-left hidden md:table-row uppercase text-sm text-white">
|
|
|
|
<th class="px-2">Name</th>
|
|
|
|
<th class="px-2">Produkte</th>
|
|
|
|
<th class="px-2">Preis</th>
|
2023-06-10 13:07:36 +02:00
|
|
|
<th class="px-2"></th>
|
2023-06-09 00:37:29 +02:00
|
|
|
</tr>
|
|
|
|
</thead>
|
2023-06-10 13:07:36 +02:00
|
|
|
<tbody x-id="tableBody">
|
2023-06-09 00:37:29 +02:00
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
`;
|
|
|
|
|
2023-06-10 22:34:28 +02:00
|
|
|
this._cartTemplate = dom(
|
2023-06-09 00:37:29 +02:00
|
|
|
"tr",
|
|
|
|
/*html*/ `
|
2023-06-10 13:07:36 +02:00
|
|
|
<td class="px-2 col-span-3">
|
2023-06-09 00:37:29 +02:00
|
|
|
<a x-id="name" class="hover:underline"></a>
|
|
|
|
</td>
|
2023-06-10 13:07:36 +02:00
|
|
|
<td class="px-2">
|
2023-06-09 00:37:29 +02:00
|
|
|
<span class="md:hidden text-sm">Produkte: </span>
|
|
|
|
<span x-id="numProducts"></span>
|
|
|
|
</td>
|
2023-06-10 13:07:36 +02:00
|
|
|
<td class="px-2 col-span-2">
|
2023-06-09 00:37:29 +02:00
|
|
|
<span class="md:hidden text-sm">Preisänderungen: </span>
|
|
|
|
<span x-id="price"></span>
|
|
|
|
</td>
|
|
|
|
<td class="px-2 col-span-3">
|
|
|
|
<div class="flex gap-4">
|
|
|
|
<a x-id="share" class="text-primary hover:underline text-sm font-medium">Teilen</a>
|
|
|
|
<a x-id="json" class="text-primary hover:underline text-sm font-medium" href="">JSON</a>
|
|
|
|
<input x-id="delete" class="ml-auto text-red-500 hover:underline text-sm font-medium" type="button" value="Löschen">
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
`
|
|
|
|
);
|
2023-06-10 22:34:28 +02:00
|
|
|
this._cartTemplate.setAttribute("class", "grid grid-cols-3 hover:bg-gray-100 border border-gray-200 rounded-md p-2 md:table-row");
|
2023-06-09 00:37:29 +02:00
|
|
|
}
|
|
|
|
|
2023-06-09 02:03:57 +02:00
|
|
|
render() {
|
|
|
|
const model = this._model;
|
2023-06-10 13:07:36 +02:00
|
|
|
const tableBody = this.elements.tableBody;
|
2023-06-11 22:03:49 +02:00
|
|
|
tableBody.innerHTML = "";
|
2023-06-09 00:37:29 +02:00
|
|
|
|
|
|
|
for (const cart of model.carts) {
|
|
|
|
let oldPrice = 0;
|
|
|
|
let currPrice = 0;
|
|
|
|
let shareLink = "cart.html?cart=" + encodeURIComponent(cart.name) + ";";
|
|
|
|
for (const item of cart.items) {
|
|
|
|
oldPrice += item.priceHistory[item.priceHistory.length - 1].price;
|
|
|
|
currPrice += item.priceHistory[0].price;
|
|
|
|
shareLink += item.store + item.id + ";";
|
|
|
|
}
|
|
|
|
const increase = oldPrice != 0 ? Math.round(((currPrice - oldPrice) / oldPrice) * 100) : 0;
|
|
|
|
const cartUrl = `cart.html?name=${encodeURIComponent(cart.name)}`;
|
|
|
|
|
2023-06-10 22:34:28 +02:00
|
|
|
const cartListItem = this._cartTemplate.cloneNode(true);
|
2023-06-11 02:37:35 +02:00
|
|
|
const elements = View.elements(cartListItem);
|
2023-06-09 00:37:29 +02:00
|
|
|
elements.name.href = cartUrl;
|
|
|
|
elements.name.innerText = cart.name;
|
|
|
|
elements.numProducts.innerText = cart.items.length;
|
|
|
|
elements.price.innerText = `${currPrice.toFixed(2)} ${(increase > 0 ? "+" : "") + increase + "%"}`;
|
|
|
|
elements.price.style.color = currPrice > oldPrice ? "red" : "green";
|
|
|
|
elements.share.href = shareLink;
|
2023-06-10 13:07:36 +02:00
|
|
|
elements.json.addEventListener("click", (event) => {
|
2023-06-09 00:37:29 +02:00
|
|
|
event.preventDefault();
|
|
|
|
downloadJSON(cart.name + ".json", cart);
|
|
|
|
});
|
|
|
|
if (cart.name === "Momentum Eigenmarken Vergleich") {
|
|
|
|
elements.delete.classList.add("hidden");
|
|
|
|
} else {
|
|
|
|
elements.delete.addEventListener("click", () => model.remove(cart.name));
|
|
|
|
}
|
2023-06-10 13:07:36 +02:00
|
|
|
tableBody.append(cartListItem);
|
2023-06-09 00:37:29 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
customElements.define("carts-list", CartsList);
|