Koala-Theme-Updates basierend auf Feedback

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

@@ -5,6 +5,7 @@
       :rows="mappedRows"
       :columns="mappedColumns"
       row-key="id"
+      v-model:expanded="expanded"
       :filter="filterModel"
       :filter-method="customFilterMethod"
       virtual-scroll
@@ -16,7 +17,8 @@
       :pagination="{ rowsPerPage: 0 }"
       hide-bottom
     >
-      <template v-slot:top v-if="searchInputVisible">
+      <!-- search field ------------------------------------------------------->
+      <template #top v-if="searchInputVisible">
         <div class="row full-width items-center q-mb-sm">
           <div class="col">
             <q-input
@@ -28,30 +30,106 @@
               class="search-field white-outline-input"
               input-class="text-white"
             >
-              <template v-slot:append>
+              <template #append>
                 <q-icon name="search" color="white" />
               </template>
             </q-input>
           </div>
         </div>
       </template>
 
-      <!-- Dynamic slot for custom cell rendering -->
+      <!-- header ----------------------------------------------------------->
+      <template v-if="props.rowExpandable" #header="hdr">
+        <q-tr :props="hdr">
+          <!-- space for arrow column -->
+          <q-th auto-width :props="{ ...hdr, col: {} }" />
+
+          <!-- the other columns -->
+          <q-th v-for="c in hdr.cols" :key="c.name" :props="{ ...hdr, col: c }">
+            {{ c.label }}
+          </q-th>
+        </q-tr>
+      </template>
+
+      <!-- body ------------------------------------------------------------->
+      <template v-if="props.rowExpandable" #body="rowProps: BodySlotProps">
+        <q-tr
+          :key="`main-${rowProps.key}`"
+          :props="rowProps"
+          @click="onRowClick($event, rowProps.row)"
+          class="mouse-over"
+        >
+          <q-td auto-width>
+            <q-btn
+              dense
+              flat
+              round
+              size="sm"
+              :icon="
+                rowProps.expand ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
+              "
+              @click.stop="rowProps.expand = !rowProps.expand"
+            />
+          </q-td>
+
+          <template v-for="col in rowProps.cols" :key="col.name">
+            <!-- custom body-cell slot -->
+            <template v-if="$slots[`body-cell-${col.name}`]">
+              <slot
+                :name="`body-cell-${col.name}`"
+                v-bind="{
+                  ...rowProps,
+                  col,
+                  value: getCellValue(rowProps.row, col),
+                }"
+              />
+            </template>
+
+            <!-- all other column data -->
+            <q-td
+              v-else
+              :props="{
+                ...rowProps,
+                col,
+                value: getCellValue(rowProps.row, col),
+              }"
+            >
+              {{ getCellValue(rowProps.row, col) }}
+            </q-td>
+          </template>
+        </q-tr>
+
+        <!-- expansion row -->
+        <q-tr
+          v-show="rowProps.expand"
+          :key="`xp-${rowProps.key}`"
+          :props="rowProps"
+          class="q-virtual-scroll--with-prev"
+        >
+          <q-td colspan="100%">
+            <slot name="row-expand" v-bind="rowProps"> </slot>
+          </q-td>
+        </q-tr>
+      </template>
+
+      <!-- forward any other slots not related to table  e.g top search field -------------------->
       <template
-        v-for="(_, name) in $slots"
-        :key="name"
-        v-slot:[name]="slotData"
+        v-for="slotName in forwardedSlotNames"
+        :key="slotName"
+        v-slot:[slotName]="slotProps"
       >
-        <slot :name="name" v-bind="slotData"></slot>
+        <slot :name="slotName" v-bind="slotProps" />
       </template>
     </q-table>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ComputedRef } from 'vue';
-import { QTableColumn, QTableProps } from 'quasar';
+import { computed, ComputedRef, ref, useSlots } from 'vue';
+import type { QTableColumn, QTableProps } from 'quasar';
+import { BodySlotProps } from 'src/components/Models/base-table-model';
 
