{{ $t("main.loadpointDetails.remaining") }}
- {{ fmtShortDuration(chargeRemainingDuration) }}
+ {{ fmtShortDuration(chargeRemainingDurationInterpolated) }}
{{
- fmtShortDurationUnit(chargeRemainingDuration)
+ fmtShortDurationUnit(chargeRemainingDurationInterpolated, true)
}}
@@ -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--;
+ }
},
},
};
diff --git a/assets/js/i18n/de.js b/assets/js/i18n/de.js
index 684d1ba19..f568970ca 100644
--- a/assets/js/i18n/de.js
+++ b/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}.",
},
},
},
diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js
index 099fb532a..c6234b952 100644
--- a/assets/js/mixins/formatter.js
+++ b/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()}`;
diff --git a/dist/index.html b/dist/index.html
index 1b9d8b15b..56ac90fb6 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,4 +1,4 @@
-