Koala - Add new slide daily totals to top carousel

packages/modules/web_themes/koala/config.py

@@ -11,13 +11,20 @@ def __init__(self,
                  chargePoint_card_view_breakpoint: int = 4,
                  vehicle_card_view_breakpoint: int = 4,
                  chargePoint_table_search_input_field: bool = False,
-                 vehicle_table_search_input_field: bool = False) -> None:
+                 vehicle_table_search_input_field: bool = False,
+                 top_carousel_slide_order: list = None
+                 ) -> None:
         self.hide_standard_vehicle = hide_standard_vehicle
         self.history_chart_range = history_chart_range
         self.chargePoint_card_view_breakpoint = chargePoint_card_view_breakpoint
         self.vehicle_card_view_breakpoint = vehicle_card_view_breakpoint
         self.chargePoint_table_search_input_field = chargePoint_table_search_input_field
         self.vehicle_table_search_input_field = vehicle_table_search_input_field
+        self.top_carousel_slide_order = top_carousel_slide_order or [
+            "flow_diagram",
+            "history_chart",
+            "daily_totals",
+        ]
 
 
 @auto_str

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

@@ -62,7 +62,12 @@ export default defineConfig((ctx) => {
           viteConf.esbuild = {
             ...viteConf.esbuild,
             drop: ['debugger'],
-            pure: ['console.log', 'console.info', 'console.debug', 'console.table'],
+            pure: [
+              'console.log',
+              'console.info',
+              'console.debug',
+              'console.table',
+            ],
           };
         }
       },

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

@@ -78,7 +78,7 @@ function measure() {
 
 onMounted(() => {
   measure();
-  window.addEventListener('resize', measure, {passive: true});
+  window.addEventListener('resize', measure, { passive: true });
 });
 
 onBeforeUnmount(() => {
@@ -92,7 +92,9 @@ const groupSize = computed(() => {
   const maxGroup = Math.max(
     1,
     Math.floor(
-      (carouselWidth.value - 2 - (showArrows.value ? carouselPadding.value : 50)) /
+      (carouselWidth.value -
+        2 -
+        (showArrows.value ? carouselPadding.value : 50)) /
         itemWidth.value,
     ),
   );

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

@@ -1,5 +1,7 @@
 <template>
   <q-carousel
+    v-if="chartCarouselItems.length > 0 && currentSlide"
+    :key="carouselKey"
     v-model="currentSlide"
     v-model:fullscreen="fullscreen"
     swipeable
@@ -13,21 +15,23 @@
   >
     <q-carousel-slide
       v-for="chartComponent in chartCarouselItems"
-      :key="`${chartComponent.name}-${chartComponent.name === 'HistoryChart' ? renderKey : 0}`"
+      :key="`${chartComponent.name}-${chartComponent.name === 'history_chart' ? renderKey : 0}`"
       :name="chartComponent.name"
     >
       <component :is="chartComponent.component" :show-legend="legendVisible" />
     </q-carousel-slide>
 
     <template v-slot:control>
-      <q-carousel-control position="bottom-right">
+      <q-carousel-control position="bottom-left">
         <q-btn
-          v-if="currentSlide === 'HistoryChart'"
+          v-if="currentSlide === 'history_chart'"
           size="sm"
           class="q-mr-sm legend-button-text"
           label="Legend ein/aus"
           @click="toggleLegend"
         />
+      </q-carousel-control>
+      <q-carousel-control position="bottom-right">
         <q-btn
           push
           round
@@ -46,7 +50,11 @@ import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import EnergyFlowChart from './charts/energyFlowChart/EnergyFlowChart.vue';
 import HistoryChart from './charts/historyChart/HistoryChart.vue';
+import DailyTotals from './DailyTotals.vue';
 import { useLocalDataStore } from 'src/stores/localData-store';
+import { useMqttStore } from 'src/stores/mqtt-store';
+
+const mqttStore = useMqttStore();
 
 defineOptions({
   name: 'ChartCarousel',
@@ -59,17 +67,44 @@ const toggleLegend = () => {
 };
 const legendVisible = computed(() => localDataStore.legendVisible);
 const fullscreen = ref(false);
-const chartCarouselItems = [
-  {
-    name: 'EnergyFlowChart',
-    component: EnergyFlowChart,
-  },
-  {
-    name: 'HistoryChart',
-    component: HistoryChart,
-  },
-];
-const currentSlide = ref<string>(chartCarouselItems[0].name);
+
+const carouselKey = computed(() =>
+  chartCarouselItems.value.map((item) => item.name).join('-'),
+);
+
+const currentSlide = ref<string | null>(null);
+
+const componentMap = {
+  flow_diagram: EnergyFlowChart,
+  history_chart: HistoryChart,
+  daily_totals: DailyTotals,
+};
+
+const chartCarouselItems = computed(() => {
+  const slideOrder = mqttStore.themeConfiguration?.top_carousel_slide_order;
+  if (!slideOrder || slideOrder.length === 0) {
+    return [
+      {
+        name: 'flow_diagram',
+        component: EnergyFlowChart,
+      },
+      {
+        name: 'history_chart',
+        component: HistoryChart,
+      },
+      {
+        name: 'daily_totals',
+        component: DailyTotals,
+      },
+    ];
+  }
+  return slideOrder
+    .map((name) => ({
+      name,
+      component: componentMap[name],
+    }))
+    .filter((item) => !!item.component);
+});
 
 watch(
   () => fullscreen.value,
@@ -78,13 +113,23 @@ watch(
     if (
       !isFullscreen &&
       wasFullscreen &&
-      currentSlide.value === 'HistoryChart'
+      currentSlide.value === 'history_chart'
     ) {
       // Force the chart to be recreated by changing its key
       renderKey.value++;
     }
   },
 );
+
+watch(
+  chartCarouselItems,
+  (items) => {
+    if (items.length > 0) {
+      currentSlide.value = items[0].name;
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <style scoped>