Add bidi settings to koala and standard themes

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

@@ -0,0 +1,66 @@
+<template>
+  <SliderStandard
+    title="Minimaler Entlade-SoC"
+    :min="5"
+    :max="100"
+    :step="5"
+    unit="%"
+    v-model="minDischargeSoC.value"
+    class="q-mt-md"
+  />
+  <SliderStandard
+    title="Stromstärke"
+    :min="6"
+    :max="32"
+    :step="1"
+    unit="A"
+    v-model="current.value"
+    class="q-mt-md"
+  />
+  <div class="text-subtitle2 q-mr-sm q-mt-md">Bidi-Plan:</div>
+  <div class="column q-mt-sm">
+    <PlanDetailsDisplay
+      :frequency="plan?.frequency.selected"
+      :time="plan?.time"
+      :limitType="'soc'"
+      :socScheduled="plan?.limit.soc_scheduled"
+      :date="plan?.frequency.once"
+      :weeklyDays="plan?.frequency.weekly"
+      :limitIcon="'battery_full'"
+      :etActive="planEtActive"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMqttStore } from 'src/stores/mqtt-store';
+import { computed } from 'vue';
+import PlanDetailsDisplay from './PlanDetailsDisplay.vue';
+import SliderStandard from './SliderStandard.vue';
+
+const props = defineProps<{
+  chargePointId: number;
+}>();
+
+const mqttStore = useMqttStore();
+
+const plan = computed(() =>
+  mqttStore.chargePointConnectedVehicleBidiChargePlan(props.chargePointId),
+);
+
+const minDischargeSoC = computed(() =>
+  mqttStore.chargePointConnectedVehicleBidiChargeMinDischargeSoC(
+    props.chargePointId,
+  ),
+);
+
+const current = computed(() =>
+  mqttStore.chargePointConnectedVehicleBidiChargeCurrent(props.chargePointId),
+);
+
+const planEtActive = computed(() =>
+  mqttStore.chargePointConnectedVehicleBidiChargeEtActive(
+    props.chargePointId,
+  ),
+);
+</script>

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

@@ -132,15 +132,3 @@ const limitEnergy = computed(() =>
   ),
 );
 </script>
-
-<style scoped>
-.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;
-}
-</style>

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

@@ -30,17 +30,28 @@
       </q-list>
     </q-btn-dropdown>
   </div>
-  <q-btn-group class="full-width q-mt-sm" v-else>
-    <q-btn
-      v-for="mode in chargeModes"
-      :key="mode.value"
-      :color="chargeMode.value === mode.value ? 'primary' : 'grey'"
-      :label="mode.label"
-      size="sm"
-      class="flex-grow"
-      @click="chargeMode.value = mode.value"
-    />
-  </q-btn-group>
+  <div v-else>
+    <q-btn-group spread class="q-mt-sm">
+      <q-btn
+        v-for="mode in chargeModes.slice(0, 3)"
+        :key="mode.value"
+        :color="chargeMode.value === mode.value ? 'primary' : 'grey'"
+        :label="mode.label"
+        size="sm"
+        @click="chargeMode.value = mode.value"
+      />
+    </q-btn-group>
+    <q-btn-group spread>
+      <q-btn
+        v-for="mode in chargeModes.slice(3, 6)"
+        :key="mode.value"
+        :color="chargeMode.value === mode.value ? 'primary' : 'grey'"
+        :label="mode.label"
+        size="sm"
+        @click="chargeMode.value = mode.value"
+      />
+    </q-btn-group>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -76,4 +87,21 @@ const currentModeLabel = computed(
 .flex-grow {
   flex-grow: 1;
 }
+
+.q-btn-group:first-of-type .q-btn:first-child {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 0;
+}
+.q-btn-group:first-of-type .q-btn:last-child {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 0;
+}
+.q-btn-group:last-of-type .q-btn:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 3px;
+}
+.q-btn-group:last-of-type .q-btn:last-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 3px;
+}
 </style>

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

@@ -8,60 +8,24 @@
   >
     <div class="column">
       <div class="plan-name">{{ plan.name }}</div>
