hochzeit/src/client/js/PresentsHandler.ts
2020-12-17 16:07:58 +01:00

127 lines
4.0 KiB
TypeScript

export class PresentsHandler {
presents: {
[id: number]: {
id: number,
version: number,
isBought: boolean,
image: string,
name: string,
description: string
link: string
}
} = {};
// @ts-ignore
private readonly basePath = __BASE_PATH__;
async loadPresents() {
const presents = require("./presents").default;
presents.forEach(p => this.presents[p.id] = p);
await this.updateStates();
}
async updateStates() {
const presentData: any[] = await fetch(this.basePath + "/presents", {
"credentials": "same-origin",
"method": "GET",
}).then(function (res) {
return res.json();
});
presentData.forEach(data => {
const present = this.presents[data.id];
if (present){
present.isBought = data.isBought === 1;
present.version = data.version;
}
})
}
async showPresents() {
const presentContainer = document.getElementById("present-container");
const presentTemplate = document.getElementById("present-template");
presentTemplate.remove();
presentTemplate.removeAttribute("id");
await this.loadPresents();
presentContainer.innerText = "";
Object.values(this.presents).forEach(present => {
const element = <HTMLLinkElement>presentTemplate.cloneNode(true);
(<HTMLImageElement>element.querySelector(".present-image")).src = present.image;
(<HTMLElement>element.querySelector(".present-name")).innerText = present.name;
(<HTMLElement>element.querySelector(".present-description")).innerHTML = present.description;
element.href = present.link;
const checkboxElement = element.querySelector(".present-checkbox");
if (present.isBought) {
checkboxElement.classList.add("checked");
}
checkboxElement.addEventListener("click", async e => {
e.preventDefault();
await this.setPresentIsBought(present, !present.isBought);
if (present.isBought) {
checkboxElement.classList.add("checked");
} else {
checkboxElement.classList.remove("checked");
}
})
presentContainer.appendChild(element);
})
}
private async setPresentIsBought(present: { id: number, isBought: boolean; version: number, image: string; name: string; description: string; link: string }, isBought: boolean) {
const url = this.basePath + "/presents"
const params = {
id: present.id,
version: present.version,
isBought: isBought
}
const res = await this.send(url, params);
console.log("result", res);
if (res.present && res.present.id === present.id) {
present.version = res.present.version;
present.isBought = res.present.isBought === 1
}
if (res.success === false) {
if (res.error === "wrong-version") {
alert("Jemand hat schon vor dir das Geschenk bearbeitet. Bitte versuche es erneut.")
}
}
}
private async send(url, params) {
let headers = {};
if (!(params instanceof FormData) && typeof params === "object") {
params = JSON.stringify(params);
headers = {
"Content-Type": "application/json"
}
}
return fetch(url, {
"credentials": "same-origin",
"method": "POST",
"headers": headers,
"body": params,
}).then(function (res) {
return res.json();
}).catch(function (e) {
debugger;
console.error("error", e);
return {
"success": false,
"errors": [
"not-online"
]
}
});
}
}