commit ac480a7f398c9dcb33d13451e0337170a0531c49
parent 76de8ad99924bbbe7735f47c76f2e17283b89640
Author: Milan Pässler <me@pbb.lc>
Date: Sun, 9 Jun 2019 20:03:15 +0200
parent 76de8ad99924bbbe7735f47c76f2e17283b89640
Author: Milan Pässler <me@pbb.lc>
Date: Sun, 9 Jun 2019 20:03:15 +0200
departures
2 files changed, 144 insertions(+), 0 deletions(-)
A
|
142
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
diff --git a/src/departures.js b/src/departures.js @@ -0,0 +1,142 @@ +"use strict"; + +import { LitElement, html, css } from "lit-element"; +import { state } from "./state.js"; + +import "@authentic/mwc-circular-progress"; +import "@authentic/mwc-icon"; +import "./card.js"; +import "./spinner.js"; + +const round = (num, places) => { + const factor = Math.pow(10, places); + return Math.round(num * factor) / factor; +}; + +const pad = (string, amount) => Array(amount).join('0').substr(0, amount - String(string).length) + string; + +class Departures extends LitElement { + constructor() { + super(...arguments); + + this.loadData(); + setInterval(this.loadData.bind(this), 10000); + } + + loadData() { + fetch('https://utils.ctu.cx/departures.php') + .then(resp => resp.json()) + .then(data => { + this.data = data; + this.requestUpdate(); + }); + } + + render() { + return html` + ${this.data ? html` + ${Object.entries(this.data).map(([name, d]) => html` + <smarthome-card> + <div class="table-column table-title">${name}</div> + <div class="table"> + <div class="table-row line-column"> + <div class="table-column">Line</div> + ${d.map((departure) => html` + <div class="table-column">${departure.line}</div> + `)} + </div> + <div class="table-row direction-column"> + <div class="table-column">Direction</div> + ${d.map((departure) => html` + <div class="table-column">${departure.direction}</div> + `)} + </div> + <div class="table-row dep-column"> + <div class="table-column"></div> + ${d.map((departure) => html` + <div class="table-column">${departure.departure_in ? departure.departure_in + " min" : "now"}</div> + `)} + </div> + </div> + </smarthome-card> + `)} + ` : html` + <smarthome-spinner></smarthome-spinner> + `} + `; + } + + static get styles() { + return css` + :host { + display: flex; + flex-direction: column; + --mdc-theme-on-primary: white; + --mdc-theme-primary: #43a047; + --mdc-theme-on-secondary: white; + --mdc-theme-secondary: #616161; + } + #connection-status mwc-icon { + padding-right: .5em; + } + #connection-status { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + #connection-status>p { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + #connection-status>p.lastupdate { + font-size: 1em; + } + .table { + display: flex; + flex-direction: row; + } + .table-row { + display: flex; + flex-direction: column; + width: 100%; + } + .table-column { + padding: 1em; + height: 1em; + display: flex; + flex-direction: column; + justify-content: center; + } + + .table-column { + background-color: #ddd; + } + .table-column:nth-child(2n) { + background-color: #fff; + } + @media (min-width: 600px) { + #connection-status { + margin-top: 20px; + } + } + .line-column { + width: 20%; + } + .direction-column { + width: 60%; + } + .dep-column { + width: 20%; + } + .table-title { + background: #444; + color: white; + } + `; + } +} + +customElements.define("smarthome-departures", Departures);
diff --git a/src/layout.js b/src/layout.js @@ -11,6 +11,7 @@ import "@authentic/mwc-drawer"; import "./lights.js"; import "./power-meter.js"; import "./power-meter-history.js"; +import "./departures.js"; import "./settings.js"; import "./spinner.js"; import "./row.js"; @@ -21,6 +22,7 @@ luciRedirect.innerHTML = "window.location = `http://${window.location.host}/cgi- const pages = { "#/lights": { name: "Lights", content: html`<smarthome-lights></smarthome-lights>`, icon: "lightbulb" }, "#/powermeter": { name: "Power Meter", content: html`<smarthome-power-meter></smarthome-power-meter><smarthome-power-meter-history></smarthome-power-meter-history>`, icon: "power" }, + "#/departures": { name: "Departures", content: html`<smarthome-departures></smarthome-departures>`, icon: "departure_board" }, "#/luci": { name: "LuCI", content: html`<smarthome-spinner></smarthome-spinner> ${luciRedirect}`, icon: "router" }, "#/settings": { name: "Settings", content: html`<smarthome-settings></smarthome-settings>`, icon: "settings" }, };