ctucx.git: smartie-pwa

departures

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" },
 };