From: Jérôme Benoit <jerome.benoit@sap.com>
Date: Sun, 18 Feb 2024 13:15:56 +0000 (+0100)
Subject: feat(ui): add action success/failure notifications
X-Git-Tag: v1.2.37~13
X-Git-Url: https://git.piment-noir.org/?a=commitdiff_plain;h=cea23fa0af66a39cc3bf089217b90e1b5e9f0def;p=e-mobility-charging-stations-simulator.git

feat(ui): add action success/failure notifications

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---

diff --git a/ui/web/package.json b/ui/web/package.json
index db4c7b4c..caa425a1 100644
--- a/ui/web/package.json
+++ b/ui/web/package.json
@@ -35,7 +35,8 @@
     "finalhandler": "^1.2.0",
     "serve-static": "^1.15.0",
     "vue": "^3.4.19",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-toast-notification": "^3.1.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.7.2",
diff --git a/ui/web/pnpm-lock.yaml b/ui/web/pnpm-lock.yaml
index 050f7de3..60741f5b 100644
--- a/ui/web/pnpm-lock.yaml
+++ b/ui/web/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
   vue-router:
     specifier: ^4.2.5
     version: 4.2.5(vue@3.4.19)
+  vue-toast-notification:
+    specifier: ^3.1.2
+    version: 3.1.2(vue@3.4.19)
 
 devDependencies:
   '@rushstack/eslint-patch':
@@ -4219,6 +4222,15 @@ packages:
       vue: 3.4.19(typescript@5.3.3)
     dev: false
 
+  /vue-toast-notification@3.1.2(vue@3.4.19):
+    resolution: {integrity: sha512-oNRL/W9aaHoeScp+iTIW7k09vM16/+8aptp2maa+7qTB43JuxmAgKdXKFYtf+uvSNOYYq2BIWgLCeJ61pwom/A==}
+    engines: {node: '>=12.15.0'}
+    peerDependencies:
+      vue: ^3.0
+    dependencies:
+      vue: 3.4.19(typescript@5.3.3)
+    dev: false
+
   /vue@3.4.19(typescript@5.3.3):
     resolution: {integrity: sha512-W/7Fc9KUkajFU8dBeDluM4sRGc/aa4YJnOYck8dkjgZoXtVsn3OeTGni66FV1l3+nvPA7VBFYtPioaGKUmEADw==}
     peerDependencies:
