From c2b240e7286c854a2e0e86ee3561cb231515bb0f Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 7 Apr 2025 15:11:02 +0200
Subject: [PATCH 1/9] Add chargepoint table view

---
 packages/modules/web_themes/koala/config.py   |   7 +-
 .../source/src/components/ChargePointCard.vue |   1 +
 .../src/components/ChargePointInformation.vue | 253 +++++++++++++++++-
 .../models/chargepoint-information-models.ts  |  19 ++
 .../source/src/composables/useChargeModes.ts  |  12 +
 .../source/src/css/quasar.variables.scss      | 114 ++++++++
 .../source/src/stores/mqtt-store-model.ts     |   2 +
 7 files changed, 399 insertions(+), 9 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts
 create mode 100644 packages/modules/web_themes/koala/source/src/composables/useChargeModes.ts

diff --git a/packages/modules/web_themes/koala/config.py b/packages/modules/web_themes/koala/config.py
index dfe89a07b6..2c5da9198f 100644
--- a/packages/modules/web_themes/koala/config.py
+++ b/packages/modules/web_themes/koala/config.py
@@ -6,9 +6,12 @@
 @auto_str
 class KoalaWebThemeConfiguration:
     def __init__(self,
-                 history_chart_range: int = 3600) -> None:
+                 history_chart_range: int = 3600,
+                 card_view_breakpoint: int = 4,
+                 table_search_input_field: bool = False) -> None:
         self.history_chart_range = history_chart_range
-
+        self.card_view_breakpoint = card_view_breakpoint
+        self.table_search_input_field = table_search_input_field
 
 @auto_str
 class KoalaWebTheme:
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 4cf0d9ecdb..1d5e12b6e1 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -44,6 +44,7 @@
         :current-value="currentValue"
         :target-time="targetTime"
       />
+      <slot name="card-footer"></slot>
     </q-card-section>
   </q-card>
   <!-- //////////////////////  Settings popup dialog   //////////////////// -->
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 8c2fac320a..344b71cdbf 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -1,19 +1,258 @@
 <template>
-  <BaseCarousel :items="chargePointIds">
-    <template #item="{ item }">
-      <ChargePointCard :charge-point-id="item" />
-    </template>
-  </BaseCarousel>
+  <div>
+    <BaseCarousel
+      v-if="chargePointIds.length <= cardViewBreakpoint"
+      :items="chargePointIds"
+    >
+      <template #item="{ item }">
+        <ChargePointCard :charge-point-id="item" />
+      </template>
+    </BaseCarousel>
+
+    <div v-else class="q-pa-md">
+      <q-table
+        class="sticky-header-table"
+        :rows="rows"
+        :columns="mobile ? columnsMobile : columns"
+        row-key="id"
+        :filter="filter"
+        virtual-scroll
+        :virtual-scroll-item-size="48"
+        :virtual-scroll-sticky-size-start="48"
+        :style="{ height: mobile ? '35vh' : '40vh' }"
+        @row-click="onRowClick"
+        binary-state-sort
+        :pagination="{ rowsPerPage: 0 }"
+        hide-bottom
+      >
+        <template v-slot:top v-if="searchInputVisible">
+          <div class="row full-width items-center q-mb-sm">
+            <div class="col">
+              <q-input
+                v-model="filter"
+                dense
+                outlined
+                color="white"
+                placeholder="Suchen..."
+                class="search-field white-outline-input"
+                input-class="text-white"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" color="white" />
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </template>
+        <template v-slot:body-cell-plugged="props">
+          <q-td :props="props">
+            <ChargePointStateIcon :charge-point-id="props.row.id" />
+          </q-td>
+        </template>
+      </q-table>
+      <!-- ChargePointCard -->
+      <q-dialog
+        v-model="dialogVisible"
+        transition-show="fade"
+        transition-hide="fade"
+        :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
+      >
+        <div class="dialog-content">
+          <ChargePointCard
+            v-if="selectedChargePointId !== null"
+            :charge-point-id="selectedChargePointId"
+          >
+            <template #card-footer>
+              <div class="card-footer">
+                <q-btn
+                  color="primary"
+                  flat
+                  no-caps
+                  v-close-popup
+                  class="close-button"
+                  size="md"
+                  >Schließen</q-btn
+                >
+              </div>
+            </template>
+          </ChargePointCard>
+        </div>
+      </q-dialog>
+    </div>
+  </div>
 </template>
 
