From e175570119e037f7e8091a5bb0dfe5bdfb6ae6dc Mon Sep 17 00:00:00 2001 From: Lutz Bender Date: Thu, 6 Jul 2023 09:51:08 +0200 Subject: [PATCH] cards display theme: add manual soc input --- .../ChargePoints/ManualSocInput.vue | 184 ++++++++++++++++++ .../cards/source/src/stores/mqtt.js | 5 + .../source/src/views/ChargePointsView.vue | 114 ++++++----- ...2c.js => ChargePointPlugBadge-b24b7772.js} | 2 +- .../web/assets/ChargePointsView-0a8166ae.js | 1 - .../web/assets/ChargePointsView-39525d2d.css | 1 + .../web/assets/ChargePointsView-5747955a.css | 1 - .../web/assets/ChargePointsView-ad6342d8.js | 1 + ...-5e5d81e0.js => DashBoardView-ec89d659.js} | 2 +- ...iew-7239dfa3.js => StatusView-27618a07.js} | 2 +- .../{index-36ed2cd7.js => index-08d5fe3a.js} | 4 +- .../display_themes/cards/web/index.html | 2 +- 12 files changed, 260 insertions(+), 59 deletions(-) create mode 100644 packages/modules/display_themes/cards/source/src/components/ChargePoints/ManualSocInput.vue rename packages/modules/display_themes/cards/web/assets/{ChargePointPlugBadge-78f3382c.js => ChargePointPlugBadge-b24b7772.js} (98%) delete mode 100644 packages/modules/display_themes/cards/web/assets/ChargePointsView-0a8166ae.js create mode 100644 packages/modules/display_themes/cards/web/assets/ChargePointsView-39525d2d.css delete mode 100644 packages/modules/display_themes/cards/web/assets/ChargePointsView-5747955a.css create mode 100644 packages/modules/display_themes/cards/web/assets/ChargePointsView-ad6342d8.js rename packages/modules/display_themes/cards/web/assets/{DashBoardView-5e5d81e0.js => DashBoardView-ec89d659.js} (97%) rename packages/modules/display_themes/cards/web/assets/{StatusView-7239dfa3.js => StatusView-27618a07.js} (86%) rename packages/modules/display_themes/cards/web/assets/{index-36ed2cd7.js => index-08d5fe3a.js} (75%) diff --git a/packages/modules/display_themes/cards/source/src/components/ChargePoints/ManualSocInput.vue b/packages/modules/display_themes/cards/source/src/components/ChargePoints/ManualSocInput.vue new file mode 100644 index 0000000000..4beda22325 --- /dev/null +++ b/packages/modules/display_themes/cards/source/src/components/ChargePoints/ManualSocInput.vue @@ -0,0 +1,184 @@ + + + + + diff --git a/packages/modules/display_themes/cards/source/src/stores/mqtt.js b/packages/modules/display_themes/cards/source/src/stores/mqtt.js index 98ae71b505..4a1ac8b476 100644 --- a/packages/modules/display_themes/cards/source/src/stores/mqtt.js +++ b/packages/modules/display_themes/cards/source/src/stores/mqtt.js @@ -611,6 +611,11 @@ export const useMqttStore = defineStore("mqtt", { getVehicleList(state) { return state.getWildcardTopics("openWB/vehicle/+/name"); }, + getVehicleName(state) { + return (vehicleId) => { + return state.topics[`openWB/vehicle/${vehicleId}/name`]; + }; + }, getVehicleSocConfigured(state) { return (vehicleId) => { return ( diff --git a/packages/modules/display_themes/cards/source/src/views/ChargePointsView.vue b/packages/modules/display_themes/cards/source/src/views/ChargePointsView.vue index 2cb589b2ac..500ccde7f3 100644 --- a/packages/modules/display_themes/cards/source/src/views/ChargePointsView.vue +++ b/packages/modules/display_themes/cards/source/src/views/ChargePointsView.vue @@ -5,6 +5,7 @@ import SparkLine from "@/components/SparkLine.vue"; import ChargePointPlugBadge from "@/components/ChargePointPlugBadge.vue"; import ChargePointLockButton from "@/components/ChargePointLockButton.vue"; import ExtendedNumberInput from "@/components/ExtendedNumberInput.vue"; +import ManualSocInput from "@/components/ChargePoints/ManualSocInput.vue"; /* fontawesome */ import { library } from "@fortawesome/fontawesome-svg-core"; @@ -63,8 +64,10 @@ export default { return { mqttStore: useMqttStore(), modalChargePointSettingsVisible: false, - modalChargePointSettingsId: 0, + modalChargePointId: 0, + modalVehicleId: 0, modalActiveTab: "tab-general", + modalManualSocInputVisible: false, }; }, props: { @@ -76,6 +79,7 @@ export default { ChargePointPlugBadge, ChargePointLockButton, ExtendedNumberInput, + ManualSocInput, FontAwesomeIcon, }, computed: { @@ -95,16 +99,17 @@ export default { methods: { toggleChargePointSettings(id) { // reset selected tab if selecting different charge point - if (this.modalChargePointSettingsId != id) { + if (this.modalChargePointId != id) { this.modalActiveTab = "tab-general"; } - this.modalChargePointSettingsId = id; + this.modalChargePointId = id; this.modalChargePointSettingsVisible = true; }, handleSocClick(id) { let vehicle_id = this.mqttStore.getChargePointConnectedVehicleId(id); if (this.mqttStore.getVehicleSocIsManual(vehicle_id)) { - console.log("ToDo: manual SoC input"); + this.modalVehicleId = vehicle_id; + this.modalManualSocInputVisible = true; return; } this.$root.sendTopicToBroker( @@ -356,7 +361,11 @@ export default { " class="_flex-grow:0 _padding-right:0 _padding-left:1" > - + @@ -503,22 +513,17 @@ export default { size="lg" :disabled=" !mqttStore.getChargePointVehicleChangePermitted( - modalChargePointSettingsId + modalChargePointId ) " :model-value=" - mqttStore.getChargePointConnectedVehicleInfo( - modalChargePointSettingsId - ) + mqttStore.getChargePointConnectedVehicleInfo(modalChargePointId) " label="name" :options="vehicleList" placeholder="Bitte auswählen.." @update:model-value=" - setChargePointConnectedVehicle( - modalChargePointSettingsId, - $event - ) + setChargePointConnectedVehicle(modalChargePointId, $event) " /> @@ -528,13 +533,13 @@ export default { size="lg" :model-value=" mqttStore.getChargePointConnectedVehicleChargeMode( - modalChargePointSettingsId + modalChargePointId ) " placeholder="Bitte auswählen.." @update:model-value=" setChargePointConnectedVehicleChargeMode( - modalChargePointSettingsId, + modalChargePointId, $event ) " @@ -558,12 +563,12 @@ export default { size="lg" :model-value=" mqttStore.getChargePointConnectedVehiclePriority( - modalChargePointSettingsId + modalChargePointId ) " @update:model-value=" setChargePointConnectedVehiclePriority( - modalChargePointSettingsId, + modalChargePointId, $event ) " @@ -578,12 +583,12 @@ export default { size="lg" :model-value=" mqttStore.getChargePointConnectedVehicleTimeChargingActive( - modalChargePointSettingsId + modalChargePointId ) " @update:model-value=" setChargePointConnectedVehicleTimeChargingActive( - modalChargePointSettingsId, + modalChargePointId, $event ) " @@ -602,12 +607,12 @@ export default { :max="32" :model-value=" mqttStore.getChargePointConnectedVehicleInstantChargingCurrent( - modalChargePointSettingsId + modalChargePointId ) " @update:model-value=" setChargePointConnectedVehicleInstantChargingCurrent( - modalChargePointSettingsId, + modalChargePointId, $event ) " @@ -619,19 +624,19 @@ export default { @@ -699,12 +704,12 @@ export default { :step="5" :model-value=" mqttStore.getChargePointConnectedVehicleInstantChargingLimit( - modalChargePointSettingsId + modalChargePointId ).soc " @update:model-value=" setChargePointConnectedVehicleInstantChargingLimitSoc( - modalChargePointSettingsId, + modalChargePointId, $event ) " @@ -713,7 +718,7 @@ export default { @@ -724,12 +729,12 @@ export default { :max="100" :model-value=" mqttStore.getChargePointConnectedVehicleInstantChargingLimit( - modalChargePointSettingsId + modalChargePointId ).amount / 1000 " @update:model-value=" setChargePointConnectedVehicleInstantChargingLimitAmount( - modalChargePointSettingsId, + modalChargePointId, $event * 1000 ) " @@ -747,12 +752,12 @@ export default { size="lg" :model-value=" mqttStore.getChargePointConnectedVehiclePvChargingFeedInLimit( - modalChargePointSettingsId + modalChargePointId ) " @update:model-value=" setChargePointConnectedVehiclePvChargingFeedInLimit( - modalChargePointSettingsId, + modalChargePointId, $event ) " @@ -778,12 +783,12 @@ export default { ]" :model-value=" mqttStore.getChargePointConnectedVehiclePvChargingMinCurrent( - modalChargePointSettingsId + modalChargePointId ) " @update:model-value=" setChargePointConnectedVehiclePvChargingMinCurrent( - modalChargePointSettingsId, + modalChargePointId, $event ) " @@ -817,12 +822,12 @@ export default { ]" :model-value=" mqttStore.getChargePointConnectedVehiclePvChargingMinSoc( - modalChargePointSettingsId + modalChargePointId ) " @update:model-value=" setChargePointConnectedVehiclePvChargingMinSoc( - modalChargePointSettingsId, + modalChargePointId, $event ) " @@ -836,12 +841,12 @@ export default { unit="A" :model-value=" mqttStore.getChargePointConnectedVehiclePvChargingMinSocCurrent( - modalChargePointSettingsId + modalChargePointId ) " @update:model-value=" setChargePointConnectedVehiclePvChargingMinSocCurrent( - modalChargePointSettingsId, + modalChargePointId, $event ) " @@ -876,12 +881,12 @@ export default { ]" :model-value=" mqttStore.getChargePointConnectedVehiclePvChargingMaxSoc( - modalChargePointSettingsId + modalChargePointId ) " @update:model-value=" setChargePointConnectedVehiclePvChargingMaxSoc( - modalChargePointSettingsId, + modalChargePointId, $event ) " @@ -894,7 +899,7 @@ export default { v-if=" Object.keys( mqttStore.getChargePointConnectedVehicleScheduledChargingPlans( - modalChargePointSettingsId + modalChargePointId ) ).length === 0 " @@ -909,7 +914,7 @@ export default { v-for="( plan, planKey ) in mqttStore.getChargePointConnectedVehicleScheduledChargingPlans( - modalChargePointSettingsId + modalChargePointId )" :key="planKey" > @@ -976,7 +981,7 @@ export default { v-if=" Object.keys( mqttStore.getChargePointConnectedVehicleTimeChargingPlans( - modalChargePointSettingsId + modalChargePointId ) ).length === 0 " @@ -991,7 +996,7 @@ export default { v-for="( plan, planKey ) in mqttStore.getChargePointConnectedVehicleTimeChargingPlans( - modalChargePointSettingsId + modalChargePointId )" :key="planKey" > @@ -1055,6 +1060,13 @@ export default { + + + +