+ <Container
+ v-show="Array.isArray(uiServerConfigurations) && uiServerConfigurations.length > 1"
+ id="ui-server-container"
+ >
+ <select
+ id="ui-server-selector"
+ v-model="state.uiServerIndex"
+ @change="
+ () => {
+ if (
+ getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
+ ) {
+ $uiClient.setConfiguration($configuration.value.uiServer[state.uiServerIndex])
+ registerWSEventListeners()
+ $uiClient.registerWSEventListener(
+ 'open',
+ () => {
+ setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
+ clearToggleButtons()
+ $route.name !== 'charging-stations' &&
+ $router.push({ name: 'charging-stations' })
+ },
+ { once: true }
+ )
+ $uiClient.registerWSEventListener(
+ 'error',
+ () => {
+ state.uiServerIndex = getFromLocalStorage<number>(
+ 'uiServerConfigurationIndex',
+ 0
+ )
+ $uiClient.setConfiguration(
+ $configuration.value.uiServer[
+ getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
+ ]
+ )
+ registerWSEventListeners()
+ },
+ { once: true }
+ )
+ }
+ }
+ "
+ >
+ <option
+ v-for="uiServerConfiguration in uiServerConfigurations"
+ :value="uiServerConfiguration.index"
+ >
+ {{
+ uiServerConfiguration.configuration.name ?? uiServerConfiguration.configuration.host
+ }}
+ </option>
+ </select>
+ </Container>
+ <ToggleButton
+ :id="'simulator'"
+ :key="state.renderSimulator"
+ :status="simulatorState?.started"
+ :on="() => startSimulator()"
+ :off="() => stopSimulator()"
+ :class="simulatorButtonClass"
+ >
+ {{ simulatorButtonMessage }}
+ </ToggleButton>
+ <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
+ </ToggleButton>
+ <ReloadButton
+ id="reload-button"
+ :loading="state.gettingChargingStations"
+ @click="getChargingStations()"