Koala upgrades

packages/modules/web_themes/koala/source/.npmrc

@@ -1,5 +1,5 @@
 # pnpm-related options
-shamefully-hoist=true
-strict-peer-dependencies=false
+# shamefully-hoist=true
+# strict-peer-dependencies=false
 # to get the latest compatible packages when creating the project https://github.com/pnpm/pnpm/issues/6463
-resolution-mode=highest
+# resolution-mode=highest

packages/modules/web_themes/koala/source/package.json

@@ -26,21 +26,22 @@
     "register-service-worker": "^1.7.2",
     "vue": "^3.5.18",
     "vue-chartjs": "^5.3.2",
-    "vue-router": "^4.5.1"
+    "vue-router": "^5.0.6"
   },
   "devDependencies": {
     "@quasar/app-vite": "^2.3.0",
-    "@types/node": "^20.19.11",
+    "@types/node": "^25.6.0",
     "@typescript-eslint/eslint-plugin": "^8.39.1",
     "@typescript-eslint/parser": "^8.39.1",
     "autoprefixer": "^10.4.21",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-vue": "^10.4.0",
     "prettier": "^3.6.2",
-    "typescript": "^5.9.2",
+    "typescript": "^6.0.3",
     "vite-plugin-checker": "^0.10.2",
-    "vitest": "^3.2.4",
+    "vite-plugin-remove-console": "^2.2.0",
+    "vitest": "^4.1.5",
     "vue-tsc": "^3.0.5",
     "workbox-build": "^7.3.0",
     "workbox-cacheable-response": "^7.3.0",

packages/modules/web_themes/koala/source/quasar.config.ts

@@ -56,21 +56,6 @@ export default defineConfig((ctx) => {
       distDir: '../web/',
 
       // extendViteConf (viteConf) {},
-      extendViteConf(viteConf) {
-        if (ctx.prod === true) {
-          // drop console statements in production build
-          viteConf.esbuild = {
-            ...viteConf.esbuild,
-            drop: ['debugger'],
-            pure: [
-              'console.log',
-              'console.info',
-              'console.debug',
-              'console.table',
-            ],
-          };
-        }
-      },
       // viteVuePluginOptions: {},
 
       vitePlugins: [
@@ -86,6 +71,15 @@ export default defineConfig((ctx) => {
           },
           { server: false },
         ],
+        ctx.prod
+          ? [
+              'vite-plugin-remove-console',
+              {
+                includes: ['log', 'debug', 'table'],
+              },
+              { server: false },
+            ]
+          : null,
       ],
     },
 

packages/modules/web_themes/koala/source/src-pwa/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "lib": ["WebWorker", "ESNext"]
+    "lib": ["WebWorker", "ESNext"],
+    "types": ["node"]
   },
   "include": ["*.ts", "*.d.ts"]
 }

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

@@ -47,7 +47,7 @@ import { Screen } from 'quasar';
 const props = defineProps<{ items: number[] }>();
 
 const carouselRef = ref<{ $el: HTMLElement } | null>(null);
-const itemRef = ref<HTMLElement | null>(null);
+const itemRef = ref<HTMLElement[] | null>(null);
 const currentSlide = ref(0);
 
 const itemWidth = ref(100);
@@ -120,8 +120,8 @@ const groupedItems = computed(() => {
   return result;
 });
 
