more accurate pv/phase timer formatting (#2061)

assets/js/components/Loadpoint.vue

@@ -84,12 +84,6 @@ export default {
 		pvRemaining: Number,
 		pvAction: String,
 	},
-	data: function () {
-		return {
-			tickerHandle: null,
-			chargeDurationDisplayed: null,
-		};
-	},
 	computed: {
 		details: function () {
 			return this.collectProps(LoadpointDetails);
@@ -98,24 +92,6 @@ export default {
 			return this.collectProps(Vehicle);
 		},
 	},
-	watch: {
-		chargeDuration: function () {
-			window.clearInterval(this.tickerHandle);
-			// only ticker if actually charging
-			if (this.charging && this.chargeDuration >= 0) {
-				this.chargeDurationDisplayed = this.chargeDuration;
-				this.tickerHandle = window.setInterval(
-					function () {
-						this.chargeDurationDisplayed += 1;
-					}.bind(this),
-					1000
-				);
-			}
-		},
-	},
-	destroyed: function () {
-		window.clearInterval(this.tickerHandle);
-	},
 	methods: {
 		api: function (func) {
 			return "loadpoints/" + this.id + "/" + func;

assets/js/components/LoadpointDetails.vue

@@ -41,7 +41,7 @@
 							v-if="pvTimerVisible"
 							v-tooltip="{
 								content: $t(`main.loadpointDetails.tooltip.pv.${pvAction}`, {
-									remaining: fmtRemaining(pvRemaining),
+									remaining: fmtShortDuration(pvRemainingInterpolated, true),
 								}),
 							}"
 							class="cursor-pointer d-inline-block px-2"
@@ -75,17 +75,19 @@
 			<div v-else class="col-6 col-sm-3 col-lg-2 mt-3">
 				<div class="mb-2 value">{{ $t("main.loadpointDetails.duration") }}</div>
 				<h3 class="value">
-					{{ fmtShortDuration(chargeDuration) }}
-					<small class="text-muted">{{ fmtShortDurationUnit(chargeDuration) }}</small>
+					{{ fmtShortDuration(chargeDurationInterpolated) }}
+					<small class="text-muted">{{
+						fmtShortDurationUnit(chargeDurationInterpolated)
+					}}</small>
 				</h3>
 			</div>
 
 			<div v-if="vehiclePresent" class="col-6 col-sm-3 col-lg-2 mt-3">
 				<div class="mb-2 value">{{ $t("main.loadpointDetails.remaining") }}</div>
 				<h3 class="value">
-					{{ fmtShortDuration(chargeRemainingDuration) }}
+					{{ fmtShortDuration(chargeRemainingDurationInterpolated) }}
 					<small class="text-muted">{{
-						fmtShortDurationUnit(chargeRemainingDuration)
+						fmtShortDurationUnit(chargeRemainingDurationInterpolated, true)
 					}}</small>
 				</h3>
 			</div>
@@ -115,28 +117,43 @@ export default {
 		phaseAction: String,
 		pvRemaining: Number,
 		pvAction: String,
+		charging: Boolean,
+	},
+	data() {
+		return {
+			tickerHandler: null,
+			phaseRemainingInterpolated: this.phaseRemaining,
+			pvRemainingInterpolated: this.pvRemaining,
+			chargeDurationInterpolated: this.chargeDuration,
+			chargeRemainingDurationInterpolated: this.chargeRemainingDuration,
+		};
 	},
 	computed: {
 		phaseTooltip() {
 			if (["scale1p", "scale3p"].includes(this.phaseAction)) {
 				return this.$t(`main.loadpointDetails.tooltip.phases.${this.phaseAction}`, {
-					remaining: this.fmtRemaining(this.phaseRemaining),
+					remaining: this.fmtShortDuration(this.phaseRemainingInterpolated, true),
 				});
 			}
 			return this.$t(`main.loadpointDetails.tooltip.phases.charge${this.activePhases}p`);
 		},
 		phaseTimerActive() {
-			return this.phaseRemaining > 0 && ["scale1p", "scale3p"].includes(this.phaseAction);
+			return (
+				this.phaseRemainingInterpolated > 0 &&
+				["scale1p", "scale3p"].includes(this.phaseAction)
+			);
 		},
 		pvTimerActive() {
-			return this.pvRemaining > 0 && ["enable", "disable"].includes(this.pvAction);
+			return (
+				this.pvRemainingInterpolated > 0 && ["enable", "disable"].includes(this.pvAction)
+			);
 		},
 		phaseTimerVisible() {
 			if (this.phaseTimerActive && !this.pvTimerActive) {
 				return true;
 			}
 			if (this.phaseTimerActive && this.pvTimerActive) {
-				return this.phaseRemaining < this.pvRemaining; // only show next timer
+				return this.phaseRemainingInterpolated < this.pvRemainingInterpolated; // only show next timer
 			}
 			return false;
 		},
@@ -145,14 +162,45 @@ export default {
 				return true;
 			}
 			if (this.pvTimerActive && this.phaseTimerActive) {
-				return this.pvRemaining < this.phaseRemaining; // only show next timer
+				return this.pvRemainingInterpolated < this.phaseRemainingInterpolated; // only show next timer
 			}
 			return false;
 		},
 	},
+	watch: {
+		phaseRemaining() {
+			this.phaseRemainingInterpolated = this.phaseRemaining;
+		},
+		pvRemaining() {
+			this.pvRemainingInterpolated = this.pvRemaining;
+		},
+		chargeDuration() {
+			this.chargeDurationInterpolated = this.chargeDuration;
+		},
+		chargeRemainingDuration() {
+			this.chargeDurationInterpolated = this.chargeRemainingDuration;
+		},
+	},
+	mounted() {
+		this.tickerHandler = setInterval(this.tick, 1000);
+	},
+	destroyed() {
+		clearInterval(this.tickerHandler);
+	},
 	methods: {
-		fmtRemaining(remaining) {
-			return remaining > 0 ? this.fmtTimeAgo(new Date(Date.now() + remaining * 1000)) : null;
+		tick() {
+			if (this.phaseRemainingInterpolated > 0) {
+				this.phaseRemainingInterpolated--;
+			}
+			if (this.pvRemainingInterpolated > 0) {
+				this.pvRemainingInterpolated--;
+			}
+			if (this.chargeDurationInterpolated > 0 && this.charging) {
+				this.chargeDurationInterpolated++;
+			}
+			if (this.chargeRemainingDurationInterpolated > 0 && this.charging) {
+				this.chargeRemainingDurationInterpolated--;
+			}
 		},
 	},
 };

assets/js/i18n/de.js

@@ -94,15 +94,15 @@ export default {
       remaining: "Restzeit",
       tooltip: {
         phases: {
-          scale1p: "Herunterschalten auf einphasig {remaining}.",
-          scale3p: "Hochschalten auf dreiphasig {remaining}.",
+          scale1p: "Herunterschalten auf einphasig in {remaining}.",
+          scale3p: "Hochschalten auf dreiphasig in {remaining}.",
           charge1p: "Lädt einphasig.",
           charge2p: "Lädt zweiphasig.",
           charge3p: "Lädt dreiphasig.",
         },
         pv: {
-          enable: "Überschuss verfügbar. Ladung startet {remaining}.",
-          disable: "Zu wenig Überschuss. Ladung pausiert {remaining}.",
+          enable: "Überschuss verfügbar. Ladung startet in {remaining}.",
+          disable: "Zu wenig Überschuss. Ladung pausiert in {remaining}.",
         },
       },
     },

assets/js/mixins/formatter.js

@@ -43,31 +43,39 @@ export default {
       }
       return hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
     },
-    fmtShortDuration: function (d) {
-      if (d <= 0 || d == null) {
+    fmtShortDuration: function (duration = 0, withUnit = false) {
+      if (duration <= 0) {
         return "—";
       }
-      var minutes = Math.floor(d / 60) % 60;
-      var hours = Math.floor(d / 3600);
-      var tm;
+      var seconds = duration % 60;
+      var minutes = Math.floor(duration / 60) % 60;
+      var hours = Math.floor(duration / 3600);
+      var result = "";
       if (hours >= 1) {
-        minutes = "0" + minutes;
-        tm = hours + ":" + minutes.substr(-2);
+        result = hours + ":" + `${minutes}`.padStart(2, "0");
+      } else if (minutes >= 1) {
+        result = minutes + ":" + `${seconds}`.padStart(2, "0");
       } else {
-        var seconds = "0" + (d % 60);
-        tm = minutes + ":" + seconds.substr(-2);
+        result = `${seconds}`;
       }
-      return tm;
+      if (withUnit) {
+        result += this.fmtShortDurationUnit(duration);
+      }
+      return result;
     },
-    fmtShortDurationUnit: function (d) {
-      if (d <= 0 || d == null) {
+    fmtShortDurationUnit: function (duration = 0) {
+      if (duration <= 0) {
         return "";
       }
-      var hours = Math.floor(d / 3600);
+      var minutes = Math.floor(duration / 60) % 60;
+      var hours = Math.floor(duration / 3600);
       if (hours >= 1) {
         return "h";
       }
-      return "m";
+      if (minutes >= 1) {
+        return "m";
+      }
+      return "s";
     },
     fmtDayString: function (date) {
       const YY = `${date.getFullYear()}`;

dist/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="EV Charge Controller"><meta name="author" content="andig"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]"><link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]"><link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]"><link rel="manifest" href="ico/site.webmanifest"><link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a"><link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]"><meta name="apple-mobile-web-app-title" content="evcc"><meta name="application-name" content="evcc"><meta name="msapplication-TileColor" content="#18191a"><meta name="msapplication-config" content="ico/browserconfig.xml"><meta name="theme-color" content="#18191a"><title>evcc</title><link href="css/chunk-vendors.a7b690cd.css" rel="preload" as="style"><link href="css/index.801eac99.css" rel="preload" as="style"><link href="js/chunk-vendors.e8d8381a.js" rel="preload" as="script"><link href="js/index.0a569798.js" rel="preload" as="script"><link href="css/chunk-vendors.a7b690cd.css" rel="stylesheet"><link href="css/index.801eac99.css" rel="stylesheet"></head><body><script>window.evcc = {
+<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="EV Charge Controller"><meta name="author" content="andig"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png?[[.Version]]"><link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png?[[.Version]]"><link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png?[[.Version]]"><link rel="manifest" href="ico/site.webmanifest"><link rel="mask-icon" href="ico/safari-pinned-tab.svg?[[.Version]]" color="#18191a"><link rel="shortcut icon" href="ico/favicon.ico?[[.Version]]"><meta name="apple-mobile-web-app-title" content="evcc"><meta name="application-name" content="evcc"><meta name="msapplication-TileColor" content="#18191a"><meta name="msapplication-config" content="ico/browserconfig.xml"><meta name="theme-color" content="#18191a"><title>evcc</title><link href="css/chunk-vendors.a7b690cd.css" rel="preload" as="style"><link href="css/index.801eac99.css" rel="preload" as="style"><link href="js/chunk-vendors.e8d8381a.js" rel="preload" as="script"><link href="js/index.089c55bd.js" rel="preload" as="script"><link href="css/chunk-vendors.a7b690cd.css" rel="stylesheet"><link href="css/index.801eac99.css" rel="stylesheet"></head><body><script>window.evcc = {
         version: "[[.Version]]",
         configured: "[[.Configured]]",
-      };</script><div id="app"></div><script src="js/chunk-vendors.e8d8381a.js"></script><script src="js/index.0a569798.js"></script></body></html>
+      };</script><div id="app"></div><script src="js/chunk-vendors.e8d8381a.js"></script><script src="js/index.089c55bd.js"></script></body></html>