From fb4dde7ce67f0a1cb4f7c9d539b6a6f406426b90 Mon Sep 17 00:00:00 2001 From: Michael Geers Date: Sun, 25 Apr 2021 19:01:12 +0200 Subject: [PATCH] Cleanup ui layout (#835) --- assets/index.html | 2 +- assets/js/components/Loadpoint.stories.js | 25 ++- assets/js/components/Loadpoint.vue | 165 +++----------- assets/js/components/LoadpointDetails.vue | 105 ++++----- assets/js/components/Mode.vue | 67 +++--- assets/js/components/Site.stories.js | 33 ++- assets/js/components/Site.vue | 44 ++-- assets/js/components/SiteDetails.vue | 39 ++-- assets/js/components/Soc.stories.js | 26 --- assets/js/components/Soc.vue | 41 ---- assets/js/components/Vehicle.stories.js | 4 + assets/js/components/Vehicle.vue | 173 ++------------- assets/js/components/VehicleSoc.vue | 251 ++++++++++++++++++++++ assets/js/components/VehicleSubline.vue | 53 +++++ assets/js/mixins/formatter.js | 35 ++- assets/js/views/App.vue | 8 +- core/loadpoint.go | 9 - dist/css/index.3b453e73.css | 1 - dist/css/index.9b973d78.css | 1 + dist/index.html | 4 +- dist/js/index.9bd6ba1b.js | 2 + dist/js/index.9bd6ba1b.js.map | 1 + dist/js/index.eb5cb609.js | 2 - dist/js/index.eb5cb609.js.map | 1 - evcc.dist.yaml | 5 - schema.json | 8 +- server/http.go | 2 +- 27 files changed, 564 insertions(+), 543 deletions(-) delete mode 100644 assets/js/components/Soc.stories.js delete mode 100644 assets/js/components/Soc.vue create mode 100644 assets/js/components/VehicleSoc.vue create mode 100644 assets/js/components/VehicleSubline.vue delete mode 100644 dist/css/index.3b453e73.css create mode 100644 dist/css/index.9b973d78.css create mode 100644 dist/js/index.9bd6ba1b.js create mode 100644 dist/js/index.9bd6ba1b.js.map delete mode 100644 dist/js/index.eb5cb609.js delete mode 100644 dist/js/index.eb5cb609.js.map diff --git a/assets/index.html b/assets/index.html index 5ca101ba8..0c56d7b64 100644 --- a/assets/index.html +++ b/assets/index.html @@ -1,5 +1,5 @@ - + diff --git a/assets/js/components/Loadpoint.stories.js b/assets/js/components/Loadpoint.stories.js index a7cabc4e2..7446d9ec6 100644 --- a/assets/js/components/Loadpoint.stories.js +++ b/assets/js/components/Loadpoint.stories.js @@ -5,6 +5,7 @@ export default { component: Loadpoint, argTypes: { mode: { control: { type: "inline-radio", options: ["off", "now", "minpv", "pv"] } }, + remoteDisabled: { control: { type: "radio", options: ["", "soft", "hard"] } }, climater: { control: { type: "inline-radio", options: ["on", "heating", "cooling"] } }, }, }; @@ -19,11 +20,29 @@ export const Base = Template.bind({}); Base.args = { id: 0, pvConfigured: true, + chargePower: 2800, + chargedEnergy: 11e3, + chargeDuration: 95 * 60, + hasVehicle: true, + socTitle: "Mein Auto", + enabled: true, + connected: true, + charging: true, + socCharge: 66, + targetSoC: 90, }; -export const WithLevels = Template.bind({}); -WithLevels.args = { +export const Disabled = Template.bind({}); +Disabled.args = { id: 0, pvConfigured: true, - socLevels: [20, 50, 80, 100], + remoteDisabled: "soft", + remoteDisabledSource: "Sunny Home Manager", + hasVehicle: true, + socTitle: "Mein Auto", + enabled: true, + connected: true, + charging: false, + socCharge: 66, + targetSoC: 100, }; diff --git a/assets/js/components/Loadpoint.vue b/assets/js/components/Loadpoint.vue index d00d41535..782fd0f2d 100644 --- a/assets/js/components/Loadpoint.vue +++ b/assets/js/components/Loadpoint.vue @@ -1,143 +1,32 @@ + + diff --git a/assets/js/components/Site.stories.js b/assets/js/components/Site.stories.js index 6aae9511d..97274484b 100644 --- a/assets/js/components/Site.stories.js +++ b/assets/js/components/Site.stories.js @@ -36,7 +36,19 @@ Single.args = { loadpoints: [ { title: "Ladepunkt 1", - socLevels: [20, 50, 80, 100], + mode: "now", + socTitle: "Mein Auto", + enabled: true, + connected: true, + hasVehicle: true, + charging: true, + socCharge: 66, + targetSoC: 90, + range: 344, + chargeEstimate: 999, + chargePower: 11232, + chargeDuration: 123982, + chargedEnergy: 23213, }, ], }; @@ -45,18 +57,31 @@ export const Multi = Template.bind({}); Multi.args = { gridConfigured: true, pvConfigured: true, - gridPower: 100, + gridPower: -100, pvPower: 100, batteryConfigured: true, batteryPower: 100, - batterySoC: 0, + batterySoC: 60, loadpoints: [ { title: "Ladepunkt 1", - socLevels: [20, 50, 80, 100], + mode: "now", + socTitle: "Mein Auto", + enabled: true, + connected: true, + hasVehicle: true, + charging: true, + socCharge: 66, + targetSoC: 90, + range: 344, + chargeEstimate: 999, + chargePower: 11232, + chargeDuration: 123982, + chargedEnergy: 23213, }, { title: "Ladepunkt 2", + mode: "pv", }, ], }; diff --git a/assets/js/components/Site.vue b/assets/js/components/Site.vue index 299f6ae34..aa593434e 100644 --- a/assets/js/components/Site.vue +++ b/assets/js/components/Site.vue @@ -1,32 +1,26 @@ @@ -50,6 +44,8 @@ export default { batteryConfigured: Boolean, batteryPower: Number, batterySoC: Number, + gridCurrents: Object, + prioritySoC: Number, }, components: { SiteDetails, Loadpoint }, mixins: [formatter, collector], @@ -57,10 +53,6 @@ export default { details: function () { return this.collectProps(SiteDetails); }, - multi: function () { - // TODO fix compact - return this.loadpoints.length > 1 /* || app.compact*/; - }, }, }; diff --git a/assets/js/components/SiteDetails.vue b/assets/js/components/SiteDetails.vue index b9412423f..abe8839e4 100644 --- a/assets/js/components/SiteDetails.vue +++ b/assets/js/components/SiteDetails.vue @@ -1,18 +1,19 @@ @@ -74,6 +78,13 @@ export default { }, mixins: [formatter], computed: { + numberOfPanels: function () { + let count = 0; + if (this.gridConfigured) count++; + if (this.pvConfigured) count++; + if (this.batteryConfigured) count++; + return count; + }, batteryIcon: function () { if (Math.abs(this.batteryPower) < limit) { if (this.batterySoC < 30) return icons[0]; diff --git a/assets/js/components/Soc.stories.js b/assets/js/components/Soc.stories.js deleted file mode 100644 index 9bd0633e6..000000000 --- a/assets/js/components/Soc.stories.js +++ /dev/null @@ -1,26 +0,0 @@ -import Soc from "./Soc.vue"; - -export default { - title: "Main/Soc", - component: Soc, - argTypes: {}, -}; - -const Template = (args, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { Soc }, - template: '', -}); - -export const Base = Template.bind({}); -Base.args = { - soc: 80, - levels: [20, 50, 80, 100], -}; - -export const Caption = Template.bind({}); -Caption.args = { - caption: true, - soc: 80, - levels: [20, 50, 80, 100], -}; diff --git a/assets/js/components/Soc.vue b/assets/js/components/Soc.vue deleted file mode 100644 index 240c3a8d0..000000000 --- a/assets/js/components/Soc.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - diff --git a/assets/js/components/Vehicle.stories.js b/assets/js/components/Vehicle.stories.js index bfc19bcc7..ad71a6c45 100644 --- a/assets/js/components/Vehicle.stories.js +++ b/assets/js/components/Vehicle.stories.js @@ -30,6 +30,7 @@ Connected.args = { hasVehicle: true, charging: false, socCharge: 66, + targetSoC: 90, }; export const ReadyToCharge = Template.bind({}); @@ -40,6 +41,7 @@ ReadyToCharge.args = { hasVehicle: true, charging: false, socCharge: 66, + targetSoC: 90, }; export const Charging = Template.bind({}); @@ -50,6 +52,7 @@ Charging.args = { hasVehicle: true, charging: true, socCharge: 66, + targetSoC: 90, }; const hoursFromNow = function (hours) { @@ -97,6 +100,7 @@ MinCharge.args = { socCharge: 17, minSoC: 20, charging: true, + targetSoC: 90, }; export const UnknownVehicleConnected = Template.bind({}); diff --git a/assets/js/components/Vehicle.vue b/assets/js/components/Vehicle.vue index 85c8b30db..371d20922 100644 --- a/assets/js/components/Vehicle.vue +++ b/assets/js/components/Vehicle.vue @@ -1,189 +1,48 @@ - diff --git a/assets/js/components/VehicleSoc.vue b/assets/js/components/VehicleSoc.vue new file mode 100644 index 000000000..c79200d35 --- /dev/null +++ b/assets/js/components/VehicleSoc.vue @@ -0,0 +1,251 @@ + + + + diff --git a/assets/js/components/VehicleSubline.vue b/assets/js/components/VehicleSubline.vue new file mode 100644 index 000000000..4f4cc913a --- /dev/null +++ b/assets/js/components/VehicleSubline.vue @@ -0,0 +1,53 @@ + + + diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js index 40c73ffcb..28af4c6aa 100644 --- a/assets/js/mixins/formatter.js +++ b/assets/js/mixins/formatter.js @@ -58,34 +58,23 @@ export default { } return "m"; }, + fmtDayString: function (date) { + const YY = `${date.getFullYear()}`; + const MM = `${date.getMonth() + 1}`.padStart(2, "0"); + const DD = `${date.getDate()}`.padStart(2, "0"); + return `${YY}-${MM}-${DD}`; + }, + fmtTimeString: function (date) { + const HH = `${date.getHours()}`.padStart(2, "0"); + const mm = `${date.getMinutes()}`.padStart(2, "0"); + return `${HH}:${mm}`; + }, fmtAbsoluteDate: function (date) { - return new Intl.DateTimeFormat("de-DE", { + return new Intl.DateTimeFormat("default", { weekday: "short", hour: "numeric", minute: "numeric", }).format(date); }, - fmtRelativeTime: function (date) { - var units = { - year: 24 * 60 * 60 * 1000 * 365, - month: (24 * 60 * 60 * 1000 * 365) / 12, - day: 24 * 60 * 60 * 1000, - hour: 60 * 60 * 1000, - minute: 60 * 1000, - second: 1000, - }; - - var rtf = new Intl.RelativeTimeFormat("de", { numeric: "auto", style: "narrow" }); - - var getRelativeTime = (d1, d2 = new Date()) => { - var elapsed = d1 - d2; - - // "Math.abs" accounts for both "past" & "future" scenarios - for (var u in units) - if (Math.abs(elapsed) > units[u] || u == "second") - return rtf.format(Math.round(elapsed / units[u]), u); - }; - return getRelativeTime(date); - }, }, }; diff --git a/assets/js/views/App.vue b/assets/js/views/App.vue index e8b0efcdd..5d8fc48a6 100644 --- a/assets/js/views/App.vue +++ b/assets/js/views/App.vue @@ -1,6 +1,6 @@