From 24d8f9760bb47778fcff3804b15e7e2c95d11fb2 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Tue, 1 Sep 2026 12:04:53 +0200
Subject: [PATCH 1/3] add error and warning icons to chargepoint table

---
 .../src/components/ChargePointFaultIcon.vue   | 41 +++++++++++++++++++
 .../src/components/ChargePointInformation.vue | 31 +++++++++++++-
 .../src/components/models/table-model.ts      |  2 +
 3 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue
new file mode 100644
index 0000000000..c6515c31e3
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue
@@ -0,0 +1,41 @@
+<template>
+  <q-icon
+    v-if="faultState > 0"
+    :name="props.dot ? 'circle' : iconName"
+    :size="props.dot ? '10px' : 'sm'"
+    :color="iconColor"
+  >
+    <q-tooltip v-if="faultMessage">{{ faultMessage }}</q-tooltip>
+  </q-icon>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
+
+const props = withDefaults(
+  defineProps<{
+    chargePointId: number;
+    dot?: boolean;
+  }>(),
+  {
+    dot: false,
+  },
+);
+
+const mqttStore = useMqttStore();
+
+const faultState = computed(() =>
+  mqttStore.chargePointFaultState(props.chargePointId),
+);
+
+const faultMessage = computed(
+  () => mqttStore.chargePointFaultMessage(props.chargePointId) ?? '',
+);
+
+const iconName = computed(() => (faultState.value === 2 ? 'error' : 'warning'));
+
+const iconColor = computed(() =>
+  faultState.value === 2 ? 'negative' : 'warning',
+);
+</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 6187feb21b..d6c81103d8 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -26,6 +26,11 @@
     <!-- full view table body slots -->
     <template #body-cell-name="slotProps">
       <div class="row items-center no-wrap">
+        <ChargePointFaultIcon
+          dot
+          :charge-point-id="slotProps.row.id"
+          class="q-mr-xs"
+        />
         <div class="ellipsis" :title="slotProps.row.name">
           {{ slotProps.row.name }}
         </div>
@@ -40,6 +45,10 @@
       <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
     </template>
 
+    <template #body-cell-faultState="slotProps">
+      <ChargePointFaultIcon :charge-point-id="slotProps.row.id" />
+    </template>
+
     <template #body-cell-chargeMode="slotProps">
       <ChargePointMode :charge-point-id="slotProps.row.id" />
     </template>
@@ -71,8 +80,15 @@
     <!-- compact view charge point name and vehicle name displayed in one field -->
     <template #body-cell-nameAndVehicle="slotProps">
       <div>
-        <div class="ellipsis" :title="slotProps.row.name">
-          {{ slotProps.row.name }}
+        <div class="row items-center no-wrap">
+          <ChargePointFaultIcon
+            dot
+            :charge-point-id="slotProps.row.id"
+            class="q-mr-xs"
+          />
+          <div class="ellipsis" :title="slotProps.row.name">
+            {{ slotProps.row.name }}
+          </div>
         </div>
         <div class="ellipsis text-caption" :title="slotProps.row.vehicle">
           {{ slotProps.row.vehicle }}
@@ -143,6 +159,7 @@ import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import ChargePointMode from './ChargePointMode.vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointPowerData from './ChargePointPowerData.vue';
+import ChargePointFaultIcon from './ChargePointFaultIcon.vue';
 import {
   ColumnConfiguration,
   ChargePointRow,
@@ -189,6 +206,8 @@ const tableRowData = computed<(id: number) => ChargePointRow>(() => {
     // typecasting necessary as chargePointChargingCurrent has a union type in store and needs to be narrowed to string
     const current = mqttStore.chargePointChargingCurrent(id) as string;
     const powerColumn = '';
+    const faultState = mqttStore.chargePointFaultState(id);
+    const faultMessage = mqttStore.chargePointFaultMessage(id) ?? '';
     const color =
       mqttStore.chargePointColor(id) || 'var(--q-charge-point-stroke)';
     return {
@@ -204,6 +223,8 @@ const tableRowData = computed<(id: number) => ChargePointRow>(() => {
       current,
       powerColumn,
       charged,
+      faultState,
+      faultMessage,
       color,
     };
   };
@@ -213,6 +234,12 @@ const columnConfig: ColumnConfiguration[] = [
   { field: 'name', label: 'Ladepunkt', shrink: true },
   { field: 'vehicle', label: 'Fahrzeug', autoWidth: true },
   { field: 'plugged', label: 'Status', align: 'center', autoWidth: true },
+  {
+    field: 'faultState',
+    label: 'Meldung',
+    align: 'center',
+    autoWidth: true,
+  },
   { field: 'chargeMode', label: 'Lademodus', autoWidth: true },
   {
     field: 'timeCharging',
diff --git a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
index 601a182b48..4c9dbf5d9b 100644
--- a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
@@ -29,6 +29,8 @@ export interface ChargePointRow extends Record<string, unknown> {
   current: string;
   powerColumn: '';
   charged: string;
+  faultState: number;
+  faultMessage: string;
   color?: string;
 }
 

From b88f9334392e617914ac83f011e79fb6732a890d Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 4 Sep 2026 14:40:19 +0200
Subject: [PATCH 2/3] Align warning icons - remove extra warning column

---
 .../src/components/ChargePointFaultIcon.vue   | 45 ++++++++++---------
 .../src/components/ChargePointInformation.vue | 44 +++++++++---------
 2 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue
index c6515c31e3..2e09481d7b 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue
@@ -1,41 +1,44 @@
 <template>
-  <q-icon
-    v-if="faultState > 0"
-    :name="props.dot ? 'circle' : iconName"
-    :size="props.dot ? '10px' : 'sm'"
-    :color="iconColor"
-  >
-    <q-tooltip v-if="faultMessage">{{ faultMessage }}</q-tooltip>
-  </q-icon>
+  <span class="fault-icon">
+    <q-icon
+      v-if="faultState > 0"
+      :name="iconName"
+      :size="iconSize"
+      :color="iconColor"
+    />
+  </span>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { Screen } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
-const props = withDefaults(
-  defineProps<{
-    chargePointId: number;
-    dot?: boolean;
-  }>(),
-  {
-    dot: false,
-  },
-);
+const props = defineProps<{
+  chargePointId: number;
+}>();
 
 const mqttStore = useMqttStore();
 
+const iconSize = computed(() => (Screen.lt.md ? '18px' : '22px'));
+
 const faultState = computed(() =>
   mqttStore.chargePointFaultState(props.chargePointId),
 );
 
-const faultMessage = computed(
-  () => mqttStore.chargePointFaultMessage(props.chargePointId) ?? '',
-);
-
 const iconName = computed(() => (faultState.value === 2 ? 'error' : 'warning'));
 
 const iconColor = computed(() =>
   faultState.value === 2 ? 'negative' : 'warning',
 );
 </script>
+
+<style scoped lang="scss">
+.fault-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: v-bind(iconSize);
+}
+</style>
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 d6c81103d8..560b851f19 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -27,13 +27,16 @@
     <template #body-cell-name="slotProps">
       <div class="row items-center no-wrap">
         <ChargePointFaultIcon
-          dot
+          v-if="faultPresent"
           :charge-point-id="slotProps.row.id"
           class="q-mr-xs"
         />
-        <div class="ellipsis" :title="slotProps.row.name">
+        <div class="col ellipsis" :title="slotProps.row.name">
           {{ slotProps.row.name }}
         </div>
+        <q-tooltip v-if="slotProps.row.faultState > 0">
+          {{ slotProps.row.faultMessage }}
+        </q-tooltip>
       </div>
     </template>
     <template #body-cell-vehicle="slotProps">
@@ -45,10 +48,6 @@
       <ChargePointStateIcon :charge-point-id="slotProps.row.id" />
     </template>
 
-    <template #body-cell-faultState="slotProps">
-      <ChargePointFaultIcon :charge-point-id="slotProps.row.id" />
-    </template>
-
     <template #body-cell-chargeMode="slotProps">
       <ChargePointMode :charge-point-id="slotProps.row.id" />
     </template>
@@ -79,20 +78,23 @@
     <!-- compact view table body slots -->
     <!-- compact view charge point name and vehicle name displayed in one field -->
     <template #body-cell-nameAndVehicle="slotProps">
-      <div>
-        <div class="row items-center no-wrap">
-          <ChargePointFaultIcon
-            dot
-            :charge-point-id="slotProps.row.id"
-            class="q-mr-xs"
-          />
+      <div class="row items-center no-wrap">
+        <ChargePointFaultIcon
+          v-if="faultPresent"
+          :charge-point-id="slotProps.row.id"
+          class="q-mr-xs"
+        />
+        <div class="col">
           <div class="ellipsis" :title="slotProps.row.name">
             {{ slotProps.row.name }}
           </div>
+          <div class="ellipsis text-caption" :title="slotProps.row.vehicle">
+            {{ slotProps.row.vehicle }}
+          </div>
         </div>
-        <div class="ellipsis text-caption" :title="slotProps.row.vehicle">
-          {{ slotProps.row.vehicle }}
-        </div>
+        <q-tooltip v-if="slotProps.row.faultState > 0">
+          {{ slotProps.row.faultMessage }}
+        </q-tooltip>
       </div>
     </template>
 
@@ -174,6 +176,10 @@ const cardViewBreakpoint = computed(
 const searchInputVisible = computed(
   () => mqttStore.themeConfiguration?.chargePoint_table_search_input_field,
 );
+
+const faultPresent = computed(() =>
+  chargePointIds.value.some((id) => mqttStore.chargePointFaultState(id) > 0),
+);
 const isSmallScreen = computed(() => Screen.lt.sm);
 const compactTable = computed(() => Screen.lt.md);
 const selectedChargePointId = ref<number | null>(null);
@@ -234,12 +240,6 @@ const columnConfig: ColumnConfiguration[] = [
   { field: 'name', label: 'Ladepunkt', shrink: true },
   { field: 'vehicle', label: 'Fahrzeug', autoWidth: true },
   { field: 'plugged', label: 'Status', align: 'center', autoWidth: true },
-  {
-    field: 'faultState',
-    label: 'Meldung',
-    align: 'center',
-    autoWidth: true,
-  },
   { field: 'chargeMode', label: 'Lademodus', autoWidth: true },
   {
     field: 'timeCharging',

From 8ad67c84a1f0b3ef6d791a089009f7acac5dbece Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 4 Sep 2026 15:21:30 +0200
Subject: [PATCH 3/3] No tooltip for mobile - ellipsis title only if truncated

---
 .../src/components/ChargePointInformation.vue | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 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 560b851f19..9f41e9fecd 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -31,16 +31,16 @@
           :charge-point-id="slotProps.row.id"
           class="q-mr-xs"
         />
-        <div class="col ellipsis" :title="slotProps.row.name">
+        <div class="col ellipsis" @mouseenter="titleIfTruncated">
           {{ slotProps.row.name }}
         </div>
-        <q-tooltip v-if="slotProps.row.faultState > 0">
+        <q-tooltip v-if="slotProps.row.faultState > 0 && tooltipsEnabled">
           {{ slotProps.row.faultMessage }}
         </q-tooltip>
       </div>
     </template>
     <template #body-cell-vehicle="slotProps">
-      <div class="ellipsis" :title="slotProps.row.vehicle">
+      <div class="ellipsis" @mouseenter="titleIfTruncated">
         {{ slotProps.row.vehicle }}
       </div>
     </template>
@@ -85,14 +85,14 @@
           class="q-mr-xs"
         />
         <div class="col">
-          <div class="ellipsis" :title="slotProps.row.name">
+          <div class="ellipsis" @mouseenter="titleIfTruncated">
             {{ slotProps.row.name }}
           </div>
-          <div class="ellipsis text-caption" :title="slotProps.row.vehicle">
+          <div class="ellipsis text-caption" @mouseenter="titleIfTruncated">
             {{ slotProps.row.vehicle }}
           </div>
         </div>
-        <q-tooltip v-if="slotProps.row.faultState > 0">
+        <q-tooltip v-if="slotProps.row.faultState > 0 && tooltipsEnabled">
           {{ slotProps.row.faultMessage }}
         </q-tooltip>
       </div>
@@ -151,7 +151,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { Screen } from 'quasar';
+import { Screen, useQuasar } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useChargeModes } from 'src/composables/useChargeModes';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
@@ -167,6 +167,10 @@ import {
   ChargePointRow,
 } from 'src/components/models/table-model';
 
+const $q = useQuasar();
+
+const tooltipsEnabled = !$q.platform.is.mobile;
+
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
 const chargePointIds = computed(() => mqttStore.chargePointIds);
@@ -277,6 +281,20 @@ const expansionColumnsCompact = columnConfigCompact.filter(
   (column) => column.expandField,
 );
 
+// the browser tooltip is only set if the text is really cut off by the
+// ellipsis, otherwise it would pop up next to the fault message tooltip
+// without adding any information
+const titleIfTruncated = (event: MouseEvent) => {
+  const element = event.currentTarget as HTMLElement;
+  const text = element.textContent?.trim() ?? '';
+  // one pixel tolerance, scrollWidth and clientWidth are rounded values
+  if (text && element.scrollWidth - element.clientWidth > 1) {
+    element.title = text;
+  } else {
+    element.removeAttribute('title');
+  }
+};
+
 const onRowClick = (row: ChargePointRow) => {
   selectedChargePointId.value = row.id;
   modalChargePointCardVisible.value = true;