Add surplus PV - Battery mode buttons to display

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

@@ -54,6 +54,7 @@ export default {
         "openWB/counter/+/get/power",
         "openWB/counter/get/hierarchy",
         "openWB/counter/set/home_consumption",
+        "openWB/general/chargemode_config/pv_charging/bat_mode",
         "openWB/optional/et/provider",
         "openWB/optional/et/get/prices",
         "openWB/optional/int_display/theme",

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

@@ -0,0 +1,75 @@
+<template>
+  <i-modal
+    :model-value="modelValue"
+    size="lg"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <template #header>
+      Speicher-Beachtung: Überschuss primär für
+    </template>
+    <i-form>
+      <i-form-group>
+        <i-button-group
+          block
+          vertical
+        >
+          <i-button
+            v-for="mode in batteryModes"
+            :key="mode.value"
+            size="lg"
+            class="large-button"
+            outline
+            :color="mode.color != 'dark' ? mode.color : 'light'"
+            :active="mode.value === mqttStore.getBatteryMode"
+            @click="
+              setBatteryMode(mode.value)
+            "
+          >
+            {{ mode.label }}
+          </i-button>
+        </i-button-group>
+      </i-form-group>
+    </i-form>
+  </i-modal>
+</template>
+
+<script>
+import { useMqttStore } from "@/stores/mqtt.js";
+export default {
+  name: "BatteryModeModal",
+  props: {
+    modelValue: { required: true, type: Boolean },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      mqttStore: useMqttStore(),
+      batteryModes: [
+        {
+          value: 'ev_mode',
+          label: 'Fahrzeuge',
+          color: 'primary',
+        },
+        {
+          value: 'bat_mode',
+          label: 'Speicher',
+          color: 'primary',
+        },
+        {
+          value: 'min_soc_bat_mode',
+          label: 'Mindest-SoC',
+          color: 'primary',
+        },
+      ]
+    };
+  },
+  methods: {
+    setBatteryMode(mode) {
+      if(mode !== this.mqttStore.getBatteryMode) {
+        this.mqttStore.updateState("openWB/general/chargemode_config/pv_charging/bat_mode", mode);
+        this.$root.sendTopicToBroker("openWB/general/chargemode_config/pv_charging/bat_mode", mode);
+      }
+    },
+  },
+};
+</script>

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