-function handleSlideChange(val: number) {
-  currentSlide.value = val;
+function handleSlideChange(val: string | number) {
+  currentSlide.value = typeof val === 'number' ? val : parseInt(val, 10) || 0;
 }
 
 watch(groupedItems, (groups) => {

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

@@ -26,14 +26,16 @@
       <q-card-section>
         <div class="text-subtitle2">Ladepriorität:</div>
         <BatteryModeButtons />
-          <RangeSliderStandard  v-if="batteryMode === 'min_soc_bat_mode'" class="q-pt-md"
-            v-model="batteryRange"
-            title="SoC-Grenzen des Speichers:"
-            :min="0"
-            :max="100"
-            :step="1"
-            :markers="10"
-          />
+        <RangeSliderStandard
+          v-if="batteryMode === 'min_soc_bat_mode'"
+          class="q-pt-md"
+          v-model="batteryRange"
+          title="SoC-Grenzen des Speichers:"
+          :min="0"
+          :max="100"
+          :step="1"
+          :markers="10"
+        />
       </q-card-section>
     </q-card>
   </q-dialog>

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

@@ -179,7 +179,9 @@ const settingsVisible = ref<boolean>(false);
 const chargeLimitsVisible = ref<boolean>(false);
 
 const limitEditable = computed(() => {
-  return !['scheduled_charging', 'stop'].includes(chargeMode.value);
+  return chargeMode.value
+    ? !['scheduled_charging', 'stop'].includes(chargeMode.value)
+    : false;
 });
 
 const openLimitDialog = () => {

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

@@ -1,9 +1,9 @@
 <template>
   <BaseMessage
-  :show-message="showMessage"
-  :message="message"
-  :type="messageType"
-/>
+    :show-message="showMessage"
+    :message="message"
+    :type="messageType"
+  />
 </template>
 
 <script setup lang="ts">
@@ -17,7 +17,6 @@ const props = defineProps<{
 }>();
 const mqttStore = useMqttStore();
 
-
 const showMessage = computed(() => {
   return state.value !== undefined && state.value !== 0;
 });

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

@@ -444,7 +444,7 @@ const planDcPower = computed(() =>
   ),
 );
 
-const removeScheduledChargingPlan = (planId) => {
+const removeScheduledChargingPlan = (planId: number) => {
   mqttStore.removeScheduledChargingPlanForChargePoint(
     props.chargePointId,
     planId,

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

@@ -9,7 +9,7 @@
       @click="addScheduledChargingPlan"
     />
   </div>
-    <BaseMessage
+  <BaseMessage
     v-if="plans.length === 0"
     message="Keine Zeitpläne vorhanden."
     type="info"
@@ -20,7 +20,7 @@
         class="full-width"
         :charge-point-id="props.chargePointId"
         :plan="plan"
-        @edit-plan="openPlanDialog(plan)"
+        @edit-plan="openPlanDialog(plan.id)"
       />
     </div>
     <q-dialog
@@ -67,8 +67,8 @@ const selectedPlan = computed(() => {
 
 const currentPlanDetailsVisible = ref(false);
 
-const openPlanDialog = (plan) => {
-  selectedPlanId.value = plan.id;
+const openPlanDialog = (planId: number) => {
+  selectedPlanId.value = planId;
   currentPlanDetailsVisible.value = true;
 };
 

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

@@ -59,6 +59,7 @@ import ChargePointTimeChargingPlanButton from './ChargePointTimeChargingPlanButt
 import ChargePointTimeChargingPlanDetails from './ChargePointTimeChargingPlanDetails.vue';
 import BaseMessage from './BaseMessage.vue';
 import { Screen } from 'quasar';
+import { TimeChargingPlan } from 'src/stores/mqtt-store-model';
 
 const props = defineProps<{
   chargePointId: number;
@@ -67,7 +68,7 @@ const props = defineProps<{
 const isSmallScreen = computed(() => Screen.lt.sm);
 
 const currentPlanDetailsVisible = ref<boolean>(false);
-const selectedPlan = ref(null);
+const selectedPlan = ref<TimeChargingPlan | null>(null);
 
 const mqttStore = useMqttStore();
 
@@ -83,7 +84,7 @@ const addScheduledChargingPlan = () => {
   mqttStore.addTimeChargingPlanForChargePoint(props.chargePointId);
 };
 
-const openPlanDialog = (plan) => {
+const openPlanDialog = (plan: TimeChargingPlan) => {
   selectedPlan.value = plan;
   currentPlanDetailsVisible.value = true;
 };

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

@@ -27,7 +27,7 @@
           clickable
           v-close-popup
           @click="connectedVehicle = vehicle"
-          :active="connectedVehicle.id === vehicle.id"
+          :active="connectedVehicle?.id === vehicle.id"
           active-class="bg-primary text-white"
         >
           <q-item-section class="text-center text-weight-bold">

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

@@ -102,7 +102,7 @@ const chartCarouselItems = computed(() => {
   return slideOrder
     .map((name) => ({
       name,
-      component: componentMap[name],
+      component: componentMap[name as keyof typeof componentMap],
     }))
     .filter((item) => !!item.component);
 });

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

@@ -1,27 +1,18 @@
 <template>
-  <div
-    v-if="showIcon"
-    id="mqtt-connection-indicator"
-  >
+  <div v-if="showIcon" id="mqtt-connection-indicator">
     <q-badge
       rounded
       align="middle"
       :color="connected ? 'positive' : 'negative'"
       class="non-selectable"
     >
-      <q-icon
-        :name="connected ? 'link' : 'link_off'"
-        size="sm"
-      >
+      <q-icon :name="connected ? 'link' : 'link_off'" size="sm">
         <q-tooltip v-if="connected">Verbindung hergestellt</q-tooltip>
         <q-tooltip v-else>Verbindung getrennt</q-tooltip>
       </q-icon>
     </q-badge>
   </div>
-  <q-dialog
-    v-model="showModal"
-    persistent
-  >
+  <q-dialog v-model="showModal" persistent>
     <q-card>
       <q-card-section class="row items-center">
         <q-avatar icon="link_off" color="negative" text-color="white" />

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

@@ -96,10 +96,16 @@ const chartDataObject = computed<ChartData<'line'>>(() => {
     }
     // repeat last dataset with 59min 59sec offset
     const lastData = myData.slice(-1)[0];
-    myData.push({
-      x: lastData.x + (60 * 60 - 1) * 1000,
-      y: lastData.y,
-    });
+    if (
+      lastData &&
+      typeof lastData.x === 'number' &&
+      typeof lastData.y === 'number'
+    ) {
+      myData.push({
+        x: lastData.x + (60 * 60 - 1) * 1000,
+        y: lastData.y,
+      });
+    }
   }
   const dataObject = chartDatasets.value;
   dataObject.datasets[0].data = myData;
@@ -124,7 +130,10 @@ const priceAnnotations = computed(() => {
 
   const colorUnblocked = 'rgba(73, 238, 73, 0.2)'; // ToDo: use theme color
   const colorBlocked = 'rgba(255, 10, 13, 0.2)'; // ToDo: use theme color
-  const myData = chartDataObject.value.datasets[0].data as Point[];
+  const myData = chartDataObject.value.datasets[0].data as {
+    x: number;
+    y: number;
+  }[];
   let annotations: Annotation[] = [];
   if (props.modelValue !== undefined) {
     for (let i = 0; i < myData.length; i++) {
@@ -274,7 +283,7 @@ function chartClick(event: MouseEvent) {
   if (points.length > 0) {
     const dataPoint = chartDataObject.value.datasets[0].data[
       points[0].index
-    ] as Point;
+    ] as { x: number; y: number };
     emit('update:modelValue', Math.ceil(dataPoint.y * 100) / 100);
   }
 }

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

@@ -38,22 +38,23 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    title?: string
-    modelValue: number
-    max: number
-    min: number
-    step?: number
-    unit?: string
-    offValueRight?: number
-    offValueLeft?: number
-    discreteValues?: number[]
-    color?: string
-    trackSize?: string
-    thumbSize?: string
-    thumbColor?: string
+    title?: string;
+    modelValue?: number;
+    max: number;
+    min: number;
+    step?: number;
+    unit?: string;
+    offValueRight?: number;
+    offValueLeft?: number;
+    discreteValues?: number[];
+    color?: string;
+    trackSize?: string;
+    thumbSize?: string;
+    thumbColor?: string;
   }>(),
   {
     title: 'title',
+    modelValue: 0,
     step: 1,
     unit: '',
     offValueRight: 105,
@@ -63,8 +64,8 @@ const props = withDefaults(
     trackSize: '0.5em',
     thumbSize: '1.5em',
     thumbColor: 'primary',
-  }
-)
+  },
+);
 
 const emit = defineEmits<{
   'update:model-value': [value: number];

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

@@ -262,7 +262,7 @@ const loggedIn = computed(() => {
 
 const username = computed(() => {
   if (loggedIn.value) {
-    return $q.cookies.get('mqtt').split(':')[0];
+    return $q.cookies.get('mqtt')?.split(':')[0];
   }
   return '';
 });

packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue

@@ -163,7 +163,7 @@ const gridPower = computed(() => mqttStore.getCounterPower('value'));
 const showGrid = computed(
   () => gridPower.value !== undefined || secondaryCountersConfigured.value,
 );
-const expanded = ref({
+const expanded = ref<Record<string, boolean>>({
   grid: false,
   chargepoint: false,
   battery: false,