+<style scoped>
+.search-field {
+  width: 100%;
+  max-width: 18em;
+}
+
+.dialog-content {
+  width: auto;
+  max-width: 24em;
+}
+
+.close-button {
+  position: absolute;
+  bottom: 0.4em;
+  right: 0.4em;
+  z-index: 1;
+  background: transparent;
+}
+
+.card-footer {
+  height: 1.9em;
+}
+</style>
+
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { useQuasar, Platform } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
-
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import ChargePointCard from 'src/components/ChargePointCard.vue';
+import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
+import { useChargeModes } from 'src/composables/useChargeModes';
+import { QTableColumn } from 'src/components/models/chargepoint-information-models';
+
+const $q = useQuasar();
+const mobile = computed(() => Platform.is.mobile);
 
 const mqttStore = useMqttStore();
+const selectedChargePointId = ref<number | null>(null);
+const dialogVisible = ref(false);
+const filter = ref('');
 
 const chargePointIds = computed(() => mqttStore.chargePointIds);
+
+const cardViewBreakpoint = computed( ()=> mqttStore.themeConfiguration?.card_view_breakpoint || 4);
+const searchInputVisible = computed(() => mqttStore.themeConfiguration?.table_search_input_field);
+
+const { chargeModes } = useChargeModes();
+
+const rows = computed(() => {
+  return chargePointIds.value.map((id) => {
+    const chargePointName = mqttStore.chargePointName(id);
+    const vehicleName = mqttStore.chargePointConnectedVehicleInfo(id).value?.name || 'Kein Fahrzeug' ;
+    const plugState = mqttStore.chargePointPlugState(id) ? 'Ja' : 'Nein';
+    const chargeModeValue =
+      mqttStore.chargePointConnectedVehicleChargeMode(id).value;
+    const chargeModeObj = chargeModes.find(
+      (mode) => mode.value === chargeModeValue,
+    );
+    const chargeMode = chargeModeObj ? chargeModeObj.label : chargeModeValue;
+    const soc = Math.round(
+      mqttStore.chargePointConnectedVehicleSoc(id).value?.soc || 0,
+    );
+    const socDisplay = `${soc}%`;
+    const power = mqttStore.chargePointPower(id, 'textValue');
+    const energyCharged = mqttStore.chargePointEnergyChargedPlugged(
+      id,
+      'textValue',
+    );
+    return {
+      id: id,
+      name: chargePointName,
+      vehicle: vehicleName,
+      plugged: plugState,
+      mode: chargeMode,
+      soc: socDisplay,
+      power: power,
+      charged: energyCharged,
+    };
+  });
+});
+
+const columns: QTableColumn[] = [
+  {
+    name: 'name',
+    label: 'Ladepunkt',
+    field: 'name',
+    sortable: true,
+    align: 'left',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'vehicle',
+    label: 'Fahrzeug',
+    field: 'vehicle',
+    sortable: true,
+    align: 'left',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'plugged',
+    label: 'Status',
+    field: 'plugged',
+    sortable: true,
+    align: 'center',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'mode',
+    label: 'Mode',
+    field: 'mode',
+    sortable: true,
+    align: 'left',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'soc',
+    label: 'Ladestand',
+    field: 'soc',
+    sortable: true,
+    align: 'left',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'power',
+    label: 'Leistung',
+    field: 'power',
+    sortable: true,
+    align: 'left',
+    headerStyle: 'font-weight: bold',
+  },
+  {
+    name: 'charged',
+    label: 'Geladen',
+    field: 'charged',
+    sortable: true,
+    align: 'left',
+    headerStyle: 'font-weight: bold',
+  },
+];
+const columnsMobile = computed((): QTableColumn[] => {
+  return [
+    {
+      name: 'name',
+      label: 'Ladepunkt',
+      field: 'name',
+      sortable: true,
+      align: 'left',
+      headerStyle: 'font-weight: bold',
+    },
+    {
+      name: 'vehicle',
+      label: 'Fahrzeug',
+      field: 'vehicle',
+      sortable: true,
+      align: 'left',
+      headerStyle: 'font-weight: bold',
+    },
+    {
+      name: 'plugged',
+      label: 'Status',
+      field: 'plugged',
+      sortable: true,
+      align: 'center',
+      headerStyle: 'font-weight: bold',
+    },
+  ];
+});
+
+const onRowClick = (evt: Event, row: { id: number }) => {
+  selectedChargePointId.value = row.id;
+  dialogVisible.value = true;
+};
 </script>