-      <div class="plan-details">
-        <div>
-          <q-icon
-            :name="
-              plan.frequency.selected === 'once'
-                ? 'today'
-                : plan.frequency.selected === 'daily'
-                  ? 'date_range'
-                  : 'calendar_month'
-            "
-            size="sm"
-            :title="
-              plan.frequency.selected === 'once'
-                ? 'Einmalig'
-                : plan.frequency.selected === 'daily'
-                  ? 'Täglich'
-                  : 'Wöchentlich'
-            "
-          />
-          <div v-if="plan.frequency.selected === 'once'">
-            {{ formattedDate }}
-          </div>
-          <div v-if="plan.frequency.selected === 'weekly'">
-            {{ selectedWeekDays }}
-          </div>
-          <div v-if="plan.frequency.selected === 'daily'">täglich</div>
-        </div>
-        <div>
-          <q-icon name="schedule" size="sm" />
-          <div>{{ plan.time }}</div>
-        </div>
-        <div>
-          <q-icon
-            :name="plan.limit.selected === 'soc' ? 'battery_full' : 'bolt'"
-            size="sm"
-          />
-          <div v-if="plan.limit.selected === 'soc'">
-            {{ plan.limit.soc_scheduled }}%
-          </div>
-          <div v-if="plan.limit.selected === 'amount'">
-            {{ plan.limit.amount ? plan.limit.amount / 1000 : '' }}kWh
-          </div>
-        </div>
-        <div>
-          <q-icon v-if="planEtActive.value" name="bar_chart" size="sm" />
-        </div>
-      </div>
+      <PlanDetailsDisplay
+        :frequency="plan.frequency.selected"
+        :time="plan.time"
+        :limitType="plan.limit.selected"
+        :socScheduled="plan.limit.soc_scheduled"
+        :amount="plan.limit.amount ? plan.limit.amount / 1000 : undefined"
+        :date="plan.frequency.once"
+        :weeklyDays="plan.frequency.weekly"
+        :etActive="planEtActive.value"
+      />
     </div>
   </q-btn>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import PlanDetailsDisplay from './PlanDetailsDisplay.vue';
 import { type ScheduledChargingPlan } from '../stores/mqtt-store-model';
 
 const props = defineProps<{
@@ -71,8 +35,6 @@ const props = defineProps<{
 
 const mqttStore = useMqttStore();
 
-const weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
-
 const planActive = computed(() =>
   mqttStore.vehicleScheduledChargingPlanActive(
     props.chargePointId,
@@ -86,72 +48,4 @@ const planEtActive = computed(() =>
     props.plan.id,
   ),
 );
-
-const selectedWeekDays = computed(() => {
-  let planDays: string[] = [];
-  let rangeStart: number | null = null;
-
-  props.plan.frequency.weekly.forEach((dayValue, index) => {
-    if (dayValue) {
-      if (rangeStart === null) {
-        rangeStart = index;
-      }
-    } else {
-      if (rangeStart !== null) {
-        if (rangeStart === index - 1) {
-          planDays.push(weekdays[rangeStart]);
-        } else {
-          planDays.push(`${weekdays[rangeStart]}-${weekdays[index - 1]}`);
-        }
-        rangeStart = null;
-      }
-    }
-  });
-
-  // Handle the case where the last day(s) of the week are true
-  if (rangeStart !== null) {
-    if (rangeStart === props.plan.frequency.weekly.length - 1) {
-      planDays.push(weekdays[rangeStart]);
-    } else {
-      planDays.push(
-        `${weekdays[rangeStart]}-${weekdays[props.plan.frequency.weekly.length - 1]}`,
-      );
-    }
-  }
-
-  return planDays.join(', ');
-});
-
-const formattedDate = computed(() => {
-  if (props.plan.frequency.once === undefined) return '-';
-  const date = new Date(props.plan.frequency.once);
-  return date.toLocaleDateString(undefined, {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-  });
-});
 </script>
-
-<style scoped>
-.full-width {
-  width: 100%;
-}
-.plan-name {
-  font-weight: bold;
-}
-.plan-details {
-  display: flex;
-  justify-content: center;
-}
-.plan-details > div {
-  display: flex;
-  align-items: center;
-}
-.plan-details > div:not(:last-child) {
-  margin-right: 0.5em;
-}
-body.mobile .height {
-  height: 2.5em;
-}
-</style>

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

@@ -35,7 +35,7 @@
           />
         </div>
         <q-separator class="q-mt-sm" />
-        <div class="row items-center no-wrap">
+        <div>
           <ChargePointModeButtons :charge-point-id="props.chargePointId" />
         </div>
         <!-- ///////////////// Instant charge settings /////////////////// -->
@@ -56,6 +56,10 @@
             :charge-point-id="props.chargePointId"
           />
         </div>
+        <!-- /////////////////  bidi charging settings /////////////////// -->
+        <div v-if="chargeMode.value === 'bidi_charging'">
+          <ChargePointBidiSettings :charge-point-id="props.chargePointId" />
+        </div>
         <!-- /////////////////  time charging settings /////////////////// -->
         <div v-if="chargeMode.value !== 'stop'">
           <q-separator class="q-my-sm" />
@@ -85,6 +89,7 @@ import ChargePointLock from './ChargePointLock.vue';
 import ChargePointModeButtons from './ChargePointModeButtons.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointTimeChargingPlans from './ChargePointTimeChargingPlans.vue';
+import ChargePointBidiSettings from './ChargePointBidiSettings.vue';
 
 const $q = useQuasar();
 const mqttStore = useMqttStore();

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

@@ -52,6 +52,3 @@ const connectedVehicle = mqttStore.chargePointConnectedVehicleInfo(
 
 const vehicles = computed(() => mqttStore.vehicleList);
 </script>
-
-<style scoped>
-</style>