'open',
() => {
setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
+ $router.currentRoute.value.name !== 'charging-stations' &&
+ $router.push({ name: 'charging-stations' })
},
{ once: true }
)
<Container id="buttons-container">
<Button @click="startSimulator()">Start Simulator</Button>
<Button @click="stopSimulator()">Stop Simulator</Button>
- <Button @click="$router.push({ name: 'add-charging-stations' })">
+ <ToggleButton
+ :id="'add-charging-stations'"
+ :key="state.renderAddChargingStations"
+ :shared="true"
+ :on="
+ () => {
+ $router.push({ name: 'add-charging-stations' })
+ }
+ "
+ :off="
+ () => {
+ $router.push({ name: 'charging-stations' })
+ }
+ "
+ @clicked="
+ () => {
+ state.renderChargingStations = randomUUID()
+ }
+ "
+ >
Add Charging Stations
- </Button>
+ </ToggleButton>
<ReloadButton
id="reload-button"
:loading="state.loading"
- @click="loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))"
+ @click="loadChargingStations(() => (state.renderChargingStations = randomUUID()))"
/>
</Container>
<CSTable
v-show="
Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
- app?.appContext.config.globalProperties.$chargingStations.length > 0
+ app.appContext.config.globalProperties.$chargingStations.length > 0
"
- :key="state.renderChargingStationsList"
+ :key="state.renderChargingStations"
:charging-stations="app?.appContext.config.globalProperties.$chargingStations"
+ @need-refresh="
+ () => {
+ state.renderAddChargingStations = randomUUID()
+ state.renderChargingStations = randomUUID()
+ }
+ "
/>
</Container>
</template>
<script setup lang="ts">
-import { getCurrentInstance, onMounted, reactive } from 'vue'
+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 Container from '@/components/Container.vue'
import ReloadButton from '@/components/buttons/ReloadButton.vue'
import Button from '@/components/buttons/Button.vue'
-import { getFromLocalStorage, setToLocalStorage } from '@/composables'
+import {
+ getFromLocalStorage,
+ getLocalStorage,
+ randomUUID,
+ removeFromLocalStorage,
+ setToLocalStorage
+} from '@/composables'
+import ToggleButton from '@/components/buttons/ToggleButton.vue'
-const randomUUID = (): `${string}-${string}-${string}-${string}-${string}` => {
- return crypto.randomUUID()
+const app = getCurrentInstance()
+
+const clearToggleButtons = (): void => {
+ for (const key in getLocalStorage()) {
+ if (key.includes('toggle-button')) {
+ removeFromLocalStorage(key)
+ }
+ }
}
-const app = getCurrentInstance()
+const clearChargingStations = (): void => {
+ clearToggleButtons()
+ app!.appContext.config.globalProperties.$chargingStations = []
+ state.value.renderAddChargingStations = randomUUID()
+ state.value.renderChargingStations = randomUUID()
+}
const initializeWSEventListeners = () => {
app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('open', () => {
- loadChargingStations(() => (state.renderChargingStationsList = randomUUID()))
- })
- app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('error', () => {
- app.appContext.config.globalProperties.$chargingStations = []
- state.renderChargingStationsList = randomUUID()
- })
- app?.appContext.config.globalProperties.$uiClient.registerWSEventListener('close', () => {
- app.appContext.config.globalProperties.$chargingStations = []
- state.renderChargingStationsList = randomUUID()
+ uiClient
+ .listTemplates()
+ .then((response: ResponsePayload) => {
+ if (app != null) {
+ app.appContext.config.globalProperties.$templates = response.templates
+ }
+ })
+ .catch((error: Error) => {
+ if (app != null) {
+ app.appContext.config.globalProperties.$templates = []
+ }
+ $toast.error('Error at fetching charging station templates')
+ console.error('Error at fetching charging station templates:', error)
+ })
+ loadChargingStations(() => {
+ state.value.renderAddChargingStations = randomUUID()
+ state.value.renderChargingStations = randomUUID()
+ })
})
+ app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
+ 'error',
+ clearChargingStations
+ )
+ app?.appContext.config.globalProperties.$uiClient.registerWSEventListener(
+ 'close',
+ clearChargingStations
+ )
}
onMounted(() => {
initializeWSEventListeners()
})
-const state = reactive({
- renderChargingStationsList: randomUUID(),
+const state = ref({
+ renderAddChargingStations: randomUUID(),
+ renderChargingStations: randomUUID(),
loading: false,
uiServerIndex: getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
})
const $toast = useToast()
const loadChargingStations = (renderCallback?: () => void): void => {
- if (state.loading === false) {
- state.loading = true
+ if (state.value.loading === false) {
+ state.value.loading = true
uiClient
.listChargingStations()
.then((response: ResponsePayload) => {
if (renderCallback != null) {
renderCallback()
}
- state.loading = false
+ state.value.loading = false
})
}
}