diff --git a/packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts b/packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts
new file mode 100644
index 0000000000..138f4c8c50
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts
@@ -0,0 +1,19 @@
+export type QTableColumn = {
+  name: string;
+  label: string;
+  field: string | ((row: Record<string, unknown>) => unknown);
+  required?: boolean;
+  align?: 'left' | 'right' | 'center';
+  sortable?: boolean;
+  sort?: (
+    a: unknown,
+    b: unknown,
+    rowA: Record<string, unknown>,
+    rowB: Record<string, unknown>,
+  ) => number;
+  format?: (val: unknown, row: Record<string, unknown>) => unknown;
+  style?: string | ((row: Record<string, unknown>) => string);
+  classes?: string | ((row: Record<string, unknown>) => string);
+  headerStyle?: string;
+  headerClasses?: string;
+};
diff --git a/packages/modules/web_themes/koala/source/src/composables/useChargeModes.ts b/packages/modules/web_themes/koala/source/src/composables/useChargeModes.ts
new file mode 100644
index 0000000000..340cd59a79
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/composables/useChargeModes.ts
@@ -0,0 +1,12 @@
+export const useChargeModes = () => {
+  const chargeModes = [
+    { value: 'instant_charging', label: 'Sofort', color: 'negative' },
+    { value: 'pv_charging', label: 'PV', color: 'positive' },
+    { value: 'scheduled_charging', label: 'Ziel', color: 'primary' },
+    { value: 'eco_charging', label: 'Eco', color: 'secondary' },
+    { value: 'stop', label: 'Stop', color: 'light' },
+  ];
+  return {
+    chargeModes,
+  };
+};
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 42a1018f06..001ade7642 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -131,6 +131,66 @@ $battery: #ba7128;
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
+  // Search input border color for table view
+  .white-outline-input.q-field--outlined .q-field__control:before {
+    border-color: var(--q-white) !important;
+  }
+  // Table styling
+  .sticky-header-table {
+    /* height or max-height is important */
+    height: 310px;
+
+    .q-table__top,
+    .q-table__bottom,
+    thead tr:first-child th {
+      background-color: var(--q-primary);
+      color: var(--q-white);
+      font-size: 0.9rem;
+    }
+
+    thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+
+    thead tr:first-child th {
+      top: 0;
+    }
+
+    /* this is when the loading indicator appears */
+    &.q-table--loading thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 48px;
+    }
+
+    /* prevent scrolling behind sticky top row on focus */
+    tbody {
+      /* height of all previous header rows */
+      scroll-margin-top: 48px;
+      background-color: var(--q-secondary);
+      color: var(--q-brown-text);
+    }
+
+    tbody tr,
+    .q-table__middle,
+    .q-table__grid-content
+      .q-virtual-scroll
+      .q-virtual-scroll--vertical
+      scroll {
+      background-color: var(--q-secondary);
+    }
+
+    tbody tr:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    // Scrollbar styling for tables - Light Theme
+    .q-table__middle.q-virtual-scroll {
+      // Firefox
+      scrollbar-width: thin;
+      scrollbar-color: var(--q-primary) var(--q-secondary);
+    }
+  }
 }
 // Dark Theme Base Colors
 $dark-page: #000000; // This overrides Quasar's default dark page color
@@ -262,4 +322,58 @@ $dark-tab-icon: #d7d9e0;
   .q-toggle__inner--truthy .q-toggle__thumb:after {
     background-color: currentColor;
   }
