Add consumer component to display flow chart

data/config/mosquitto/public/default-dynamic-security.json

@@ -70,7 +70,7 @@
 	"anonymousGroup": "anonymous",
 	"roles": [
 		{
-			"rolename": "openwb-version:8",
+			"rolename": "openwb-version:9",
 			"textname": "openWB Versionsnummer",
 			"textdescription": "Diese Rolle ist ein Platzhalter für die openWB Versionsnummer und wird automatisch aktualisiert. Sie hat keine direkten Berechtigungen.",
 			"acls": []

data/config/mosquitto/public/role-templates.json

@@ -80,25 +80,19 @@
 		"acls": [
 			{
 				"acltype": "publishClientSend",
-				"topic": "openWB/set/consumer/<id>/set/charge_template",
+				"topic": "openWB/set/consumer/<id>/usage",
 				"priority": 0,
 				"allow": true
 			},
 			{
 				"acltype": "publishClientSend",
-				"topic": "openWB/set/consumer/<id>/set/manual_lock",
+				"topic": "openWB/set/command/+/todo/addConsumerSchedulePlan",
 				"priority": 0,
 				"allow": true
 			},
 			{
 				"acltype": "publishClientSend",
-				"topic": "openWB/set/consumer/<id>/config/ev",
-				"priority": 0,
-				"allow": true
-			},
-			{
-				"acltype": "publishClientSend",
-				"topic": "openWB/set/consumer/<id>/get/rfid",
+				"topic": "openWB/set/command/+/todo/addConsumerTimePlan",
 				"priority": 0,
 				"allow": true
 			},

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

@@ -60,6 +60,7 @@ export default {
         "openWB/chargepoint/+/set/log",
         "openWB/chargepoint/+/set/rfid",
         "openWB/chargepoint/get/power",
+        "openWB/consumer/get/power",
         "openWB/counter/+/get/power",
         "openWB/counter/get/hierarchy",
         "openWB/counter/set/home_consumption",

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

@@ -10,6 +10,7 @@ import PvIcon from "../../assets/icons/owbPV.svg?component";
 import HouseIcon from "../../assets/icons/owbHouse.svg?component";
 import VehicleIcon from "../../assets/icons/owbVehicle.svg?component";
 import ChargePointIcon from "../../assets/icons/owbChargePoint.svg?component";
+import ConsumerIcon from "../../assets/icons/owbConsumer.svg?component";
 
 export default {
   name: "DashboardFlowCard",
@@ -84,6 +85,12 @@ export default {
     showHomePower() {
       return this.homePower.value !== undefined;
     },
+    consumerPower() {
+      return this.mqttStore.getConsumerSumPower("object");
+    },
+    showConsumerPower() {
+      return this.consumerPower.value !== undefined;
+    },
     batteryPower() {
       return this.mqttStore.getBatteryPower("object");
     },
@@ -255,6 +262,9 @@ export default {
     homeProduction() {
       return this.homePower.value < 0;
     },
+    consumerConsuming() {
+      return this.consumerPower.value > 0;
+    },
     pvProduction() {
       return this.pvPower.value < 0;
     },
@@ -355,6 +365,25 @@ export default {
           iconColor: "var(--color--light)",
         });
       }
+      // add consumer sum component
+      if (this.showConsumerPower) {
+        components.push({
+          id: "consumer",
+          class: {
+            base: "consumer",
+            valueLabel: "",
+            animated: false,
+            animatedReverse: this.consumerConsuming,
+          },
+          position: {
+            row: 0,
+            column: 1,
+          },
+          label: ["Verbraucher", this.absoluteValue(this.consumerPower).textValue],
+          iconComponent: ConsumerIcon,
+          iconColor: "var(--color--consumer)",
+        });
+      }
       // add pv sum component
       if (
         this.mqttStore.getPvConfigured &&
@@ -970,6 +999,11 @@ path.animatedReverse.grid {
   stroke: var(--color--success);
 }
 
+path.animated.consumer,
+path.animatedReverse.consumer {
+  stroke: var(--color--consumer);
+}
+
 path.animated.pv,
 path.animatedReverse.pv {
   stroke: var(--color--success);

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

@@ -4,6 +4,7 @@
 :root {
   --spacing: 0.5rem;
   --body--background--dark: #242526;
+  --color--consumer: #7d42f5;
 }
 
 /* prevent touch gestures */

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

@@ -424,6 +424,21 @@ export const useMqttStore = defineStore("mqtt", {
       });
     },
 
+    /* consumer getters */
+
+    getConsumerSumPower(state) {
+      return (returnType = "textValue") => {
+        var power = state.getValueString("openWB/consumer/get/power", "W");
+        if (Object.hasOwnProperty.call(power, returnType)) {
+          return power[returnType];
+        }
+        if (returnType == "object") {
+          return power;
+        }
+        console.error("returnType not found!", returnType, power);
+      };
+    },
+
     /* charge point getters */
 
     getChargePointSumPower(state) {