From a11b362a3ff40930b68bb8b4826bd2e451a0f531 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 13 Dec 2024 15:22:30 +0100
Subject: [PATCH 01/11] Fix: Scheduled charging appointments settings border
 alignment issue

---
 .../source/src/components/ChargePointScheduledSettings.vue  | 6 +++---
 .../standard/source/src/components/ChargePointSettings.vue  | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledSettings.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledSettings.vue
index 460dece0da..6a6193e62a 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledSettings.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledSettings.vue
@@ -52,13 +52,13 @@ const plans = computed(() =>
 
 <style scoped>
 .rounded-borders-md {
-  border-radius: 10px;
+  border-radius: 8px;
 }
 .active-border {
-  border: 4px solid var(--q-positive);
+  box-shadow: 0 0 0 4px var(--q-positive);
 }
 .inactive-border {
-  border: 4px solid var(--q-negative);
+  box-shadow: 0 0 0 4px var(--q-negative);
 }
 :deep(.q-expansion-item__container) .q-item {
   padding: 6px 6px;
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue
index 0352fa8389..5f606db9d8 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue
@@ -86,7 +86,6 @@ const isDialogScrolled = ref(false);
 
 const handleScroll = () => {
   isDialogScrolled.value = true;
-  console.log('Dialog scrolled');
 };
 
 provide('isDialogScrolled', isDialogScrolled);

From cf969f926c4809b96802a9b655f3127faeb7d4af Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 13 Dec 2024 16:21:38 +0100
Subject: [PATCH 02/11] Hide Slider (soc & target) for modes standby and stop

---
 .../source/src/components/ChargePoint.vue     | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
index 858890a8d0..b9d05df0fa 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
@@ -42,6 +42,7 @@
         />
       </div>
       <SliderDouble
+        v-if="showSocTargetSlider"
         class="q-mt-sm"
         :readonly="true"
         :connected-vehicle-soc="connectedVehicleSoc"
@@ -100,22 +101,27 @@ const connectedVehicleSoc = computed(() =>
   ),
 );
 
+const chargeMode = computed(
+  () =>
+    mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId).value,
+);
+
 const targetSoc = computed<number | undefined>(() => {
-  const chargeMode = mqttStore.chargePointConnectedVehicleChargeMode(
-    props.chargePointId,
-  ).value;
   const instantLimitMode =
     mqttStore.chargePointConnectedVehicleInstantChargeLimit(
       props.chargePointId,
     ).value;
-  if (chargeMode === 'scheduled_charging') {
+  if (chargeMode.value === 'scheduled_charging') {
     return mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value
       ?.soc;
-  } else if (chargeMode === 'instant_charging' && instantLimitMode === 'soc') {
+  } else if (
+    chargeMode.value === 'instant_charging' &&
+    instantLimitMode === 'soc'
+  ) {
     return mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
       props.chargePointId,
     )?.value;
-  } else if (chargeMode === 'pv_charging') {
+  } else if (chargeMode.value === 'pv_charging') {
     return mqttStore.chargePointConnectedVehiclePVChargeMaxSoc(
       props.chargePointId,
     ).value;
@@ -124,14 +130,17 @@ const targetSoc = computed<number | undefined>(() => {
   }
 });
 
+const showSocTargetSlider = computed(() => {
+  return chargeMode.value === 'stop' || chargeMode.value === 'standby'
+    ? false
+    : true;
+});
+
 const targetTime = computed(() => {
-  const chargeMode = mqttStore.chargePointConnectedVehicleChargeMode(
-    props.chargePointId,
-  ).value;
   const target = mqttStore.vehicleScheduledChargingTarget(
     props.chargePointId,
   ).value;
-  if (!target || !target.time || chargeMode !== 'scheduled_charging') {
+  if (!target || !target.time || chargeMode.value !== 'scheduled_charging') {
     return 'keine';
   }
   return target.time;

From c1a5b153722ef9296b54b9c1f6e8f93b96bb2b03 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 16 Dec 2024 10:45:19 +0100
Subject: [PATCH 03/11] Only show scheduled time target for charge mode
 "scheduled_charging"

---
 .../standard/source/src/components/ChargePoint.vue       | 1 +
 .../standard/source/src/components/SliderDouble.vue      | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
index b9d05df0fa..aba753a0e0 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
@@ -45,6 +45,7 @@
         v-if="showSocTargetSlider"
         class="q-mt-sm"
         :readonly="true"
+        :charge-mode="chargeMode"
         :connected-vehicle-soc="connectedVehicleSoc"
         :target-soc="targetSoc"
         :target-time="targetTime"
diff --git a/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue b/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
index 360d975462..181c4fa987 100644
--- a/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/standard/source/src/components/SliderDouble.vue
@@ -36,7 +36,7 @@
         <div>Ladestand</div>
         <div>{{ currentCharge }}%</div>
       </div>
-      <div class="col text-center">
+      <div v-if="showTargetTime" class="col text-center">
         <div>Zielzeit</div>
         <div>{{ targetTime }}</div>
       </div>
@@ -60,6 +60,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  chargeMode: {
+    type: String,
+    default: '',
+  },
   connectedVehicleSoc: {
     type: Number,
     default: 0,
@@ -74,6 +78,9 @@ const props = defineProps({
   },
 });
 
+const showTargetTime = computed(
+  () => props.chargeMode === 'scheduled_charging',
+);
 const currentCharge = computed(() => props.connectedVehicleSoc);
 const targetCharge = computed(() => props.targetSoc);
 </script>

From f5051cbed6f2a72004c7bc6d28869be9ab31e50b Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 17 Dec 2024 09:16:16 +0100
Subject: [PATCH 04/11] Add lifecycle hook (slider-standard) to catch pending
 changes when modal closes

---
 .../source/src/components/SliderStandard.vue        | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/SliderStandard.vue b/packages/modules/web_themes/standard/source/src/components/SliderStandard.vue
index 6dadf9a58e..24d9ca3ac3 100644
--- a/packages/modules/web_themes/standard/source/src/components/SliderStandard.vue
+++ b/packages/modules/web_themes/standard/source/src/components/SliderStandard.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onBeforeUnmount } from 'vue';
 
 defineOptions({
   name: 'SliderStandard',
@@ -155,6 +155,17 @@ watch(
   },
 );
 
+onBeforeUnmount(() => {
+  if (updateTimeout.value) {
+    clearTimeout(updateTimeout.value);
+    const currentValue = value.value !== undefined ? value.value : 0;
+    emit(
+      'update:model-value',
+      props.discreteValues ? props.discreteValues[currentValue] : currentValue,
+    );
+  }
+});
+
 const myClass = computed(() => {
   return updatePending.value ? 'pending' : '';
 });

From f21d90fc7b7cdd47db699b5ead8f64c14e4c80fc Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 17 Dec 2024 17:27:42 +0100
Subject: [PATCH 05/11] Show single battery card if only one battery, show
 Overview and carousel for multiple batteries

---
 .../source/src/components/BaseCarousel.vue    | 27 +--------
 .../src/components/BatteryInformation.vue     | 53 +++++++++++++++---
 .../src/components/BatteryModeButtons.vue     | 27 +--------
 .../source/src/components/BatteryOverview.vue | 56 +++++++++++--------
 .../src/components/BatterySettingsDialog.vue  | 31 ++++++++++
 .../source/src/composables/useBatteryModes.ts | 29 ++++++++++
 .../standard/source/src/pages/TestPage.vue    |  8 +--
 7 files changed, 148 insertions(+), 83 deletions(-)
 create mode 100644 packages/modules/web_themes/standard/source/src/components/BatterySettingsDialog.vue
 create mode 100644 packages/modules/web_themes/standard/source/src/composables/useBatteryModes.ts

diff --git a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
index 923745a22d..e0afe64d93 100644
--- a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
@@ -7,7 +7,7 @@
     infinite
     padding
     :navigation="groupedItems.length > 1"
-    :arrows="groupedItems && $q.screen.gt.xs"
+    :arrows="groupedItems.length > 1 && $q.screen.gt.xs"
     class="carousel-height q-mt-md"
     transition-next="slide-left"
     transition-prev="slide-right"
@@ -90,29 +90,4 @@ watch(
 .carousel-height {
   min-height: fit-content;
 }
-
-/* firefox */
-@-moz-document url-prefix() {
-  .carousel-height {
-    min-height: 0;
-    height: fit-content;
-  }
-  .carousel-slide {
-    padding: 0;
-  }
-}
-
-/* Safari */
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  _::-webkit-full-page-media,
-  _:future,
-  :root .carousel-height {
-    height: fit-content;
-  }
-  _::-webkit-full-page-media,
-  _:future,
-  :root .carousel-slide {
-    height: fit-content;
-  }
-}
 </style>
diff --git a/packages/modules/web_themes/standard/source/src/components/BatteryInformation.vue b/packages/modules/web_themes/standard/source/src/components/BatteryInformation.vue
index c824a74974..c276584402 100644
--- a/packages/modules/web_themes/standard/source/src/components/BatteryInformation.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BatteryInformation.vue
@@ -1,9 +1,22 @@
 <template>
   <q-card class="full-height card-width">
     <q-card-section>
-      <div class="row text-h6 items-center text-bold">
-        <q-icon name="battery_full" size="xs" class="q-mr-sm" color="primary" />
-        {{ batteryName }}
+      <div class="row text-h6 items-center text-bold justify-between">
+        <div>
+          <q-icon
+            name="battery_full"
+            size="sm"
+            class="q-mr-sm"
+            color="primary"
+          />
+          {{ batteryName }}
+        </div>
+        <q-icon
+          v-if="singleBattery"
+          name="settings"
+          size="sm"
+          @click="dialog?.open()"
+        />
       </div>
       <div class="row q-mt-sm text-subtitle2 justify-between no-wrap">
         <div class="row">
@@ -47,7 +60,19 @@
           </div>
         </div>
       </div>
-      <div class="text-subtitle1 text-weight-bold q-mt-sm">Heute:</div>
+      <div v-if="singleBattery" class="row q-mt-md text-subtitle2">
+        <div>Überschuss Modus:</div>
+        <div class="q-ml-sm row items-center">
+          <q-icon
+            :name="batteryMode.icon"
+            size="sm"
+            class="q-mr-sm"
+            color="primary"
+          />
+          {{ batteryMode.label }}
+        </div>
+      </div>
+      <div class="text-subtitle1 text-weight-bold q-mt-md">Heute:</div>
       <div class="row q-mt-sm text-subtitle2">
         <div>Geladen:</div>
         <div class="q-ml-sm">
@@ -62,24 +87,38 @@
       </div>
     </q-card-section>
   </q-card>
+  <BatterySettingsDialog ref="dialog" />
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import BatterySettingsDialog from './BatterySettingsDialog.vue';
+import { useBatteryModes } from 'src/composables/useBatteryModes.ts';
 
 const props = defineProps<{
   batteryId: number;
 }>();
 
+const singleBattery = computed(() => {
+  return mqttStore.batteryIds.length === 1;
+});
+
+const { batteryModes } = useBatteryModes();
+
+const batteryMode = computed(() => {
+  const mode = mqttStore.batteryMode();
+  return batteryModes.find((m) => m.value === mode.value) || batteryModes[0];
+});
+
+const dialog = ref();
+
 const mqttStore = useMqttStore();
 
 const batteryName = computed(() => mqttStore.batteryName(props.batteryId));
 
 const soc = computed(() => mqttStore.batterySoc(props.batteryId));
 
-//const power = computed(() => mqttStore.batteryPower(props.batteryId));
-
 const power = computed(() => {
   const power = mqttStore.batteryPower(props.batteryId, 'value');
   return typeof power === 'number' ? power : 0;
diff --git a/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue b/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue
index fe4ae812e2..f638cf6823 100644
--- a/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BatteryModeButtons.vue
@@ -1,7 +1,7 @@
 <template>
   <q-btn-group class="q-mt-md">
     <q-btn
-      v-for="mode in batModes"
+      v-for="mode in batteryModes"
       :key="mode.value"
       :color="batMode.value === mode.value ? 'primary' : 'grey'"
       :label="mode.label"
@@ -17,32 +17,11 @@
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { computed } from 'vue';
+import { useBatteryModes } from 'src/composables/useBatteryModes.ts';
 
 const mqttStore = useMqttStore();
 
-const batModes = [
-  {
-    value: 'ev_mode',
-    label: 'Auto',
-    color: 'primary',
-    icon: 'directions_car',
-    tooltip: 'Auto ',
-  },
-  {
-    value: 'bat_mode',
-    label: 'Speicher',
-    color: 'primary',
-    icon: 'battery_charging_full',
-    tooltip: 'Speicher',
-  },
-  {
-    value: 'min_soc_bat_mode',
-    label: 'SoC',
-    color: 'primary',
-    icon: 'battery_charging_full',
-    tooltip: 'Minimum Speicher SoC',
-  },
-];
+const { batteryModes } = useBatteryModes();
 
 const batMode = computed(() => mqttStore.batteryMode());
 </script>
diff --git a/packages/modules/web_themes/standard/source/src/components/BatteryOverview.vue b/packages/modules/web_themes/standard/source/src/components/BatteryOverview.vue
index ee107b5202..5fd2fec26a 100644
--- a/packages/modules/web_themes/standard/source/src/components/BatteryOverview.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BatteryOverview.vue
@@ -11,7 +11,12 @@
           />
           Speicher Übersicht
         </div>
-        <q-icon name="settings" size="sm" @click="settingsVisible = true" />
+        <q-icon
+          v-if="multipleBatteries"
+          name="settings"
+          size="sm"
+          @click="dialog?.open()"
+        />
       </div>
       <div class="row q-mt-sm text-subtitle2 justify-between no-wrap">
         <div class="row">
@@ -53,7 +58,19 @@
           </div>
         </div>
       </div>
-      <div class="text-subtitle1 text-weight-bold q-mt-sm">Heute:</div>
+      <div class="row q-mt-md text-subtitle2">
+        <div>Überschuss Modus:</div>
+        <div class="q-ml-sm row items-center">
+          <q-icon
+            :name="batteryMode.icon"
+            size="sm"
+            class="q-mr-sm"
+            color="primary"
+          />
+          {{ batteryMode.label }}
+        </div>
+      </div>
+      <div class="text-subtitle1 text-weight-bold q-mt-md">Heute:</div>
       <div class="row q-mt-sm text-subtitle2">
         <div>Geladen:</div>
         <div class="q-ml-sm">
@@ -69,37 +86,32 @@
     </q-card-section>
   </q-card>
 
-  <q-dialog
-    v-model="settingsVisible"
-    :maximized="$q.screen.width < 385"
-    :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
-  >
-    <q-card style="min-width: 24em">
-      <q-card-section>
-        <div class="text-h6">Battery Einstellungen</div>
-        <div class="text-subtitle2 q-mt-sm">Laden mit Überschuss Modus:</div>
-        <BatteryModeButtons />
-      </q-card-section>
-      <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+  <BatterySettingsDialog ref="dialog" />
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { useQuasar } from 'quasar';
-import BatteryModeButtons from './BatteryModeButtons.vue';
+import BatterySettingsDialog from './BatterySettingsDialog.vue';
+import { useBatteryModes } from 'src/composables/useBatteryModes.ts';
+
+const dialog = ref();
 
-const settingsVisible = ref<boolean>(false);
+const multipleBatteries = computed(() => {
+  return mqttStore.batteryIds.length > 1;
+});
 
 const mqttStore = useMqttStore();
-const $q = useQuasar();
 
 const soc = computed(() => mqttStore.batterySocTotal);
 
+const { batteryModes } = useBatteryModes();
+
+const batteryMode = computed(() => {
+  const mode = mqttStore.batteryMode();
+  return batteryModes.find((m) => m.value === mode.value) || batteryModes[0];
+});
+
 const dailyImportedEnergy = computed(() =>
   mqttStore.batteryDailyImportedTotal('textValue'),
 );
diff --git a/packages/modules/web_themes/standard/source/src/components/BatterySettingsDialog.vue b/packages/modules/web_themes/standard/source/src/components/BatterySettingsDialog.vue
new file mode 100644
index 0000000000..0fadb6b0fa
--- /dev/null
+++ b/packages/modules/web_themes/standard/source/src/components/BatterySettingsDialog.vue
@@ -0,0 +1,31 @@
+<template>
+  <q-dialog
+    v-model="isOpen"
+    :maximized="$q.screen.width < 385"
+    :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
+  >
+    <q-card style="min-width: 24em">
+      <q-card-section>
+        <div class="text-h6">Battery Einstellungen</div>
+        <div class="text-subtitle2 q-mt-sm">Laden mit Überschuss Modus:</div>
+        <BatteryModeButtons />
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="OK" color="primary" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+import BatteryModeButtons from './BatteryModeButtons.vue';
+
+const $q = useQuasar();
+const isOpen = ref(false);
+
+defineExpose({
+  open: () => (isOpen.value = true),
+});
+</script>
diff --git a/packages/modules/web_themes/standard/source/src/composables/useBatteryModes.ts b/packages/modules/web_themes/standard/source/src/composables/useBatteryModes.ts
new file mode 100644
index 0000000000..3d6c4ed6c1
--- /dev/null
+++ b/packages/modules/web_themes/standard/source/src/composables/useBatteryModes.ts
@@ -0,0 +1,29 @@
+export const useBatteryModes = () => {
+  const batteryModes = [
+    {
+      value: 'ev_mode',
+      label: 'Auto',
+      color: 'primary',
+      icon: 'directions_car',
+      tooltip: 'Auto',
+    },
+    {
+      value: 'bat_mode',
+      label: 'Speicher',
+      color: 'primary',
+      icon: 'battery_charging_full',
+      tooltip: 'Speicher',
+    },
+    {
+      value: 'min_soc_bat_mode',
+      label: 'SoC',
+      color: 'primary',
+      icon: 'battery_charging_full',
+      tooltip: 'Minimum Speicher SoC',
+    },
+  ];
+
+  return {
+    batteryModes,
+  };
+};
diff --git a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
index f5c8f12d08..eaba26b7c6 100644
--- a/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
+++ b/packages/modules/web_themes/standard/source/src/pages/TestPage.vue
@@ -18,7 +18,7 @@
       </q-tab>
     </q-tabs>
     <!-- Tab Panels -->
-    <q-tab-panels v-model="tab" animated class="col">
+    <q-tab-panels v-model="tab" class="col">
       <q-tab-panel name="charge-points" class="q-pa-none column">
         <BaseCarousel :items="chargePointIds">
           <template #item="{ item }">
@@ -27,10 +27,10 @@
         </BaseCarousel>
       </q-tab-panel>
       <q-tab-panel name="batteries" class="">
-        <div class="row justify-center">
+        <div v-if="showBatteryOverview" class="row justify-center">
           <BatteryOverview />
         </div>
-        <BaseCarousel :items="batteryIds" v-if="showBatteryCarousel">
+        <BaseCarousel :items="batteryIds">
           <template #item="{ item }">
             <BatteryInformation :battery-id="item" />
           </template>
@@ -59,7 +59,7 @@ defineOptions({
 
 const tab = ref<string>('charge-points');
 
-const showBatteryCarousel = computed(() => {
+const showBatteryOverview = computed(() => {
   return mqttStore.batteryIds.length > 1;
 });
 

From 04f27203a137e5f86eb86466176c8cd06e3078c4 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 18 Dec 2024 15:36:13 +0100
Subject: [PATCH 06/11] Update weekday selection from menu to round buttons

---
 .../ChargePointScheduledPlanDetails.vue       | 177 +++++-------------
 .../src/components/ChargePointSettings.vue    |  12 +-
 .../source/src/css/quasar.variables.scss      |   6 +
 3 files changed, 55 insertions(+), 140 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
index 2c3696a4cf..5d4f59f2d4 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -63,8 +63,8 @@
         label="Ziel-Energy (kWh)"
         class="col"
       />
-
-      <div class="q-mb-md q-mt-md">
+      <div class="q-mb-md">
+        <div class="text-subtitle2 q-mb-sm q-mt-sm">Wiederholungen</div>
         <q-btn-group spread>
           <q-btn
             size="sm"
@@ -78,75 +78,49 @@
             @click="planFrequency.value = 'daily'"
             label="Täglich"
           />
-          <div>
-            <q-btn
-              size="sm"
-              :color="planFrequency.value === 'weekly' ? 'primary' : 'grey'"
-              @click="(e: Event) => showWeeklyMenu(e)"
-              label="Wöchentlich"
-              :model-value="weeklyMenuOpen && !isDialogScrolled"
-            />
-            <q-menu
-              v-model="weeklyMenuOpen"
-              anchor="bottom left"
-              transition-show="scale"
-              transition-hide="scale"
-              fit
-            >
-              <q-list>
-                <template v-for="(day, index) in weekDays" :key="day">
-                  <q-item
-                    clickable
-                    :active="selectedWeekDays[index]"
-                    active-class="bg-primary text-white"
-                    @click="selectDay(index)"
-                  >
-                    <q-item-section class="text-center">{{
-                      day
-                    }}</q-item-section>
-                  </q-item>
-                  <q-separator v-if="index < weekDays.length - 1" />
-                </template>
-              </q-list>
-            </q-menu>
-          </div>
+          <q-btn
+            size="sm"
+            :color="planFrequency.value === 'weekly' ? 'primary' : 'grey'"
+            @click="planFrequency.value = 'weekly'"
+            label="Wöchentlich"
+          />
         </q-btn-group>
 
-        <div v-if="planFrequency.value === 'weekly'" class="q-mt-md">
-          <div class="row items-center">
-            <q-icon name="calendar_month" class="q-mr-sm" size="sm" />
-            <div class="text-bold">Werktage:</div>
-          </div>
-          <div class="row q-mt-xs">
-            <div class="text-subtitle2">{{ getSelectedWeekdaysText }}</div>
-          </div>
-          <div class="row items-center q-mt-md">
-            <q-icon name="calendar_month" class="q-mr-sm" size="sm" />
-            <div class="text-bold">Wochenendtag:</div>
-          </div>
-          <div class="row q-mt-xs">
-            <div class="text-subtitle2">{{ getSelectedWeekendText }}</div>
+        <div v-if="planFrequency.value === 'once'" class="q-mt-sm">
+          <q-input
+            v-model="planOnceDate.value"
+            type="date"
+            label="Datum"
+            :min="new Date().toISOString().split('T')[0]"
+          />
+        </div>
+        <!-- Weekly buttons -->
+        <div
+          v-if="planFrequency.value === 'weekly'"
+          class="q-mt-sm row items-center q-gutter-sm justify-center no-wrap"
+        >
+          <div v-for="(day, index) in weekDays" :key="day">
+            <q-btn
+              round
+              :size="$q.platform.is.mobile ? '0.8rem' : '0.7rem'"
+              :flat="!selectedWeekDays[index]"
+              :outline="selectedWeekDays[index]"
+              color="primary"
+              :label="day"
+              :class="{ 'theme-text': !selectedWeekDays[index] }"
+              @click="toggleWeekDay(index)"
+            />
           </div>
         </div>
-      </div>
-
-      <div v-if="planFrequency.value === 'once'" class="q-mt-sm">
-        <q-input
-          v-model="planOnceDate.value"
-          type="date"
-          label="Datum"
-          :min="new Date().toISOString().split('T')[0]"
-        />
-      </div>
-
-      <div class="q-mt-lg row justify-end">
-        <q-btn
-          size="sm"
-          icon="delete"
-          :color="'primary'"
-          label="Löschen"
-          @click="deletePlan(props.chargePointId, props.plan.id)"
-        />
+        <div class="q-mt-lg row justify-end">
+          <q-btn
+            size="sm"
+            icon="delete"
+            :color="'primary'"
+            label="Löschen"
+            @click="deletePlan(props.chargePointId, props.plan.id)"
+          />
+        </div>
       </div>
     </q-card-section>
   </q-card>
@@ -154,9 +128,10 @@
 
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
+import { useQuasar } from 'quasar';
 import SliderStandard from './SliderStandard.vue';
 import ToggleStandard from './ToggleStandard.vue';
-import { ref, computed, watch, inject } from 'vue';
+import { computed } from 'vue';
 import { type ScheduledChargingPlan } from '../stores/mqtt-store-model';
 
 const props = defineProps<{
@@ -165,59 +140,11 @@ const props = defineProps<{
 }>();
 
 const mqttStore = useMqttStore();
+const $q = useQuasar();
 
-const weeklyMenuOpen = ref<boolean>(false);
-
-// Inject boolean value from the parent component
-const isDialogScrolled = inject('isDialogScrolled', ref(false));
-
-watch(
-  isDialogScrolled,
-  () => {
-    weeklyMenuOpen.value = false;
-  },
-  {
-    immediate: true,
-    flush: 'sync',
-  },
-);
-
-const weekDays = [
-  'Montag',
-  'Dienstag',
-  'Mittwoch',
-  'Donnerstag',
-  'Freitag',
-  'Samstag',
-  'Sonntag',
-];
+const weekDays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
 
-const getSelectedWeekdaysText = computed(() => {
-  return (
-    weekDays
-      .slice(0, 5)
-      .filter((_, index) => selectedWeekDays.value[index])
-      .join(', ') || 'Keine Werktage ausgewählt'
-  );
-});
-
-const getSelectedWeekendText = computed(() => {
-  return (
-    weekDays
-      .slice(5)
-      .filter((_, index) => selectedWeekDays.value[index + 5])
-      .join(', ') || 'Keine Wochenendtag ausgewählt'
-  );
-});
-
-const showWeeklyMenu = (event: Event) => {
-  isDialogScrolled.value = false;
-  planFrequency.value.value = 'weekly';
-  weeklyMenuOpen.value = !weeklyMenuOpen.value;
-  event.stopPropagation();
-};
-
-const selectDay = (index: number) => {
+const toggleWeekDay = (index: number) => {
   const newArray = [...selectedWeekDays.value];
   newArray[index] = !newArray[index];
   selectedWeekDays.value = newArray;
@@ -323,18 +250,8 @@ const deletePlan = (chargePointId: number, planId: string) =>
 </script>
 
 <style scoped>
-.q-btn-group > div > .q-btn {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
 .q-btn-group .q-btn {
   min-width: 100px !important;
-}
-
-body.mobile .q-btn {
-  padding: 4px 8px;
-  font-size: 12px !important;
-  min-height: 30px;
+  font-size: 10px !important;
 }
 </style>
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue
index 5f606db9d8..05807bc631 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointSettings.vue
@@ -4,7 +4,7 @@
     :maximized="$q.platform.is.mobile"
     :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
   >
-    <q-card @scroll.capture="handleScroll">
+    <q-card>
       <q-card-section>
         <div class="row">
           <div class="text-h6">Einstellungen {{ name }}</div>
@@ -65,7 +65,7 @@
 <script setup lang="ts">
 import { useQuasar, QDialog } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { computed, ref, watch, provide } from 'vue';
+import { computed, ref, watch } from 'vue';
 import ChargePointInstantSettings from './ChargePointInstantSettings.vue';
 import ChargePointPVSettings from './ChargePointPVSettings.vue';
 import ChargePointScheduledSettings from './ChargePointScheduledSettings.vue';
@@ -82,14 +82,6 @@ const props = defineProps<{
   modelValue: boolean;
 }>();
 
-const isDialogScrolled = ref(false);
-
-const handleScroll = () => {
-  isDialogScrolled.value = true;
-};
-
-provide('isDialogScrolled', isDialogScrolled);
-
 const emit = defineEmits<{
   'update:model-value': [value: boolean];
 }>();
diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
index b105321224..33c883b547 100644
--- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
@@ -62,6 +62,9 @@ $toggle-off: #e0e0e0;
   background-color: var(--q-background-1);
   // Text color
   color: var(--q-brown-text);
+  .theme-text {
+    color: var(--q-brown-text) !important;
+  }
   // Header colors
   .q-header {
     background-color: var(--q-background-2);
@@ -162,6 +165,9 @@ $dark-tab-icon: #d7d9e0;
   background-color: var($dark-page);
   // Text color
   color: var(--q-white);
+  .theme-text {
+    color: var(--q-white) !important;
+  }
 
   // Override default dark theme background
   body.body--dark {

From 8cc8056707ff816ec006b53adcf372a609119ff6 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 18 Dec 2024 15:47:50 +0100
Subject: [PATCH 07/11] Date format scheduled charging once compatible with
 UI-settings project

---
 .../web_themes/standard/source/src/stores/mqtt-store-model.ts | 2 +-
 .../web_themes/standard/source/src/stores/mqtt-store.ts       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/standard/source/src/stores/mqtt-store-model.ts
index 04307c969d..05907f7672 100644
--- a/packages/modules/web_themes/standard/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/standard/source/src/stores/mqtt-store-model.ts
@@ -102,7 +102,7 @@ export interface ScheduledChargingPlan {
   active: boolean;
   frequency: {
     selected: string;
-    once?: string[];
+    once?: string;
     weekly?: boolean[];
     selected_days?: string[];
   };
diff --git a/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts
index 15dd4b4a4f..60327035bb 100644
--- a/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts
@@ -1811,14 +1811,14 @@ export const useMqttStore = defineStore('mqtt', () => {
       get() {
         const plans = vehicleScheduledChargingPlans(chargePointId).value;
         const plan = plans.find((p) => p.id === planId);
-        return plan?.frequency.once?.[0];
+        return plan?.frequency.once;
       },
       set(newValue: string) {
         const chargeTemplateId =
           chargePointConnectedVehicleChargeTemplateIndex(chargePointId);
         if (chargeTemplateId === undefined) return;
         const baseTopic = `openWB/vehicle/template/charge_template/${chargeTemplateId}/chargemode/scheduled_charging/plans/${planId}`;
-        updateTopic(baseTopic, [newValue], 'frequency.once', true);
+        updateTopic(baseTopic, newValue, 'frequency.once', true);
       },
     });
   };

From ff9f23c38bfb312a3d16e738cc4bc7eadce0ae21 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 18 Dec 2024 17:18:44 +0100
Subject: [PATCH 08/11] Add date to header when one time scheduled charging is
 selected

---
 .../components/ChargePointScheduledPlanHeader.vue    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
index 1ca055497b..b16a6d82ea 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanHeader.vue
@@ -22,7 +22,7 @@
               ? plan.frequency.selected_days
                 ? plan.frequency.selected_days.join(', ')
                 : ''
-              : 'einmalig'
+              : formattedDate
         }}
       </div>
       <q-icon name="schedule" size="sm" class="q-mr-xs white-icon" />
@@ -68,6 +68,16 @@ const planActive = computed({
     ).value = newValue;
   },
 });
+
+const formattedDate = computed(() => {
+  if (!props.plan.frequency.once) return 'Datum wählen';
+  const date = new Date(props.plan.frequency.once);
+  return date.toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  });
+});
 </script>
 
 <style scoped>

From e984567833a37c3ae25ecbb1b3a5f07533559810 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 19 Dec 2024 09:16:52 +0100
Subject: [PATCH 09/11] Rename function

---
 .../source/src/components/ChargePointScheduledPlanDetails.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
index 5d4f59f2d4..efe92dbdd4 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -108,7 +108,7 @@
               color="primary"
               :label="day"
               :class="{ 'theme-text': !selectedWeekDays[index] }"
-              @click="toggleWeekDay(index)"
+              @click="selectDay(index)"
             />
           </div>
         </div>
@@ -144,7 +144,7 @@ const $q = useQuasar();
 
 const weekDays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
 
-const toggleWeekDay = (index: number) => {
+const selectDay = (index: number) => {
   const newArray = [...selectedWeekDays.value];
   newArray[index] = !newArray[index];
   selectedWeekDays.value = newArray;

From 5872e07930813087c48e3f51964f3071340565d1 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 19 Dec 2024 09:36:44 +0100
Subject: [PATCH 10/11] Make deselected items unified standard grey color

---
 .../src/components/ChargePointScheduledPlanDetails.vue   | 2 +-
 .../standard/source/src/css/quasar.variables.scss        | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
index efe92dbdd4..ac2b42f634 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -107,7 +107,7 @@
               :outline="selectedWeekDays[index]"
               color="primary"
               :label="day"
-              :class="{ 'theme-text': !selectedWeekDays[index] }"
+              :class="{ deselected: !selectedWeekDays[index] }"
               @click="selectDay(index)"
             />
           </div>
diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
index 33c883b547..f2d8ce27d1 100644
--- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
@@ -41,6 +41,7 @@ $background-1: #e3e3ec;
 $background-2: #eeeef3;
 $brown-text: #524f57;
 $white: #ffffff;
+$grey: #9e9e9e; // Quasar's default grey
 $toggle-off: #e0e0e0;
 
 // Light theme (default)
@@ -56,6 +57,7 @@ $toggle-off: #e0e0e0;
   --q-background-2: #{$background-2};
   --q-brown-text: #{$brown-text};
   --q-white: #{$white};
+  --q-grey: #{$grey};
   --q-toggle-off: #{$toggle-off};
 
   // Main background
@@ -65,6 +67,9 @@ $toggle-off: #e0e0e0;
   .theme-text {
     color: var(--q-brown-text) !important;
   }
+  .deselected {
+    color: var(--q-grey) !important;
+  }
   // Header colors
   .q-header {
     background-color: var(--q-background-2);
@@ -157,6 +162,7 @@ $dark-tab-icon: #d7d9e0;
   --q-background-1: #{$dark-background-1};
   --q-background-2: #{$dark-background-2};
   --q-white: #{$white};
+  --q-grey: #{$grey};
   --q-carousel-control: #{$dark-carousel};
   --q-toggle-off: #{$toggle-off};
   --q-list: #{$dark-list};
@@ -168,6 +174,9 @@ $dark-tab-icon: #d7d9e0;
   .theme-text {
     color: var(--q-white) !important;
   }
+  .deselected {
+    color: var(--q-grey) !important;
+  }
 
   // Override default dark theme background
   body.body--dark {

From f861b4c4c3601e1a7f6575d6f8731bb645b3cae5 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Thu, 9 Jan 2025 10:20:06 +0100
Subject: [PATCH 11/11] Refactor functions for readability

---
 .../source/src/components/ChargePoint.vue     | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
index aba753a0e0..6898be7f33 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePoint.vue
@@ -112,29 +112,30 @@ const targetSoc = computed<number | undefined>(() => {
     mqttStore.chargePointConnectedVehicleInstantChargeLimit(
       props.chargePointId,
     ).value;
-  if (chargeMode.value === 'scheduled_charging') {
-    return mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value
-      ?.soc;
-  } else if (
-    chargeMode.value === 'instant_charging' &&
-    instantLimitMode === 'soc'
-  ) {
-    return mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
-      props.chargePointId,
-    )?.value;
-  } else if (chargeMode.value === 'pv_charging') {
-    return mqttStore.chargePointConnectedVehiclePVChargeMaxSoc(
-      props.chargePointId,
-    ).value;
-  } else {
-    return undefined;
+  switch (chargeMode.value) {
+    case 'scheduled_charging':
+      return mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value
+        ?.soc;
+    case 'instant_charging':
+      return instantLimitMode === 'soc'
+        ? mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
+            props.chargePointId,
+          ).value
+        : undefined;
+    case 'pv_charging':
+      return mqttStore.chargePointConnectedVehiclePVChargeMaxSoc(
+        props.chargePointId,
+      ).value;
+    default:
+      return undefined;
   }
 });
 
 const showSocTargetSlider = computed(() => {
-  return chargeMode.value === 'stop' || chargeMode.value === 'standby'
-    ? false
-    : true;
+  return (
+    chargeMode.value !== undefined &&
+    !['stop', 'standby'].includes(chargeMode.value)
+  );
 });
 
 const targetTime = computed(() => {