diff --git a/ui/web/src/components/actions/AddChargingStations.vue b/ui/web/src/components/actions/AddChargingStations.vue
index 387d8a1a..7a2f8a59 100644
--- a/ui/web/src/components/actions/AddChargingStations.vue
+++ b/ui/web/src/components/actions/AddChargingStations.vue
@@ -20,8 +20,11 @@
       () => {
         uiClient
           .addChargingStations(state.template, state.numberOfStations)
+          .then(() => {
+            $toast.success('Charging stations successfully added')
+          })
           .catch((error: Error) => {
-            // TODO: add code for UI notifications or other error handling logic
+            $toast.error('Error at adding charging stations')
             console.error('Error at adding charging stations:', error)
           })
           .finally(() => {
@@ -36,6 +39,7 @@
 
 <script setup lang="ts">
 import { getCurrentInstance, onMounted, reactive } from 'vue'
+import { useToast } from 'vue-toast-notification'
 import Button from '@/components/buttons/Button.vue'
 import type { ResponsePayload } from '@/types'
 
@@ -48,6 +52,8 @@ const state = reactive({
 const app = getCurrentInstance()
 const uiClient = app?.appContext.config.globalProperties.$uiClient
 
+const $toast = useToast()
+
 onMounted(() => {
   uiClient
     .listTemplates()
@@ -57,7 +63,7 @@ onMounted(() => {
       }
     })
     .catch((error: Error) => {
-      // TODO: add code for UI notifications or other error handling logic
+      $toast.error('Error at fetching charging station templates')
       console.error('Error at fetching charging station templates:', error)
     })
     .finally(() => {
diff --git a/ui/web/src/components/actions/SetSupervisionUrl.vue b/ui/web/src/components/actions/SetSupervisionUrl.vue
index 00f4ef3d..0dfc282c 100644
--- a/ui/web/src/components/actions/SetSupervisionUrl.vue
+++ b/ui/web/src/components/actions/SetSupervisionUrl.vue
@@ -15,8 +15,11 @@
       () => {
         uiClient
           .setSupervisionUrl(props.hashId, state.supervisionUrl)
+          .then(() => {
+            $toast.success('Supervision url successfully set')
+          })
           .catch((error: Error) => {
-            // TODO: add code for UI notifications or other error handling logic
+            $toast.error('Error at setting supervision url')
             console.error('Error at setting supervision url:', error)
           })
           .finally(() => {
diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue
index 62fe31f1..6a96e34d 100644
--- a/ui/web/src/components/actions/StartTransaction.vue
+++ b/ui/web/src/components/actions/StartTransaction.vue
@@ -9,8 +9,11 @@
       () => {
         uiClient
           .startTransaction(props.hashId, parseInt(props.connectorId), state.idTag)
+          .then(() => {
+            $toast.success('Transaction successfully started')
+          })
           .catch((error: Error) => {
-            // TODO: add code for UI notifications or other error handling logic
+            $toast.error('Error at starting transaction')
             console.error('Error at starting transaction:', error)
           })
           .finally(() => {
diff --git a/ui/web/src/components/charging-stations/CSConnector.vue b/ui/web/src/components/charging-stations/CSConnector.vue
index c9e53696..8b577f58 100644
--- a/ui/web/src/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/components/charging-stations/CSConnector.vue
@@ -27,6 +27,7 @@
 
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue'
+import { useToast } from 'vue-toast-notification'
 import Button from '@/components/buttons/Button.vue'
 import type { ConnectorStatus, Status } from '@/types'
 
@@ -40,13 +41,39 @@ const props = defineProps<{
 
 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
 
+const $toast = useToast()
+
 function stopTransaction(): void {
-  uiClient.stopTransaction(props.hashId, props.connector.transactionId)
+  uiClient
+    .stopTransaction(props.hashId, props.connector.transactionId)
+    .then(() => {
+      $toast.success('Transaction successfully stopped')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at stopping transaction')
+      console.error('Error at stopping transaction:', error)
+    })
 }
 function startAutomaticTransactionGenerator(): void {
-  uiClient.startAutomaticTransactionGenerator(props.hashId, props.connectorId)
+  uiClient
+    .startAutomaticTransactionGenerator(props.hashId, props.connectorId)
+    .then(() => {
+      $toast.success('Automatic transaction generator successfully started')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at starting automatic transaction generator')
+      console.error('Error at starting automatic transaction generator:', error)
+    })
 }
 function stopAutomaticTransactionGenerator(): void {
-  uiClient.stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
+  uiClient
+    .stopAutomaticTransactionGenerator(props.hashId, props.connectorId)
+    .then(() => {
+      $toast.success('Automatic transaction generator successfully stopped')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at stopping automatic transaction generator')
+      console.error('Error at stopping automatic transaction generator:', error)
+    })
 }
 </script>
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 4502f53c..423014bd 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -67,6 +67,7 @@
 
 <script setup lang="ts">
 import { getCurrentInstance } from 'vue'
+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'
@@ -114,20 +115,62 @@ function getWsState(): string {
 
 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
 
+const $toast = useToast()
+
 function startChargingStation(): void {
-  uiClient.startChargingStation(props.chargingStation.stationInfo.hashId)
+  uiClient
+    .startChargingStation(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Charging station successfully started')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at starting charging station')
+      console.error('Error at starting charging station', error)
+    })
 }
 function stopChargingStation(): void {
-  uiClient.stopChargingStation(props.chargingStation.stationInfo.hashId)
+  uiClient
+    .stopChargingStation(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Charging station successfully stopped')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at stopping charging station')
+      console.error('Error at stopping charging station', error)
+    })
 }
 function openConnection(): void {
-  uiClient.openConnection(props.chargingStation.stationInfo.hashId)
+  uiClient
+    .openConnection(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Connection successfully opened')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at opening connection')
+      console.error('Error at opening connection', error)
+    })
 }
 function closeConnection(): void {
-  uiClient.closeConnection(props.chargingStation.stationInfo.hashId)
+  uiClient
+    .closeConnection(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Connection successfully closed')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at closing connection')
+      console.error('Error at closing connection', error)
+    })
 }
 function deleteChargingStation(): void {
-  uiClient.deleteChargingStation(props.chargingStation.stationInfo.hashId)
+  uiClient
+    .deleteChargingStation(props.chargingStation.stationInfo.hashId)
+    .then(() => {
+      $toast.success('Charging station successfully deleted')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at deleting charging station')
+      console.error('Error at deleting charging station', error)
+    })
 }
 </script>
 
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index 18186e16..bb42f576 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -1,8 +1,10 @@
 import { createApp } from 'vue'
+import ToastPlugin from 'vue-toast-notification'
 import type { ConfigurationData, ResponsePayload } from './types'
 import { router } from '@/router'
 import { UIClient } from '@/composables'
 import App from '@/App.vue'
+import 'vue-toast-notification/dist/theme-default.css'
 
 const initializeApp = (config: ConfigurationData) => {
   const app = createApp(App)
@@ -25,7 +27,7 @@ const initializeApp = (config: ConfigurationData) => {
         throw error
       })
       .finally(() => {
-        app.use(router).mount('#app')
+        app.use(router).use(ToastPlugin).mount('#app')
       })
   })
 }
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index d0acc4e3..b8a719b7 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -18,6 +18,7 @@
 
 <script setup lang="ts">
 import { getCurrentInstance, reactive } from 'vue'
+import { useToast } from 'vue-toast-notification'
 import CSTable from '@/components/charging-stations/CSTable.vue'
 import type { ResponsePayload } from '@/types'
 import Container from '@/components/Container.vue'
@@ -31,6 +32,8 @@ const state = reactive({
 const app = getCurrentInstance()
 const uiClient = app?.appContext.config.globalProperties.$uiClient
 
+const $toast = useToast()
+
 function loadChargingStations(reloadCallback?: () => void): void {
   if (state.isLoading === false) {
     state.isLoading = true
@@ -42,7 +45,7 @@ function loadChargingStations(reloadCallback?: () => void): void {
         }
       })
       .catch((error: Error) => {
-        // TODO: add code for UI notifications or other error handling logic
+        $toast.error('Error at fetching charging stations')
         console.error('Error at fetching charging stations:', error)
       })
       .finally(() => {
@@ -55,10 +58,26 @@ function loadChargingStations(reloadCallback?: () => void): void {
 }
 
 function startSimulator(): void {
-  uiClient.startSimulator()
+  uiClient
+    .startSimulator()
+    .then(() => {
+      $toast.success('Simulator successfully started')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at starting simulator')
+      console.error('Error at starting simulator:', error)
+    })
 }
 function stopSimulator(): void {
-  uiClient.stopSimulator()
+  uiClient
+    .stopSimulator()
+    .then(() => {
+      $toast.success('Simulator successfully stopped')
+    })
+    .catch((error: Error) => {
+      $toast.error('Error at stopping simulator')
+      console.error('Error at stopping simulator:', error)
+    })
 }
 </script>