blob: cd593fcf500aefaa4803f94ba2a652cc305f2ff6 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
export class MenuPage extends HTMLElement {
constructor() {
super();
this.root = this.attachShadow({ mode: "open" });
const styles = document.createElement("style");
this.root.appendChild(styles);
async function loadCSS() {
const request = await fetch("/components/MenuPage.css");
const css = await request.text();
styles.textContent = css;
}
loadCSS();
}
// when the component is attached to the DOM
connectedCallback() {
const template = document.getElementById("menu-page-template");
const content = template.content.cloneNode(true);
this.root.appendChild(content);
window.addEventListener("appmenuchange", () => {
this.render();
});
this.render();
}
render() {
if (app.store.menu) {
this.root.querySelector("#menu").innerHTML = "";
for (let category of app.store.menu) {
const liCategory = document.createElement("li");
liCategory.innerHTML = `
<h3>${category.name}</h3>
<ul class='category'></ul>
`;
this.root.querySelector("#menu").appendChild(liCategory);
category.products.forEach((product) => {
const item = document.createElement("product-item");
item.dataset.product = JSON.stringify(product);
liCategory.querySelector("ul").appendChild(item);
});
}
} else {
this.root.querySelector("#menu").innerHTML = "Loading...";
}
}
}
customElements.define("menu-page", MenuPage);
|
