Koala fixes

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

@@ -2,6 +2,7 @@
   <div class="q-pa-md">
     <q-table
       class="sticky-header-table"
+      :class="{ 'custom-table-height': tableHeight }"
       :rows="mappedRows"
       :columns="mappedColumns"
       row-key="id"
@@ -11,7 +12,6 @@
       virtual-scroll
       :virtual-scroll-item-size="48"
       :virtual-scroll-sticky-size-start="30"
-      :style="{ height: tableHeight }"
       @row-click="onRowClick"
       binary-state-sort
       :pagination="{ rowsPerPage: 0 }"
@@ -222,4 +222,8 @@ const onRowClick = (evt: Event, row: T) => emit('row-click', row);
 .clickable {
   cursor: pointer;
 }
+
+.custom-table-height {
+  height: v-bind('tableHeight');
+}
 </style>

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

@@ -1,10 +1,8 @@
 <template>
-  <div class="row items-center q-ma-none q-pa-none no-wrap">
-    <div class="col row items-center">
-      <div class="col text-subtitle2">Zeitladen</div>
-      <div class="col">
-        <ChargePointTimeCharging :charge-point-id="props.chargePointId" dense />
-      </div>
+  <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 />
     </div>
   </div>
   <div v-if="timeChargingEnabled" class="row justify-between items-center">

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

@@ -17,7 +17,7 @@
         </div>
       </div>
       <VehicleConnectionStateIcon :vehicle-id="vehicleId" class="q-mt-sm" />
-      <div v-if="isVehicleSocModule !== undefined">
+      <div v-if="vehicleSocModuleType !== null">
         <SliderDouble
           class="q-mt-sm"
           :current-value="vehicleSocValue"
@@ -82,10 +82,6 @@ const vehicleInfo = computed(() => {
   return mqttStore.vehicleInfo(props.vehicleId);
 });
 
-const isVehicleSocModule = computed(() => {
-  return mqttStore.vehicleSocModule(props.vehicleId)?.name;
-});
-
 const vehicleSocModuleType = computed(() => {
   return mqttStore.vehicleSocModule(props.vehicleId)?.type;
 });

packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue

@@ -19,6 +19,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useQuasar } from 'quasar';
+import type { ChartOptions } from 'chart.js';
 import { Line as ChartjsLine } from 'vue-chartjs';
 import {
   Chart,
@@ -258,10 +259,10 @@ const lineChartData = computed(() => {
   };
 });
 
