Updated buttons etc.. for improved mobile view. / Update battery carousel / display themes (light, dark)

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 carousel-height q-mt-md"
+    class="carousel-height q-mt-md"
     transition-next="slide-left"
     transition-prev="slide-right"
     @mousedown.prevent
@@ -90,4 +90,29 @@ 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

@@ -2,7 +2,7 @@
   <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="warning" />
+        <q-icon name="battery_full" size="xs" class="q-mr-sm" color="primary" />
         {{ batteryName }}
       </div>
       <div class="row q-mt-sm text-subtitle2 justify-between no-wrap">
@@ -26,7 +26,7 @@
                             : 'battery_full'
             "
             size="sm"
-            color="warning"
+            color="primary"
             class="rotate90Clockwise q-mr-sm"
           />
           <div>SoC:</div>

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

@@ -1,14 +1,11 @@
 <template>
-  <q-btn-group push rounded class="q-mt-md">
+  <q-btn-group class="q-mt-md">
     <q-btn
       v-for="mode in batModes"
       :key="mode.value"
-      :flat="batMode.value !== mode.value"
-      :outline="batMode.value === mode.value"
-      :glossy="batMode.value === mode.value"
+      :color="batMode.value === mode.value ? 'primary' : 'grey'"
       :label="mode.label"
       :icon="mode.icon"
-      :color="mode.color"
       size="sm"
       @click="batMode.value = mode.value"
     >

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

@@ -7,7 +7,7 @@
             name="battery_full"
             size="sm"
             class="q-mr-sm"
-            color="warning"
+            color="primary"
           />
           Speicher Übersicht
         </div>
@@ -34,7 +34,7 @@
                             : 'battery_full'
             "
             size="sm"
-            color="warning"
+            color="primary"
             class="rotate90Clockwise q-mr-sm"
           />
           <div>SoC:</div>

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

@@ -100,10 +100,25 @@ const connectedVehicleSoc = computed(() =>
   ),
 );
 
-const targetSoc = computed(
-  () =>
-    mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value?.soc,
-);
+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 {
+    return undefined;
+  }
+});
 
 const targetTime = computed(() => {
   const target = mqttStore.vehicleScheduledChargingTarget(

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

@@ -10,15 +10,12 @@
   <!-- <SliderQuasar class="q-mt-sm" :readonly="false" /> -->
   <div class="text-subtitle2 q-mr-sm">Begrenzung</div>
   <div class="row items-center justify-center q-ma-none q-pa-none no-wrap">
-    <q-btn-group push rounded class="q-mt-md col">
+    <q-btn-group class="q-mt-md col">
       <q-btn
         v-for="mode in limitModes"
         :key="mode.value"
-        :flat="limitMode.value !== mode.value"
-        :outline="limitMode.value === mode.value"
-        :glossy="limitMode.value === mode.value"
+        :color="limitMode.value === mode.value ? 'primary' : 'grey'"
         :label="mode.label"
-        :color="mode.color"
         size="sm"
         class="col"
         @click="limitMode.value = mode.value"
@@ -85,3 +82,24 @@ const instantEnergy = computed(() =>
   ),
 );
 </script>
+
+<style lang="scss" scoped>
+body.desktop {
+  .q-btn-group {
+    .q-btn {
+      min-width: 100px !important;
+    }
+  }
+}
+
+body.mobile {
+  .q-btn-group {
+    .q-btn {
+      padding: 4px 8px;
+      font-size: 12px !important;
+      min-height: 30px;
+      min-width: 100px !important;
+    }
+  }
+}
+</style>

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

@@ -8,7 +8,7 @@
   <q-toggle
     v-else
     v-model="locked"
-    :color="locked ? 'negative' : 'positive'"
+    :color="locked ? 'primary' : 'positive'"
     checked-icon="lock"
     unchecked-icon="lock_open"
     size="lg"

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

@@ -1,27 +1,59 @@
 <template>
-  <q-btn-group push rounded class="q-mt-md">
+  <q-btn-group class="q-mt-md" v-if="isDesktop">
     <q-btn
       v-for="mode in chargeModes"
       :key="mode.value"
-      :flat="chargeMode.value !== mode.value"
-      :outline="chargeMode.value === mode.value"
-      :glossy="chargeMode.value === mode.value"
+      :color="chargeMode.value === mode.value ? 'primary' : 'grey'"
       :label="mode.label"
-      :color="mode.color"
       size="sm"
       @click="chargeMode.value = mode.value"
     />
   </q-btn-group>
+  <div class="q-pt-md full-width" v-if="isMobile">
+    <q-btn-dropdown
+      transition-show="scale"
+      transition-hide="scale"
+      transition-duration="500"
+      class="full-width"
+      color="primary"
+      :label="currentModeLabel"
+      size="lg"
+      dropdown-icon="none"
+      cover
+      push
+    >
+      <q-list>
+        <template v-for="(mode, index) in chargeModes" :key="mode.value">
+          <q-item
+            clickable
+            v-close-popup
+            @click="chargeMode.value = mode.value"
+            :active="chargeMode.value === mode.value"
+            active-class="bg-primary text-white"
+          >
+            <q-item-section class="text-center text-weight-bold">
+              <q-item-label>{{ mode.label.toLocaleUpperCase() }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-separator v-if="index < chargeModes.length - 1" />
+        </template>
+      </q-list>
+    </q-btn-dropdown>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { computed } from 'vue';
+import { Platform } from 'quasar';
 
 const props = defineProps<{
   chargePointId: number;
 }>();
 
+const isDesktop = computed(() => Platform.is.desktop);
+const isMobile = computed(() => Platform.is.mobile);
+
 const mqttStore = useMqttStore();
 
 const chargeModes = [
@@ -35,4 +67,16 @@ const chargeModes = [
 const chargeMode = computed(() =>
   mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId),
 );
+
+const currentModeLabel = computed(
+  () =>
+    chargeModes.find((mode) => mode.value === chargeMode.value.value)?.label,
+);
 </script>
+
+<style lang="scss" scoped>
+:deep(.q-btn-dropdown__arrow-container) {
+  width: 0;
+  padding: 0;
+}
+</style>

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

@@ -8,7 +8,7 @@
   <q-toggle
     v-else
     v-model="priority"
-    :color="priority ? 'warning' : ''"
+    :color="priority ? 'primary' : ''"
     :checked-icon="icon.on"
     :unchecked-icon="icon.off"
     size="lg"