From 207d1ab525b6c5d4b6c7814ba77915950d25f022 Mon Sep 17 00:00:00 2001
From: LKuemmel <lena.kuemmel@openwb.de>
Date: Fri, 31 Jul 2026 10:03:55 +0200
Subject: [PATCH] switch mode on card

---
 .../source/src/components/ConsumerCard.vue    | 30 ++++---------------
 1 file changed, 6 insertions(+), 24 deletions(-)

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 afd4b88abc..1fec04913f 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
@@ -50,17 +50,9 @@
       <ConsumerMessage :consumer-id="props.consumerId" />
     </q-card-section>
 
-    <template v-if="isOnOffType">
-      <q-separator inset class="q-my-sm" />
-      <q-card-section
-        class="row items-center justify-between full-width text-subtitle2"
-      >
-        <div>Ein/Aus:</div>
-        <ToggleStandard
-          :value="onOff"
-          size="md"
-          @update:value="onOff = $event"
-        />
+    <template v-if="!meterOnly">
+      <q-card-section>
+        <ConsumerModeButtons :consumer-id="props.consumerId" />
       </q-card-section>
     </template>
 
@@ -76,7 +68,7 @@ import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import ConsumerSettings from './ConsumerSettings.vue';
 import ConsumerMessage from './ConsumerMessage.vue';
-import ToggleStandard from './ToggleStandard.vue';
+import ConsumerModeButtons from './ConsumerModeButtons.vue';
 
 const props = defineProps<{
   consumerId: number;
@@ -131,20 +123,10 @@ const statusColor = computed(() => {
   return isRunning.value ? 'positive' : 'grey-6';
 });
 
-const isOnOffType = computed(
-  () => mqttStore.consumerUsageType(props.consumerId) === 'suspendable_onoff',
+const meterOnly = computed(
+  () => mqttStore.consumerUsageType(props.consumerId) === 'meter_only',
 );
 
-const consumerMode = mqttStore.consumerMode(props.consumerId);
-
-// Toggle maps to Sofort (on) / Stop (off). Any non-stop mode reads as "on".
-const onOff = computed({
-  get: () => consumerMode.value !== undefined && consumerMode.value !== 'stop',
-  set: (value: boolean) => {
-    consumerMode.value = value ? 'instant_charging' : 'stop';
-  },
-});
-
 const consumerColor = computed(() => {
   return mqttStore.consumerColor(props.consumerId) || 'var(--q-consumer)';
 });