2 <Container id="charging-stations-container">
3 <Container id="buttons-container">
4 <Button id="button" @click="startSimulator()">Start Simulator</Button>
5 <Button id="button" @click="stopSimulator()">Stop Simulator</Button>
6 <Button id="button" @click="$router.push({ name: 'add-charging-stations' })"
7 >Add Charging Stations</Button
11 :loading="state.isLoading"
12 @click="loadChargingStations(() => $router.go(0))"
15 <CSTable :charging-stations="app?.appContext.config.globalProperties.$chargingStations ?? []" />
19 <script setup lang="ts">
20 import { getCurrentInstance, reactive } from 'vue'
21 import CSTable from '@/components/charging-stations/CSTable.vue'
22 import type { ResponsePayload } from '@/types'
23 import Container from '@/components/Container.vue'
24 import ReloadButton from '@/components/buttons/ReloadButton.vue'
25 import Button from '@/components/buttons/Button.vue'
27 const state = reactive({
31 const app = getCurrentInstance()
32 const uiClient = app?.appContext.config.globalProperties.$uiClient
34 function loadChargingStations(reloadCallback?: () => void): void {
35 if (state.isLoading === false) {
36 state.isLoading = true
38 .listChargingStations()
39 .then((response: ResponsePayload) => {
41 app.appContext.config.globalProperties.$chargingStations = response.chargingStations
44 .catch((error: Error) => {
45 // TODO: add code for UI notifications or other error handling logic
46 console.error('Error at fetching charging stations:', error)
49 if (reloadCallback != null) {
52 state.isLoading = false
57 function startSimulator(): void {
58 uiClient.startSimulator()
60 function stopSimulator(): void {
61 uiClient.stopSimulator()
66 #charging-stations-container {
70 flex-direction: column;
85 background-color: blue;
89 justify-content: center;
92 #reload-button:hover {
93 background-color: rgb(0, 0, 225);
96 #reload-button:active {
97 background-color: red;