<template>
<Container id="charging-stations-container">
<Container id="buttons-container">
- <Button id="button" @click="startSimulator()">Start Simulator</Button>
- <Button id="button" @click="stopSimulator()">Stop Simulator</Button>
- <Button id="button" @click="$router.push({ name: 'add-charging-stations' })"
- >Add Charging Stations</Button
- >
+ <Button @click="startSimulator()">Start Simulator</Button>
+ <Button @click="stopSimulator()">Stop Simulator</Button>
+ <Button @click="$router.push({ name: 'add-charging-stations' })">
+ Add Charging Stations
+ </Button>
<ReloadButton
id="reload-button"
:loading="state.isLoading"
@click="loadChargingStations(() => $router.go(0))"
/>
</Container>
- <CSTable :charging-stations="app?.appContext.config.globalProperties.$chargingStations ?? []" />
+ <CSTable :charging-stations="app?.appContext.config.globalProperties.$chargingStations" />
</Container>
</template>
<script setup lang="ts">
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 Container from '@/components/Container.vue'
const app = getCurrentInstance()
const uiClient = app?.appContext.config.globalProperties.$uiClient
-function loadChargingStations(reloadCallback?: () => void): void {
+const $toast = useToast()
+
+const loadChargingStations = (reloadCallback?: () => void): void => {
if (state.isLoading === false) {
state.isLoading = true
uiClient
}
})
.catch((error: Error) => {
- // TODO: add code for UI notifications or other error handling logic
+ $toast.error('Error at fetching charging stations')
console.error('Error at fetching charging stations:', error)
})
.finally(() => {
}
}
-function startSimulator(): void {
- uiClient.startSimulator()
+const startSimulator = (): void => {
+ uiClient
+ .startSimulator()
+ .then(() => {
+ $toast.success('Simulator successfully started')
+ })
+ .catch((error: Error) => {
+ $toast.error('Error at starting simulator')
+ console.error('Error at starting simulator:', error)
+ })
}
-function stopSimulator(): void {
- uiClient.stopSimulator()
+const stopSimulator = (): void => {
+ uiClient
+ .stopSimulator()
+ .then(() => {
+ $toast.success('Simulator successfully stopped')
+ })
+ .catch((error: Error) => {
+ $toast.error('Error at stopping simulator')
+ console.error('Error at stopping simulator:', error)
+ })
}
</script>
flex-direction: row;
}
-#button {
- flex: auto;
+#action-button {
+ flex: none;
}
#reload-button {
#reload-button:active {
background-color: red;
}
+
+#action {
+ color: white;
+ background-color: black;
+ padding: 1%;
+}
</style>