From 2610da71b813ad94e1a2a48755d5689da53b41fa Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Fri, 1 Mar 2024 15:33:22 +0100
Subject: [PATCH 1/1] feat(ui): introduce toggle button and use it for actions
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 .../actions/AddChargingStations.vue           | 17 +++---
 .../components/actions/SetSupervisionUrl.vue  |  1 -
 .../components/actions/StartTransaction.vue   |  1 -
 .../src/components/buttons/ToggleButton.vue   | 56 +++++++++++++++++++
 .../charging-stations/CSConnector.vue         | 24 +++++---
 .../components/charging-stations/CSData.vue   | 48 +++++++++-------
 .../components/charging-stations/CSTable.vue  |  2 +-
 ui/web/src/composables/UIClient.ts            |  3 +-
 ui/web/src/composables/Utils.ts               | 12 ++++
 ui/web/src/composables/index.ts               | 10 +++-
 ui/web/src/views/ChargingStationsView.vue     | 35 +++++++++---
 11 files changed, 162 insertions(+), 47 deletions(-)
 create mode 100644 ui/web/src/components/buttons/ToggleButton.vue

diff --git a/ui/web/src/components/actions/AddChargingStations.vue b/ui/web/src/components/actions/AddChargingStations.vue
index ff9f5f61..a0661a08 100644
--- a/ui/web/src/components/actions/AddChargingStations.vue
+++ b/ui/web/src/components/actions/AddChargingStations.vue
@@ -2,15 +2,15 @@
   <h1 id="action">Action</h1>
   <h2>Add Charging Stations</h2>
   <p>Template:</p>
-  <select
-    v-show="
-      Array.isArray(app?.appContext.config.globalProperties.$templates) &&
-      app?.appContext.config.globalProperties.$templates.length > 0
-    "
-    v-model="state.template"
-  >
+  <select v-model="state.template">
     <option disabled value="">Please select a template</option>
-    <option v-for="template in app?.appContext.config.globalProperties.$templates">
+    <option
+      v-for="template in app?.appContext.config.globalProperties.$templates"
+      v-show="
+        Array.isArray(app?.appContext.config.globalProperties.$templates) &&
+        app?.appContext.config.globalProperties.$templates.length > 0
+      "
+    >
       {{ template }}
     </option>
   </select>
@@ -95,7 +95,6 @@
   >
     Add Charging Stations
   </Button>
-  <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
 </template>
 
 <script setup lang="ts">
diff --git a/ui/web/src/components/actions/SetSupervisionUrl.vue b/ui/web/src/components/actions/SetSupervisionUrl.vue
index ff2a4b80..7118cbc6 100644
--- a/ui/web/src/components/actions/SetSupervisionUrl.vue
+++ b/ui/web/src/components/actions/SetSupervisionUrl.vue
@@ -32,7 +32,6 @@
   >
     Set Supervision Url
   </Button>
-  <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
 </template>
 
 <script setup lang="ts">
diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue
index 22acbef3..3c64ba7b 100644
--- a/ui/web/src/components/actions/StartTransaction.vue
+++ b/ui/web/src/components/actions/StartTransaction.vue
@@ -26,7 +26,6 @@
   >
     Start Transaction
   </Button>
-  <Button id="action-button" @click="$router.push({ name: 'charging-stations' })">Cancel</Button>
 </template>
 
 <script setup lang="ts">
diff --git a/ui/web/src/components/buttons/ToggleButton.vue b/ui/web/src/components/buttons/ToggleButton.vue
new file mode 100644
index 00000000..b51c8558
--- /dev/null
+++ b/ui/web/src/components/buttons/ToggleButton.vue
@@ -0,0 +1,56 @@
+<template>
+  <Button :class="{ on: state.status }" @click="click()">
+    <slot></slot>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Button from '@/components/buttons/Button.vue'
+import { getFromLocalStorage, setToLocalStorage } from '@/composables'
+
+const props = defineProps<{
+  id: string
+  status?: boolean
+  shared?: boolean
+  on?: () => void
+  off?: () => void
+}>()
+
+const id = props.shared === true ? `shared-toggle-button-${props.id}` : `toggle-button-${props.id}`
+
+const state = ref({
+  status: getFromLocalStorage<boolean>(id, props.status ?? false)
+})
+
+const click = (): void => {
+  if (props.shared) {
+    for (const key in localStorage) {
+      if (key !== id && key.startsWith('shared-toggle-button-')) {
+        setToLocalStorage<boolean>(key, false)
+        state.value.status = getFromLocalStorage<boolean>(key, false)
+      }
+    }
+  }
+  setToLocalStorage<boolean>(id, !getFromLocalStorage<boolean>(id, props.status ?? false))
+  state.value.status = getFromLocalStorage<boolean>(id, props.status ?? false)
+  // console.log(`----begin----`)
+  // for (const key in localStorage) {
+  //   if (key.startsWith('shared-toggle-button-')) {
+  //     console.log(key, getFromLocalStorage<boolean>(key, props.status ?? false))
+  //   }
+  // }
+  // console.log(`----end----`)
+  if (getFromLocalStorage<boolean>(id, props.status ?? false)) {
+    props.on?.()
+  } else {
+    props.off?.()
+  }
+}
+</script>
+
+<style>
+.on {
+  background-color: lightgrey;
+}
+</style>
diff --git a/ui/web/src/components/charging-stations/CSConnector.vue b/ui/web/src/components/charging-stations/CSConnector.vue
index 7c31ae98..d3e37d63 100644
--- a/ui/web/src/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/components/charging-stations/CSConnector.vue
@@ -9,16 +9,25 @@
       {{ atgStatus?.start === true ? 'Yes' : 'No' }}
     </td>
     <td class="connectors-table__column">
