Add information to vehicle cards

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 || 'nicht konfiguriert' }}
+        </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>

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({

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;

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 value 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,