Add data to slider (charge point card) - Fix scheduled charging reactivity

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

@@ -8,7 +8,7 @@
     padding
     :navigation="groupedItems.length > 1"
     :arrows="groupedItems && $q.screen.gt.xs"
-    class="full-width full-height q-mt-md"
+    class="full-width carousel-height q-mt-md"
     transition-next="slide-left"
     transition-prev="slide-right"
     @mousedown.prevent
@@ -87,4 +87,7 @@ watch(
 .item-container {
   padding: 0.25em;
 }
+.carousel-height {
+  min-height: fit-content;
+}
 </style>

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

@@ -12,7 +12,7 @@
       size="sm"
       @click="batMode.value = mode.value"
     >
-      <q-tooltip class="bg-secondary">{{ mode.tooltip }}</q-tooltip>
+      <q-tooltip class="bg-primary">{{ mode.tooltip }}</q-tooltip>
     </q-btn>
   </q-btn-group>
 </template>
@@ -27,21 +27,21 @@ const batModes = [
   {
     value: 'ev_mode',
     label: 'Auto',
-    color: 'secondary',
+    color: 'primary',
     icon: 'directions_car',
     tooltip: 'Auto ',
   },
   {
     value: 'bat_mode',
     label: 'Speicher',
-    color: 'secondary',
+    color: 'primary',
     icon: 'battery_charging_full',
     tooltip: 'Speicher',
   },
   {
     value: 'min_soc_bat_mode',
     label: 'SoC',
-    color: 'secondary',
+    color: 'primary',
     icon: 'battery_charging_full',
     tooltip: 'Minimum Speicher SoC',
   },

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

@@ -22,12 +22,12 @@
           <q-badge rounded color="primary" :label="phaseNumber">
             <q-tooltip class="bg-primary">Phasenanzahl</q-tooltip>
           </q-badge>
-          {{ ChargingCurrent + ' A' }}
+          {{ chargingCurrent + ' A' }}
         </div>
         <div class="col q-pa-sm">
           <div class="text-subtitle2">geladen</div>
           <!-- {{ energyCharged }} -->
-          {{ EnergyChargedPlugged }}
+          {{ energyChargedPlugged }}
         </div>
       </div>
       <div class="row items-center q-mt-sm">
@@ -41,11 +41,17 @@
           :readonly="true"
         />
       </div>
-      <SliderQuasar class="q-mt-sm" :readonly="true" />
+      <SliderDouble
+        class="q-mt-sm"
+        :readonly="true"
+        :connected-vehicle-soc="connectedVehicleSoc"
+        :target-soc="targetSoc"
+        :target-time="targetTime"
+      />
     </q-card-section>
   </q-card>
 
-  <!-- //////////////////////  Settings popup dialog  //////////////////// -->
+  <!-- //////////////////////  Settings popup dialog   //////////////////// -->
   <ChargePointSettings
     :chargePointId="props.chargePointId"
     v-model="settingsVisible"
@@ -55,7 +61,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
-import SliderQuasar from './SliderQuasar.vue';
+import SliderDouble from './SliderDouble.vue';
 import ChargePointLock from './ChargePointLock.vue';
 import ChargePointStateIcon from './ChargePointStateIcon.vue';
 import ChargePointPriority from './ChargePointPriority.vue';
@@ -76,18 +82,38 @@ const name = computed(() => mqttStore.chargePointName(props.chargePointId));
 const power = computed(() =>
   mqttStore.chargePointPower(props.chargePointId, 'textValue'),
 );
-// const energyCharged = computed(() =>
-//   mqttStore.chargePointEnergyCharged(props.chargePointId, 'textValue'),
-// );
-const EnergyChargedPlugged = computed(() =>
+
+const energyChargedPlugged = computed(() =>
   mqttStore.chargePointEnergyChargedPlugged(props.chargePointId, 'textValue'),
 );
 const phaseNumber = computed(() =>
   mqttStore.chargePointPhaseNumber(props.chargePointId),
 );
-const ChargingCurrent = computed(() =>
+const chargingCurrent = computed(() =>
   mqttStore.chargePointChargingCurrent(props.chargePointId),
 );
+
+const connectedVehicleSoc = computed(() =>
+  Math.round(
+    mqttStore.chargePointConnectedVehicleSoc(props.chargePointId).value?.soc ??
+      0,
+  ),
+);
+
+const targetSoc = computed(
+  () =>
+    mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value?.soc,
+);
+
+const targetTime = computed(() => {
+  const target = mqttStore.vehicleScheduledChargingTarget(
+    props.chargePointId,
+  ).value;
+  if (!target || !target.time) {
+    return 'keine';
+  }
+  return target.time;
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -58,9 +58,9 @@ const props = defineProps<{
 const mqttStore = useMqttStore();
 
 const limitModes = [
-  { value: 'none', label: 'keine', color: 'secondary' },
-  { value: 'soc', label: 'EV-SoC', color: 'secondary' },
-  { value: 'amount', label: 'Energiemenge', color: 'secondary' },
+  { value: 'none', label: 'keine', color: 'primary' },
+  { value: 'soc', label: 'EV-SoC', color: 'primary' },
+  { value: 'amount', label: 'Energiemenge', color: 'primary' },
 ];
 
 const instantChargeCurrent = computed(() =>