attempting to resurrect full beans
This commit is contained in:
parent
bceee7ecf1
commit
a961f387d6
9 changed files with 170 additions and 65 deletions
|
|
@ -1,9 +1,12 @@
|
|||
import { LitElement, html, css } from "lit";
|
||||
import { store} from "../store/index.js";
|
||||
import { StoreController } from "../controllers/store-controller.js";
|
||||
import "./nav-bar.js";
|
||||
import "./page-home.js";
|
||||
import "./page-items.js";
|
||||
|
||||
class AppRoot extends LitElement {
|
||||
#hydrated = new StoreController(this, store, s => s._hydrated);
|
||||
#user = new StoreController(this, store, s => s.user);
|
||||
#route = new StoreController(this, store, s => s.route);
|
||||
|
||||
|
|
@ -12,43 +15,30 @@ class AppRoot extends LitElement {
|
|||
display: block;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 100vh;
|
||||
opacity: 0.4;
|
||||
}
|
||||
`;
|
||||
|
||||
#navigate(route) {
|
||||
this.route = route;
|
||||
}
|
||||
|
||||
#addItem(item) {
|
||||
this.items = [...this.items, item];
|
||||
}
|
||||
|
||||
#removeItem(id) {
|
||||
this.items = this.items.filter(i => i.id !== id);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.#hydrated.value) {
|
||||
return html`<div class="loading">loading...</div>`;
|
||||
}
|
||||
return html`
|
||||
<nav-bar
|
||||
.user=${this.user}
|
||||
.route=${this.route}
|
||||
@navigate=${(e) => this.#navigate(e.detail.route)}
|
||||
></nav-bar>
|
||||
<nav-bar .user=${this.#user.value}></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>`;
|
||||
switch (this.#route.value) {
|
||||
case "home": return html`<page-home></page-home>`;
|
||||
case "items": return html`<page-items></page-items>`;
|
||||
default: return html`<page-home></page-home>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue