Koala add vehicle fault message

packages/modules/web_themes/koala/source/src/components/ChargePointFaultIcon.vue → packages/modules/web_themes/koala/source/src/components/BaseFaultIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="fault-icon">
     <q-icon
-      v-if="faultState > 0"
+      v-if="props.faultState > 0"
       :name="iconName"
       :size="iconSize"
       :color="iconColor"
@@ -12,24 +12,17 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { Screen } from 'quasar';
-import { useMqttStore } from 'src/stores/mqtt-store';
 
 const props = defineProps<{
-  chargePointId: number;
+  faultState: number;
 }>();
 
-const mqttStore = useMqttStore();
-
 const iconSize = computed(() => (Screen.lt.md ? '18px' : '22px'));
 
-const faultState = computed(() =>
-  mqttStore.chargePointFaultState(props.chargePointId),
-);
-
-const iconName = computed(() => (faultState.value === 2 ? 'error' : 'warning'));
+const iconName = computed(() => (props.faultState === 2 ? 'error' : 'warning'));
 
 const iconColor = computed(() =>
-  faultState.value === 2 ? 'negative' : 'warning',
+  props.faultState === 2 ? 'negative' : 'warning',
 );
 </script>
 

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

@@ -0,0 +1,21 @@
+<template>
+  <BaseMessage
+    :show-message="props.faultState > 0"
+    :message="props.message"
+    :type="messageType"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import BaseMessage from './BaseMessage.vue';
+
+const props = defineProps<{
+  faultState: number;
+  message: string;
+}>();
+
+const messageType = computed<'warning' | 'error'>(() =>
+  props.faultState >= 2 ? 'error' : 'warning',
+);
+</script>

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

@@ -40,11 +40,12 @@
       />
     </q-card-section>
     <q-card-section>
-      <ChargePointMessage
-        fault-message
-        :charge-point-id="props.chargePointId"
+      <BaseFaultMessage :fault-state="faultState" :message="faultMessage" />
+      <BaseFaultMessage
+        :fault-state="vehicleFaultState"
+        :message="vehicleFaultMessage"
       />
-      <ChargePointMessage :charge-point-id="props.chargePointId" />
+      <BaseMessage :message="stateMessage" type="info" />
     </q-card-section>
     <q-card-section
       class="full-width row no-wrap justify-between content-start items-center q-mt-sm"
@@ -130,7 +131,8 @@ import ChargePointLock from './ChargePointLock.vue';
 import ChargePointStateIcon from './ChargePointStateIcon.vue';
 import ChargePointPriority from './ChargePointPriority.vue';
 import ChargePointModeButtons from './ChargePointModeButtons.vue';
-import ChargePointMessage from './ChargePointMessage.vue';
+import BaseMessage from './BaseMessage.vue';
+import BaseFaultMessage from './BaseFaultMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
 import ChargePointChargeLimits from './ChargePointChargeLimits.vue';
@@ -156,6 +158,30 @@ const vehicleId = computed(() => {
     ?.id;
 });
 
