import CSTable from '@/components/charging-stations/CSTable.vue';
import { onMounted, reactive } from 'vue';
-import UIClient from '@/composable/UIClient';
-import { ChargingStationData } from '@/type/ChargingStationType';
+import UIClient from '@/composables/UIClient';
+import type { ChargingStationData } from '@/types/ChargingStationType';
-const UIClientInstance = UIClient.instance;
+const UIClientInstance = UIClient.getInstance();
onMounted(() => {
- UIClientInstance.onOpen(load);
+ UIClientInstance.registerWSonOpenListener(load);
});
type State = {
isLoading: boolean;
- chargingStations: Record<string, ChargingStationData>;
+ chargingStations: ChargingStationData[];
idTag: string;
};
const state: State = reactive({
isLoading: false,
- chargingStations: {},
+ chargingStations: [],
idTag: '',
});
async function load(): Promise<void> {
if (state.isLoading === true) return;
state.isLoading = true;
- const list = await UIClientInstance.listChargingStations();
- state.chargingStations = list as unknown as Record<string, ChargingStationData>;
+ const listChargingStationsPayload = await UIClientInstance.listChargingStations();
+ state.chargingStations =
+ listChargingStationsPayload.chargingStations as unknown as ChargingStationData[];
state.isLoading = false;
}
#reload-button {
flex: auto;
- padding: 6px 14px;
+ padding: 5px 15px;
background-color: rgb(25, 118, 210);
border-radius: 5px;
-
color: white;
font-size: 35px;
font-weight: bold;