From c317ae3edbd335e6dc52616df7d702c0d8419fd4 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Sat, 17 Feb 2024 22:41:38 +0100
Subject: [PATCH] feat(ui): add right action bar and use it to start
 transaction
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>
---
 ui/web/src/App.vue                            | 22 ++++++++-
 .../components/actions/StartTransaction.vue   | 46 +++++++++++++++++++
 .../charging-stations/CSConnector.vue         | 18 +++++---
 .../components/charging-stations/CSData.vue   |  6 +--
 .../components/charging-stations/CSTable.vue  |  2 -
 ui/web/src/composables/UIClient.ts            | 15 +++++-
 ui/web/src/main.ts                            |  3 +-
 ui/web/src/router/index.ts                    | 19 ++++++++
 ui/web/src/types/ChargingStationType.ts       |  2 +-
 ui/web/src/types/UIProtocol.ts                |  4 +-
 ui/web/src/views/ChargingStationsView.vue     | 25 +---------
 11 files changed, 119 insertions(+), 43 deletions(-)
 create mode 100644 ui/web/src/components/actions/StartTransaction.vue

diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index b3fc6d1c..1f2dcf85 100644
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -1,7 +1,14 @@
 <template>
   <router-view />
+  <Container id="action">
+    <router-view name="action" />
+  </Container>
 </template>
 
+<script setup lang="ts">
+import Container from '@/components/Container.vue'
+</script>
+
 <style>
 #app {
   height: fit-content;
@@ -9,13 +16,24 @@
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  display: flex;
+  flex-direction: row;
   color: black;
   background-color: white;
 }
 
+#action {
+  min-width: max-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0.1%;
+  padding: 0.1%;
+  border: solid black;
+}
+
 body {
-  height: fit-content;
-  width: fit-content;
   margin: 0.005%;
   padding: 0.005%;
 }
diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue
new file mode 100644
index 00000000..4d3e818d
--- /dev/null
+++ b/ui/web/src/components/actions/StartTransaction.vue
@@ -0,0 +1,46 @@
+<template>
+  <h2>Action Start Transaction</h2>
+  <h3>Connector {{ connectorId }} on {{ chargingStationId }}</h3>
+  <p>Scan RFID tag:</p>
+  <input id="idtag" v-model="state.idTag" type="text" name="idtag" placeholder="RFID tag" />
+  <br />
+  <Button
+    @click="
+      () => {
+        uiClient
+          .startTransaction(props.hashId, parseInt(props.connectorId), state.idTag)
+          .catch((error: Error) => {
+            // TODO: add code for UI notifications or other error handling logic
+            console.error('Error at starting transaction:', error)
+          })
+          .finally(() => {
+            $router.push({ name: 'charging-stations' })
+          })
+      }
+    "
+    >Start Transaction</Button
+  >
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance, reactive } from 'vue'
+import Button from '@/components/buttons/Button.vue'
+
+const props = defineProps<{
+  hashId: string
+  chargingStationId: string
+  connectorId: string
+}>()
+
+const state = reactive({
+  idTag: ''
+})
+
+const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
+</script>
+
+<style>
+#idtag {
+  text-align: center;
+}
+</style>
diff --git a/ui/web/src/components/charging-stations/CSConnector.vue b/ui/web/src/components/charging-stations/CSConnector.vue
index 81d24fac..c9e53696 100644
--- a/ui/web/src/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/components/charging-stations/CSConnector.vue
@@ -9,7 +9,15 @@
       {{ atgStatus?.start === true ? 'Yes' : 'No' }}
     </td>
     <td class="connectors-table__column">
-      <Button @click="startTransaction()">Start Transaction</Button>
+      <Button
+        @click="
+          $router.push({
+            name: 'start-transaction',
+            params: { hashId, chargingStationId, connectorId }
+          })
+        "
+        >Start Transaction</Button
+      >
       <Button @click="stopTransaction()">Stop Transaction</Button>
       <Button @click="startAutomaticTransactionGenerator()">Start ATG</Button>
       <Button @click="stopAutomaticTransactionGenerator()">Stop ATG</Button>
