X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fviews%2FChargingStationsView.vue;h=abea2075cc1207114d0a0d1174f5b1453058a709;hb=258666f9962451dda19d0db528bbf07e41838ff2;hp=a022e39818105572a428299c100538c735778e73;hpb=14ee627af194a4d3aac36cb286bc7999e9481860;p=e-mobility-charging-stations-simulator.git
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index a022e398..abea2075 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,5 +1,54 @@
+
+
+
@@ -8,11 +57,18 @@
$router.go(0))"
+ :loading="state.loading"
+ @click="loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))"
/>
-
+
@@ -20,23 +76,37 @@
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 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()
+}
const state = reactive({
- isLoading: false
+ renderChargingStationsList: randomUUID(),
+ loading: false,
+ uiServerIndex: getFromLocalStorage('uiServerConfigurationIndex', 0)
})
const app = getCurrentInstance()
const uiClient = app?.appContext.config.globalProperties.$uiClient
+const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
+ app?.appContext.config.globalProperties.$configuration.uiServer.map(
+ (configuration: UIServerConfigurationSection, index: number) => ({
+ configuration,
+ index
+ })
+ )
const $toast = useToast()
-const loadChargingStations = (reloadCallback?: () => void): void => {
- if (state.isLoading === false) {
- state.isLoading = true
+const loadChargingStations = (renderCallback?: () => void): void => {
+ if (state.loading === false) {
+ state.loading = true
uiClient
.listChargingStations()
.then((response: ResponsePayload) => {
@@ -49,10 +119,10 @@ const loadChargingStations = (reloadCallback?: () => void): void => {
console.error('Error at fetching charging stations:', error)
})
.finally(() => {
- if (reloadCallback != null) {
- reloadCallback()
+ if (renderCallback != null) {
+ renderCallback()
}
- state.isLoading = false
+ state.loading = false
})
}
}
@@ -72,6 +142,9 @@ const stopSimulator = (): void => {
uiClient
.stopSimulator()
.then(() => {
+ if (app != null) {
+ app.appContext.config.globalProperties.$chargingStations = []
+ }
$toast.success('Simulator successfully stopped')
})
.catch((error: Error) => {
@@ -89,6 +162,16 @@ const stopSimulator = (): void => {
flex-direction: column;
}
+#ui-server-container {
+ display: flex;
+ flex-direction: row;
+}
+
+#ui-server-selector {
+ width: 100%;
+ text-align: center;
+}
+
#buttons-container {
display: flex;
flex-direction: row;
@@ -115,4 +198,10 @@ const stopSimulator = (): void => {
#reload-button:active {
background-color: red;
}
+
+#action {
+ color: white;
+ background-color: black;
+ padding: 1%;
+}