From 4eea911b603a1ceb429ff1e6b9e87d33b981e79b Mon Sep 17 00:00:00 2001 From: Paul Elliott Date: Wed, 16 Nov 2022 16:42:36 -0500 Subject: [PATCH] ENH: router points to stub page components --- www/package.json | 2 +- www/pnpm-lock.yaml | 2 +- www/src/hasi-app.ts | 95 ++++++++++++++++++++------------------ www/src/index.css | 19 +++++--- www/src/individual-root.ts | 23 +++++++++ www/src/population-root.ts | 42 +++++++++++++++++ www/src/processing-root.ts | 23 +++++++++ www/src/top-app-bar.ts | 9 ++-- 8 files changed, 155 insertions(+), 60 deletions(-) create mode 100644 www/src/individual-root.ts create mode 100644 www/src/population-root.ts create mode 100644 www/src/processing-root.ts diff --git a/www/package.json b/www/package.json index 18974df..d1fb19d 100644 --- a/www/package.json +++ b/www/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@lit-labs/router": "^0.1.1", - "@material/web": "0.1.0-alpha.0", + "@material/web": "github:material-components/material-web#e8ba229dd09d98a3ab68d667bf8c7f0df69daa53", "lit": "^2.4.0" }, "devDependencies": { diff --git a/www/pnpm-lock.yaml b/www/pnpm-lock.yaml index cf6d856..74cae85 100644 --- a/www/pnpm-lock.yaml +++ b/www/pnpm-lock.yaml @@ -2,7 +2,7 @@ lockfileVersion: 5.4 specifiers: '@lit-labs/router': ^0.1.1 - '@material/web': 0.1.0-alpha.0 + '@material/web': github:material-components/material-web#e8ba229dd09d98a3ab68d667bf8c7f0df69daa53 lit: ^2.4.0 typescript: ^4.6.4 vite: ^3.2.3 diff --git a/www/src/hasi-app.ts b/www/src/hasi-app.ts index ba30392..78179ab 100644 --- a/www/src/hasi-app.ts +++ b/www/src/hasi-app.ts @@ -1,10 +1,42 @@ -import { LitElement, css, html } from "lit"; +import { html, literal } from "lit/static-html.js"; +import { LitElement, css } from "lit"; import { customElement } from "lit/decorators.js"; import { Router } from "@lit-labs/router"; import "@material/web/navigationdrawer/navigation-drawer.js"; import "@material/web/button/filled-link-button.js"; +import "@material/web/list/list.js"; +import "@material/web/list/list-item.js"; import "./top-app-bar.js"; +import "./population-root.js"; +import "./individual-root.js"; +import "./processing-root.js"; + +const PAGES = { + population: { title: "Population", path: "/", tag: literal`population-root` }, + individual: { + title: "Individual", + path: "/individual", + tag: literal`individual-root`, + }, + processing: { + title: "Processing", + path: "/processing", + tag: literal`processing-root`, + }, +}; + +const PAGE_ITEMS = Object.values(PAGES).map( + ({ path, title }) => html` + + + + ` +); const appTitle = "Osteoarthritis Biomarker Analysis"; @@ -14,65 +46,36 @@ const appTitle = "Osteoarthritis Biomarker Analysis"; */ @customElement("hasi-app") export class HasiApp extends LitElement { - private _routes = new Router(this, [ - { path: "/", render: () => html`

Population

` }, - { path: "/individual", render: () => html`

Individual

` }, - { path: "/processing", render: () => html`

Processing

` }, - ]); + private _routes = new Router( + this, + Object.values(PAGES).map(({ path, tag }) => { + return { + path, + render: () => html`<${tag}>`, + }; + }) + ); render() { return html`

${appTitle}

- - - + ${PAGE_ITEMS} -
- -

${this._routes.outlet()}

- -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-
-
+
${this._routes.outlet()}
`; } static styles = css` :host { + height: 100%; + width: 100%; + + padding: 10px; display: flex; } .main-content { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; + flex: 1; } `; } diff --git a/www/src/index.css b/www/src/index.css index 8910fc4..811a703 100644 --- a/www/src/index.css +++ b/www/src/index.css @@ -15,13 +15,20 @@ -webkit-text-size-adjust: 100%; } -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; +html, +body { + margin: 0; + padding: 0; } -a:hover { - color: #535bf2; + +body { + height: 100vh; + width: 100vw; +} + +/* include border and padding in element width and height */ +* { + box-sizing: border-box; } @media (prefers-color-scheme: light) { diff --git a/www/src/individual-root.ts b/www/src/individual-root.ts new file mode 100644 index 0000000..047f916 --- /dev/null +++ b/www/src/individual-root.ts @@ -0,0 +1,23 @@ +import { LitElement, css, html } from "lit"; +import { customElement } from "lit/decorators.js"; + +/** + * title + * + */ +@customElement("individual-root") +export class IndividualRoot extends LitElement { + render() { + return html` `; + } + static styles = css` + :host { + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "individual-root": IndividualRoot; + } +} diff --git a/www/src/population-root.ts b/www/src/population-root.ts new file mode 100644 index 0000000..5c80e56 --- /dev/null +++ b/www/src/population-root.ts @@ -0,0 +1,42 @@ +import { LitElement, css, html } from "lit"; +import { customElement } from "lit/decorators.js"; + +/** + * title + * + */ +@customElement("population-root") +export class PopulationRoot extends LitElement { + render() { + return html` + +
+
Charts and Biomarkers
+
Image Viewer
+
+ `; + } + static styles = css` + :host { + height: 100%; + display: flex; + flex-direction: column; + } + + .main-layout { + flex: 1; + display: flex; + flex-direction: column; + } + + .main-layout > div { + flex: 1; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "population-root": PopulationRoot; + } +} diff --git a/www/src/processing-root.ts b/www/src/processing-root.ts new file mode 100644 index 0000000..210f5fc --- /dev/null +++ b/www/src/processing-root.ts @@ -0,0 +1,23 @@ +import { LitElement, css, html } from "lit"; +import { customElement } from "lit/decorators.js"; + +/** + * title + * + */ +@customElement("processing-root") +export class ProcessingRoot extends LitElement { + render() { + return html` `; + } + static styles = css` + :host { + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "processing-root": ProcessingRoot; + } +} diff --git a/www/src/top-app-bar.ts b/www/src/top-app-bar.ts index 5ffeb19..183d118 100644 --- a/www/src/top-app-bar.ts +++ b/www/src/top-app-bar.ts @@ -1,5 +1,5 @@ import { LitElement, css, html } from "lit"; -import { customElement } from "lit/decorators.js"; +import { customElement, property } from "lit/decorators.js"; /** * title @@ -7,12 +7,9 @@ import { customElement } from "lit/decorators.js"; */ @customElement("top-app-bar") export class TopAppBar extends LitElement { + @property() title: string = "title"; render() { - return html` -
- -
- `; + return html`

${this.title}

`; } static styles = css` :host {