@@ -24,20 +32,16 @@ import type { ConnectorStatus, Status } from '@/types'
 
 const props = defineProps<{
   hashId: string
+  chargingStationId: string
   connectorId: number
   connector: ConnectorStatus
   atgStatus?: Status
-  transactionId?: number
-  idTag?: string
 }>()
 
 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
 
-function startTransaction(): void {
-  uiClient.startTransaction(props.hashId, props.connectorId, props.idTag)
-}
 function stopTransaction(): void {
-  uiClient.stopTransaction(props.hashId, props.transactionId)
+  uiClient.stopTransaction(props.hashId, props.connector.transactionId)
 }
 function startAutomaticTransactionGenerator(): void {
   uiClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId)
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 5eaa17b0..107df494 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -1,7 +1,7 @@
 <template>
   <tr class="cs-table__row">
     <td class="cs-table__column">
-      {{ props.chargingStation.stationInfo.chargingStationId ?? 'Ø' }}
+      {{ props.chargingStation.stationInfo.chargingStationId }}
     </td>
     <td class="cs-table__column">{{ props.chargingStation.started === true ? 'Yes' : 'No' }}</td>
     <td class="cs-table__column">
@@ -42,11 +42,10 @@
           <CSConnector
             v-for="(connector, index) in getConnectors()"
             :hash-id="props.chargingStation.stationInfo.hashId"
+            :charging-station-id="props.chargingStation.stationInfo.chargingStationId"
             :connector-id="index + 1"
             :connector="connector"
             :atg-status="getATGStatus(index + 1)"
-            :transaction-id="connector.transactionId"
-            :id-tag="props.idTag"
           />
         </tbody>
       </table>
@@ -62,7 +61,6 @@ import type { ChargingStationData, ConnectorStatus, Status } from '@/types'
 
 const props = defineProps<{
   chargingStation: ChargingStationData
-  idTag: string
 }>()
 
 function getConnectors(): ConnectorStatus[] {
diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index 05a8255f..f8e3bf8b 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -23,7 +23,6 @@
         v-for="chargingStation in props.chargingStations"
         :key="chargingStation.stationInfo?.hashId"
         :charging-station="chargingStation"
-        :id-tag="props.idTag"
       />
     </tbody>
   </table>
@@ -35,7 +34,6 @@ import type { ChargingStationData } from '@/types'
 
 const props = defineProps<{
   chargingStations: ChargingStationData[]
-  idTag: string
 }>()
 </script>
 
diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index d321d3d5..536b6e84 100644
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -45,14 +45,25 @@ export class UIClient {
     return this.sendRequest(ProcedureName.STOP_SIMULATOR, {})
   }
 
-  public async deleteChargingStation(hashId: string): Promise<ResponsePayload> {
-    return this.sendRequest(ProcedureName.DELETE_CHARGING_STATIONS, { hashIds: [hashId] })
+  public async listTemplates(): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.LIST_TEMPLATES, {})
   }
 
   public async listChargingStations(): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.LIST_CHARGING_STATIONS, {})
   }
 
+  public async addChargingStations(
+    template: string,
+    numberOfStations: number
+  ): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.ADD_CHARGING_STATIONS, { template, numberOfStations })
+  }
+
+  public async deleteChargingStation(hashId: string): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.DELETE_CHARGING_STATIONS, { hashIds: [hashId] })
+  }
+
   public async startChargingStation(hashId: string): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.START_CHARGING_STATION, { hashIds: [hashId] })
   }
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index bce88243..7b36de58 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -10,7 +10,7 @@ const initializeApp = (config: ConfigurationData) => {
     console.error('Error:', error)
     console.info('Vue instance:', instance)
     console.info('Error info:', info)
-    // TODO: Add code for UI notifications or other error handling logic
+    // TODO: add code for UI notifications or other error handling logic
   }
   app.config.globalProperties.$uiClient = UIClient.getInstance(config)
   app.config.globalProperties.$uiClient.registerWSonOpenListener(() => {
@@ -20,6 +20,7 @@ const initializeApp = (config: ConfigurationData) => {
         app.config.globalProperties.$chargingStations = response.chargingStations
       })
       .catch((error: Error) => {
+        // TODO: add code for UI notifications or other error handling logic
         console.error('Error at fetching charging stations:', error)
         throw error
       })
diff --git a/ui/web/src/router/index.ts b/ui/web/src/router/index.ts
index 076ca286..0d250c51 100644
--- a/ui/web/src/router/index.ts
+++ b/ui/web/src/router/index.ts
@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import ChargingStationsView from '@/views/ChargingStationsView.vue'
+import StartTransaction from '@/components/actions/StartTransaction.vue'
+import AddChargingStations from '@/components/actions/AddChargingStations.vue'
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -10,6 +12,23 @@ export const router = createRouter({
       components: {
         default: ChargingStationsView
       }
+    },
+    {
+      path: '/add-charging-stations',
+      name: 'add-charging-stations',
+      components: {
+        default: ChargingStationsView,
+        action: AddChargingStations
+      }
+    },
+    {
+      path: '/start-transaction/:hashId/:chargingStationId/:connectorId',
+      name: 'start-transaction',
+      components: {
+        default: ChargingStationsView,
+        action: StartTransaction
+      },
+      props: { default: false, action: true }
     }
   ]
 })
