X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fviews%2FChargingStationsView.vue;h=6f589ccc6a8030136f4449ac5de1a2e64daaf78e;hb=c63085548339556d66ced562e9649a84d0544ff4;hp=cbd8a34ba64bf13ad17f8e57a679cb67aa455c63;hpb=3eea3ebcd6172a2928aba166e26d5f06cd4dbe42;p=e-mobility-charging-stations-simulator.git
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index cbd8a34b..6f589ccc 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,58 +1,79 @@
-
-
-
-
-
-
+ {{ state.simulatorState?.started === true ? 'Stop' : 'Start' }} Simulator
+ {{ state.simulatorState?.version != null ? ` (${state.simulatorState?.version})` : '' }}
+
{
+ state.renderChargingStations = randomUUID()
+ }
+ "
>
Add Charging Stations
@@ -83,6 +109,12 @@
"
:key="state.renderChargingStations"
:charging-stations="app?.appContext.config.globalProperties.$chargingStations"
+ @need-refresh="
+ () => {
+ state.renderAddChargingStations = randomUUID()
+ state.renderChargingStations = randomUUID()
+ }
+ "
/>
@@ -91,38 +123,68 @@
import { getCurrentInstance, onMounted, ref } from 'vue'
import { useToast } from 'vue-toast-notification'
import CSTable from '@/components/charging-stations/CSTable.vue'
-import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
+import type { ResponsePayload, SimulatorState, UIServerConfigurationSection } from '@/types'
import Container from '@/components/Container.vue'
import ReloadButton from '@/components/buttons/ReloadButton.vue'
-import Button from '@/components/buttons/Button.vue'
import {
+ deleteFromLocalStorage,
getFromLocalStorage,
getLocalStorage,
randomUUID,
- removeFromLocalStorage,
setToLocalStorage
} from '@/composables'
import ToggleButton from '@/components/buttons/ToggleButton.vue'
+const state = ref<{
+ renderSimulator: `${string}-${string}-${string}-${string}-${string}`
+ renderAddChargingStations: `${string}-${string}-${string}-${string}-${string}`
+ renderChargingStations: `${string}-${string}-${string}-${string}-${string}`
+ loading: boolean
+ simulatorState?: SimulatorState
+ uiServerIndex: number
+}>({
+ renderSimulator: randomUUID(),
+ renderAddChargingStations: randomUUID(),
+ renderChargingStations: randomUUID(),
+ loading: false,
+ uiServerIndex: getFromLocalStorage('uiServerConfigurationIndex', 0)
+})
+
const app = getCurrentInstance()
const clearToggleButtons = (): void => {
for (const key in getLocalStorage()) {
if (key.includes('toggle-button')) {
- removeFromLocalStorage(key)
+ deleteFromLocalStorage(key)
}
}
}
const clearChargingStations = (): void => {
- clearToggleButtons()
app!.appContext.config.globalProperties.$chargingStations = []
- state.value.renderAddChargingStations = randomUUID()
state.value.renderChargingStations = randomUUID()
}
+const uiClient = app?.appContext.config.globalProperties.$uiClient
+
+const getSimulatorState = (): void => {
+ uiClient
+ .simulatorState()
+ .then((response: ResponsePayload) => {
+ state.value.simulatorState = response.state as SimulatorState
+ })
+ .catch((error: Error) => {
+ $toast.error('Error at fetching simulator state')
+ console.error('Error at fetching simulator state:', error)
+ })
+ .finally(() => {
+ state.value.renderSimulator = randomUUID()
+ })
+}
+
const initializeWSEventListeners = () => {
app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
+ getSimulatorState()
uiClient
.listTemplates()
.then((response: ResponsePayload) => {
@@ -137,8 +199,10 @@ const initializeWSEventListeners = () => {
$toast.error('Error at fetching charging station templates')
console.error('Error at fetching charging station templates:', error)
})
+ .finally(() => {
+ state.value.renderAddChargingStations = randomUUID()
+ })
loadChargingStations(() => {
- state.value.renderAddChargingStations = randomUUID()
state.value.renderChargingStations = randomUUID()
})
})
@@ -156,14 +220,6 @@ onMounted(() => {
initializeWSEventListeners()
})
-const state = ref({
- renderAddChargingStations: randomUUID(),
- renderChargingStations: randomUUID(),
- loading: false,
- uiServerIndex: getFromLocalStorage('uiServerConfigurationIndex', 0)
-})
-
-const uiClient = app?.appContext.config.globalProperties.$uiClient
const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
app?.appContext.config.globalProperties.$configuration.uiServer.map(
(configuration: UIServerConfigurationSection, index: number) => ({
@@ -210,6 +266,9 @@ const startSimulator = (): void => {
$toast.error('Error at starting simulator')
console.error('Error at starting simulator:', error)
})
+ .finally(() => {
+ getSimulatorState()
+ })
}
const stopSimulator = (): void => {
uiClient
@@ -224,6 +283,9 @@ const stopSimulator = (): void => {
$toast.error('Error at stopping simulator')
console.error('Error at stopping simulator:', error)
})
+ .finally(() => {
+ getSimulatorState()
+ })
}
@@ -237,31 +299,43 @@ const stopSimulator = (): void => {
#ui-server-container {
display: flex;
- flex-direction: row;
+ justify-content: center;
}
#ui-server-selector {
width: 100%;
+ background-color: rgb(239, 239, 239);
+ font: small-caption;
text-align: center;
}
+#ui-server-selector:hover {
+ background-color: rgb(229, 229, 229);
+}
+
#buttons-container {
display: flex;
flex-direction: row;
}
+.simulator-start-button {
+ color: ivory;
+ background-color: green;
+}
+
+.simulator-stop-button {
+ color: ivory;
+ background-color: red;
+}
+
#action-button {
flex: none;
}
#reload-button {
- flex: auto;
- color: white;
+ color: ivory;
background-color: blue;
- font-size: 1.5rem;
- font-weight: bold;
- align-items: center;
- justify-content: center;
+ font-size: 2rem;
}
#reload-button:hover {
@@ -269,11 +343,11 @@ const stopSimulator = (): void => {
}
#reload-button:active {
- background-color: red;
+ background-color: darkblue;
}
#action {
- color: white;
+ color: ivory;
background-color: black;
padding: 1%;
}