ctucx.git: smartie-pwa

more power meter history foo

diff --git a/src/power-meter-history.js b/src/power-meter-history.js
@@ -15,8 +15,26 @@ import "./spinner.js";
 const archive = {};
 const loading = {};
 
-const years = [ 2019 ];
-const months = [...Array(12).keys()].map(n => n+1);
+const weekdays = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
+const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];
+
+const formatName = (type, name) => {
+	if (type == "day") {
+		const date = new Date(`${name.substr(0, 4)}-${name.substr(4, 2)}-${name.substr(6, 2)}`);
+		return `${weekdays[date.getDay()]} ${date.getDate()}th`;
+	} else if (type == "week") {
+		let res = "";
+		const date = new Date(name.substr(0, 4), 0, 1 + 7 * (Number(name.substr(4, 2)) - 1));
+		date.setDate(date.getDate() + 1 - date.getDay());
+		res += `${date.getDate()}.${date.getMonth()+1}.`;
+		date.setDate(date.getDate() + 7 - date.getDay());
+		res += ` - ${date.getDate()}.${date.getMonth()+1}.`;
+		return res;
+	} else if (type == "month") {
+		const date = new Date(`${name.substr(0, 4)}-${name.substr(4, 2)}-01`);
+		return months[date.getMonth()];
+	}
+};
 
 class PowerMeterHistory extends LitElement {
 	constructor() {

@@ -25,6 +43,14 @@ class PowerMeterHistory extends LitElement {
 		const now = new Date();
 		this.year = now.getFullYear();
 		this.month = pad(now.getMonth() + 1, 2);
+
+		fetch(`archive/metadata.json`)
+			.then(resp => resp.json())
+			.then(metadata => {
+				this.metadata = metadata;
+				this.requestUpdate();
+			});
+
 		state.subscribe(this.loadData.bind(this));
 	}
 

@@ -55,8 +81,8 @@ class PowerMeterHistory extends LitElement {
 	}
 
 	async load(file) {
-		console.log("loading " + file);
 		if (!archive[file] && !loading[file]) {
+			console.log("loading " + file);
 			loading[file] = true;
 			return fetch(`archive/${file}.json`)
 				.then(resp => resp.json())

@@ -86,14 +112,18 @@ class PowerMeterHistory extends LitElement {
 				<mwc-select label="Year">
 					<mwc-menu slot="menu" class="year-sel" @MDCMenu:selected=${this.handleSelected("year")}>
 						<mwc-list>
-							${years.map(m => html`<mwc-list-item value="${m}">${m}</mwc-list-item>`)}
+							${this.metadata ? html`
+								${Object.keys(this.metadata.availableData).map(m => html`<mwc-list-item value="${m}">${m}</mwc-list-item>`)}
+							` : html``}
 						</mwc-list>
 					</mwc-menu>
 				</mwc-select>
 				<mwc-select label="Month" class="${this.type == "day" ? "" : "hidden"}">
 					<mwc-menu slot="menu" class="month-sel" @MDCMenu:selected=${this.handleSelected("month")}>
 						<mwc-list>
-							${months.map(m => html`<mwc-list-item value="${pad(m, 2)}">${m}</mwc-list-item>`)}
+							${this.metadata ? html`
+								${this.metadata.availableData[this.year].map(m => html`<mwc-list-item value="${m}">${Number(m)}</mwc-list-item>`)}
+							` : html``}
 						</mwc-list>
 					</mwc-menu>
 				</mwc-select>

@@ -103,14 +133,14 @@ class PowerMeterHistory extends LitElement {
 					<div class="table">
 						<div class="table-row table-head">
 							<div class="table-column">Name</div>
-							${Object.keys(this.data).map((day) => html`
-								<div class="table-column">${day}</table-column>
+							${Object.keys(this.data).reverse().map((day) => html`
+								<div class="table-column">${formatName(this.type, day)}</table-column>
 							`)}
 						</div>
 						${Object.entries(state.data.powermeter).map(([id, d]) => html`
 							<div class="table-row">
 								<div class="table-column">${d.name}</div>
-								${Object.entries(this.data).map(([day, d]) => html`
+								${Object.entries(this.data).reverse().map(([day, d]) => html`
 									<div class="table-column">${d[id] ? round(d[id], 2) + " kWh" : "-"}</div>
 								`)}
 							</div>