diff --git a/ui/web/src/types/ChargingStationType.ts b/ui/web/src/types/ChargingStationType.ts
index a0c1b4c7..882c3788 100644
--- a/ui/web/src/types/ChargingStationType.ts
+++ b/ui/web/src/types/ChargingStationType.ts
@@ -68,7 +68,7 @@ export type ChargingStationInfo = {
   hashId: string
   templateIndex: number
   templateName: string
-  chargingStationId?: string
+  chargingStationId: string
   chargeBoxSerialNumber?: string
   chargePointSerialNumber?: string
   meterSerialNumber?: string
diff --git a/ui/web/src/types/UIProtocol.ts b/ui/web/src/types/UIProtocol.ts
index a431540b..9e7a71a8 100644
--- a/ui/web/src/types/UIProtocol.ts
+++ b/ui/web/src/types/UIProtocol.ts
@@ -27,8 +27,10 @@ export type ProtocolRequestHandler = (
 export enum ProcedureName {
   START_SIMULATOR = 'startSimulator',
   STOP_SIMULATOR = 'stopSimulator',
-  DELETE_CHARGING_STATIONS = 'deleteChargingStations',
+  LIST_TEMPLATES = 'listTemplates',
   LIST_CHARGING_STATIONS = 'listChargingStations',
+  ADD_CHARGING_STATIONS = 'addChargingStations',
+  DELETE_CHARGING_STATIONS = 'deleteChargingStations',
   START_CHARGING_STATION = 'startChargingStation',
   STOP_CHARGING_STATION = 'stopChargingStation',
   OPEN_CONNECTION = 'openConnection',
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index bd9b239c..f5757248 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -5,20 +5,10 @@
       <Button id="simulator-button" @click="stopSimulator()">Stop Simulator</Button>
       <ReloadButton id="reload-button" :loading="state.isLoading" @click="loadChargingStations()" />
     </Container>
-    <Container id="inputs-container">
-      <input
-        id="idtag-field"
-        v-model="state.idTag"
-        type="text"
-        name="idtag-field"
-        placeholder="RFID tag"
-      />
-    </Container>
     <CSTable
       :charging-stations="
         getCurrentInstance()?.appContext.config.globalProperties.$chargingStations ?? []
       "
-      :id-tag="state.idTag"
     />
   </Container>
 </template>
@@ -32,8 +22,7 @@ import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import Button from '@/components/buttons/Button.vue'
 
 const state = reactive({
-  isLoading: false,
-  idTag: ''
+  isLoading: false
 })
 
 const app = getCurrentInstance()
@@ -50,6 +39,7 @@ function loadChargingStations(): void {
         }
       })
       .catch((error: Error) => {
+        // TODO: add code for UI notifications or other error handling logic
         console.error('Error at fetching charging stations:', error)
       })
       .finally(() => {
@@ -79,11 +69,6 @@ function stopSimulator(): void {
   flex-direction: row;
 }
 
-#inputs-container {
-  display: flex;
-  flex-direction: row;
-}
-
 #reload-button {
   flex: auto;
   color: white;
@@ -105,10 +90,4 @@ function stopSimulator(): void {
 #simulator-button {
   flex: auto;
 }
-
-#idtag-field {
-  flex: auto;
-  font-size: 1.5rem;
-  text-align: center;
-}
 </style>
-- 
2.34.1