+
+  // Table styling - Dark Theme
+  .sticky-header-table {
+    /* height or max-height is important */
+    height: 310px;
+
+    .q-table__top,
+    .q-table__bottom,
+    thead tr:first-child th {
+      background-color: var(--q-primary);
+      color: var(--q-white);
+      font-size: 0.9rem;
+    }
+
+    thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+
+    thead tr:first-child th {
+      top: 0;
+    }
+
+    /* this is when the loading indicator appears */
+    &.q-table--loading thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 48px;
+    }
+
+    /* prevent scrolling behind sticky top row on focus */
+    tbody {
+      /* height of all previous header rows */
+      scroll-margin-top: 48px;
+      background-color: var(--q-secondary);
+      color: var(--q-white);
+    }
+
+    tbody tr,
+    .q-table__middle,
+    .q-table__grid-content {
+      background-color: var(--q-secondary);
+    }
+
+    tbody tr:hover {
+      background-color: rgba(255, 255, 255, 0.07);
+    }
+
+    // Scrollbar styling for tables - Dark Theme
+    .q-table__middle.q-virtual-scroll {
+      // Firefox
+      scrollbar-width: thin;
+      scrollbar-color: var(--q-primary) var(--q-secondary);
+    }
+  }
 }
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index b92fc357d3..f4fdddabaf 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -1,5 +1,7 @@
 export interface ThemeConfiguration {
   history_chart_range: number;
+  card_view_breakpoint: number;
+  table_search_input_field: boolean;
 }
 
 export interface ConnectionOptions {

From 390fb80a8d49cc707697d45db54cc56c75664491 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 7 Apr 2025 15:27:04 +0200
Subject: [PATCH 2/9] Charge modes migrated to composable

---
 .../source/src/components/ChargePointModeButtons.vue  | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

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 539b811af6..e9c3824041 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue
@@ -47,23 +47,16 @@
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { computed } from 'vue';
 import { Platform } from 'quasar';
+import { useChargeModes } from 'src/composables/useChargeModes';
 
 const props = defineProps<{
   chargePointId: number;
 }>();
 
 const isMobile = computed(() => Platform.is.mobile);
-
+const { chargeModes } = useChargeModes();
 const mqttStore = useMqttStore();
 
-const chargeModes = [
-  { value: 'instant_charging', label: 'Sofort', color: 'negative' },
-  { value: 'pv_charging', label: 'PV', color: 'positive' },
-  { value: 'scheduled_charging', label: 'Ziel', color: 'primary' },
-  { value: 'eco_charging', label: 'Eco', color: 'secondary' },
-  { value: 'stop', label: 'Stop', color: 'light' },
-];
-
 const chargeMode = computed(() =>
   mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId),
 );

From 80eb53b210741f7d0f78c5f0809db4d7bb5a53fa Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 7 Apr 2025 15:28:18 +0200
Subject: [PATCH 3/9] Add formating for longer text in state message

---
 .../source/src/components/ChargePointStateMessage.vue     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
index cb70e4146b..9a6367bda4 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="row q-mt-sm q-pa-sm bg-primary text-white no-wrap"
+    class="row q-mt-sm q-pa-sm bg-primary text-white no-wrap message-text"
     color="primary"
     style="border-radius: 10px"
   >
@@ -23,3 +23,9 @@ const message = computed(() =>
   mqttStore.chargePointStateMessage(props.chargePointId),
 );
 </script>
+
+<style scoped>
+.message-text {
+  overflow-y: auto;
+}
+</style>

From a8dfa0b53ed4636540080288b71bc7b798310a0d Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 7 Apr 2025 15:28:46 +0200
Subject: [PATCH 4/9] Formatting

---
 .../web_themes/koala/source/src/components/SliderDouble.vue  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
index 8852b2bef4..cfb2a555b8 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -46,10 +46,7 @@
         <div>Zielzeit</div>
         <div>{{ props.targetTime }}</div>
       </div>
-      <div
-        v-if="targetSet"
-        class="col text-right"
-      >
+      <div v-if="targetSet" class="col text-right">
         <div>
           {{ props.limitMode == 'soc' ? 'Ladeziel' : 'Energieziel' }}
         </div>

From 04af9a3311e4fc0ec26be749bfd097d18cf5424f Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 7 Apr 2025 15:47:08 +0200
Subject: [PATCH 5/9] Add display mode to drawer component in mainlayout

---
 .../koala/source/src/layouts/MainLayout.vue   | 99 ++++++++++++++-----
 1 file changed, 75 insertions(+), 24 deletions(-)

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 38a52b867a..a4f10a6996 100644
--- a/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
+++ b/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
@@ -4,13 +4,6 @@
       <q-toolbar>
         <q-btn dense flat round icon="menu" @click="drawer = !drawer" />
         <q-toolbar-title>openWB</q-toolbar-title>
