Standard web theme updates

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

@@ -7,7 +7,7 @@
     infinite
     padding
     :navigation="groupedItems.length > 1"
-    :arrows="groupedItems && $q.screen.gt.xs"
+    :arrows="groupedItems.length > 1 && $q.screen.gt.xs"
     class="carousel-height q-mt-md"
     transition-next="slide-left"
     transition-prev="slide-right"
@@ -90,29 +90,4 @@ watch(
 .carousel-height {
   min-height: fit-content;
 }
-
-/* firefox */
-@-moz-document url-prefix() {
-  .carousel-height {
-    min-height: 0;
-    height: fit-content;
-  }
-  .carousel-slide {
-    padding: 0;
-  }
-}
-
-/* Safari */
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  _::-webkit-full-page-media,
-  _:future,
-  :root .carousel-height {
-    height: fit-content;
-  }
-  _::-webkit-full-page-media,
-  _:future,
-  :root .carousel-slide {
-    height: fit-content;
-  }
-}
 </style>

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

@@ -1,9 +1,22 @@
 <template>
   <q-card class="full-height card-width">
     <q-card-section>
-      <div class="row text-h6 items-center text-bold">
-        <q-icon name="battery_full" size="xs" class="q-mr-sm" color="primary" />
-        {{ batteryName }}
+      <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"
+          />
+          {{ batteryName }}
+        </div>
+        <q-icon
+          v-if="singleBattery"
+          name="settings"
+          size="sm"
+          @click="dialog?.open()"
+        />
       </div>
       <div class="row q-mt-sm text-subtitle2 justify-between no-wrap">
         <div class="row">
@@ -47,7 +60,19 @@
           </div>
         </div>
       </div>
-      <div class="text-subtitle1 text-weight-bold q-mt-sm">Heute:</div>
+      <div v-if="singleBattery" class="row q-mt-md text-subtitle2">
+        <div>Überschuss Modus:</div>
+        <div class="q-ml-sm row items-center">
+          <q-icon
+            :name="batteryMode.icon"
+            size="sm"
+            class="q-mr-sm"
+            color="primary"
+          />
+          {{ batteryMode.label }}
+        </div>
+      </div>
+      <div class="text-subtitle1 text-weight-bold q-mt-md">Heute:</div>
       <div class="row q-mt-sm text-subtitle2">
         <div>Geladen:</div>
         <div class="q-ml-sm">
@@ -62,24 +87,38 @@
       </div>
     </q-card-section>
   </q-card>
+  <BatterySettingsDialog ref="dialog" />
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import BatterySettingsDialog from './BatterySettingsDialog.vue';
+import { useBatteryModes } from 'src/composables/useBatteryModes.ts';
 
 const props = defineProps<{
   batteryId: number;
 }>();
 
+const singleBattery = computed(() => {
+  return mqttStore.batteryIds.length === 1;
+});
+
+const { batteryModes } = useBatteryModes();
+
+const batteryMode = computed(() => {
+  const mode = mqttStore.batteryMode();
+  return batteryModes.find((m) => m.value === mode.value) || batteryModes[0];
+});
+
+const dialog = ref();
+
 const mqttStore = useMqttStore();
 
 const batteryName = computed(() => mqttStore.batteryName(props.batteryId));
 
 const soc = computed(() => mqttStore.batterySoc(props.batteryId));
 
