From 5c719fcb03f2cf776a08b9937f3b072509875d4b Mon Sep 17 00:00:00 2001 From: Michael Geers Date: Tue, 12 Jul 2022 22:06:02 +0200 Subject: [PATCH] Animate changing values in UI (#3779) --- assets/js/app.js | 2 + assets/js/components/AnimatedNumber.vue | 23 ++++ .../js/components/Energyflow/Energyflow.vue | 11 +- .../components/Energyflow/EnergyflowEntry.vue | 8 +- .../components/Energyflow/Visualization.vue | 47 ++++---- assets/js/components/LabelAndValue.vue | 26 ++++- assets/js/components/Loadpoint.vue | 19 ++- assets/js/components/TargetCharge.vue | 2 +- assets/js/components/TargetSoCSelect.vue | 31 +++-- assets/js/components/Vehicle.vue | 3 +- dist/assets/index.0f8a9c87.js | 109 ++++++++++++++++++ dist/assets/index.33cb7319.js | 93 --------------- ...{index.1555a0f0.css => index.955a5e82.css} | 2 +- dist/index.html | 4 +- package-lock.json | 27 +++++ package.json | 1 + 16 files changed, 258 insertions(+), 150 deletions(-) create mode 100644 assets/js/components/AnimatedNumber.vue create mode 100644 dist/assets/index.0f8a9c87.js delete mode 100644 dist/assets/index.33cb7319.js rename dist/assets/{index.1555a0f0.css => index.955a5e82.css} (96%) diff --git a/assets/js/app.js b/assets/js/app.js index 0d7d12d78..2aa49e64d 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -6,6 +6,7 @@ import { createApp, h } from "vue"; import { createMetaManager, plugin as metaPlugin } from "vue-meta"; import api from "./api"; import App from "./views/App.vue"; +import VueNumber from "vue-number-animation"; import router from "./router"; import i18n from "./i18n"; import featureflags from "./featureflags"; @@ -68,6 +69,7 @@ app.use(router); app.use(createMetaManager()); app.use(metaPlugin); app.use(featureflags); +app.use(VueNumber); window.app = app.mount("#app"); window.setInterval(function () { diff --git a/assets/js/components/AnimatedNumber.vue b/assets/js/components/AnimatedNumber.vue new file mode 100644 index 000000000..96f7e4242 --- /dev/null +++ b/assets/js/components/AnimatedNumber.vue @@ -0,0 +1,23 @@ + + + diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue index ad81eb13c..f7bd6b170 100644 --- a/assets/js/components/Energyflow/Energyflow.vue +++ b/assets/js/components/Energyflow/Energyflow.vue @@ -46,7 +46,9 @@ >

In

- {{ kw(inPower) }} + + +

Out

- {{ kw(outPower) }} + + +
{{ name }} {{ soc }}% / {{ kw(power) }} + >{{ soc }}% / + +
@@ -18,10 +19,11 @@ import "@h2d2/shopicons/es/regular/home"; import "@h2d2/shopicons/es/regular/car3"; import BatteryIcon from "./BatteryIcon.vue"; import formatter from "../../mixins/formatter"; +import AnimatedNumber from "../AnimatedNumber.vue"; export default { name: "EnergyflowEntry", - components: { BatteryIcon }, + components: { BatteryIcon, AnimatedNumber }, mixins: [formatter], props: { name: { type: String }, diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue index 08f1dd7c6..15dec63aa 100644 --- a/assets/js/components/Energyflow/Visualization.vue +++ b/assets/js/components/Energyflow/Visualization.vue @@ -19,34 +19,34 @@ class="site-progress-bar self-consumption" :style="{ width: widthTotal(selfConsumptionAdjusted) }" > - - {{ kw(selfConsumption) }} - - - {{ kwNoUnit(selfConsumption) }} - +
- - {{ kw(gridImport) }} - - - {{ kwNoUnit(gridImport) }} - +
- - {{ kw(pvExport) }} - - - {{ kwNoUnit(pvExport) }} - +
{{ $t("main.energyflow.noEnergy") }} @@ -76,13 +76,14 @@ import formatter from "../../mixins/formatter"; import BatteryIcon from "./BatteryIcon.vue"; import LabelBar from "./LabelBar.vue"; +import AnimatedNumber from "../AnimatedNumber.vue"; import "@h2d2/shopicons/es/regular/car3"; import "@h2d2/shopicons/es/regular/sun"; import "@h2d2/shopicons/es/regular/home"; export default { name: "Visualization", - components: { BatteryIcon, LabelBar }, + components: { BatteryIcon, LabelBar, AnimatedNumber }, mixins: [formatter], props: { gridImport: { type: Number, default: 0 }, @@ -141,11 +142,9 @@ export default { if (this.totalAdjusted === 0) return "0%"; return (100 / this.totalAdjusted) * power + "%"; }, - kw: function (watt) { - return this.fmtKw(watt, this.valuesInKw, true); - }, - kwNoUnit: function (watt) { - return this.fmtKw(watt, this.valuesInKw, false); + fmtBarValue: function (watt) { + const valueInKw = this.powerLabelEnoughSpace(watt); + return this.fmtKw(watt, this.valuesInKw, valueInKw); }, powerLabelAvailableSpace(power) { if (this.totalAdjusted === 0) return 0; diff --git a/assets/js/components/LabelAndValue.vue b/assets/js/components/LabelAndValue.vue index e8d9ea55a..ecaa98b7a 100644 --- a/assets/js/components/LabelAndValue.vue +++ b/assets/js/components/LabelAndValue.vue @@ -1,24 +1,38 @@ diff --git a/assets/js/components/Loadpoint.vue b/assets/js/components/Loadpoint.vue index 9179a4978..b52165621 100644 --- a/assets/js/components/Loadpoint.vue +++ b/assets/js/components/Loadpoint.vue @@ -33,8 +33,10 @@
- +

@@ -157,9 +165,6 @@ export default { vehicle: function () { return this.collectProps(Vehicle); }, - formatChargePowerInKw: function () { - return this.chargePower == 0 || this.chargePower >= 1000; - }, }, watch: { phaseRemaining() { @@ -211,6 +216,10 @@ export default { removeTargetTime: function () { api.delete(this.apiPath("targetcharge")); }, + fmtkWUnit(value) { + const inKw = value == 0 || value >= 1000; + return this.fmtKw(value, inKw); + }, }, }; diff --git a/assets/js/components/TargetCharge.vue b/assets/js/components/TargetCharge.vue index 4a89c93fb..49557c30f 100644 --- a/assets/js/components/TargetCharge.vue +++ b/assets/js/components/TargetCharge.vue @@ -7,7 +7,7 @@ >