cleanup battery information

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

@@ -10,7 +10,7 @@
     padding
     :navigation="groupedItems.length > 1"
     :arrows="groupedItems.length > 1 && $q.screen.gt.xs"
-    class="carousel-height q-mt-md"
+    class="carousel-height"
     transition-next="slide-left"
     transition-prev="slide-right"
     @mousedown.prevent

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

@@ -1,16 +1,12 @@
 <template>
-  <q-card ref="cardRef" class="full-height card-width">
+  <q-card
+    ref="cardRef"
+    class="full-height card-width"
+    :class="{ 'battery-sum': props.batteryId === -1 }"
+  >
     <q-card-section>
       <div class="row text-h6 items-center text-bold justify-between">
-        <div>
-          <q-icon
-            name="battery_full"
-            size="sm"
-            class="q-mr-sm"
-            color="primary"
-          />
-          {{ cardTitle }}
-        </div>
+        {{ cardTitle }}
         <q-icon
           class="cursor-pointer"
           v-if="showSettings"
@@ -78,19 +74,23 @@ const setCardWidth = inject<((width: number | undefined) => void) | undefined>(
 );
 
 const props = defineProps<{
-  batteryId: number | undefined;
+  batteryId: number;
 }>();
 
 const singleBattery = computed(() => {
   return mqttStore.batteryIds.length === 1;
 });
 
 const showSettings = computed(() => {
-  return props.batteryId === undefined || singleBattery.value;
+  return isOverview.value || singleBattery.value;
 });
 
 const { batteryModes } = useBatteryModes();
 
+const isOverview = computed(() => {
+  return props.batteryId === -1;
+});
+
 const batteryMode = computed(() => {
   const mode = mqttStore.batteryMode();
   return batteryModes.find((m) => m.value === mode.value) || batteryModes[0];
@@ -101,28 +101,28 @@ const dialog = ref();
 const mqttStore = useMqttStore();
 
 const cardTitle = computed(() => {
-  if (props.batteryId === undefined) {
+  if (isOverview.value) {
     return 'Speicher Übersicht';
   }
   return mqttStore.batteryName(props.batteryId);
 });
 
 const soc = computed(() => {
-  if (props.batteryId === undefined) {
+  if (isOverview.value) {
     return mqttStore.batterySocTotal;
   }
   return mqttStore.batterySoc(props.batteryId);
 });
 
 const power = computed(() => {
-  if (props.batteryId === undefined) {
+  if (isOverview.value) {
     return mqttStore.batteryTotalPower('textValue') as string | '---';
   }
   return mqttStore.batteryPower(props.batteryId, 'textValue') as string | '---';
 });
 
 const dailyImportedEnergy = computed(() => {
-  if (props.batteryId === undefined) {
+  if (isOverview.value) {
     return mqttStore.batteryDailyImportedTotal('textValue') as string | '---';
   }
   return (
@@ -132,7 +132,7 @@ const dailyImportedEnergy = computed(() => {
 });
 
 const dailyExportedEnergy = computed(() => {
-  if (props.batteryId === undefined) {
+  if (isOverview.value) {
     return mqttStore.batteryDailyExportedTotal('textValue') as string | '---';
   }
   return (

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

@@ -1,7 +1,4 @@
 <template>
-  <div v-if="showBatteryOverview" class="row justify-center">
-    <BatteryCard :battery-id="undefined" />
-  </div>
   <BaseCarousel :items="batteryIds">
     <template #item="{ item }">
       <BatteryCard :battery-id="item" />
@@ -18,9 +15,12 @@ import BatteryCard from 'src/components/BatteryCard.vue';
 
 const mqttStore = useMqttStore();
 
-const batteryIds = computed(() => mqttStore.batteryIds);
-
-const showBatteryOverview = computed(() => {
-  return mqttStore.batteryIds.length > 1;
+const batteryIds = computed(() => {
+  let ids = mqttStore.batteryIds;
+  console.log('Battery IDs:' + ids);
+  if (ids.length > 0) {
+    return [-1].concat(ids); // add overview card if more than one battery
+  }
+  return ids;
 });
 </script>

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

@@ -116,7 +116,9 @@
     </div>
   </div>
 
-  <div class="row items-center justify-between q-ma-none q-pa-none no-wrap q-mt-md">
+  <div
+    class="row items-center justify-between q-ma-none q-pa-none no-wrap q-mt-md"
+  >
     <div class="text-subtitle2 q-mr-sm">Einspeisegrenze beachten</div>
     <div>
       <ToggleStandard dense v-model="feedInLimit.value" />

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

@@ -1,5 +1,7 @@
 <template>
-  <div class="row items-center q-ma-none q-pa-none no-wrap items-center justify-between">
+  <div
+    class="row items-center q-ma-none q-pa-none no-wrap items-center justify-between"
+  >
     <div class="text-subtitle2">Zeitladen</div>
     <div>
       <ChargePointTimeCharging :charge-point-id="props.chargePointId" dense />

packages/modules/web_themes/koala/source/src/pages/IndexPage.vue

@@ -24,15 +24,15 @@
       <!-- Tab Panels -->
       <q-tab-panels v-model="tab" class="col">
         <!-- Charge Points -->
-        <q-tab-panel name="charge-points" class="q-pa-none column">
+        <q-tab-panel name="charge-points">
           <ChargePointInformation />
         </q-tab-panel>
         <!-- Vehicles -->
-        <q-tab-panel name="vehicles" class="q-pa-none column">
+        <q-tab-panel name="vehicles">
           <VehicleInformation />
         </q-tab-panel>
         <!-- Batteries -->
-        <q-tab-panel name="batteries" class="remove-flex-properties">
+        <q-tab-panel name="batteries">
           <BatteryInformation />
         </q-tab-panel>
         <!-- Smart Home -->

packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts

@@ -978,7 +978,7 @@ export const useMqttStore = defineStore('mqtt', () => {
    */
   const convertDcCurrentToPower = (dcCurrent: number): number => {
     return Math.round((dcCurrent * 3 * 230) / 1000);
-  }
+  };
 
   /**
    * Converts power in Kilowatts to DC current in Ampere.
@@ -991,8 +991,8 @@ export const useMqttStore = defineStore('mqtt', () => {
    * @returns number
    */
   const convertPowerToDcCurrent = (power: number): number => {
-    return Math.round(power * 1000 / (230 * 3));
-  }
+    return Math.round((power * 1000) / (230 * 3));
+  };
 
   /**
    * Get or set the charge point connected vehicle instant charging DC power identified by the charge point id