-      <Button
-        @click="
-          $router.push({
-            name: 'start-transaction',
-            params: { hashId, chargingStationId, connectorId }
-          })
+      <ToggleButton
+        :id="`${hashId}-start-transaction`"
+        :shared="true"
+        :on="
+          () => {
+            $router.push({
+              name: 'start-transaction',
+              params: { hashId, chargingStationId, connectorId }
+            })
+          }
+        "
+        :off="
+          () => {
+            $router.push({ name: 'charging-stations' })
+          }
         "
       >
         Start Transaction
-      </Button>
+      </ToggleButton>
       <Button @click="stopTransaction()">Stop Transaction</Button>
       <Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
       <Button @click="stopAutomaticTransactionGenerator()">Stop ATG</Button>
@@ -31,6 +40,7 @@ import { getCurrentInstance } from 'vue'
 import { useToast } from 'vue-toast-notification'
 import Button from '@/components/buttons/Button.vue'
 import type { ConnectorStatus, Status } from '@/types'
+import ToggleButton from '@/components/buttons/ToggleButton.vue'
 
 const props = defineProps<{
   hashId: string
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 2462e6d6..375fb3bc 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -1,40 +1,49 @@
 <template>
   <tr class="cs-table__row">
     <td class="cs-table__column">
-      {{ props.chargingStation.stationInfo.chargingStationId }}
+      {{ chargingStation.stationInfo.chargingStationId }}
     </td>
-    <td class="cs-table__column">{{ props.chargingStation.started === true ? 'Yes' : 'No' }}</td>
+    <td class="cs-table__column">{{ chargingStation.started === true ? 'Yes' : 'No' }}</td>
     <td class="cs-table__column">
       {{ getSupervisionUrl() }}
     </td>
     <td class="cs-table__column">{{ getWSState() }}</td>
     <td class="cs-table__column">
-      {{ props.chargingStation?.bootNotificationResponse?.status ?? 'Ø' }}
+      {{ chargingStation?.bootNotificationResponse?.status ?? 'Ø' }}
     </td>
     <td class="cs-table__column">
-      {{ props.chargingStation.stationInfo.templateName }}
+      {{ chargingStation.stationInfo.templateName }}
     </td>
-    <td class="cs-table__column">{{ props.chargingStation.stationInfo.chargePointVendor }}</td>
-    <td class="cs-table__column">{{ props.chargingStation.stationInfo.chargePointModel }}</td>
+    <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointVendor }}</td>
+    <td class="cs-table__column">{{ chargingStation.stationInfo.chargePointModel }}</td>
     <td class="cs-table__column">
-      {{ props.chargingStation.stationInfo.firmwareVersion ?? 'Ø' }}
+      {{ chargingStation.stationInfo.firmwareVersion ?? 'Ø' }}
     </td>
     <td class="cs-table__column">
       <Button @click="startChargingStation()">Start Charging Station</Button>
       <Button @click="stopChargingStation()">Stop Charging Station</Button>
-      <Button
-        @click="
-          $router.push({
-            name: 'set-supervision-url',
-            params: {
-              hashId: props.chargingStation.stationInfo.hashId,
-              chargingStationId: props.chargingStation.stationInfo.chargingStationId
-            }
-          })
+      <ToggleButton
+        :id="`${chargingStation.stationInfo.hashId}-set-supervision-url`"
+        :shared="true"
+        :on="
+          () => {
+            $router.push({
+              name: 'set-supervision-url',
+              params: {
+                hashId: chargingStation.stationInfo.hashId,
+                chargingStationId: chargingStation.stationInfo.chargingStationId
+              }
+            })
+          }
+        "
+        :off="
+          () => {
+            $router.push({ name: 'charging-stations' })
+          }
         "
       >
         Set Supervision Url
-      </Button>
+      </ToggleButton>
       <Button @click="openConnection()">Open Connection</Button>
       <Button @click="closeConnection()">Close Connection</Button>
       <Button @click="deleteChargingStation()">Delete Charging Station</Button>
@@ -55,8 +64,8 @@
           <!-- eslint-disable-next-line vue/valid-v-for -->
           <CSConnector
             v-for="(connector, index) in getConnectorStatuses()"
