From b4cea3d7482eeac408227e750a9d2f270e06f62b Mon Sep 17 00:00:00 2001
From: Lutz Bender <github@lutz-bender.de>
Date: Thu, 28 Aug 2025 12:33:54 +0200
Subject: [PATCH] koala cleanup

---
 .../src/components/ChargePointEcoSettings.vue | 114 ++++---
 .../src/components/ChargePointModeButtons.vue |   3 +-
 .../ChargePointScheduledPlanButton.vue        |  13 +-
 .../ChargePointScheduledPlanDetails.vue       | 312 ------------------
 .../ChargePointScheduledSettings.vue          |   6 -
 .../ChargePointTimeChargingPlanButton.vue     |  13 +-
 .../ChargePointTimeChargingSettings.vue       |   6 -
 .../components/ChargePointVehicleSelect.vue   |  48 +++
 .../source/src/components/SliderStandard.vue  |   8 +-
 .../koala/source/src/layouts/MainLayout.vue   |   4 +-
 10 files changed, 123 insertions(+), 404 deletions(-)
 delete mode 100644 packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
index b8c6e6b597..23e56982b0 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointEcoSettings.vue
@@ -72,34 +72,36 @@
     <div class="text-subtitle2 q-my-sm">
       Preisgrenze für strompreisbasiertes Laden
     </div>
-    <div class="row items-center justify-center q-mb-xs q-gutter-x-xs">
-      <q-btn
-        v-if="maxPrice.value"
-        class="col-auto"
-        label="-1,00"
-        color="grey"
-        size="sm"
-        dense
-        @click="maxPrice.value = maxPrice.value - 1"
-      />
-      <q-btn
-        v-if="maxPrice.value"
-        class="col-auto"
-        label="-0,10"
-        color="grey"
-        size="sm"
-        dense
-        @click="maxPrice.value = maxPrice.value - 0.1"
-      />
-      <q-btn
-        v-if="maxPrice.value"
-        class="col-auto"
-        label="-0,01"
-        color="grey"
-        size="sm"
-        dense
-        @click="maxPrice.value = maxPrice.value - 0.01"
-      />
+    <div class="row no-wrap items-center justify-between q-mb-xs q-gutter-x-xs">
+      <div class="col-auto">
+        <q-btn
+          v-if="maxPrice.value"
+          class="col-auto q-mr-xs"
+          label="-1,00"
+          color="grey"
+          size="sm"
+          dense
+          @click="maxPrice.value = maxPrice.value - 1"
+        />
+        <q-btn
+          v-if="maxPrice.value"
+          class="col-auto q-mr-xs"
+          label="-0,10"
+          color="grey"
+          size="sm"
+          dense
+          @click="maxPrice.value = maxPrice.value - 0.1"
+        />
+        <q-btn
+          v-if="maxPrice.value"
+          class="col-auto"
+          label="-0,01"
+          color="grey"
+          size="sm"
+          dense
+          @click="maxPrice.value = maxPrice.value - 0.01"
+        />
+      </div>
       <div class="col-auto q-mx-sm">
         {{
           maxPrice.value?.toLocaleString(undefined, {
@@ -108,33 +110,35 @@
           }) + ' ct/kWh'
         }}
       </div>
-      <q-btn
-        v-if="maxPrice.value"
-        class="col-auto"
-        label="+0,01"
-        color="grey"
-        size="sm"
-        dense
-        @click="maxPrice.value = maxPrice.value + 0.01"
-      />
-      <q-btn
-        v-if="maxPrice.value"
-        class="col-auto"
-        label="+0,10"
-        color="grey"
-        size="sm"
-        dense
-        @click="maxPrice.value = maxPrice.value + 0.1"
-      />
-      <q-btn
-        v-if="maxPrice.value"
-        class="col-auto"
-        label="+1,00"
-        color="grey"
-        size="sm"
-        dense
-        @click="maxPrice.value = maxPrice.value + 1"
-      />
+      <div class="col-auto">
+        <q-btn
+          v-if="maxPrice.value"
+          class="col-auto q-mr-xs"
+          label="+0,01"
+          color="grey"
+          size="sm"
+          dense
+          @click="maxPrice.value = maxPrice.value + 0.01"
+        />
+        <q-btn
+          v-if="maxPrice.value"
+          class="col-auto q-mr-xs"
+          label="+0,10"
+          color="grey"
+          size="sm"
+          dense
+          @click="maxPrice.value = maxPrice.value + 0.1"
+        />
+        <q-btn
+          v-if="maxPrice.value"
+          class="col-auto"
+          label="+1,00"
+          color="grey"
+          size="sm"
+          dense
+          @click="maxPrice.value = maxPrice.value + 1"
+        />
+      </div>
     </div>
     <q-field filled class="q-mt-sm">
       <ElectricityTariffChart
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
index f3e7000a54..bf64d4d966 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
@@ -7,7 +7,7 @@
       transition-duration="500"
       color="primary"
       :label="currentModeLabel"
