Koala - Battery Priority SoC range slider

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

@@ -36,12 +36,11 @@
         v-if="showSettings"
         class="row q-mt-md justify-between text-subtitle2"
       >
-        <div>Laden mit Überschuss:</div>
-        <div class="q-ml-sm row items-center">
+        <div>Ladepriorität:</div>
+        <div class="row items-center">
           <q-icon
             :name="batteryMode.icon"
             size="sm"
-            class="q-mr-sm"
             color="primary"
           />
           <div>

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

@@ -4,19 +4,36 @@
     :maximized="isSmallScreen"
     :backdrop-filter="isSmallScreen ? '' : 'blur(4px)'"
   >
-    <q-card>
+    <q-card class="card-width">
       <q-card-section>
         <div class="row no-wrap">
-          <div class="text-h6 q-pr-sm">Speicher-Beachtung:</div>
-          <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
+          <div>
+            <div class="text-h6 q-pr-sm">Speicher-Beachtung:</div>
+            <div class="text-h6 ellipsis" :title="name">{{ name }}</div>
+          </div>
           <q-space />
-          <q-btn icon="close" flat round dense v-close-popup />
+          <q-btn
+            icon="close"
+            flat
+            round
+            dense
+            v-close-popup
+            class="close-btn"
+          />
         </div>
       </q-card-section>
       <q-separator />
       <q-card-section>
-        <div class="text-subtitle2">Überschuss primär für:</div>
+        <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"
+          />
       </q-card-section>
     </q-card>
   </q-dialog>
@@ -26,6 +43,7 @@
 import { computed, ref } from 'vue';
 import { Screen } from 'quasar';
 import BatteryModeButtons from './BatteryModeButtons.vue';
+import RangeSliderStandard from './RangeSliderStandard.vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
 const isOpen = ref(false);
@@ -48,4 +66,22 @@ const name = computed(() => {
 defineExpose({
   open: () => (isOpen.value = true),
 });
+
+const batteryMode = computed(() => mqttStore.batteryMode().value);
+
+const batteryRange = computed({
+  get: () => mqttStore.batteryChargePriorityRange,
+  set: (value) => {
+    mqttStore.batteryChargePriorityRange = value;
+  },
+});
 </script>
+<style lang="scss" scoped>
+.card-width {
+  max-width: 600px;
+}
+.close-btn {
+  height: 2.5em;
+  width: 2.5em;
+}
+</style>

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

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div class="text-subtitle2">{{ title }}</div>
+    <div class="row items-center justify-between q-ml-sm">
+      <q-range
+        v-model="delayedValue"
+        :min="props.min"
+        :max="props.max"
+        :step="props.step"
+        :markers="props.markers"
+        :left-label-color="minChanged ? 'negative' : 'primary'"
+        :right-label-color="maxChanged ? 'negative' : 'primary'"
+        label
+        label-always
+        color="primary"
+        class="col"
+        track-size="0.5em"
+        thumb-size="1.7em"
+        @touchstart.stop
+        @touchmove.stop
+        @touchend.stop
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useDelayModel } from '../composables/useDelayModel';
+import { RangeValue } from '../stores/mqtt-store-model';
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    modelValue: RangeValue
+    min: number
+    max: number
+    step?: number
+    markers?: boolean | number
+  }>(),
+  {
+    title: '',
+    step: 1,
+    markers: false,
+  }
+)
+
+const emit = defineEmits<{
+  'update:model-value': [value: RangeValue];
+}>();
+
+const { delayedValue } = useDelayModel<RangeValue>(props, emit);
+
+const minChanged = computed(() =>
+  delayedValue.value.min !== props.modelValue.min
+)
+
+const maxChanged = computed(() =>
+  delayedValue.value.max !== props.modelValue.max
+)
+</script>
+<style scoped lang="scss">
+:deep(.q-slider__pin) {
+  top: 100%;
+  transform: scaleY(-1);
+}
+:deep(.q-slider__text-container) {
+  transform: scaleY(-1) !important;
+}
+:deep(.q-range) {
+  padding-bottom: 24px;
+}
+</style>