-//const power = computed(() => mqttStore.batteryPower(props.batteryId));
-
 const power = computed(() => {
   const power = mqttStore.batteryPower(props.batteryId, 'value');
   return typeof power === 'number' ? power : 0;

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

@@ -1,7 +1,7 @@
 <template>
   <q-btn-group class="q-mt-md">
     <q-btn
-      v-for="mode in batModes"
+      v-for="mode in batteryModes"
       :key="mode.value"
       :color="batMode.value === mode.value ? 'primary' : 'grey'"
       :label="mode.label"
@@ -17,32 +17,11 @@
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { computed } from 'vue';
+import { useBatteryModes } from 'src/composables/useBatteryModes.ts';
 
 const mqttStore = useMqttStore();
 
-const batModes = [
-  {
-    value: 'ev_mode',
-    label: 'Auto',
-    color: 'primary',
-    icon: 'directions_car',
-    tooltip: 'Auto ',
-  },
-  {
-    value: 'bat_mode',
-    label: 'Speicher',
-    color: 'primary',
-    icon: 'battery_charging_full',
-    tooltip: 'Speicher',
-  },
-  {
-    value: 'min_soc_bat_mode',
-    label: 'SoC',
-    color: 'primary',
-    icon: 'battery_charging_full',
-    tooltip: 'Minimum Speicher SoC',
-  },
-];
+const { batteryModes } = useBatteryModes();
 
 const batMode = computed(() => mqttStore.batteryMode());
 </script>

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

@@ -11,7 +11,12 @@
           />
           Speicher Übersicht
         </div>
-        <q-icon name="settings" size="sm" @click="settingsVisible = true" />
+        <q-icon
+          v-if="multipleBatteries"
+          name="settings"
+          size="sm"
+          @click="dialog?.open()"
+        />
       </div>
       <div class="row q-mt-sm text-subtitle2 justify-between no-wrap">
         <div class="row">
@@ -53,7 +58,19 @@
           </div>
         </div>
       </div>
-      <div class="text-subtitle1 text-weight-bold q-mt-sm">Heute:</div>
+      <div class="row q-mt-md text-subtitle2">
+        <div>Überschuss Modus:</div>
+        <div class="q-ml-sm row items-center">
+          <q-icon
+            :name="batteryMode.icon"
+            size="sm"
+            class="q-mr-sm"
+            color="primary"
+          />
+          {{ batteryMode.label }}
+        </div>
+      </div>
+      <div class="text-subtitle1 text-weight-bold q-mt-md">Heute:</div>
       <div class="row q-mt-sm text-subtitle2">
         <div>Geladen:</div>
         <div class="q-ml-sm">
@@ -69,37 +86,32 @@
     </q-card-section>
   </q-card>
 
-  <q-dialog
-    v-model="settingsVisible"
-    :maximized="$q.screen.width < 385"
-    :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
-  >
-    <q-card style="min-width: 24em">
-      <q-card-section>
-        <div class="text-h6">Battery Einstellungen</div>
-        <div class="text-subtitle2 q-mt-sm">Laden mit Überschuss Modus:</div>
-        <BatteryModeButtons />
-      </q-card-section>
-      <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+  <BatterySettingsDialog ref="dialog" />
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { useQuasar } from 'quasar';
-import BatteryModeButtons from './BatteryModeButtons.vue';
+import BatterySettingsDialog from './BatterySettingsDialog.vue';
+import { useBatteryModes } from 'src/composables/useBatteryModes.ts';
+
+const dialog = ref();
 
-const settingsVisible = ref<boolean>(false);
+const multipleBatteries = computed(() => {
+  return mqttStore.batteryIds.length > 1;
+});
 
 const mqttStore = useMqttStore();
-const $q = useQuasar();
 
 const soc = computed(() => mqttStore.batterySocTotal);
 
+const { batteryModes } = useBatteryModes();
+
+const batteryMode = computed(() => {
+  const mode = mqttStore.batteryMode();
+  return batteryModes.find((m) => m.value === mode.value) || batteryModes[0];
+});
+
 const dailyImportedEnergy = computed(() =>
   mqttStore.batteryDailyImportedTotal('textValue'),
 );

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

@@ -0,0 +1,31 @@
+<template>
+  <q-dialog
+    v-model="isOpen"
+    :maximized="$q.screen.width < 385"
+    :backdrop-filter="$q.screen.width < 385 ? '' : 'blur(4px)'"
+  >
+    <q-card style="min-width: 24em">
+      <q-card-section>
+        <div class="text-h6">Battery Einstellungen</div>
+        <div class="text-subtitle2 q-mt-sm">Laden mit Überschuss Modus:</div>
+        <BatteryModeButtons />
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="OK" color="primary" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+import BatteryModeButtons from './BatteryModeButtons.vue';
+
+const $q = useQuasar();
+const isOpen = ref(false);
+
+defineExpose({
+  open: () => (isOpen.value = true),
+});
+</script>

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

@@ -42,8 +42,10 @@
         />
       </div>
       <SliderDouble
+        v-if="showSocTargetSlider"
         class="q-mt-sm"
         :readonly="true"
+        :charge-mode="chargeMode"
         :connected-vehicle-soc="connectedVehicleSoc"
         :target-soc="targetSoc"
         :target-time="targetTime"
@@ -100,38 +102,47 @@ const connectedVehicleSoc = computed(() =>
   ),
 );
 
+const chargeMode = computed(
+  () =>
+    mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId).value,
+);
+
 const targetSoc = computed<number | undefined>(() => {
-  const chargeMode = mqttStore.chargePointConnectedVehicleChargeMode(
-    props.chargePointId,
-  ).value;
   const instantLimitMode =
     mqttStore.chargePointConnectedVehicleInstantChargeLimit(
       props.chargePointId,
     ).value;
-  if (chargeMode === 'scheduled_charging') {
-    return mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value
-      ?.soc;
-  } else if (chargeMode === 'instant_charging' && instantLimitMode === 'soc') {
-    return mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
-      props.chargePointId,
-    )?.value;
-  } else if (chargeMode === 'pv_charging') {
-    return mqttStore.chargePointConnectedVehiclePVChargeMaxSoc(
-      props.chargePointId,
-    ).value;
-  } else {
-    return undefined;
+  switch (chargeMode.value) {
+    case 'scheduled_charging':
+      return mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value
+        ?.soc;
+    case 'instant_charging':
+      return instantLimitMode === 'soc'
+        ? mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
+            props.chargePointId,
+          ).value
+        : undefined;
+    case 'pv_charging':
+      return mqttStore.chargePointConnectedVehiclePVChargeMaxSoc(
+        props.chargePointId,
+      ).value;
+    default:
+      return undefined;
   }
 });
 
+const showSocTargetSlider = computed(() => {
+  return (
+    chargeMode.value !== undefined &&
+    !['stop', 'standby'].includes(chargeMode.value)
+  );
+});
+
 const targetTime = computed(() => {
-  const chargeMode = mqttStore.chargePointConnectedVehicleChargeMode(
-    props.chargePointId,
-  ).value;
   const target = mqttStore.vehicleScheduledChargingTarget(
     props.chargePointId,
   ).value;
-  if (!target || !target.time || chargeMode !== 'scheduled_charging') {
+  if (!target || !target.time || chargeMode.value !== 'scheduled_charging') {
     return 'keine';
   }
   return target.time;