+const vehicleFaultState = computed(() =>
+  vehicleId.value !== undefined
+    ? mqttStore.vehicleFaultState(vehicleId.value)
+    : 0,
+);
+
+const vehicleFaultMessage = computed(() =>
+  vehicleId.value !== undefined
+    ? (mqttStore.vehicleFaultMessage(vehicleId.value) ?? '')
+    : '',
+);
+
+const faultState = computed(() =>
+  mqttStore.chargePointFaultState(props.chargePointId),
+);
+
+const faultMessage = computed(
+  () => mqttStore.chargePointFaultMessage(props.chargePointId) ?? '',
+);
+
+const stateMessage = computed(
+  () => mqttStore.chargePointStateMessage(props.chargePointId) ?? '',
+);
+
 const limitMode = computed(() => {
   switch (chargeMode.value) {
     case 'instant_charging':

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

@@ -26,9 +26,9 @@
     <!-- full view table body slots -->
     <template #body-cell-name="slotProps">
       <div class="row items-center no-wrap">
-        <ChargePointFaultIcon
+        <BaseFaultIcon
           v-if="faultPresent"
-          :charge-point-id="slotProps.row.id"
+          :fault-state="slotProps.row.faultState"
           class="q-mr-xs"
         />
         <div class="col ellipsis" @mouseenter="titleIfTruncated">
@@ -79,9 +79,9 @@
     <!-- compact view charge point name and vehicle name displayed in one field -->
     <template #body-cell-nameAndVehicle="slotProps">
       <div class="row items-center no-wrap">
-        <ChargePointFaultIcon
+        <BaseFaultIcon
           v-if="faultPresent"
-          :charge-point-id="slotProps.row.id"
+          :fault-state="slotProps.row.faultState"
           class="q-mr-xs"
         />
         <div class="col">
@@ -151,7 +151,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { Screen, useQuasar } from 'quasar';
+import { Screen } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useChargeModes } from 'src/composables/useChargeModes';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
@@ -161,15 +161,14 @@ 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 BaseFaultIcon from './BaseFaultIcon.vue';
 import {
   ColumnConfiguration,
   ChargePointRow,
 } from 'src/components/models/table-model';
+import { useTable } from 'src/composables/useTable';
 
-const $q = useQuasar();
-
-const tooltipsEnabled = !$q.platform.is.mobile;
+const { tooltipsEnabled, compactTable, titleIfTruncated } = useTable();
 
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
@@ -185,7 +184,6 @@ 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);
 const modalChargePointCardVisible = ref(false);
 const filter = ref('');
@@ -281,20 +279,6 @@ 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;

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

@@ -31,6 +31,9 @@
         {{ vehicleInfo?.model || 'keine Angabe' }}
       </div>
     </q-card-section>
+    <q-card-section>
+      <BaseFaultMessage :fault-state="faultState" :message="faultMessage" />
+    </q-card-section>
     <q-separator inset class="q-mt-sm" />
     <q-card-section>
       <VehicleConnectionStateIcon :vehicle-id="vehicleId" class="q-mt-sm" />
@@ -66,6 +69,7 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
 import SliderDouble from './SliderDouble.vue';
 import ManualSocDialog from './ManualSocDialog.vue';
+import BaseFaultMessage from './BaseFaultMessage.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 
 const cardRef = ref<{ $el: HTMLElement } | null>(null);
@@ -91,6 +95,12 @@ const vehicleInfo = computed(() => {
   return mqttStore.vehicleInfo(props.vehicleId);
 });
 
+const faultState = computed(() => mqttStore.vehicleFaultState(props.vehicleId));
+
+const faultMessage = computed(
+  () => mqttStore.vehicleFaultMessage(props.vehicleId) ?? '',
+);
+
 const vehicleSocType = computed(() => {
   return mqttStore.vehicleSocType(props.vehicleId);
 });

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

@@ -29,9 +29,21 @@
     </template>
     <template #body-cell-name="slotProps">
       <div class="row items-center no-wrap">
-        <div class="ellipsis q-ml-sm" :title="slotProps.row.name">
+        <BaseFaultIcon
+          v-if="faultPresent"
+          :fault-state="slotProps.row.faultState"
+          class="q-ml-sm"
+        />
+        <div
+          class="col ellipsis"
+          :class="faultPresent ? 'q-ml-xs' : 'q-ml-sm'"
+          @mouseenter="titleIfTruncated"
+        >
           {{ slotProps.row.name }}
         </div>
+        <q-tooltip v-if="slotProps.row.faultState > 0 && tooltipsEnabled">
+          {{ slotProps.row.faultMessage }}
+        </q-tooltip>
       </div>
     </template>
     <template #body-cell-manufacturer="slotProps">
@@ -68,17 +80,18 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { Screen } from 'quasar';
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BaseTable from 'src/components/BaseTable.vue';
 import { VehicleRow } from 'src/components/models/table-model';
 import ChargePointStateIcon from 'src/components/ChargePointStateIcon.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
+import BaseFaultIcon from './BaseFaultIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
 import { ColumnConfiguration } from 'src/components/models/table-model';
+import { useTable } from 'src/composables/useTable';
 
+const { tooltipsEnabled, compactTable, titleIfTruncated } = useTable();
 const mqttStore = useMqttStore();
-const compactTable = computed(() => Screen.lt.md);
 const modalChargeVehicleCardVisible = ref(false);
 const selectedVehicleId = ref<number | null>(null);
 const filter = ref('');
@@ -90,6 +103,9 @@ const cardViewBreakpoint = computed(
 );
 const vehicles = computed(() => mqttStore.vehicleList);
 const vehicleIds = computed(() => vehicles.value.map((vehicle) => vehicle.id));
+const faultPresent = computed(() =>
+  vehicleIds.value.some((id) => mqttStore.vehicleFaultState(id) > 0),
+);
 
 const tableRowData = computed<(id: number) => VehicleRow>(() => {
   return (id: number) => {
@@ -103,6 +119,8 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => {
     const model = info?.model || 'keine Angabe';
     const soc = mqttStore.vehicleSocValue(id);
     const vehicleSocValue = soc !== undefined ? `${Math.round(soc)}%` : '–';
+    const faultState = mqttStore.vehicleFaultState(id);
+    const faultMessage = mqttStore.vehicleFaultMessage(id) ?? '';
     const color = mqttStore.vehicleColor(id) || 'var(--q-vehicle-stroke)';
     return {
       id,
@@ -112,6 +130,8 @@ const tableRowData = computed<(id: number) => VehicleRow>(() => {
       plugState,
       chargeState,
       vehicleSocValue,
+      faultState,
+      faultMessage,
       color,
     };
   };
@@ -131,7 +151,7 @@ const columnConfig: ColumnConfiguration[] = [
 ];
 
 const columnConfigCompact: ColumnConfiguration[] = [
-  { field: 'name', label: 'Fahrzeug' },
+  { field: 'name', label: 'Fahrzeug', shrink: true },
   { field: 'plugged', label: 'Status', align: 'center', autoWidth: true },
   {
     field: 'vehicleSocValue',

packages/modules/web_themes/koala/source/src/components/models/table-model.ts

@@ -42,6 +42,8 @@ export interface VehicleRow extends Record<string, unknown> {
   plugState: boolean;
   chargeState: boolean;
   vehicleSocValue: string;
+  faultState: number;
+  faultMessage: string;
   color?: string;
 }
 

packages/modules/web_themes/koala/source/src/composables/useTable.ts

@@ -0,0 +1,30 @@
+import { computed } from 'vue';
+import { Screen, useQuasar } from 'quasar';
+
+export const useTable = () => {
+  const $q = useQuasar();
+
+  const tooltipsEnabled = !$q.platform.is.mobile;
+
+  const compactTable = computed(() => Screen.lt.md);
+
+  // 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');
+    }
+  };
+
+  return {
+    tooltipsEnabled,
+    compactTable,
+    titleIfTruncated,
+  };
+};