ctucx.git: smartie-pwa

power meter history foo

diff --git a/src/power-meter-history.js b/src/power-meter-history.js
@@ -2,6 +2,7 @@
 
 import { LitElement, html, css } from "lit-element";
 import { state } from "./state.js";
+import { pad, round } from "./util.js";
 
 import "@authentic/mwc-circular-progress";
 import "@authentic/mwc-icon";

@@ -11,13 +12,6 @@ import "@authentic/mwc-list";
 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;
-
 const archive = {};
 const loading = {};
 

@@ -122,7 +116,7 @@ class PowerMeterHistory extends LitElement {
 							</div>
 						`)}
 					</div>
-			</smarthome-card>
+				</smarthome-card>
 			` : html``}
 		`;
 	}

@@ -178,16 +172,12 @@ class PowerMeterHistory extends LitElement {
 			.table-column:nth-child(2n) {
 				background-color: #fff;
 			}
-			@media (min-width: 600px) {
-				#connection-status {
-					margin-top: 20px;
-				}
-			}
 
 			.hidden {
 				display: none;
 			}
 			#selection {
+				justify-content: center;
 				display: flex;
 				flex-wrap: wrap;
 				flex-direction: row;

@@ -196,12 +186,21 @@ class PowerMeterHistory extends LitElement {
 				margin-left: auto;
 				margin-right: auto;
 				margin-top: 40px;
-				margin-bottom: -20px;
+				margin-bottom: 0px;
 				/*justify-content: space-between;*/
 			}
 			mwc-select {
 				width: 100px;
-				margin-right: 20px;
+				margin-right: 10px;
+				margin-left: 10px;
+			}
+			@media (min-width: 600px) {
+				#connection-status {
+					margin-top: 20px;
+				}
+				#selection {
+					margin-bottom: -20px;
+				}
 			}
 		`;
 	}

diff --git a/src/power-meter.js b/src/power-meter.js
@@ -2,32 +2,13 @@
 
 import { LitElement, html, css } from "lit-element";
 import { state } from "./state.js";
+import { pad, formatDate, round } from "./util.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;
-
-const formatDate = (date) => (
-	'' +
-	date.getFullYear() +
-	'/' +
-	pad(date.getMonth() + 1, 2) +
-	'/' +
-	pad(date.getDate(), 2) +
-	' ' +
-	date.getHours() +
-	':' +
-	pad(date.getMinutes(), 2)
-);
-
 const archive = {};
 const loading = {};
 

diff --git a/src/util.js b/src/util.js
@@ -0,0 +1,22 @@
+"use strict";
+
+export const round = (num, places) => {
+	const factor = Math.pow(10, places);
+	return Math.round(num * factor) / factor;
+};
+
+export const pad = (string, amount) => Array(amount).join('0').substr(0, amount - String(string).length) + string;
+
+export const formatDate = (date) => (
+	'' +
+	date.getFullYear() +
+	'/' +
+	pad(date.getMonth() + 1, 2) +
+	'/' +
+	pad(date.getDate(), 2) +
+	' ' +
+	date.getHours() +
+	':' +
+	pad(date.getMinutes(), 2)
+);
+