chore: switch coding style to JS standard
[e-mobility-charging-stations-simulator.git] / ui / web / src / views / ChargingStationsView.vue
CommitLineData
32de5a57
LM
1<template>
2 <Container id="charging-stations">
5a010bf0
JB
3 <Button id="simulator-button" @click="startSimulator()">Start Simulator</Button>
4 <Button id="simulator-button" @click="stopSimulator()">Stop Simulator</Button>
5 <Container id="inputs-container">
32de5a57 6 <input
5a010bf0 7 id="idtag-field"
01ff4231 8 v-model="state.idTag"
32de5a57 9 type="text"
5a010bf0
JB
10 name="idtag-field"
11 placeholder="RFID tag"
32de5a57
LM
12 />
13 <ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" />
14 </Container>
01ff4231 15 <CSTable :charging-stations="state.chargingStations" :id-tag="state.idTag" />
32de5a57
LM
16 </Container>
17</template>
18
19<script setup lang="ts">
66a7748d
JB
20import { onMounted, reactive } from 'vue'
21import CSTable from '@/components/charging-stations/CSTable.vue'
22import type { ChargingStationData } from '@/types'
23import Container from '@/components/Container.vue'
24import ReloadButton from '@/components/buttons/ReloadButton.vue'
25import { UIClient } from '@/composables/UIClient'
32de5a57 26
66a7748d 27const UIClientInstance = UIClient.getInstance()
32de5a57
LM
28
29onMounted(() => {
66a7748d
JB
30 UIClientInstance.registerWSonOpenListener(load)
31})
32de5a57
LM
32
33type State = {
66a7748d
JB
34 isLoading: boolean
35 chargingStations: ChargingStationData[]
36 idTag: string
37}
32de5a57
LM
38
39const state: State = reactive({
40 isLoading: false,
5e3cb728 41 chargingStations: [],
66a7748d
JB
42 idTag: ''
43})
32de5a57
LM
44
45async function load(): Promise<void> {
66a7748d
JB
46 if (state.isLoading === true) return
47 state.isLoading = true
48 const listChargingStationsPayload = await UIClientInstance.listChargingStations()
5e3cb728 49 state.chargingStations =
66a7748d
JB
50 listChargingStationsPayload.chargingStations as unknown as ChargingStationData[]
51 state.isLoading = false
32de5a57 52}
5a010bf0
JB
53
54function startSimulator(): void {
66a7748d 55 UIClientInstance.startSimulator()
5a010bf0
JB
56}
57function stopSimulator(): void {
66a7748d 58 UIClientInstance.stopSimulator()
5a010bf0 59}
32de5a57
LM
60</script>
61
62<style>
63#charging-stations {
64 height: 100%;
65 width: 100%;
66 padding: 30px;
67 background-color: rgb(233, 227, 227);
5a010bf0 68 display: flex;
32de5a57 69 flex-direction: column;
5a010bf0
JB
70 gap: 0.5%;
71}
72
73#inputs-container {
74 display: flex;
75 justify-content: space-between;
32de5a57
LM
76}
77
78#reload-button {
5a010bf0 79 flex: auto;
aeb31e77 80 padding: 5px 15px;
32de5a57
LM
81 background-color: rgb(25, 118, 210);
82 border-radius: 5px;
32de5a57
LM
83 color: white;
84 font-size: 35px;
85 font-weight: bold;
86}
87
88#reload-button:hover {
89 background-color: rgb(10, 113, 195);
90}
91
92#reload-button:active {
93 background-color: rgb(255, 113, 195);
94}
95
5a010bf0
JB
96#simulator-button {
97 flex: auto;
32de5a57
LM
98}
99
5a010bf0
JB
100#idtag-field {
101 flex: auto;
32de5a57
LM
102}
103</style>