Skip to content

Commit 72b3bc6

Browse files
Brett-S-OWBBrett-S-OWB
authored
Add surplus PV - Battery mode buttons to display (#2803)
* Add surplus PV - Battery mode buttons to display * Add battery mode button with icon * Fix indentation * Large button css in central location * Update / rename title in battery mode modal * Rename battery options "charge with excess energy" * Remove default values from modelValue
1 parent 8b1926b commit 72b3bc6

13 files changed

Lines changed: 154 additions & 29 deletions

File tree

‎packages/modules/display_themes/cards/source/public/icons/owbBattery40.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎packages/modules/display_themes/cards/source/src/App.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export default {
5454
"openWB/counter/+/get/power",
5555
"openWB/counter/get/hierarchy",
5656
"openWB/counter/set/home_consumption",
57+
"openWB/general/chargemode_config/pv_charging/bat_mode",
5758
"openWB/optional/et/provider",
5859
"openWB/optional/et/get/prices",
5960
"openWB/optional/int_display/theme",

‎packages/modules/display_themes/cards/source/src/components/Battery/BatteryModeModal.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<i-modal
3+
:model-value="modelValue"
4+
size="lg"
5+
@update:model-value="$emit('update:modelValue', $event)"
6+
>
7+
<template #header>
8+
Speicher-Beachtung: Überschuss primär für
9+
</template>
10+
<i-form>
11+
<i-form-group>
12+
<i-button-group
13+
block
14+
vertical
15+
>
16+
<i-button
17+
v-for="mode in batteryModes"
18+
:key="mode.value"
19+
size="lg"
20+
class="large-button"
21+
outline
22+
:color="mode.color != 'dark' ? mode.color : 'light'"
23+
:active="mode.value === mqttStore.getBatteryMode"
24+
@click="
25+
setBatteryMode(mode.value)
26+
"
27+
>
28+
{{ mode.label }}
29+
</i-button>
30+
</i-button-group>
31+
</i-form-group>
32+
</i-form>
33+
</i-modal>
34+
</template>
35+
36+
<script>
37+
import { useMqttStore } from "@/stores/mqtt.js";
38+
export default {
39+
name: "BatteryModeModal",
40+
props: {
41+
modelValue: { required: true, type: Boolean },
42+
},
43+
emits: ["update:modelValue"],
44+
data() {
45+
return {
46+
mqttStore: useMqttStore(),
47+
batteryModes: [
48+
{
49+
value: 'ev_mode',
50+
label: 'Fahrzeuge',
51+
color: 'primary',
52+
},
53+
{
54+
value: 'bat_mode',
55+
label: 'Speicher',
56+
color: 'primary',
57+
},
58+
{
59+
value: 'min_soc_bat_mode',
60+
label: 'Mindest-SoC',
61+
color: 'primary',
62+
},
63+
]
64+
};
65+
},
66+
methods: {
67+
setBatteryMode(mode) {
68+
if(mode !== this.mqttStore.getBatteryMode) {
69+
this.mqttStore.updateState("openWB/general/chargemode_config/pv_charging/bat_mode", mode);
70+
this.$root.sendTopicToBroker("openWB/general/chargemode_config/pv_charging/bat_mode", mode);
71+
}
72+
},
73+
},
74+
};
75+
</script>

‎packages/modules/display_themes/cards/source/src/components/ChargePoints/ChargeModeModal.vue‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useMqttStore } from "@/stores/mqtt.js";
44
export default {
55
name: "ChargeModeModal",
66
props: {
7-
modelValue: { required: true, type: Boolean, default: false },
7+
modelValue: { required: true, type: Boolean },
88
chargePointId: {
99
type: Number,
1010
required: true,
@@ -138,11 +138,3 @@ export default {
138138
</i-modal>
139139
<!-- end charge mode only-->
140140
</template>
141-
142-
<style scoped>
143-
.large-button {
144-
height: 3.5rem;
145-
font-size: 1.5rem;
146-
padding: 0.75rem 1.5rem;
147-
}
148-
</style>

‎packages/modules/display_themes/cards/source/src/components/ChargePoints/ManualSocInput.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export default {
1111
NumberPad,
1212
},
1313
props: {
14-
modelValue: { required: true, type: Boolean, default: false },
15-
vehicleId: { required: true, type: Number, default: 0 },
14+
modelValue: { required: true, type: Boolean },
15+
vehicleId: { required: true, type: Number },
1616
},
1717
emits: ["update:modelValue"],
1818
data() {

‎packages/modules/display_themes/cards/source/src/components/ChargePoints/SimpleChargePointCard.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -289,12 +289,6 @@ export default {
289289
cursor: pointer;
290290
}
291291
292-
.large-button {
293-
height: 3.75rem;
294-
font-size: 1.5rem;
295-
padding: 0.75rem 1.5rem;
296-
}
297-
298292
.button-group-wrapper {
299293
display: flex;
300294
flex-direction: column;

‎packages/modules/display_themes/cards/source/src/components/ChargePoints/VehicleSelectModal.vue‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useMqttStore } from "@/stores/mqtt.js";
44
export default {
55
name: "VehicleSelectModal",
66
props: {
7-
modelValue: { required: true, type: Boolean, default: false },
7+
modelValue: { required: true, type: Boolean },
88
chargePointId: {
99
type: Number,
1010
required: true,
@@ -94,10 +94,4 @@ export default {
9494
max-height: 72vh;
9595
overflow-y: scroll;
9696
}
97-
98-
.large-button {
99-
height: 3.5rem;
100-
font-size: 1.5rem;
101-
padding: 0.75rem 1.5rem;
102-
}
10397
</style>

‎packages/modules/display_themes/cards/source/src/components/Dashboard/FlowCard.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22
import { useMqttStore } from "@/stores/mqtt.js";
33
import DashboardCard from "@/components/DashboardCard.vue";
44
import ChargeModeModal from "../ChargePoints/ChargeModeModal.vue";
5+
import BatteryModeModal from "../Battery/BatteryModeModal.vue";
56
67
export default {
78
name: "DashboardFlowCard",
89
components: {
910
DashboardCard,
1011
ChargeModeModal,
12+
BatteryModeModal,
1113
},
1214
props: {
1315
changesLocked: { required: false, type: Boolean, default: false },
@@ -27,6 +29,7 @@ export default {
2729
numColumns: 3,
2830
},
2931
modalChargeModeSettingsVisible: false,
32+
modalBatteryModeSettingsVisible: false,
3033
modalChargePointId: 0,
3134
};
3235
},
@@ -232,6 +235,15 @@ export default {
232235
chargePoint3Discharging() {
233236
return this.chargePoint3Power.value < 0;
234237
},
238+
batteryModeIcon() {
239+
const mode = this.mqttStore.getBatteryMode;
240+
switch (mode) {
241+
case "ev_mode": return "icons/owbVehicle.svg";
242+
case "bat_mode": return "icons/owbBattery.svg";
243+
case "min_soc_bat_mode": return "icons/owbBattery40.svg";
244+
default: return "---";
245+
}
246+
},
235247
svgComponents() {
236248
var components = [];
237249
// add grid component
@@ -314,6 +326,9 @@ export default {
314326
label: ["Speicher", this.absoluteValue(this.batteryPower).textValue],
315327
soc: this.batterySoc,
316328
icon: "icons/owbBattery.svg",
329+
clicked: () => {
330+
this.selectBatteryMode();
331+
},
317332
});
318333
}
319334
// charge point and vehicle components
@@ -491,6 +506,7 @@ export default {
491506
// hide all modals if lock is kicking in
492507
if (oldValue !== true && newValue === true) {
493508
this.modalChargeModeSettingsVisible = false;
509+
this.modalBatteryModeSettingsVisible = false;
494510
}
495511
},
496512
},
@@ -569,6 +585,11 @@ export default {
569585
this.modalChargeModeSettingsVisible = true;
570586
}
571587
},
588+
selectBatteryMode() {
589+
if (!this.changesLocked) {
590+
this.modalBatteryModeSettingsVisible = true;
591+
}
592+
},
572593
},
573594
};
574595
</script>
@@ -578,6 +599,9 @@ export default {
578599
v-model="modalChargeModeSettingsVisible"
579600
:charge-point-id="modalChargePointId"
580601
/>
602+
<battery-mode-modal
603+
v-model="modalBatteryModeSettingsVisible"
604+
/>
581605
<dashboard-card color="primary">
582606
<template #headerLeft>
583607
Übersicht - Energiefluss
@@ -737,6 +761,25 @@ export default {
737761
:width="svgIconWidth"
738762
/>
739763
</g>
764+
<g v-if="component.id === 'battery'">
765+
<rect
766+
:x="svgSize.circleRadius * 1.2"
767+
:y="-svgSize.circleRadius * 1.4"
768+
:width="svgSize.circleRadius * 1.1"
769+
:height="svgSize.circleRadius * 0.7"
770+
:rx="svgSize.circleRadius * 0.3"
771+
:ry="svgSize.circleRadius * 0.55"
772+
class="battery-mode-button"
773+
opacity="1"
774+
/>
775+
<image
776+
:href="batteryModeIcon"
777+
:x="svgSize.circleRadius * 1.45"
778+
:y="-svgSize.circleRadius * 1.35"
779+
:height="svgSize.circleRadius * 0.6"
780+
:width="svgSize.circleRadius * 0.6"
781+
/>
782+
</g>
740783
</g>
741784
</g>
742785
</svg>
@@ -887,6 +930,10 @@ text .fill-dark {
887930
fill: var(--color--warning-90);
888931
}
889932
933+
.battery-mode-button {
934+
stroke: var(--color--warning) !important;
935+
}
936+
890937
.home text {
891938
fill: var(--color--light);
892939
}

‎packages/modules/display_themes/cards/source/src/components/ExtendedNumberInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export default {
33
name: "ExtendedNumberInput",
44
inheritAttrs: false,
55
props: {
6-
modelValue: { type: Number, required: true, default: NaN },
6+
modelValue: { type: Number, required: true},
77
unit: { type: String, default: "" },
88
min: { type: Number, default: 0 },
99
max: { type: Number, default: 100 },

‎packages/modules/display_themes/cards/source/src/main.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,12 @@ body {
2222
scrollbar-color: color('primary-70') transparent;
2323
}
2424

25+
.large-button {
26+
height: 3.5rem !important;
27+
font-size: 1.5rem !important;
28+
padding: 0.75rem 1.5rem !important;
29+
}
30+
2531
/* width */
2632
::-webkit-scrollbar {
2733
width: 4px;

0 commit comments

Comments
 (0)