+/* ------------------------------------------------------------------ props */
 const props = defineProps<{
   items: number[];
   rowData:
@@ -60,56 +138,75 @@ const props = defineProps<{
   columnConfig: {
     fields: string[];
     labels?: Record<string, string>;
+    align?: Record<string, 'left' | 'right' | 'center'>;
   };
   rowKey?: string;
   searchInputVisible?: boolean;
   tableHeight?: string;
   filter?: string;
   columnsToSearch?: string[];
+  rowExpandable?: boolean;
 }>();
 
+/* ------------------------------------------------------------------ utils */
+function getCellValue(row: Record<string, unknown>, col: QTableColumn) {
+  return typeof col.field === 'function'
+    ? col.field(row)
+    : row[col.field as string];
+}
+
+/* ------------------------------------------------------------------ state */
+const expanded = ref<(string | number)[]>([]);
+const slots = useSlots();
+
+const forwardedSlotNames = computed(() => {
+  if (props.rowExpandable)
+    return Object.keys(slots).filter((n) => !n.startsWith('body'));
+  return Object.keys(slots);
+});
+
 const emit = defineEmits<{
   (e: 'row-click', row: Record<string, unknown>): void;
   (e: 'update:filter', value: string): void;
 }>();
 
+/* ---------------------------------------------------------------- helpers */
 const filterModel = computed({
   get: () => props.filter || '',
-  set: (value) => emit('update:filter', value),
+  set: (v) => emit('update:filter', v),
 });
 
-// Data can be passed to basetable as a normal function or computed property
 const rowMapperFn = computed(() =>
   typeof props.rowData === 'function' ? props.rowData : props.rowData.value,
 );
 
 const mappedRows = computed(() => props.items.map(rowMapperFn.value));
 
-const mappedColumns = computed<QTableColumn[]>(() => {
-  return props.columnConfig.fields.map((field) => ({
+const mappedColumns = computed<QTableColumn[]>(() =>
+  props.columnConfig.fields.map((field) => ({
     name: field,
     label: props.columnConfig.labels?.[field] || field,
+    align: props.columnConfig.align?.[field] || 'left',
     field,
-    align: 'left',
     sortable: true,
     headerStyle: 'font-weight: bold',
-  }));
-});
+  })),
+);
 
 const customFilterMethod: NonNullable<QTableProps['filterMethod']> = (
   rows,
   terms,
   cols,
 ) => {
-  if (!terms || terms.trim() === '') return rows;
-  const lowerTerms = terms.toLowerCase();
-  const fields =
+  if (!terms?.trim()) return rows;
+  const lower = terms.toLowerCase();
+  const searchFields =
     props.columnsToSearch ||
-    cols.map((col) => (typeof col.field === 'string' ? col.field : ''));
-  return rows.filter((row) =>
-    fields.some((field) => {
-      const val = row[field];
-      return val && String(val).toLowerCase().includes(lowerTerms);
+    cols.map((c) => (typeof c.field === 'string' ? c.field : ''));
+  return rows.filter((r) =>
+    searchFields.some((f) => {
+      const val = r[f];
+      return val && String(val).toLowerCase().includes(lower);
     }),
   );
 };
@@ -123,4 +220,8 @@ const onRowClick = (evt: Event, row: Record<string, unknown>) =>
   width: 100%;
   max-width: 18em;
 }
+
+.mouse-over {
+  cursor: pointer;
+}
 </style>

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

@@ -18,30 +18,10 @@
           @click="dialog?.open()"
         />
       </div>
-      <div class="row q-mt-sm text-subtitle2 justify-between no-wrap">
-        <div class="row">
-          <q-icon
-            :name="
-              soc === undefined || soc === null
-                ? 'battery_0_bar'
-                : soc < 85
-                  ? `battery_${Math.floor(soc / 15)}_bar`
-                  : 'battery_full'
-            "
-            size="sm"
-            color="primary"
-            class="rotate90Clockwise q-mr-sm"
-          />
-          <div>SoC:</div>
-          <div class="q-ml-sm">
-            {{ soc === undefined || soc === null ? '___%' : soc + '%' }}
-          </div>
-        </div>
-        <div class="row">
-          <div>Leistung:</div>
-          <div class="q-ml-sm">
-            {{ power }}
-          </div>
+      <div class="row q-mt-sm text-subtitle2 justify-between full-width">
+        <div>Leistung:</div>
+        <div class="q-ml-sm">
+          {{ power }}
         </div>
       </div>
       <div v-if="showSettings" class="row q-mt-md text-subtitle2">
@@ -57,18 +37,24 @@
         </div>
       </div>
       <div class="text-subtitle1 text-weight-bold q-mt-md">Heute:</div>
-      <div class="row q-mt-sm text-subtitle2">
+      <div class="row q-mt-sm text-subtitle2 justify-between full-width">
         <div>Geladen:</div>
         <div class="q-ml-sm">
           {{ dailyImportedEnergy }}
         </div>
       </div>
-      <div class="row q-mt-sm text-subtitle2">
+      <div class="row q-mt-sm text-subtitle2 justify-between full-width">
         <div>Entladen:</div>
         <div class="q-ml-sm">
           {{ dailyExportedEnergy }}
         </div>
       </div>
+      <SliderDouble
+        class="q-mt-sm"
+        :current-value="soc"
+        :readonly="true"
+        :limit-mode="'none'"
+      />
     </q-card-section>
   </q-card>
   <BatterySettingsDialog :battery-id="props.batteryId" ref="dialog" />
@@ -79,6 +65,7 @@ import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import BatterySettingsDialog from './BatterySettingsDialog.vue';
 import { useBatteryModes } from 'src/composables/useBatteryModes.ts';
+import SliderDouble from './SliderDouble.vue';
 
 const props = defineProps<{
   batteryId: number | undefined;
@@ -145,10 +132,7 @@ const dailyExportedEnergy = computed(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.rotate90Clockwise {
-  transform: rotate(90deg);
-}
+<style scoped>
 .card-width {
   min-width: 24em;
 }

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

@@ -33,7 +33,7 @@
           <q-badge rounded color="primary" :label="phaseNumber">
             <q-tooltip class="bg-primary">Phasenanzahl</q-tooltip>
           </q-badge>
-          {{ chargingCurrent + ' A' }}
+          {{ chargingCurrent }}
         </div>
         <div class="col q-pl-sm">
           <div class="text-subtitle2">geladen</div>
@@ -79,7 +79,8 @@
     :chargePointId="props.chargePointId"
     v-model="settingsVisible"
   />
-  <ChargePointManualSocDialog
+  <ManualSocDialog
+    :vehicleId="vehicleId"
     :chargePointId="props.chargePointId"
     v-model:socDialogVisible="socInputVisible"
   />
@@ -96,7 +97,7 @@ import ChargePointStateMessage from './ChargePointStateMessage.vue';
 import ChargePointFaultMessage from './ChargePointFaultMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
-import ChargePointManualSocDialog from './ChargePointManualSocDialog.vue';
+import ManualSocDialog from './ManualSocDialog.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import { useQuasar } from 'quasar';
 
@@ -108,6 +109,11 @@ const props = defineProps<{
   chargePointId: number;
 }>();
 
+const vehicleId = computed(() => {
+  return mqttStore.chargePointConnectedVehicleInfo(props.chargePointId).value
+    ?.id;
+});
+
 const limitMode = computed(() => {
   switch (chargeMode.value) {
     case 'instant_charging':

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

@@ -9,6 +9,17 @@
     class="q-mt-md"
   />
 
+  <SliderStandard
+    v-if="dcCharging"
+    title="Minimaler Dauerleistung unter der Preisgrenze"
+    :min="4"
+    :max="300"
+    :step="1"
+    unit="kW"
+    v-model="dcPower.value"
+    class="q-mt-md"
+  />
+
   <div class="text-subtitle2 q-mt-sm q-mr-sm">Anzahl Phasen</div>
   <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
     <q-btn-group class="col">
@@ -136,6 +147,12 @@ const current = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargeCurrent(props.chargePointId),
 );
 
+const dcCharging = computed(() => mqttStore.DCChargingEnabled);
+
+const dcPower = computed(() =>
+  mqttStore.chargePointConnectedVehicleEcoChargeDCPower(props.chargePointId),
+);
+
 const numPhases = computed(() =>
   mqttStore.chargePointConnectedVehicleEcoChargePhases(props.chargePointId),
 );