-      size="lg"
+      size="md"
       dropdown-icon="none"
       cover
       push
@@ -70,5 +70,6 @@ const currentModeLabel = computed(
 :deep(.q-btn-dropdown__arrow-container) {
   width: 0;
   padding: 0;
+  margin: 0;
 }
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanButton.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanButton.vue
index e214bc4d40..935b8171c4 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanButton.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanButton.vue
@@ -140,25 +140,22 @@ const formattedDate = computed(() => {
 });
 </script>
 
-<style scoped>
-.full-width {
-  width: 100%;
-}
+<style scoped lang="scss">
 .plan-name {
   font-weight: bold;
 }
+
 .plan-details {
   display: flex;
   justify-content: center;
 }
+
 .plan-details > div {
   display: flex;
   align-items: center;
 }
+
 .plan-details > div:not(:last-child) {
-  margin-right: 0.5em;
-}
-body.mobile .height {
-  height: 2.5em;
+  margin-right: #{map-get($space-sm, x)};
 }
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue
deleted file mode 100644
index 0effa55233..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue
+++ /dev/null
@@ -1,312 +0,0 @@
-<template>
-  <q-card class="rounded-borders-md">
-    <q-card-section>
-      <div class="row items-center q-mb-sm">
-        <q-input v-model="planName.value" label="Plan Name" class="col" />
-      </div>
-      <div class="row items-center">
-        <div class="text-subtitle2 q-mr-sm">Aktiv</div>
-        <ToggleStandard
-          v-model="planActive.value"
-          :size="'sm'"
-          color="positive"
-        />
-      </div>
-      <div class="row items-center q-mb-md">
-        <q-input
-          v-model="planTime.value"
-          type="time"
-          label="Ziel-Uhrzeit"
-          class="col"
-        />
-      </div>
-      <SliderStandard
-        class="q-mb-md"
-        title="Ladestrom"
-        :min="6"
-        :max="32"
-        unit="A"
-        v-model="planCurrent.value"
-      />
-      <q-btn-group class="full-width">
-        <q-btn
-          size="sm"
-          class="flex-grow"
-          :color="planLimitSelected.value === 'soc' ? 'primary' : 'grey'"
-          @click="planLimitSelected.value = 'soc'"
-          label="SoC"
-        />
-        <q-btn
-          size="sm"
-          class="flex-grow"
-          :color="planLimitSelected.value === 'amount' ? 'primary' : 'grey'"
-          @click="planLimitSelected.value = 'amount'"
-          label="Amount"
-        />
-      </q-btn-group>
-      <div v-if="planLimitSelected.value === 'soc'" class="q-mt-md">
-        <SliderStandard
-          title="EV-SoC"
-          :min="5"
-          :max="100"
-          :step="5"
-          unit="%"
-          v-model="planSocScheduled.value"
-          class="q-mt-sm"
-        />
-        <SliderStandard
-          title="Fahrzeug-SoC mit Überschuss"
-          :min="5"
-          :max="100"
-          :step="5"
-          unit="%"
-          v-model="planSocLimit.value"
-        />
-      </div>
-      <q-input
-        v-if="planLimitSelected.value === 'amount'"
-        v-model="planLimitAmount.value"
-        label="Energiemenge (kWh)"
-        class="col"
-      />
-      <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"
-            :color="planFrequency.value === 'once' ? 'primary' : 'grey'"
-            @click="planFrequency.value = 'once'"
-            label="Einmalig"
-          />
-          <q-btn
-            size="sm"
-            :color="planFrequency.value === 'daily' ? 'primary' : 'grey'"
-            @click="planFrequency.value = 'daily'"
-            label="Täglich"
-          />
-          <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 === '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="{ deselected: !selectedWeekDays[index] }"
-              @click="selectDay(index)"
-            />
-          </div>
-        </div>
-      </div>
-      <div class="row items-center">
-        <div class="text-subtitle2 q-mr-sm">Strompreisbasiert laden</div>
-        <ToggleStandard
-          v-model="planEtActive.value"
-          :size="'sm'"
-          color="positive"
-        />
-      </div>
-      <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen Zielladen</div>
-      <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-        <q-btn-group class="col">
-          <q-btn
-            v-for="option in phaseOptions"
-            :key="option.value"
-            :color="planNumPhases.value === option.value ? 'primary' : 'grey'"
-            :label="option.label"
-            size="sm"
-            class="col"
-            @click="planNumPhases.value = option.value"
-          />
-        </q-btn-group>
-      </div>
-      <div class="text-subtitle2 q-mt-sm q-mr-sm">
-        Anzahl Phasen bei PV-Überschuss
-      </div>
-      <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-        <q-btn-group class="col">
-          <q-btn
-            v-for="option in phaseOptions"
-            :key="option.value"
-            :color="planNumPhasesPv.value === option.value ? 'primary' : 'grey'"
-            :label="option.label"
-            size="sm"
-            class="col"
-            @click="planNumPhasesPv.value = option.value"
-          />
-        </q-btn-group>
-      </div>
-    </q-card-section>
-  </q-card>
-</template>
-
-<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 { computed } from 'vue';
-import { type ScheduledChargingPlan } from '../stores/mqtt-store-model';
-
-const props = defineProps<{
-  chargePointId: number;
-  plan: ScheduledChargingPlan;
-}>();
-
-const mqttStore = useMqttStore();
-const $q = useQuasar();
-
-const weekDays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
-
-const phaseOptions = [
-  { value: 1, label: '1' },
-  { value: 3, label: 'Maximum' },
-  { value: 0, label: 'Automatik' },
-];
-
-const selectDay = (index: number) => {
-  const newArray = [...selectedWeekDays.value];
-  newArray[index] = !newArray[index];
-  selectedWeekDays.value = newArray;
-};
-
-const planActive = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanActive(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planEtActive = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanEtActive(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planCurrent = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanCurrent(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planLimitSelected = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanLimitSelected(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planLimitAmount = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanEnergyAmount(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planName = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanName(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planTime = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanTime(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planFrequency = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanFrequencySelected(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planOnceDate = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanOnceDate(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const selectedWeekDays = computed<boolean[]>({
-  get() {
-    return (
-      mqttStore.vehicleScheduledChargingPlanWeeklyDays(
-        props.chargePointId,
-        props.plan.id,
-      ).value ?? Array(7).fill(false)
-    );
-  },
-  set(newValue: boolean[]) {
-    mqttStore.vehicleScheduledChargingPlanWeeklyDays(
-      props.chargePointId,
-      props.plan.id,
-    ).value = newValue;
-  },
-});
-
-const planSocLimit = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanSocLimit(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planSocScheduled = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanSocScheduled(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planNumPhases = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanPhases(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const planNumPhasesPv = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanPhasesPv(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-</script>
-
-<style scoped>
-.q-btn-group .q-btn {
-  min-width: 100px !important;
-  font-size: 10px !important;
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledSettings.vue
index d3b911d436..78a604b9ef 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledSettings.vue
@@ -37,9 +37,3 @@ const plans = computed(() =>
   mqttStore.vehicleScheduledChargingPlans(props.chargePointId),
 );
 </script>
-
-<style scoped>
-.full-width {
-  width: 100%;
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlanButton.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlanButton.vue
index 7e1ca9ad50..e478ff49b1 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlanButton.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingPlanButton.vue
@@ -130,25 +130,22 @@ const formattedDateRange = computed(() => {
 });
 </script>
 
-<style scoped>
-.full-width {
-  width: 100%;
-}
+<style scoped lang="scss">
 .plan-name {
   font-weight: bold;
 }
+
 .plan-details {
   display: flex;
   justify-content: center;
 }
+
 .plan-details > div {
   display: flex;
   align-items: center;
 }
+
 .plan-details > div:not(:last-child) {
-  margin-right: 0.5em;
-}
-body.mobile .height {
-  height: 2.5em;
+  margin-right: #{map-get($space-sm, x)};
 }
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingSettings.vue
index 92210d547f..e4f34e0558 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointTimeChargingSettings.vue
@@ -50,9 +50,3 @@ const timeChargingEnabled = mqttStore.chargePointConnectedVehicleTimeCharging(
   props.chargePointId,
 );
 </script>
-
-<style scoped>
-.full-width {
-  width: 100%;
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
index 15ad9514c4..522dfdd128 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue
@@ -3,6 +3,43 @@
     <q-icon name="directions_car" />
     {{ connectedVehicle?.name }}
   </div>
+  <q-btn-dropdown
+    v-else-if="isMobile"
+    color="grey"
+    transition-show="scale"
+    transition-hide="scale"
+    transition-duration="500"
+    size="md"
+    dropdown-icon="none"
+    cover
+    push
+    class="no-drop-down-arrow"
+  >
+    <template #label>
+      <span class="block ellipsis" :title="connectedVehicle?.name">
+        <q-icon name="directions_car" />
+        {{ connectedVehicle?.name }}
+      </span>
+    </template>
+    <q-list>
+      <template v-for="(vehicle, index) in vehicles" :key="vehicle.id">
+        <q-item
+          clickable
+          v-close-popup
+          @click="connectedVehicle = vehicle"
+          :active="connectedVehicle.id === vehicle.id"
+          active-class="bg-primary text-white"
+        >
+          <q-item-section class="text-center text-weight-bold">
+            <q-item-label class="ellipsis" :title="vehicle.name">{{
+              vehicle.name
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-separator v-if="index < vehicles.length - 1" />
+      </template>
+    </q-list>
+  </q-btn-dropdown>
   <q-btn-dropdown v-else color="grey" dense no-caps>
     <template #label>
       <span class="ellipsis q-ml-xs" :title="connectedVehicle?.name">
@@ -31,6 +68,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { Platform } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
 const props = defineProps({
@@ -44,6 +82,8 @@ const props = defineProps({
   },
 });
 
+const isMobile = computed(() => Platform.is.mobile);
+
 const mqttStore = useMqttStore();
 
 const connectedVehicle = mqttStore.chargePointConnectedVehicleInfo(
@@ -52,3 +92,11 @@ const connectedVehicle = mqttStore.chargePointConnectedVehicleInfo(
 
 const vehicles = computed(() => mqttStore.vehicleList);
 </script>
+
+<style scoped>
+.no-drop-down-arrow :deep(.q-btn-dropdown__arrow-container) {
+  width: 0;
+  padding: 0;
+  margin: 0;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
index eca24ca99d..6e05b1b7bb 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderStandard.vue
@@ -12,7 +12,7 @@
         "
         :step="props.step"
         color="primary"
-        style="width: 75%"
+        class="col"
         track-size="0.5em"
         thumb-size="1.7em"
         @touchstart.stop
@@ -20,7 +20,7 @@
         @touchend.stop
         @change="updateValue"
       />
-      <div class="q-ml-md no-wrap" :class="myClass">
+      <div class="q-ml-sm no-wrap" :class="['col-2', 'text-right', myClass]">
         {{ displayValue }} {{ displayUnit }}
       </div>
     </div>
@@ -175,8 +175,4 @@ const myClass = computed(() => {
 .pending {
   color: $red;
 }
-
-.flex-grow {
-  flex-grow: 1;
-}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue b/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
index 8dea2e77be..27a04da474 100644
--- a/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
+++ b/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
@@ -157,9 +157,9 @@ onMounted(() => {
 });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .centered-container {
-  max-width: 1500px;
+  max-width: $breakpoint-lg-min;
   margin-left: auto;
   margin-right: auto;
 }