Koala-Theme: Plans - temporary mode warning, link to plan settings (#3147)

* Add warning text and settings link button

* Add settings link

* Add time charging plan settings link

* update store time charging plans

* Reuseable component for warning messages

* update time plans with "BaseMessage" component

* 1 warning message, update link button

---------

Co-authored-by: Lutz Bender <github@lutz-bender.de>

Author: Brett-S-OWB

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

@@ -0,0 +1,58 @@
+<template>
+  <div
+    v-if="showMessage"
+    class="row q-mt-sm q-pa-sm text-white no-wrap cursor-pointer rounded-borders"
+    :class="[{ 'items-center': collapsed }, messageClass]"
+    @click="toggleCollapse"
+  >
+    <q-icon :name="iconName" size="sm" class="q-mr-xs" />
+    <div :class="{ ellipsis: collapsed }">
+      {{ message }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    showMessage?: boolean;
+    message: string;
+    type?: 'info' | 'warning' | 'error';
+    collapsed?: boolean;
+  }>(),
+  {
+    collapsed: true,
+    showMessage: true,
+  },
+);
+
+const collapsed = ref(props.collapsed);
+
+const toggleCollapse = () => {
+  collapsed.value = !collapsed.value;
+};
+
+const messageClass = computed(() => {
+  switch (props.type) {
+    case 'warning':
+      return 'bg-warning';
+    case 'error':
+      return 'bg-negative';
+    default:
+      return 'bg-primary';
+  }
+});
+
+const iconName = computed(() => {
+  switch (props.type) {
+    case 'warning':
+      return 'warning';
+    case 'error':
+      return 'error';
+    default:
+      return 'info';
+  }
+});
+</script>

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

@@ -1,33 +1,22 @@
 <template>
-  <div
-    v-if="showMessage"
-    class="row q-mt-sm q-pa-sm text-white no-wrap cursor-pointer"
-    :class="[{ 'items-center': collapsed }, messageClass]"
-    style="border-radius: 10px"
-    @click="toggleCollapse"
-  >
-    <q-icon :name="iconName" size="sm" class="q-mr-xs" />
-    <div :class="{ ellipsis: collapsed }">
-      {{ message }}
-    </div>
-  </div>
+  <BaseMessage
+  :show-message="showMessage"
+  :message="message"
+  :type="messageType"
+/>
 </template>
 
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
-import { computed, ref } from 'vue';
+import BaseMessage from './BaseMessage.vue';
+import { computed } from 'vue';
 
 const props = defineProps<{
   chargePointId: number;
   faultMessage?: boolean;
 }>();
-
 const mqttStore = useMqttStore();
-const collapsed = ref<boolean>(true);
 
