Koala theme Add temporal chart to chart carousel

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

@@ -15,11 +15,16 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.12",
+    "chart.js": "^3.9.1",
+    "chartjs-adapter-luxon": "^1.3.1",
+    "chartjs-plugin-zoom": "^2.2.0",
+    "luxon": "^3.5.0",
     "mqtt": "^5.10.1",
     "pinia": "^2.2.4",
     "quasar": "^2.17.0",
     "register-service-worker": "^1.7.2",
     "vue": "^3.5.11",
+    "vue-chart-3": "^3.1.8",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {

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

@@ -5,6 +5,7 @@
     :animated="animated"
     control-color="primary"
     infinite
+    @update:model-value="handleSlideChange"
     padding
     :navigation="groupedItems.length > 1"
     :arrows="groupedItems.length > 1 && $q.screen.gt.xs"
@@ -19,15 +20,20 @@
       :name="index"
       class="row no-wrap justify-center carousel-slide"
     >
-      <div v-for="item in group" :key="item" class="item-container">
+      <div
+        v-for="item in group"
+        :key="item"
+        class="item-container"
+        :style="`min-height: ${maxCardHeight}px`"
+      >
         <slot name="item" :item="item"></slot>
       </div>
     </q-carousel-slide>
   </q-carousel>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue';
+import { ref, computed, watch, nextTick, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 
 const props = defineProps<{
@@ -78,6 +84,56 @@ watch(
     animated.value = true;
   },
 );
+
+const handleSlideChange = () => {
+  const currentScroll = window.scrollY;
+  nextTick(() => {
+    updateMaxCardHeight();
+    observeCardChanges();
+    window.scrollTo(0, currentScroll);
+  });
+};
+
+const maxCardHeight = ref<number>(0);
+
+const updateMaxCardHeight = () => {
+  const cards = document.querySelectorAll('.q-card');
+  const heights = Array.from(cards).map(
+    (card) => (card as HTMLElement).offsetHeight,
+  );
+  maxCardHeight.value = Math.max(...heights);
+};
+
+const observeCardChanges = () => {
+  const observer = new MutationObserver(() => {
+    updateMaxCardHeight();
+  });
+  const cards = document.querySelectorAll('.q-card');
+  cards.forEach((card) => {
+    observer.observe(card, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    });
+  });
+};
+
+onMounted(() => {
+  nextTick(() => {
+    updateMaxCardHeight();
+    observeCardChanges();
+  });
+});
+
+watch(
+  () => props.items,
+  () => {
+    nextTick(() => {
+      updateMaxCardHeight();
+      observeCardChanges();
+    });
+  },
+);
 </script>
 
 <style scoped>
@@ -89,5 +145,6 @@ watch(
 }
 .carousel-height {
   min-height: fit-content;
+  height: 100%;
 }
 </style>

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

@@ -40,7 +40,7 @@
       </q-btn-group>
       <div v-if="planLimitSelected.value === 'soc'" class="q-mt-md">
         <SliderStandard
-          title="Fahrzeug-SoC zum Zielzeitpunkt"
+          title="EV-SoC"
           :min="5"
           :max="100"
           :step="5"
@@ -60,7 +60,7 @@
       <q-input
         v-if="planLimitSelected.value === 'amount'"
         v-model="planLimitAmount.value"
-        label="Ziel-Energy (kWh)"
+        label="Energiemenge (kWh)"
         class="col"
       />
       <div class="q-mb-md">