From f8696170fe4343a6fef450a6f0d4a47daccbcee0 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Sun, 18 Feb 2024 11:53:46 +0100
Subject: [PATCH] feat(ui): add set supervision url action
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>
---
 .../components/actions/SetSupervisionUrl.vue  | 52 +++++++++++++++++++
 .../components/charging-stations/CSData.vue   | 12 +++++
 ui/web/src/composables/UIClient.ts            |  7 +++
 ui/web/src/router/index.ts                    | 10 ++++
 ui/web/src/types/UIProtocol.ts                |  1 +
 5 files changed, 82 insertions(+)
 create mode 100644 ui/web/src/components/actions/SetSupervisionUrl.vue

diff --git a/ui/web/src/components/actions/SetSupervisionUrl.vue b/ui/web/src/components/actions/SetSupervisionUrl.vue
new file mode 100644
index 00000000..00f4ef3d
--- /dev/null
+++ b/ui/web/src/components/actions/SetSupervisionUrl.vue
@@ -0,0 +1,52 @@
+<template>
+  <h2>Action Set Supervision Url</h2>
+  <h3>Charging Station {{ chargingStationId }}</h3>
+  <p>Supervision Url:</p>
+  <input
+    id="supervision-url"
+    v-model="state.supervisionUrl"
+    type="text"
+    name="supervision-url"
+    placeholder="supervision url"
+  />
+  <br />
+  <Button
+    @click="
+      () => {
+        uiClient
+          .setSupervisionUrl(props.hashId, state.supervisionUrl)
+          .catch((error: Error) => {
+            // TODO: add code for UI notifications or other error handling logic
+            console.error('Error at setting supervision url:', error)
+          })
+          .finally(() => {
+            $router.push({ name: 'charging-stations' })
+          })
+      }
+    "
+    >Set Supervision Url</Button
+  >
+  <Button @click="$router.push({ name: 'charging-stations' })">Cancel</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
+}>()
+
+const state = reactive({
+  supervisionUrl: ''
+})
+
+const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
+</script>
+
+<style>
+#supervision-url {
+  text-align: center;
+}
+</style>
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 107df494..4502f53c 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -22,6 +22,18 @@
     <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
+            }
+          })
+        "
+        >Set Supervision Url</Button
+      >
       <Button @click="openConnection()">Open Connection</Button>
       <Button @click="closeConnection()">Close Connection</Button>
       <Button @click="deleteChargingStation()">Delete Charging Station</Button>
diff --git a/ui/web/src/composables/UIClient.ts b/ui/web/src/composables/UIClient.ts
index c5f20ce0..ce459f1b 100644
--- a/ui/web/src/composables/UIClient.ts
+++ b/ui/web/src/composables/UIClient.ts
@@ -67,6 +67,13 @@ export class UIClient {
     return this.sendRequest(ProcedureName.DELETE_CHARGING_STATIONS, { hashIds: [hashId] })
   }
 
+  public async setSupervisionUrl(hashId: string, supervisionUrl: string): Promise<ResponsePayload> {
+    return this.sendRequest(ProcedureName.SET_SUPERVISION_URL, {
+      hashIds: [hashId],
+      url: supervisionUrl
+    })
+  }
+
   public async startChargingStation(hashId: string): Promise<ResponsePayload> {
     return this.sendRequest(ProcedureName.START_CHARGING_STATION, { hashIds: [hashId] })
   }
diff --git a/ui/web/src/router/index.ts b/ui/web/src/router/index.ts
index 0d250c51..bdb22503 100644
--- a/ui/web/src/router/index.ts
+++ b/ui/web/src/router/index.ts
@@ -2,6 +2,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'
+import SetSupervisionUrl from '@/components/actions/SetSupervisionUrl.vue'
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -21,6 +22,15 @@ export const router = createRouter({
         action: AddChargingStations
       }
     },
+    {
+      path: '/set-supervision-url/:hashId/:chargingStationId',
+      name: 'set-supervision-url',
+      components: {
+        default: ChargingStationsView,
+        action: SetSupervisionUrl
+      },
+      props: { default: false, action: true }
+    },
     {
       path: '/start-transaction/:hashId/:chargingStationId/:connectorId',
       name: 'start-transaction',
diff --git a/ui/web/src/types/UIProtocol.ts b/ui/web/src/types/UIProtocol.ts
index 9e7a71a8..afc55b03 100644
--- a/ui/web/src/types/UIProtocol.ts
+++ b/ui/web/src/types/UIProtocol.ts
@@ -31,6 +31,7 @@ export enum ProcedureName {
   LIST_CHARGING_STATIONS = 'listChargingStations',
   ADD_CHARGING_STATIONS = 'addChargingStations',
   DELETE_CHARGING_STATIONS = 'deleteChargingStations',
+  SET_SUPERVISION_URL = 'setSupervisionUrl',
   START_CHARGING_STATION = 'startChargingStation',
   STOP_CHARGING_STATION = 'stopChargingStation',
   OPEN_CONNECTION = 'openConnection',
-- 
2.34.1