2 <Container id="charging-stations-container">
4 v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
5 id="ui-server-container"
8 id="ui-server-selector"
9 v-model="state.uiServerIndex"
13 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
15 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
16 app?.appContext.config.globalProperties.$configuration.uiServer[state.uiServerIndex]
18 initializeWSEventListeners()
19 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
22 setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
23 $router.currentRoute.value.name !== 'charging-stations' &&
24 $router.push({ name: 'charging-stations' })
28 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
31 state.uiServerIndex = getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
32 app?.appContext.config.globalProperties.$uiClient.setConfiguration(
33 app?.appContext.config.globalProperties.$configuration.uiServer[
34 getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
37 initializeWSEventListeners()
46 v-for="uiServerConfiguration in uiServerConfigurations"
47 :value="uiServerConfiguration.index"
49 {{ uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host }}
53 <Container id="buttons-container">
54 <Button @click="startSimulator()">Start Simulator</Button>
55 <Button @click="stopSimulator()">Stop Simulator</Button>
56 <Button @click="$router.push({ name: 'add-charging-stations' })">
61 :loading="state.loading"
62 @click="loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))"
67 Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
68 app?.appContext.config.globalProperties.$chargingStations.length > 0
70 :key="state.renderChargingStationsList"
71 :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
76 <script setup lang="ts">
77 import { getCurrentInstance, onMounted, ref } from 'vue'
78 import { useToast } from 'vue-toast-notification'
79 import CSTable from '@/components/charging-stations/CSTable.vue'
80 import type { ResponsePayload, UIServerConfigurationSection } from '@/types'
81 import Container from '@/components/Container.vue'
82 import ReloadButton from '@/components/buttons/ReloadButton.vue'
83 import Button from '@/components/buttons/Button.vue'
84 import { getFromLocalStorage, setToLocalStorage } from '@/composables'
86 const randomUUID = (): `${string}-${string}-${string}-${string}-${string}` => {
87 return crypto.randomUUID()
90 const app = getCurrentInstance()
92 const initializeWSEventListeners = () => {
93 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
96 .then((response: ResponsePayload) => {
98 app.appContext.config.globalProperties.$templates = response.templates
101 .catch((error: Error) => {
103 app.appContext.config.globalProperties.$templates = []
105 $toast.error('Error at fetching charging station templates')
106 console.error('Error at fetching charging station templates:', error)
108 loadChargingStations(() => (state.value.renderChargingStationsList = randomUUID()))
110 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('error', () => {
111 app.appContext.config.globalProperties.$chargingStations = []
112 state.value.renderChargingStationsList = randomUUID()
114 app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('close', () => {
115 app.appContext.config.globalProperties.$chargingStations = []
116 state.value.renderChargingStationsList = randomUUID()
121 initializeWSEventListeners()
125 renderChargingStationsList: randomUUID(),
127 uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
130 const uiClient = app?.appContext.config.globalProperties.$uiClient
131 const uiServerConfigurations: { configuration: UIServerConfigurationSection; index: number }[] =
132 app?.appContext.config.globalProperties.$configuration.uiServer.map(
133 (configuration: UIServerConfigurationSection, index: number) => ({
139 const $toast = useToast()
141 const loadChargingStations = (renderCallback?: () => void): void => {
142 if (state.value.loading === false) {
143 state.value.loading = true
145 .listChargingStations()
146 .then((response: ResponsePayload) => {
148 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
151 .catch((error: Error) => {
153 app.appContext.config.globalProperties.$chargingStations = []
155 $toast.error('Error at fetching charging stations')
156 console.error('Error at fetching charging stations:', error)
159 if (renderCallback != null) {
162 state.value.loading = false
167 const startSimulator = (): void => {
171 $toast.success('Simulator successfully started')
173 .catch((error: Error) => {
174 $toast.error('Error at starting simulator')
175 console.error('Error at starting simulator:', error)
178 const stopSimulator = (): void => {
183 app.appContext.config.globalProperties.$chargingStations = []
185 $toast.success('Simulator successfully stopped')
187 .catch((error: Error) => {
188 $toast.error('Error at stopping simulator')
189 console.error('Error at stopping simulator:', error)
195 #charging-stations-container {
199 flex-direction: column;
202 #ui-server-container {
207 #ui-server-selector {
224 background-color: blue;
228 justify-content: center;
231 #reload-button:hover {
232 background-color: rgb(0, 0, 225);
235 #reload-button:active {
236 background-color: red;
241 background-color: black;