-            :hash-id="props.chargingStation.stationInfo.hashId"
-            :charging-station-id="props.chargingStation.stationInfo.chargingStationId"
+            :hash-id="chargingStation.stationInfo.hashId"
+            :charging-station-id="chargingStation.stationInfo.chargingStationId"
             :connector-id="index + 1"
             :connector="connector"
             :atg-status="getATGStatus(index + 1)"
@@ -73,6 +82,7 @@ import { useToast } from 'vue-toast-notification'
 import CSConnector from '@/components/charging-stations/CSConnector.vue'
 import Button from '@/components/buttons/Button.vue'
 import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
+import ToggleButton from '@/components/buttons/ToggleButton.vue'
 
 const props = defineProps<{
   chargingStation: ChargingStationData
diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index b098c0e5..17f7a0ec 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -21,7 +21,7 @@
     <tbody id="cs-table__body">
       <CSData
         v-for="chargingStation in chargingStations"
-        :key="chargingStation.stationInfo?.chargingStationId"
+        :key="chargingStation.stationInfo.hashId"
         :charging-station="chargingStation"
       />
     </tbody>
diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index d7a5eb3d..491a0b12 100644
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -10,6 +10,7 @@ import {
   ResponseStatus,
   type UIServerConfigurationSection
 } from '@/types'
+import { randomUUID } from '@/composables'
 
 type ResponseHandler = {
   procedureName: ProcedureName
@@ -190,7 +191,7 @@ export class UIClient {
   ): Promise<ResponsePayload> {
     return new Promise<ResponsePayload>((resolve, reject) => {
       if (this.ws?.readyState === WebSocket.OPEN) {
-        const uuid = crypto.randomUUID()
+        const uuid = randomUUID()
         const msg = JSON.stringify([uuid, procedureName, payload])
         const sendTimeout = setTimeout(() => {
           this.responseHandlers.delete(uuid)
diff --git a/ui/web/src/composables/Utils.ts b/ui/web/src/composables/Utils.ts
index fffd7a54..8cd068b3 100644
--- a/ui/web/src/composables/Utils.ts
+++ b/ui/web/src/composables/Utils.ts
@@ -41,3 +41,15 @@ export const getFromLocalStorage = <T>(key: string, defaultValue: T): T => {
   const item = localStorage.getItem(key)
   return item != null ? (JSON.parse(item) as T) : defaultValue
 }
+
+export const removeFromLocalStorage = (key: string): void => {
+  localStorage.removeItem(key)
+}
+
+export const getLocalStorage = (): Storage => {
+  return localStorage
+}
+
+export const randomUUID = (): `${string}-${string}-${string}-${string}-${string}` => {
+  return crypto.randomUUID()
+}
diff --git a/ui/web/src/composables/index.ts b/ui/web/src/composables/index.ts
index bc62dcb5..278b82b4 100644
--- a/ui/web/src/composables/index.ts
+++ b/ui/web/src/composables/index.ts
@@ -1,2 +1,10 @@
 export { UIClient } from './UIClient'
-export { convertToBoolean, convertToInt, getFromLocalStorage, setToLocalStorage } from './Utils'
+export {
+  convertToBoolean,
+  convertToInt,
+  getFromLocalStorage,
+  getLocalStorage,
+  randomUUID,
+  removeFromLocalStorage,
+  setToLocalStorage
+} from './Utils'
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index a19c14c3..fa313d6e 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -20,6 +20,11 @@
                 'open',
                 () => {
                   setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
+                  for (const key in getLocalStorage()) {
+                    if (key.includes('toggle-button')) {
+                      removeFromLocalStorage(key)
+                    }
+                  }
                   $router.currentRoute.value.name !== 'charging-stations' &&
                     $router.push({ name: 'charging-stations' })
                 },
@@ -53,9 +58,22 @@
     <Container id="buttons-container">
       <Button @click="startSimulator()">Start Simulator</Button>
       <Button @click="stopSimulator()">Stop Simulator</Button>
-      <Button @click="$router.push({ name: 'add-charging-stations' })">
+      <ToggleButton
+        :id="'add-charging-stations'"
+        :shared="true"
+        :on="
+          () => {
+            $router.push({ name: 'add-charging-stations' })
+          }
+        "
+        :off="
+          () => {
+            $router.push({ name: 'charging-stations' })
+          }
+        "
+      >
         Add Charging Stations
-      </Button>
+      </ToggleButton>
       <ReloadButton
         id="reload-button"
         :loading="state.loading"
@@ -81,11 +99,14 @@ import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
 import Container from '@/components/Container.vue'
 import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import Button from '@/components/buttons/Button.vue'
-import { getFromLocalStorage, setToLocalStorage } from '@/composables'
-
-const randomUUID = (): `${string}-${string}-${string}-${string}-${string}` => {
-  return crypto.randomUUID()
-}
+import {
+  getFromLocalStorage,
+  getLocalStorage,
+  randomUUID,
+  removeFromLocalStorage,
+  setToLocalStorage
+} from '@/composables'
+import ToggleButton from '@/components/buttons/ToggleButton.vue'
 
 const app = getCurrentInstance()
 
-- 
2.34.1