66 lines
1.7 KiB
JavaScript
66 lines
1.7 KiB
JavaScript
import { LitElement, html, css } from "lit";
|
|
import "./nav-bar.js";
|
|
import "./page-home.js";
|
|
import "./page-items.js";
|
|
|
|
class AppRoot extends LitElement {
|
|
static properties = {
|
|
user: { type: Object, state: true },
|
|
route: { type: String, state: true },
|
|
items: { type: Array, state: true }
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
this.user = null;
|
|
this.route = 'home';
|
|
this.items = [];
|
|
}
|
|
|
|
static styles = css`
|
|
:host {
|
|
display: block;
|
|
min-height: 100vh;
|
|
}
|
|
`;
|
|
|
|
#navigate(route) {
|
|
this.route = route;
|
|
}
|
|
|
|
#addItem(item) {
|
|
this.items = [...this.items, item];
|
|
}
|
|
|
|
#removeItem(id) {
|
|
this.items = this.items.filter(i => i.id !== id);
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<nav-bar
|
|
.user=${this.user}
|
|
.route=${this.route}
|
|
@navigate=${(e) => this.#navigate(e.detail.route)}
|
|
></nav-bar>
|
|
<main>${this.#renderRoute()}</main>
|
|
`;
|
|
}
|
|
|
|
#renderRoute() {
|
|
switch (this.route) {
|
|
case "home":
|
|
return html`<page-home .user=${this.user} .items=${this.items}></page-home>`;
|
|
case "items":
|
|
return html`<page-items
|
|
.items=${this.items}
|
|
@add-item=${(e) => this.#addItem(e.detail.item)}
|
|
@remove-item=${(e) => this.#removeItem(e.detail.id)}
|
|
></page-items>`;
|
|
default:
|
|
return html`<page-home .user=${this.user} .items=${this.items}></page-home>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('app-root', AppRoot);
|