diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue index 239e8166b9..bad512c3b9 100644 --- a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue +++ b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue @@ -2,13 +2,7 @@
- +
{{ name }}
@@ -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'; diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerStateIcon.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerStateIcon.vue new file mode 100644 index 0000000000..a3c20ffa36 --- /dev/null +++ b/packages/modules/web_themes/koala/source/src/components/ConsumerStateIcon.vue @@ -0,0 +1,61 @@ + + + diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts index 443400c0d1..c4a8084d64 100644 --- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts +++ b/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,