Commit | Line | Data |
---|---|---|
32de5a57 LM |
1 | <template> |
2 | <Container id="charging-stations"> | |
3 | <Container id="reload-button_tag-field"> | |
4 | <input | |
5 | id="tag-field" | |
6 | type="text" | |
7 | name="tag-field" | |
8 | placeholder="Badge Authentication ID" | |
9 | v-model="state.tag" | |
10 | /> | |
11 | <ReloadButton id="reload-button" :loading="state.isLoading" @click="load()" /> | |
12 | </Container> | |
13 | <CSTable :chargingStations="state.chargingStations" :tag="state.tag" /> | |
14 | </Container> | |
15 | </template> | |
16 | ||
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'; | |
21 | ||
22 | import { onMounted, reactive } from 'vue'; | |
23 | import UIClient from '@/composable/UIClient'; | |
24 | import { ChargingStationData } from '@/type/ChargingStationType'; | |
25 | ||
26 | const UIClientInstance = UIClient.instance; | |
27 | ||
28 | onMounted(() => { | |
29 | UIClientInstance.onOpen(load); | |
30 | }); | |
31 | ||
32 | type State = { | |
33 | isLoading: boolean; | |
34 | chargingStations: ChargingStationData[]; | |
35 | tag: string; | |
36 | }; | |
37 | ||
38 | const state: State = reactive({ | |
39 | isLoading: false, | |
40 | chargingStations: [], | |
41 | tag: '', | |
42 | }); | |
43 | ||
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; | |
50 | } | |
51 | </script> | |
52 | ||
53 | <style> | |
54 | #charging-stations { | |
55 | height: 100%; | |
56 | width: 100%; | |
57 | padding: 30px; | |
58 | background-color: rgb(233, 227, 227); | |
59 | ||
60 | flex-direction: column; | |
61 | gap: 1%; | |
62 | } | |
63 | ||
64 | #reload-button { | |
65 | /* width: 100%; */ | |
66 | padding: 6px 14px; | |
67 | background-color: rgb(25, 118, 210); | |
68 | border-radius: 5px; | |
69 | ||
70 | color: white; | |
71 | font-size: 35px; | |
72 | font-weight: bold; | |
73 | } | |
74 | ||
75 | #reload-button:hover { | |
76 | background-color: rgb(10, 113, 195); | |
77 | } | |
78 | ||
79 | #reload-button:active { | |
80 | background-color: rgb(255, 113, 195); | |
81 | } | |
82 | ||
83 | #reload-button_tag-field { | |
84 | display: flex; | |
85 | justify-content: space-between; | |
86 | } | |
87 | ||
88 | #tag-field { | |
89 | flex-grow: 1; | |
90 | } | |
91 | </style> |