-const toggleCollapse = () => {
-  collapsed.value = !collapsed.value;
-};
 
 const showMessage = computed(() => {
   return state.value !== undefined && state.value !== 0;
@@ -39,24 +28,14 @@ const state = computed(() =>
     : -1,
 );
 
-const message = computed(() =>
-  props.faultMessage
+const message = computed(() => {
+  const message = props.faultMessage
     ? mqttStore.chargePointFaultMessage(props.chargePointId)
-    : mqttStore.chargePointStateMessage(props.chargePointId),
-);
-
-const messageClass = computed(() => {
-  switch (state.value) {
-    case 1:
-      return 'bg-warning';
-    case 2:
-      return 'bg-negative';
-    default:
-      return 'bg-primary';
-  }
+    : mqttStore.chargePointStateMessage(props.chargePointId);
+  return message ?? '';
 });
 
-const iconName = computed(() => {
+const messageType = computed(() => {
   switch (state.value) {
     case 1:
       return 'warning';

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

@@ -1,5 +1,5 @@
 <template>
-  <q-card>
+  <q-card class="card-width">
     <q-card-section>
       <div class="row no-wrap">
         <div class="text-h6 ellipsis" :title="planName.value">
@@ -8,6 +8,12 @@
         <q-space />
         <q-btn icon="close" flat round dense v-close-popup />
       </div>
+      <BaseMessage
+        :show-message="temporaryChargeModeActive"
+        message="Temporärer Modus aktiv. Alle Planänderungen werden nach dem Abstecken verworfen."
+        type="warning"
+        :collapsed="false"
+      />
     </q-card-section>
     <q-separator />
     <q-card-section>
@@ -90,8 +96,7 @@
           />
         </div>
         <div
-          class="row q-mt-sm q-pa-sm text-white no-wrap items-center bg-primary"
-          style="border-radius: 10px"
+          class="row q-mt-sm q-pa-sm text-white no-wrap items-center bg-primary rounded-borders"
         >
           <q-icon name="info" size="sm" class="q-mr-xs" />
           <ChargePointScheduledPlanSummary
@@ -239,7 +244,7 @@
           color="positive"
         />
       </div>
-      <div class="row q-mt-md">
+      <div class="row q-mt-lg">
         <q-btn
           size="sm"
           class="col"
@@ -248,6 +253,18 @@
           >Plan löschen</q-btn
         >
       </div>
+      <div
+        v-if="temporaryChargeModeActive && chargeTemplateId != null"
+        class="row q-mt-md"
+      >
+        <q-btn
+          size="sm"
+          class="col charge-plan-link-button"
+          :href="`/openWB/web/settings/#/VehicleConfiguration/charge_template/${chargeTemplateId ?? ''}`"
+          ><q-icon left size="xs" name="settings" />Persistente
+          Ladeplan-Einstellungen</q-btn
+        >
+      </div>
     </q-card-section>
   </q-card>
 </template>
@@ -257,6 +274,7 @@ import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
 import SliderStandard from './SliderStandard.vue';
 import ToggleStandard from './ToggleStandard.vue';
+import BaseMessage from './BaseMessage.vue';
 import { computed } from 'vue';
 import ChargePointScheduledPlanSummary from './ChargePointScheduledPlanSummary.vue';
 import { type ScheduledChargingPlan } from '../stores/mqtt-store-model';
@@ -433,14 +451,32 @@ const removeScheduledChargingPlan = (planId) => {
   );
   emit('close');
 };
+
+const temporaryChargeModeActive = computed(
+  () => mqttStore.temporaryChargeModeActive,
+);
+
+const chargeTemplateId = computed(
+  () =>
+    mqttStore.chargePointConnectedVehicleChargeTemplate(props.chargePointId)
+      .value?.id,
+);
 </script>
 
 <style scoped>
+.card-width {
+  max-width: 26em;
+}
 .q-btn-group .q-btn {
   min-width: 100px !important;
   font-size: 10px !important;
 }
 
+.charge-plan-link-button {
+  background-color: var(--q-charge-plan-link-button);
+  color: white;
+}
+
 .flex-grow {
   flex-grow: 1;
 }

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

@@ -9,15 +9,11 @@
       @click="addScheduledChargingPlan"
     />
   </div>
-  <div
+    <BaseMessage
     v-if="plans.length === 0"
-    class="row q-mt-sm q-pa-sm bg-primary text-white no-wrap message-text"
-    color="primary"
-    style="border-radius: 10px"
-  >
-    <q-icon name="info" size="sm" class="q-mr-xs" />
-    Keine Ladeziele festgelegt.
-  </div>
+    message="Keine Zeitpläne vorhanden."
+    type="info"
+  />
   <div v-else>
     <div v-for="plan in plans" :key="plan.id" class="row q-mt-sm">
       <ChargePointScheduledPlanButton
@@ -47,6 +43,7 @@ import { ref, computed } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import ChargePointScheduledPlanButton from './ChargePointScheduledPlanButton.vue';
 import ChargePointScheduledPlanDetails from './ChargePointScheduledPlanDetails.vue';
+import BaseMessage from './BaseMessage.vue';
 import { Screen } from 'quasar';
 
 const props = defineProps<{

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

@@ -1,5 +1,5 @@
 <template>
-  <q-card class="rounded-borders-md">
+  <q-card class="rounded-borders-md card-width">
     <q-card-section>
       <div class="row no-wrap">
         <div class="text-h6 ellipsis" :title="planName.value">
@@ -8,6 +8,12 @@
         <q-space />
         <q-btn icon="close" flat round dense v-close-popup />
       </div>
+      <BaseMessage
+        :show-message="temporaryChargeModeActive"
+        message="Temporärer Modus aktiv. Alle Planänderungen werden nach dem Abstecken verworfen."
+        type="warning"
+        :collapsed="false"
+      />
     </q-card-section>
     <q-separator />
     <q-card-section>
@@ -181,6 +187,18 @@
           >Plan löschen</q-btn
         >
       </div>
+      <div
+        v-if="temporaryChargeModeActive && chargeTemplateId != null"
+        class="row q-mt-md"
+      >
+        <q-btn
+          size="sm"
+          class="col charge-plan-link-button"
+          :href="`/openWB/web/settings/#/VehicleConfiguration/charge_template/${chargeTemplateId ?? ''}`"
+          ><q-icon left size="xs" name="settings" /> Persistente
+          Ladeplan-Einstellungen</q-btn
+        >
+      </div>
     </q-card-section>
   </q-card>
 </template>
@@ -189,6 +207,7 @@
 import { useMqttStore } from 'src/stores/mqtt-store';
 import SliderStandard from './SliderStandard.vue';
 import ToggleStandard from './ToggleStandard.vue';
+import BaseMessage from './BaseMessage.vue';
 import { type TimeChargingPlan } from '../stores/mqtt-store-model';
 import { computed } from 'vue';
 
@@ -298,18 +317,37 @@ const acChargingEnabled = computed(
   () => mqttStore.chargePointChargeType(props.chargePointId).value === 'AC',
 );
 
+const temporaryChargeModeActive = computed(
+  () => mqttStore.temporaryChargeModeActive,
+);
+
+const chargeTemplateId = computed(
+  () =>
+    mqttStore.chargePointConnectedVehicleChargeTemplate(props.chargePointId)
+      .value?.id,
+);
+
 const removeTimeChargingPlan = (planId: number) => {
   mqttStore.removeTimeChargingPlanForChargePoint(props.chargePointId, planId);
   emit('close');
 };
 </script>
 
 <style scoped>
+.card-width {
+  max-width: 26em;
+}
+
 .q-btn-group .q-btn {
   min-width: 100px !important;
   font-size: 10px !important;
 }
 
+.charge-plan-link-button {
+  background-color: var(--q-charge-plan-link-button);
+  color: white;
+}
+
 .flex-grow {
   flex-grow: 1;
 }

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

@@ -21,15 +21,11 @@
       @click="addScheduledChargingPlan"
     />
   </div>
-  <div
+  <BaseMessage
     v-if="plans.length === 0 && timeChargingEnabled"
-    class="row q-mt-sm q-pa-sm bg-primary text-white no-wrap message-text"
-    color="primary"
-    style="border-radius: 10px"
-  >
-    <q-icon name="info" size="sm" class="q-mr-xs" />
-    Keine Zeitpläne vorhanden.
-  </div>
+    message="Keine Zeitpläne vorhanden."
+    type="info"
+  />
   <div v-else-if="timeChargingEnabled">
     <div v-for="(plan, index) in plans" :key="index" class="row q-mt-sm">
       <ChargePointTimeChargingPlanButton
@@ -61,6 +57,7 @@ import { computed, ref } from 'vue';
 import ChargePointTimeCharging from './ChargePointTimeCharging.vue';
 import ChargePointTimeChargingPlanButton from './ChargePointTimeChargingPlanButton.vue';
 import ChargePointTimeChargingPlanDetails from './ChargePointTimeChargingPlanDetails.vue';
+import BaseMessage from './BaseMessage.vue';
 import { Screen } from 'quasar';
 
 const props = defineProps<{