From 61c1404696ef38209a39a4c1d4d684fdf8c4c3e5 Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 14 Apr 2025 17:36:36 +0200
Subject: [PATCH 1/2] Add information to vehicle cards

---
 .../source/src/components/VehicleCard.vue     | 47 +++++++++++++++++++
 .../koala/source/src/pages/IndexPage.vue      | 10 ++--
 .../source/src/stores/mqtt-store-model.ts     | 11 +++++
 .../koala/source/src/stores/mqtt-store.ts     | 41 ++++++++++++++++
 4 files changed, 104 insertions(+), 5 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index c7e8b50b65..f71f08448d 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -6,6 +6,36 @@
           {{ vehicle?.name }}
         </div>
       </div>
+      <div class="row q-mt-sm">
+        <div class="col">
+          <div class="text-subtitle2">Hersteller:</div>
+          {{ vehicleInfo?.manufacturer || 'keine Angabe' }}
+        </div>
+        <div class="col q-pl-sm">
+          <div class="text-subtitle2">Modell:</div>
+          {{ vehicleInfo?.model || 'keine Angabe' }}
+        </div>
+      </div>
+      <div class="row q-mt-sm">
+        <div class="col">
+          <div class="text-subtitle2">SoC Modul:</div>
+          {{ vehicleSocModule || 'keine' }}
+        </div>
+      </div>
+      <div v-if="vehicleSocValue !== null">
+        <div class="slider-container">
+          <q-slider
+          :model-value="vehicleSocValue"
+          color="green-7"
+          class="current-slider q-mt-sm"
+          track-size="1.5em"
+          thumb-size="0px"
+          :min="0"
+          :max="100"
+        />
+        </div>
+        <div class="row q-mt-sm">Ladestand: {{ vehicleSocValue }}%</div>
+      </div>
     </q-card-section>
   </q-card>
 </template>
@@ -23,10 +53,27 @@ const mqttStore = useMqttStore();
 const vehicle = computed(() => {
   return mqttStore.vehicleList.find((v) => v.id === props.vehicleId);
 });
+
+const vehicleInfo = computed(() => {
+  return mqttStore.vehicleInfo(props.vehicleId);
+});
+
+const vehicleSocModule = computed(() => {
+  return mqttStore.vehicleSocModuleName(props.vehicleId);
+});
+
+const vehicleSocValue = computed(() => {
+  return mqttStore.vehicleSocValue(props.vehicleId);
+});
 </script>
 
 <style lang="scss" scoped>
 .card-width {
   min-width: 24em;
 }
+
+.slider-container {
+  position: relative;
+  height: 40px;
+}
 </style>
diff --git a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
index c611a3b21e..6d990d3d90 100644
--- a/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/koala/source/src/pages/IndexPage.vue
@@ -10,9 +10,9 @@
       <q-tab name="charge-points" title="Ladepunkte">
         <q-icon name="ev_station" size="md" color="primary" />
       </q-tab>
-      <!-- <q-tab name="vehicles" title="Fahrzeuge">
+      <q-tab name="vehicles" title="Fahrzeuge">
         <q-icon name="directions_car" size="md" color="primary" />
-      </q-tab> -->
+      </q-tab>
       <q-tab name="batteries" title="Speicher">
         <q-icon name="battery_full" size="md" color="primary" />
       </q-tab>
@@ -27,9 +27,9 @@
         <ChargePointInformation />
       </q-tab-panel>
       <!-- Vehicles -->
-      <!-- <q-tab-panel name="vehicles" class="q-pa-none column">
+      <q-tab-panel name="vehicles" class="q-pa-none column">
         <VehicleInformation />
-      </q-tab-panel> -->
+      </q-tab-panel>
       <!-- Batteries -->
       <q-tab-panel name="batteries" class="">
         <BatteryInformation />
@@ -47,7 +47,7 @@ import { ref } from 'vue';
 import ChartCarousel from 'src/components/ChartCarousel.vue';
 import ChargePointInformation from 'src/components/ChargePointInformation.vue';
 import BatteryInformation from 'src/components/BatteryInformation.vue';