@@ -4,7 +4,7 @@ import { useMqttStore } from "@/stores/mqtt.js";
 export default {
   name: "ChargeModeModal",
   props: {
-    modelValue: { required: true, type: Boolean, default: false },
+    modelValue: { required: true, type: Boolean },
     chargePointId: {
       type: Number,
       required: true,
@@ -138,11 +138,3 @@ export default {
   </i-modal>
   <!-- end charge mode only-->
 </template>
-
-<style scoped>
-.large-button {
-  height: 3.5rem;
-  font-size: 1.5rem;
-  padding: 0.75rem 1.5rem;
-}
-</style>

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

@@ -11,8 +11,8 @@ export default {
     NumberPad,
   },
   props: {
-    modelValue: { required: true, type: Boolean, default: false },
-    vehicleId: { required: true, type: Number, default: 0 },
+    modelValue: { required: true, type: Boolean },
+    vehicleId: { required: true, type: Number },
   },
   emits: ["update:modelValue"],
   data() {

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

@@ -289,12 +289,6 @@ export default {
   cursor: pointer;
 }
 
-.large-button {
-  height: 3.75rem;
-  font-size: 1.5rem;
-  padding: 0.75rem 1.5rem;
-}
-
 .button-group-wrapper {
   display: flex;
   flex-direction: column;

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

@@ -4,7 +4,7 @@ import { useMqttStore } from "@/stores/mqtt.js";
 export default {
   name: "VehicleSelectModal",
   props: {
-    modelValue: { required: true, type: Boolean, default: false },
+    modelValue: { required: true, type: Boolean },
     chargePointId: {
       type: Number,
       required: true,
@@ -94,10 +94,4 @@ export default {
   max-height: 72vh;
   overflow-y: scroll;
 }
-
-.large-button {
-  height: 3.5rem;
-  font-size: 1.5rem;
-  padding: 0.75rem 1.5rem;
-}
 </style>

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

@@ -2,12 +2,14 @@
 import { useMqttStore } from "@/stores/mqtt.js";
 import DashboardCard from "@/components/DashboardCard.vue";
 import ChargeModeModal from "../ChargePoints/ChargeModeModal.vue";
+import BatteryModeModal from "../Battery/BatteryModeModal.vue";
 
 export default {
   name: "DashboardFlowCard",
   components: {
     DashboardCard,
     ChargeModeModal,
+    BatteryModeModal,
   },
   props: {
     changesLocked: { required: false, type: Boolean, default: false },
@@ -27,6 +29,7 @@ export default {
         numColumns: 3,
       },
       modalChargeModeSettingsVisible: false,
+      modalBatteryModeSettingsVisible: false,
       modalChargePointId: 0,
     };
   },
@@ -232,6 +235,15 @@ export default {
     chargePoint3Discharging() {
       return this.chargePoint3Power.value < 0;
     },
+    batteryModeIcon() {
+    const mode = this.mqttStore.getBatteryMode;
+      switch (mode) {
+        case "ev_mode": return "icons/owbVehicle.svg";
+        case "bat_mode": return "icons/owbBattery.svg";
+        case "min_soc_bat_mode": return "icons/owbBattery40.svg";
+        default: return "---";
+      }
+    },
     svgComponents() {
       var components = [];
       // add grid component
@@ -314,6 +326,9 @@ export default {
           label: ["Speicher", this.absoluteValue(this.batteryPower).textValue],
           soc: this.batterySoc,
           icon: "icons/owbBattery.svg",
+          clicked: () => {
+            this.selectBatteryMode();
+          },
         });
       }
       // charge point and vehicle components
@@ -491,6 +506,7 @@ export default {
       // hide all modals if lock is kicking in
       if (oldValue !== true && newValue === true) {
         this.modalChargeModeSettingsVisible = false;
+        this.modalBatteryModeSettingsVisible = false;
       }
     },
   },
@@ -569,6 +585,11 @@ export default {
         this.modalChargeModeSettingsVisible = true;
       }
     },
+    selectBatteryMode() {
+      if (!this.changesLocked) {
+        this.modalBatteryModeSettingsVisible = true;
+      }
+    },
   },
 };
 </script>
@@ -578,6 +599,9 @@ export default {
     v-model="modalChargeModeSettingsVisible"
     :charge-point-id="modalChargePointId"
   />
+  <battery-mode-modal
+    v-model="modalBatteryModeSettingsVisible"
+  />
   <dashboard-card color="primary">
     <template #headerLeft>
       Übersicht - Energiefluss
@@ -737,6 +761,25 @@ export default {
                   :width="svgIconWidth"
                 />
               </g>
+              <g v-if="component.id === 'battery'">
+                <rect
+                  :x="svgSize.circleRadius * 1.2"
+                  :y="-svgSize.circleRadius * 1.4"
+                  :width="svgSize.circleRadius * 1.1"
+                  :height="svgSize.circleRadius * 0.7"
+                  :rx="svgSize.circleRadius * 0.3"
+                  :ry="svgSize.circleRadius * 0.55"
+                  class="battery-mode-button"
+                  opacity="1"
+                />
+                <image
+                  :href="batteryModeIcon"
+                  :x="svgSize.circleRadius * 1.45"
+                  :y="-svgSize.circleRadius * 1.35"
+                  :height="svgSize.circleRadius * 0.6"
+                  :width="svgSize.circleRadius * 0.6"
+                />
+              </g>
             </g>
           </g>
         </svg>
@@ -887,6 +930,10 @@ text .fill-dark {
   fill: var(--color--warning-90);
 }
 
+.battery-mode-button {
+  stroke: var(--color--warning) !important;
+}
+
 .home text {
   fill: var(--color--light);
 }

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

@@ -3,7 +3,7 @@ export default {
   name: "ExtendedNumberInput",
   inheritAttrs: false,
   props: {
-    modelValue: { type: Number, required: true, default: NaN },
+    modelValue: { type: Number, required: true},
     unit: { type: String, default: "" },
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },

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

@@ -22,6 +22,12 @@ body {
   scrollbar-color: color('primary-70') transparent;
 }
 
+.large-button {
+  height: 3.5rem !important;
+  font-size: 1.5rem !important;
+  padding: 0.75rem 1.5rem !important;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 4px;

packages/modules/display_themes/cards/source/src/stores/mqtt.js

@@ -390,6 +390,9 @@ export const useMqttStore = defineStore("mqtt", {
     getBatterySocChartData(state) {
       return state.getChartData("openWB/bat/get/soc");
     },
+    getBatteryMode(state) {
+      return state.topics["openWB/general/chargemode_config/pv_charging/bat_mode"];
+    },
     getPvConfigured(state) {
       return state.getValueBool("openWB/pv/config/configured");
     },

packages/modules/web_themes/koala/source/src/components/BatterySettingsDialog.vue

@@ -7,15 +7,15 @@
     <q-card>
       <q-card-section>
         <div class="row no-wrap">
-          <div class="text-h6 q-pr-sm">Einstellungen:</div>
+          <div class="text-h6 q-pr-sm">Speicher-Beachtung:</div>
           <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
           <q-space />
           <q-btn icon="close" flat round dense v-close-popup />
         </div>
       </q-card-section>
       <q-separator />
       <q-card-section>
-        <div class="text-subtitle2">Laden mit Überschuss Modus:</div>
+        <div class="text-subtitle2">Überschuss primär für:</div>
         <BatteryModeButtons />
       </q-card-section>
     </q-card>

packages/modules/web_themes/standard_legacy/web/index.html

@@ -152,12 +152,12 @@
 							<hr class="border-warning">
 							<div class="row">
 								<div class="col font-italic font-weight-bold">
-									Einstellungen:
+									Speicher-Beachtung
 								</div>
 							</div>
 							<div class="row vaRow">
 								<div class="col pr-0">
-									Laden mit Überschuss
+									Überschuss primär für:
 								</div>
 								<div class="col-md-8 btn-group btn-group-toggle bat-consideration-mode"
 									data-toggle="buttons" data-name="bat_consideration_mode"