Web UI: Fix NPE at template loading

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

diff --git a/src/ui/web/.gitignore b/src/ui/web/.gitignore
index 403adbc1e527906a4aa59558cd582c20bcd1d738..9141c8eef04f7b7e3c555cdd16ea453a26ef8251 100644 (file)
--- a/src/ui/web/.gitignore
+++ b/src/ui/web/.gitignore
@@ -15,7 +15,8 @@ pnpm-debug.log*
 
 # Editor directories and files
 .idea
-.vscode
+.vscode/*
+!.vscode/launch.json
 *.suo
 *.ntvs*
 *.njsproj

diff --git a/src/ui/web/.vscode/launch.json b/src/ui/web/.vscode/launch.json
new file mode 100644 (file)
index 0000000..de60ec8
--- /dev/null
+++ b/src/ui/web/.vscode/launch.json
@@ -0,0 +1,18 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "vuejs: chrome",
+      "url": "http://localhost:8081",
+      "webRoot": "${workspaceFolder}/src",
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
+    }
+  ]
+}

diff --git a/src/ui/web/src/components/charging-stations/CSInfoModal.vue b/src/ui/web/src/components/charging-stations/CSInfoModal.vue
index f9481b58845d77223a7afe1be5b0eee52cac1c0a..aa9bcd5dc0d36ebddb5a7fcade41f73cfa7bcde9 100644 (file)
--- a/src/ui/web/src/components/charging-stations/CSInfoModal.vue
+++ b/src/ui/web/src/components/charging-stations/CSInfoModal.vue
@@ -1,6 +1,6 @@
 <template>
   <Modal :visibility="props.isVisible">
-    <div class="card-info">vendor: {{ props.info.chargePointVendor }}</div>
+    <div class="card-info">vendor: {{ props.stationInfo.chargePointVendor }}</div>
   </Modal>
 </template>
 
@@ -9,8 +9,8 @@ import Modal from '@/components/Modal.vue';
 import type { ChargingStationInfo } from '@/types/ChargingStationType';
 
 const props = defineProps<{
+  stationInfo: ChargingStationInfo;
   isVisible: boolean;
-  info: ChargingStationInfo;
 }>();
 </script>
 

diff --git a/src/ui/web/src/components/charging-stations/CSTable.vue b/src/ui/web/src/components/charging-stations/CSTable.vue
index ccd7db14e4fc4862e7765e1822daf27c978c0ea4..97298b1a3fe5a6bfa8b95e582f2a77f9007c61cd 100644 (file)
--- a/src/ui/web/src/components/charging-stations/CSTable.vue
+++ b/src/ui/web/src/components/charging-stations/CSTable.vue
@@ -17,7 +17,7 @@
     <tbody id="cs-table__body">
       <CSData
         v-for="chargingStation in chargingStations"
-        :key="chargingStation.stationInfo.hashId"
+        :key="chargingStation.stationInfo?.hashId"
         :charging-station="chargingStation"
         :idTag="props.idTag"
       />

diff --git a/src/ui/web/tests/unit/CSTable.spec.ts b/src/ui/web/tests/unit/CSTable.spec.ts
index b6084d9c2c4f010b3f97e24e85577772ff6bd35b..b77fab86b9e1ba819edd20d067f3c59edb79105c 100644 (file)
--- a/src/ui/web/tests/unit/CSTable.spec.ts
+++ b/src/ui/web/tests/unit/CSTable.spec.ts
@@ -6,11 +6,7 @@ import type { ChargingStationData } from '@/types/ChargingStationType';
 describe('CSTable.vue', () => {
   it('renders CS table columns name', () => {
     const chargingStations: Record<string, ChargingStationData> = {
-      '0': {
-        stationInfo: {
-          hashId: '0',
-        },
-      } as unknown as ChargingStationData,
+      '0': {} as unknown as ChargingStationData,
     };
     const wrapper = shallowMount(CSTable, {
       props: { chargingStations, idTag: '0' },

diff --git a/src/ui/web/vue.config.js b/src/ui/web/vue.config.js
index 34f64656041d83281ebc9deb052adabbc09ced57..779217b8221c2886deded454ca73d5501c25427d 100644 (file)
--- a/src/ui/web/vue.config.js
+++ b/src/ui/web/vue.config.js
@@ -2,4 +2,7 @@ const { defineConfig } = require('@vue/cli-service');
 module.exports = defineConfig({
   transpileDependencies: true,
   lintOnSave: false,
+  configureWebpack: {
+    devtool: 'source-map',
+  },
 });