-// import VehicleInformation from 'src/components/VehicleInformation.vue';
+import VehicleInformation from 'src/components/VehicleInformation.vue';
 // import SmartHomeInformation from 'src/components/SmartHomeInformation.vue';
 
 defineOptions({
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 f7b4e77bc9..dad34d5b95 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
@@ -120,6 +120,17 @@ export interface Vehicle {
   id: number;
   name: string;
 }
+export interface vehicleInfo {
+  manufacturer: string;
+  model: string;
+}
+
+export interface vehicleSocModule {
+  name?: string;
+  type: string | null;
+  official?: boolean;
+  configuration: object;
+}
 
 export interface ScheduledChargingPlan {
   id: number;
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index c941e81767..f599ac2ee8 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -15,6 +15,8 @@ import type {
   ValueObject,
   ChargePointConnectedVehicleInfo,
   Vehicle,
+  vehicleInfo,
+  vehicleSocModule,
   ScheduledChargingPlan,
   ChargePointConnectedVehicleSoc,
   GraphDataPoint,
@@ -1842,6 +1844,42 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   });
 
+  /**
+   * Get vehicle manufacturer and model info identified by the vehicle id
+   * @param vehicleId vehicle id
+   * @returns vehicleInfo
+   */
+  const vehicleInfo = computed(() => {
+    return (vehicleId: number | undefined) => {
+      return getValue.value(`openWB/vehicle/${vehicleId}/info`) as vehicleInfo;
+    };
+  });
+
+  /**
+   * Get vehicle SoC module name identified by the vehicle id
+   * @param vehicleId vehicle id
+   * @returns string
+   */
+  const vehicleSocModuleName = computed(() => {
+    return (vehicleId: number | undefined) => {
+      const socModule = getValue.value(
+        `openWB/vehicle/${vehicleId}/soc_module/config`,
+      ) as vehicleSocModule;
+      return socModule?.name;
+    };
+  });
+
+  /**
+   * Get vehicle SoC module name identified by the vehicle id
+   * @param vehicleId vehicle id
+   * @returns number | null
+   */
+  const vehicleSocValue = computed(() => {
+    return (vehicleId: number | undefined) => {
+      return getValue.value(`openWB/vehicle/${vehicleId}/get/soc`) as number | null;
+    };
+  });
+
   /**
    * Get scheduled charging plan/s data identified by the charge point id
    * @param chargePointId charge point id
@@ -2535,6 +2573,9 @@ export const useMqttStore = defineStore('mqtt', () => {
     // vehicle data
     vehicleList,
     chargePointConnectedVehicleConfig,
+    vehicleInfo,
+    vehicleSocModuleName,
+    vehicleSocValue,
     chargePointConnectedVehicleSoc,
     vehicleActivePlan,
     vehicleChargeTarget,

From 9d73b00b32fe3259c809101a26b092d6bdb40cbf Mon Sep 17 00:00:00 2001
From: benderl <benderl@users.noreply.github.com>
Date: Tue, 15 Apr 2025 08:22:27 +0200
Subject: [PATCH 2/2] Apply suggestions from code review

---
 .../web_themes/koala/source/src/components/VehicleCard.vue      | 2 +-
 .../modules/web_themes/koala/source/src/stores/mqtt-store.ts    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index f71f08448d..ba50d9c764 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -19,7 +19,7 @@
       <div class="row q-mt-sm">
         <div class="col">
           <div class="text-subtitle2">SoC Modul:</div>
-          {{ vehicleSocModule || 'keine' }}
+          {{ vehicleSocModule || 'nicht konfiguriert' }}
         </div>
       </div>
       <div v-if="vehicleSocValue !== null">
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index f599ac2ee8..16d7095605 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -1870,7 +1870,7 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get vehicle SoC module name identified by the vehicle id
+   * Get vehicle SoC value identified by the vehicle id
    * @param vehicleId vehicle id
    * @returns number | null
    */