2 <Container id="charging-stations">
3 <Container id="reload-button_tag-field">
8 placeholder="Badge Authentication ID"
11 <ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" />
13 <CSTable :chargingStations="state.chargingStations" :tag="state.tag" />
17 <script setup lang="ts">
18 import Container from '@/components/Container.vue';
19 import ReloadButton from '@/components/buttons/ReloadButton.vue';
20 import CSTable from '@/components/charging-stations/CSTable.vue';
22 import { onMounted, reactive } from 'vue';
23 import UIClient from '@/composable/UIClient';
24 import { ChargingStationData } from '@/type/ChargingStationType';
26 const UIClientInstance = UIClient.instance;
29 UIClientInstance.onOpen(load);
34 chargingStations: ChargingStationData[];
38 const state: State = reactive({
44 async function load(): Promise<void> {
45 if (state.isLoading === true) return;
46 state.isLoading = true;
47 const list = await UIClientInstance.listChargingStations();
48 state.chargingStations = list;
49 state.isLoading = false;
58 background-color: rgb(233, 227, 227);
60 flex-direction: column;
67 background-color: rgb(25, 118, 210);
75 #reload-button:hover {
76 background-color: rgb(10, 113, 195);
79 #reload-button:active {
80 background-color: rgb(255, 113, 195);
83 #reload-button_tag-field {
85 justify-content: space-between;