-const chartOptions = computed(() => ({
+const chartOptions = computed<ChartOptions<'line'>>(() => ({
   responsive: true,
   maintainAspectRatio: false,
-  animation: { duration: 0 },
+  animation: false,
   plugins: {
     legend: {
       display: !legendLarge.value && legendDisplay.value,

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

@@ -967,6 +967,34 @@ export const useMqttStore = defineStore('mqtt', () => {
     return (getValue.value('openWB/optional/dc_charging') as boolean) || 0;
   });
 
+  /**
+   * Converts DC current to power in Watt
+   * This function assumes a 3-phase system with a voltage of 230V
+   * and calculates the AC power based on the formula: P = I * V * 3 / 1000
+   * where P is power in Kilowatts, I is current in Amperes,
+   * and V is voltage in Volts.
+   * The result is rounded to the nearest integer.
+   * @param dcCurrent DC current in Ampere
+   * @returns number
+   */
+  const convertDcCurrentToPower = (dcCurrent: number): number => {
+    return Math.round((dcCurrent * 3 * 230) / 1000);
+  }
+
+  /**
+   * Converts power in Kilowatts to DC current in Ampere.
+   * This function assumes a 3-phase system with a voltage of 230V
+   * and calculates the DC current based on the formula: I = P * 1000 / (V * 3)
+   * where P is power in Watts, I is current in Amperes,
+   * and V is voltage in Volts.
+   * The result is rounded to the nearest integer.
+   * @param power Power in Kilowatts
+   * @returns number
+   */
+  const convertPowerToDcCurrent = (power: number): number => {
+    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
    * @param chargePointId charge point id
@@ -981,14 +1009,14 @@ export const useMqttStore = defineStore('mqtt', () => {
           chargePointConnectedVehicleChargeTemplate(chargePointId).value
             ?.chargemode?.instant_charging?.dc_current;
         if (dcCurrent !== undefined) {
-          return Math.round((dcCurrent * 3 * 230) / 1000);
+          return convertDcCurrentToPower(dcCurrent);
         } else {
           return 0;
         }
       },
       set(newValue: number) {
         console.debug('set instant charging power', newValue, chargePointId);
-        const newPower = (newValue * 1000) / 230 / 3;
+        const newPower = convertPowerToDcCurrent(newValue);
         return updateTopic(
           `openWB/chargepoint/${chargePointId}/set/charge_template`,
           newPower,
@@ -1144,14 +1172,14 @@ export const useMqttStore = defineStore('mqtt', () => {
           chargePointConnectedVehicleChargeTemplate(chargePointId).value
             ?.chargemode?.pv_charging?.dc_min_current;
         if (dcMinCurrent !== undefined) {
-          return Math.round((dcMinCurrent * 3 * 230) / 1000);
+          return convertDcCurrentToPower(dcMinCurrent);
         } else {
           return 0;
         }
       },
       set(newValue: number) {
         console.debug('set instant charging power', newValue, chargePointId);
-        const newPower = (newValue * 1000) / 230 / 3;
+        const newPower = convertPowerToDcCurrent(newValue);
         return updateTopic(
           `openWB/chargepoint/${chargePointId}/set/charge_template`,
           newPower,
@@ -1437,14 +1465,14 @@ export const useMqttStore = defineStore('mqtt', () => {
           chargePointConnectedVehicleChargeTemplate(chargePointId).value
             ?.chargemode?.eco_charging?.dc_current;
         if (dcCurrent !== undefined) {
-          return Math.round((dcCurrent * 3 * 230) / 1000);
+          return convertDcCurrentToPower(dcCurrent);
         } else {
           return 0;
         }
       },
       set(newValue: number) {
-        console.debug('set instant charging power', newValue, chargePointId);
-        const newPower = (newValue * 1000) / 230 / 3;
+        console.debug('set eco power', newValue, chargePointId);
+        const newPower = convertPowerToDcCurrent(newValue);
         return updateTopic(
           `openWB/chargepoint/${chargePointId}/set/charge_template`,
           newPower,

packages/modules/web_themes/standard_legacy/web/index.html

@@ -335,7 +335,7 @@
 				</div>
 			</div>
 
-		</div>
+		</div> <!-- End of Header Section -->
 
 		<!-- Chart Section -->
 		<div class="row">
@@ -347,7 +347,8 @@
 						<span class="collPlus"></span>
 					</div>
 					<div id="cardGraph" class="card-body collapse show">
-						<div class="row justify-content-center" >
+						<div id="legend-container" class="row justify-content-center hide" >
+							<!-- will be shown by livechart.js when graph is displayed -->
 							<div class="col-sm-12 mt-2">
 								<div id="custom-legend-container"></div>
 							</div>
@@ -362,7 +363,6 @@
 							</div>
 						</div>
 					</div>
-
 				</div>
 			</div>
 		</div>

packages/modules/web_themes/standard_legacy/web/livechart.js

@@ -240,37 +240,37 @@ var chartDatasets = [
 
 // Generate custom legendAdd commentMore actions
 function generateCustomLegend(chart) {
-    const legendContainer = document.getElementById('custom-legend-container');
-    // Clear existing legend
-    legendContainer.innerHTML = '';
-    // Create legend items
-    chart.data.datasets.forEach((dataset, index) => {
-        if (!dataset.label) return;
-        const legendItem = document.createElement('div');
-        legendItem.className = 'legend-item';
-        if (chart.getDatasetMeta(index).hidden) {
-            legendItem.className += ' hidden';
-        }
-        const colorBox = document.createElement('span');
-        colorBox.className = 'legend-color-box';
-        colorBox.style.backgroundColor = dataset.borderColor;
-        const text = document.createElement('span');
-        text.textContent = dataset.label;
-        legendItem.appendChild(colorBox);
-        legendItem.appendChild(text);
-        // toggle visibility
-        legendItem.onclick = ()=> {
-            const item = chart.getDatasetMeta(index);
-            item.hidden = !item.hidden;
-            if (item.hidden) {
-                legendItem.classList.add('hidden');
-            } else {
-                legendItem.classList.remove('hidden');
-            }
-            chart.update();
-        };
-        legendContainer.appendChild(legendItem);
-    });
+	const legendContainer = document.getElementById("custom-legend-container");
+	// Clear existing legend
+	legendContainer.innerHTML = "";
+	// Create legend items
+	chart.data.datasets.forEach((dataset, index) => {
+		if (!dataset.label) return;
+		const legendItem = document.createElement("div");
+		legendItem.className = "legend-item";
+		if (chart.getDatasetMeta(index).hidden) {
+			legendItem.className += " hidden";
+		}
+		const colorBox = document.createElement("span");
+		colorBox.className = "legend-color-box";
+		colorBox.style.backgroundColor = dataset.borderColor;
+		const text = document.createElement("span");
+		text.textContent = dataset.label;
+		legendItem.appendChild(colorBox);
+		legendItem.appendChild(text);
+		// toggle visibility
+		legendItem.onclick = () => {
+			const item = chart.getDatasetMeta(index);
+			item.hidden = !item.hidden;
+			if (item.hidden) {
+				legendItem.classList.add("hidden");
+			} else {
+				legendItem.classList.remove("hidden");
+			}
+			chart.update();
+		};
+		legendContainer.appendChild(legendItem);
+	});
 }
 
 function loadGraph(animationDuration = 1000) {
@@ -331,11 +331,11 @@ function loadGraph(animationDuration = 1000) {
 		type: 'line',
 		plugins: [{
 			afterInit: (chart) => {
-                doGraphResponsive(chart);
-                generateCustomLegend(chart);
-            },
-            resize: doGraphResponsive,
-            afterUpdate: generateCustomLegend
+				doGraphResponsive(chart);
+				generateCustomLegend(chart);
+			},
+			resize: doGraphResponsive,
+			afterUpdate: generateCustomLegend,
 		}],
 		data: chartData,
 		options: {
@@ -457,6 +457,7 @@ function loadGraph(animationDuration = 1000) {
 
 	initialRead = 1;
 	$('#waitForGraphLoadingDiv').hide();
+	$('#legend-container').show();
 }  // end loadGraph
 
 function getDatasetIndex(datasetId) {