-        <q-btn
-          flat
-          round
-          :icon="colorModeIcon"
-          @click="toggleColorMode()"
-          aria-label="Color-Mode"
-        />
       </q-toolbar>
     </q-header>
 
@@ -63,6 +56,61 @@
 
             <q-item-section> Einstellungen </q-item-section>
           </q-item>
+
+          <q-separator />
+
+          <q-item-label header>Anzeigeeinstellungen</q-item-label>
+
+          <q-item>
+            <q-item-section avatar>
+              <q-icon name="light_mode" />
+            </q-item-section>
+
+            <q-item-section>
+              <q-item-label>Darstellungsmodus</q-item-label>
+            </q-item-section>
+
+            <q-item-section side>
+              <q-btn-group flat>
+                <q-btn
+                  flat
+                  round
+                  :color="themeMode === 'light' ? 'primary' : ''"
+                  icon="light_mode"
+                  @click="setTheme('light')"
+                  size="sm"
+                  :disable="themeMode === 'light'"
+                  aria-label="Light Mode"
+                >
+                  <q-tooltip>Hell</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  :color="themeMode === 'dark' ? 'primary' : ''"
+                  icon="dark_mode"
+                  @click="setTheme('dark')"
+                  size="sm"
+                  :disable="themeMode === 'dark'"
+                  aria-label="Dark Mode"
+                >
+                  <q-tooltip>Dunkel</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  :color="themeMode === 'auto' ? 'primary' : ''"
+                  icon="devices"
+                  @click="setTheme('auto')"
+                  size="sm"
+                  :disable="themeMode === 'auto'"
+                  aria-label="System Mode"
+                >
+                  <q-tooltip>Systemeinstellung</q-tooltip>
+                </q-btn>
+              </q-btn-group>
+            </q-item-section>
+          </q-item>
         </q-list>
       </q-scroll-area>
     </q-drawer>
@@ -75,7 +123,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 const $q = useQuasar();
 
@@ -84,25 +132,28 @@ defineOptions({
 });
 
 const drawer = ref(false);
-
-/**
- * Computed property that returns the icon name for the color mode button.
- */
-const colorModeIcon = computed(() => {
-  return $q.dark.isActive ? 'dark_mode' : 'light_mode';
-});
-
-/**
- * Toggles the color mode of the application.
- */
-function toggleColorMode() {
-  $q.dark.toggle();
-  localStorage.setItem('theme', $q.dark.isActive ? 'dark' : 'light');
+const themeMode = ref('auto');
+
+const setTheme = (mode: 'light' | 'dark' | 'auto') => {
+  themeMode.value = mode;
+  if (mode === 'auto') {
+    localStorage.removeItem('theme');
+    $q.dark.set('auto');
+  } else {
+    $q.dark.set(mode === 'dark');
+    localStorage.setItem('theme', mode);
+  }
 }
 
 onMounted(() => {
-  const savedTheme = localStorage.getItem('theme') || 'light'; // Set light as default theme
-  $q.dark.set(savedTheme === 'dark');
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    themeMode.value = savedTheme as 'light' | 'dark';
+    $q.dark.set(savedTheme === 'dark');
+  } else {
+    themeMode.value = 'auto';
+    $q.dark.set('auto');
+  }
 });
 </script>
 

From 06400b190b89c8e88f9358303d26451e0dea5575 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 7 Apr 2025 15:48:49 +0200
Subject: [PATCH 6/9] Formatting

---
 .../source/src/components/ChargePointInformation.vue | 12 +++++++++---
 .../koala/source/src/layouts/MainLayout.vue          |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index 344b71cdbf..fd8ecd44ea 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -126,15 +126,21 @@ const filter = ref('');
 
 const chargePointIds = computed(() => mqttStore.chargePointIds);
 
