Koala - add consumer plug state icon

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

@@ -2,13 +2,7 @@
   <q-card class="consumer-card" :class="{ 'full-height': props.fullHeight }">
     <q-card-section class="row no-wrap items-center justify-between">
       <div class="row no-wrap items-center ellipsis">
-        <q-icon
-          name="circle"
-          :color="statusColor"
-          size="12px"
-          class="q-mr-sm"
-          :title="statusText"
-        />
+        <ConsumerStateIcon :consumer-id="props.consumerId" class="q-mr-sm" />
         <div class="text-h6 text-bold ellipsis" :title="name">
           {{ name }}
         </div>
@@ -92,6 +86,7 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import ConsumerSettings from './ConsumerSettings.vue';
 import ConsumerMessage from './ConsumerMessage.vue';
 import ConsumerModeButtons from './ConsumerModeButtons.vue';
+import ConsumerStateIcon from './ConsumerStateIcon.vue';
 
 const props = defineProps<{
   consumerId: number;
@@ -108,11 +103,6 @@ const power = computed(
   () => mqttStore.consumerPower(props.consumerId, 'textValue') as string,
 );
 
-const powerValue = computed(
-  () => (mqttStore.consumerPower(props.consumerId, 'value') as number) || 0,
-);
-const isRunning = computed(() => powerValue.value > 0);
-
 const temperatures = computed(() =>
   mqttStore.consumerTemperatures(props.consumerId),
 );
@@ -133,30 +123,6 @@ const dailyImported = computed(
     mqttStore.consumerDailyImported('textValue', props.consumerId) as string,
 );
 
-const faultState = computed(() =>
-  mqttStore.consumerFaultState(props.consumerId),
-);
-
-const statusText = computed(() => {
-  if (faultState.value > 0) {
-    return (
-      mqttStore.consumerFaultStr(props.consumerId) ??
-      mqttStore.consumerStateStr(props.consumerId)
-    );
-  }
-  return mqttStore.consumerStateStr(props.consumerId);
-});
-
-const statusColor = computed(() => {
-  if (faultState.value >= 2) {
-    return 'negative';
-  }
-  if (faultState.value === 1) {
-    return 'warning';
-  }
-  return isRunning.value ? 'positive' : 'grey-6';
-});
-
 const meterOnly = computed(() => {
   const usageType = mqttStore.consumerUsageType(props.consumerId);
   return usageType === 'meter_only' || usageType === 'self_controlled';

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

@@ -0,0 +1,61 @@
+<template>
+  <q-icon
+    :name="plugState || notControlled ? 'power' : 'power_off'"
+    size="sm"
+    :color="color"
+  >
+    <q-tooltip>
+      <div>{{ stateText }}</div>
+    </q-tooltip>
+  </q-icon>
+</template>
+
+<script setup lang="ts">
+import { useMqttStore } from 'src/stores/mqtt-store';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  consumerId: number;
+}>();
+
+const mqttStore = useMqttStore();
+
+const plugState = computed(() => mqttStore.consumerPlugState(props.consumerId));
+
+const chargeState = computed(() =>
+  mqttStore.consumerChargeState(props.consumerId),
+);
+
+// consumers without a relay: plug state only reflects power != 0 W
+const notControlled = computed(() => {
+  const usageType = mqttStore.consumerUsageType(props.consumerId);
+  return usageType === 'meter_only' || usageType === 'self_controlled';
+});
+
+const faultState = computed(() =>
+  mqttStore.consumerFaultState(props.consumerId),
+);
+
+const color = computed(() => {
+  if (faultState.value >= 2) {
+    return 'negative';
+  }
+  if (faultState.value === 1) {
+    return 'warning';
+  }
+  if (chargeState.value) {
+    return 'positive';
+  }
+  return plugState.value ? 'warning' : 'grey-6';
+});
+
+const stateText = computed(() => {
+  if (notControlled.value) {
+    return chargeState.value ? 'An' : plugState.value ? 'Standby' : 'Aus';
+  }
+  if (plugState.value) {
+    return chargeState.value ? 'An' : 'Freigegeben, Standby-Modus';
+  }
+  return chargeState.value ? 'An, nicht von openWB eingeschaltet' : 'Aus';
+});
+</script>

packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts

@@ -3934,6 +3934,38 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the plug state of a consumer identified by the consumer id.
+   * True if openWB has released power (relay on / target power > 0 W).
+   * @param consumerId consumer id
+   * @returns boolean
+   */
+  const consumerPlugState = computed(() => {
+    return (consumerId: number): boolean => {
+      return (
+        (getValue.value(
+          `openWB/consumer/${consumerId}/get/plug_state`,
+        ) as boolean) || false
+      );
+    };
+  });
+
+  /**
+   * Get the charge state of a consumer identified by the consumer id.
+   * True if the consumer draws more than the standby threshold.
+   * @param consumerId consumer id
+   * @returns boolean
+   */
+  const consumerChargeState = computed(() => {
+    return (consumerId: number): boolean => {
+      return (
+        (getValue.value(
+          `openWB/consumer/${consumerId}/get/charge_state`,
+        ) as boolean) || false
+      );
+    };
+  });
+
   /**
    * Get the usage type of a consumer identified by the consumer id.
    * @param consumerId consumer id
@@ -4733,6 +4765,8 @@ export const useMqttStore = defineStore('mqtt', () => {
     consumerStateStr,
     consumerFaultState,
     consumerFaultStr,
+    consumerPlugState,
+    consumerChargeState,
     consumerUsageType,
     consumerMode,
     consumerResetEnabled,