Add table view for charge points to Koala web theme

packages/modules/web_themes/koala/config.py

@@ -6,8 +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

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>

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   //////////////////// -->

packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue

@@ -1,19 +1,232 @@
 <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>
+
+    <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
+              >
+            </div>
+          </template>
+        </ChargePointCard>
+      </div>
+    </q-dialog>
+  </div>
 </template>
 
+<style scoped>
+.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, 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 { 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 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<ChargePointRow[]>(() => {
+  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 = (row: ChargePointRow) => {
+  selectedChargePointId.value = row.id;
+  modalChargePointCardVisible.value = true;
+};
 </script>

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),
 );