-const cardViewBreakpoint = computed( ()=> mqttStore.themeConfiguration?.card_view_breakpoint || 4);
-const searchInputVisible = computed(() => mqttStore.themeConfiguration?.table_search_input_field);
+const cardViewBreakpoint = computed(
+  () => mqttStore.themeConfiguration?.card_view_breakpoint || 4,
+);
+const searchInputVisible = computed(
+  () => mqttStore.themeConfiguration?.table_search_input_field,
+);
 
 const { chargeModes } = useChargeModes();
 
 const rows = computed(() => {
   return chargePointIds.value.map((id) => {
     const chargePointName = mqttStore.chargePointName(id);
-    const vehicleName = mqttStore.chargePointConnectedVehicleInfo(id).value?.name || 'Kein Fahrzeug' ;
+    const vehicleName =
+      mqttStore.chargePointConnectedVehicleInfo(id).value?.name ||
+      'Kein Fahrzeug';
     const plugState = mqttStore.chargePointPlugState(id) ? 'Ja' : 'Nein';
     const chargeModeValue =
       mqttStore.chargePointConnectedVehicleChargeMode(id).value;
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 a4f10a6996..fee95d6b71 100644
--- a/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
+++ b/packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue
@@ -143,7 +143,7 @@ const setTheme = (mode: 'light' | 'dark' | 'auto') => {
     $q.dark.set(mode === 'dark');
     localStorage.setItem('theme', mode);
   }
-}
+};
 
 onMounted(() => {
   const savedTheme = localStorage.getItem('theme');

From 82494c938ecf30ed91e1ce03d1b9be5f986810b5 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 8 Apr 2025 19:40:15 +0200
Subject: [PATCH 7/9] Quasar table moved into a reuseable component

---
 .../koala/source/src/components/BaseTable.vue | 106 ++++++++++++++
 .../src/components/ChargePointInformation.vue | 134 +++++++-----------
 .../components/models/base-table-models.ts    |   4 +
 .../models/chargepoint-information-models.ts  |  31 ++--
 4 files changed, 173 insertions(+), 102 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/BaseTable.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseTable.vue b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
new file mode 100644
index 0000000000..5de3eaeff7
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/BaseTable.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      class="sticky-header-table"
+      :rows="rows"
+      :columns="columns"
+      row-key="id"
+      :filter="filter"
+      :filter-method="customFilterMethod"
+      virtual-scroll
+      :virtual-scroll-item-size="48"
+      :virtual-scroll-sticky-size-start="48"
+      :style="{ height: tableHeight }"
+      @row-click="onRowClick"
+      binary-state-sort
+      :pagination="{ rowsPerPage: 0 }"
+      hide-bottom
+    >
+      <template v-slot:top v-if="searchInputVisible">
+        <div class="row full-width items-center q-mb-sm">
+          <div class="col">
+            <q-input
+              v-model="filterModel"
+              dense
+              outlined
+              color="white"
+              placeholder="Suchen..."
+              class="search-field white-outline-input"
+              input-class="text-white"
+            >
+              <template v-slot:append>
+                <q-icon name="search" color="white" />
+              </template>
+            </q-input>
+          </div>
+        </div>
+      </template>
+
+      <!-- Dynamic slot for custom cell rendering -->
+      <template
+        v-for="(_, name) in $slots"
+        :key="name"
+        v-slot:[name]="slotData"
+      >
+        <slot :name="name" v-bind="slotData"></slot>
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<style scoped>
+.search-field {
+  width: 100%;
+  max-width: 18em;
+}
+</style>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { QTableColumn, QTableProps } from 'quasar';
+import { BaseRow } from 'src/components/models/base-table-models';
+
+type FilterFunction = NonNullable<QTableProps['filterMethod']>;
+
+const props = defineProps<{
+  rows: BaseRow[];
+  columns: QTableColumn[];
+  searchInputVisible?: boolean;
+  tableHeight?: string;
+  filter?: string;
+  columnsToSearch?: string[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'row-click', row: BaseRow): void;
+  (e: 'update:filter', value: string): void;
+}>();
+
+const filterModel = computed({
+  get: () => props.filter || '',
+  set: (value) => {
+    emit('update:filter', value);
+  },
+});
+
+const customFilterMethod: FilterFunction = (rows, terms, cols) => {
+  if (!terms || terms.trim() === '') {
+    return rows;
+  }
+  const lowerTerms = terms.toLowerCase();
+  const columnsToSearch = props.columnsToSearch ||
+    cols.map(col => typeof col.field === 'string' ? col.field : '');
+  return rows.filter(row => {
+    return columnsToSearch.some(field => {
+      const val = row[field as keyof typeof row];
+      return val !== null &&
+             val !== undefined &&
+             String(val).toLowerCase().includes(lowerTerms);
+    });
+  });
+};
+
+const onRowClick = (evt: Event, row: BaseRow) => {
+  emit('row-click', row);
+};
+</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index fd8ecd44ea..287f890b92 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -9,85 +9,55 @@
       </template>
     </BaseCarousel>
 
-    <div v-else class="q-pa-md">
-      <q-table
-        class="sticky-header-table"
-        :rows="rows"
-        :columns="mobile ? columnsMobile : columns"
-        row-key="id"
-        :filter="filter"
-        virtual-scroll
-        :virtual-scroll-item-size="48"
-        :virtual-scroll-sticky-size-start="48"
-        :style="{ height: mobile ? '35vh' : '40vh' }"
-        @row-click="onRowClick"
-        binary-state-sort
-        :pagination="{ rowsPerPage: 0 }"
-        hide-bottom
-      >
-        <template v-slot:top v-if="searchInputVisible">
-          <div class="row full-width items-center q-mb-sm">
-            <div class="col">
-              <q-input
-                v-model="filter"
-                dense
-                outlined
-                color="white"
-                placeholder="Suchen..."
-                class="search-field white-outline-input"
-                input-class="text-white"
+    <BaseTable
+      v-else
+      :rows="rows"
+      :columns="mobile ? columnsMobile : columns"
+      :search-input-visible="searchInputVisible"
+      :table-height="mobile ? '35vh' : '40vh'"
+      v-model:filter="filter"
+      :columns-to-search="['vehicle', 'name']"
+      @row-click="onRowClick($event as ChargePointRow)"
+    >
+      <template v-slot:body-cell-plugged="props">
+        <q-td :props="props">
+          <ChargePointStateIcon :charge-point-id="props.row.id" />
+        </q-td>
+      </template>
+    </BaseTable>
+
+    <!-- ChargePointCard Dialog -->
+    <q-dialog
+      v-model="modalChargePointCardVisible"
+      transition-show="fade"
+      transition-hide="fade"
+      :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
+    >
+      <div class="dialog-content">
+        <ChargePointCard
+          v-if="selectedChargePointId !== null"
+          :charge-point-id="selectedChargePointId"
+        >
+          <template #card-footer>
+            <div class="card-footer">
+              <q-btn
+                color="primary"
+                flat
+                no-caps
+                v-close-popup
+                class="close-button"
+                size="md"
+                >Schließen</q-btn
               >
-                <template v-slot:append>
-                  <q-icon name="search" color="white" />
-                </template>
-              </q-input>
             </div>
-          </div>
-        </template>
-        <template v-slot:body-cell-plugged="props">
-          <q-td :props="props">
-            <ChargePointStateIcon :charge-point-id="props.row.id" />
-          </q-td>
-        </template>
-      </q-table>
-      <!-- ChargePointCard -->
-      <q-dialog
-        v-model="dialogVisible"
-        transition-show="fade"
-        transition-hide="fade"
-        :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
-      >
-        <div class="dialog-content">
-          <ChargePointCard
-            v-if="selectedChargePointId !== null"
-            :charge-point-id="selectedChargePointId"
-          >
-            <template #card-footer>
-              <div class="card-footer">
-                <q-btn
-                  color="primary"
-                  flat
-                  no-caps
-                  v-close-popup
-                  class="close-button"
-                  size="md"
-                  >Schließen</q-btn
-                >
-              </div>
-            </template>
-          </ChargePointCard>
-        </div>
-      </q-dialog>
-    </div>
+          </template>
+        </ChargePointCard>
+      </div>
+    </q-dialog>
   </div>
 </template>
 
 <style scoped>
-.search-field {
-  width: 100%;
-  max-width: 18em;
-}
-
 .dialog-content {
   width: auto;
   max-width: 24em;
@@ -108,34 +78,31 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useQuasar, Platform } from 'quasar';
+import { useQuasar, Platform, QTableColumn } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
+import BaseTable from 'src/components/BaseTable.vue';
 import ChargePointCard from 'src/components/ChargePointCard.vue';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import { useChargeModes } from 'src/composables/useChargeModes';
-import { QTableColumn } from 'src/components/models/chargepoint-information-models';
+import { ChargePointRow } from 'src/components/models/chargepoint-information-models';
 
 const $q = useQuasar();
 const mobile = computed(() => Platform.is.mobile);
-
 const mqttStore = useMqttStore();
 const selectedChargePointId = ref<number | null>(null);
-const dialogVisible = ref(false);
+const modalChargePointCardVisible = ref(false);
 const filter = ref('');
-
 const chargePointIds = computed(() => mqttStore.chargePointIds);
-
 const cardViewBreakpoint = computed(
   () => mqttStore.themeConfiguration?.card_view_breakpoint || 4,
 );
 const searchInputVisible = computed(
   () => mqttStore.themeConfiguration?.table_search_input_field,
 );
-
 const { chargeModes } = useChargeModes();
 
-const rows = computed(() => {
+const rows = computed<ChargePointRow[]>(() => {
   return chargePointIds.value.map((id) => {
     const chargePointName = mqttStore.chargePointName(id);
     const vehicleName =
@@ -228,6 +195,7 @@ const columns: QTableColumn[] = [
     headerStyle: 'font-weight: bold',
   },
 ];
+
 const columnsMobile = computed((): QTableColumn[] => {
   return [
     {
@@ -257,8 +225,8 @@ const columnsMobile = computed((): QTableColumn[] => {
   ];
 });
 
-const onRowClick = (evt: Event, row: { id: number }) => {
+const onRowClick = (row: ChargePointRow) => {
   selectedChargePointId.value = row.id;
-  dialogVisible.value = true;
+  modalChargePointCardVisible.value = true;
 };
 </script>
diff --git a/packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts b/packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts
new file mode 100644
index 0000000000..cdb984c8d5
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/models/base-table-models.ts
@@ -0,0 +1,4 @@
+export interface BaseRow {
+  id: string | number;
+  [key: string]: unknown;
+}
diff --git a/packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts b/packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts
index 138f4c8c50..2677220552 100644
--- a/packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts
+++ b/packages/modules/web_themes/koala/source/src/components/models/chargepoint-information-models.ts
@@ -1,19 +1,12 @@
-export type QTableColumn = {
-  name: string;
-  label: string;
-  field: string | ((row: Record<string, unknown>) => unknown);
-  required?: boolean;
-  align?: 'left' | 'right' | 'center';
-  sortable?: boolean;
-  sort?: (
-    a: unknown,
-    b: unknown,
-    rowA: Record<string, unknown>,
-    rowB: Record<string, unknown>,
-  ) => number;
-  format?: (val: unknown, row: Record<string, unknown>) => unknown;
-  style?: string | ((row: Record<string, unknown>) => string);
-  classes?: string | ((row: Record<string, unknown>) => string);
-  headerStyle?: string;
-  headerClasses?: string;
-};
+import { BaseRow } from './base-table-models';
+
+export interface ChargePointRow extends BaseRow {
+  id: number;
+  name: string | undefined;
+  vehicle: string;
+  plugged: string;
+  mode: string | undefined;
+  soc: string;
+  power: string | number | object | undefined;
+  charged: string | number | object | undefined;
+}

From ef575031c0dc94dc6e1dfd7f271d7b8cff3e0a1a Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Wed, 9 Apr 2025 08:04:47 +0200
Subject: [PATCH 8/9] Chargepoint message text format

---
 .../koala/source/src/components/ChargePointStateMessage.vue      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
index 9a6367bda4..e76583c532 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointStateMessage.vue
@@ -26,6 +26,7 @@ const message = computed(() =>
 
 <style scoped>
 .message-text {
+  overflow-x: auto;
   overflow-y: auto;
 }
 </style>

From d6e6c4a92478909bdad6531ec9fbfc8b563faeba Mon Sep 17 00:00:00 2001
From: benderl <benderl@users.noreply.github.com>
Date: Wed, 9 Apr 2025 08:11:21 +0200
Subject: [PATCH 9/9] Update packages/modules/web_themes/koala/config.py

fix flake8 error
---
 packages/modules/web_themes/koala/config.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/modules/web_themes/koala/config.py b/packages/modules/web_themes/koala/config.py
index 2c5da9198f..31dceec4c6 100644
--- a/packages/modules/web_themes/koala/config.py
+++ b/packages/modules/web_themes/koala/config.py
@@ -13,6 +13,7 @@ def __init__(self,
         self.card_view_breakpoint = card_view_breakpoint
         self.table_search_input_field = table_search_input_field
 
+
 @auto_str
 class KoalaWebTheme:
     def __init__(self,