Commit | Line | Data |
---|---|---|
32de5a57 LM |
1 | <template> |
2 | <table id="cs-table"> | |
7e649b03 | 3 | <caption id="cs-table__caption"> |
d61c7193 | 4 | Charging Stations |
64bfc77a | 5 | </caption> |
32de5a57 LM |
6 | <thead id="cs-table__head"> |
7 | <tr class="cs-table__row"> | |
1d41bc6b JB |
8 | <th scope="col" class="cs-table__column">Name</th> |
9 | <th scope="col" class="cs-table__column">Started</th> | |
10 | <th scope="col" class="cs-table__column">Supervision Url</th> | |
11 | <th scope="col" class="cs-table__column">WebSocket State</th> | |
12 | <th scope="col" class="cs-table__column">Registration Status</th> | |
13 | <th scope="col" class="cs-table__column">Template</th> | |
14 | <th scope="col" class="cs-table__column">Vendor</th> | |
15 | <th scope="col" class="cs-table__column">Model</th> | |
9dc8b66f JB |
16 | <th scope="col" class="cs-table__column">Firmware</th> |
17 | <th scope="col" class="cs-table__column">Actions</th> | |
18 | <th scope="col" class="cs-table__connectors-column">Connector(s)</th> | |
32de5a57 LM |
19 | </tr> |
20 | </thead> | |
21 | <tbody id="cs-table__body"> | |
22 | <CSData | |
3a3ba0a2 | 23 | v-for="chargingStation in chargingStations" |
2610da71 | 24 | :key="chargingStation.stationInfo.hashId" |
32de5a57 | 25 | :charging-station="chargingStation" |
83468764 | 26 | @need-refresh="$emit('need-refresh')" |
32de5a57 LM |
27 | /> |
28 | </tbody> | |
29 | </table> | |
30 | </template> | |
31 | ||
32 | <script setup lang="ts"> | |
9d76f5ec | 33 | import CSData from '@/components/charging-stations/CSData.vue' |
66a7748d | 34 | import type { ChargingStationData } from '@/types' |
32de5a57 | 35 | |
3a3ba0a2 | 36 | defineProps<{ |
66a7748d | 37 | chargingStations: ChargingStationData[] |
66a7748d | 38 | }>() |
83468764 JB |
39 | |
40 | const $emit = defineEmits(['need-refresh']) | |
32de5a57 LM |
41 | </script> |
42 | ||
43 | <style> | |
44 | #cs-table { | |
1d41bc6b | 45 | height: fit-content; |
32de5a57 | 46 | width: 100%; |
60c59a02 | 47 | background-color: white; |
32de5a57 LM |
48 | display: flex; |
49 | flex-direction: column; | |
50 | overflow: auto hidden; | |
7be35e50 | 51 | border: solid 0.25px black; |
32de5a57 LM |
52 | border-collapse: collapse; |
53 | empty-cells: show; | |
54 | } | |
55 | ||
32de5a57 | 56 | #cs-table__body { |
aeb31e77 | 57 | height: fit-content; |
32de5a57 | 58 | width: 100%; |
1d41bc6b JB |
59 | display: flex; |
60 | flex-direction: column; | |
32de5a57 | 61 | } |
60c59a02 | 62 | |
7e649b03 | 63 | #cs-table__caption { |
3802683b | 64 | color: ivory; |
9dc8b66f | 65 | background-color: black; |
7e649b03 JB |
66 | font-size: 1.5rem; |
67 | font-weight: bold; | |
68 | padding: 0.5rem; | |
69 | } | |
70 | ||
32de5a57 | 71 | .cs-table__row { |
1d41bc6b | 72 | height: fit-content; |
32de5a57 | 73 | width: 100%; |
32de5a57 | 74 | display: flex; |
b002bbab | 75 | flex-direction: row; |
8fc2e5cc JB |
76 | justify-content: center; |
77 | align-items: center; | |
3802683b | 78 | border: solid 0.25px black; |
32de5a57 | 79 | } |
60c59a02 | 80 | |
32de5a57 | 81 | .cs-table__row:nth-of-type(even) { |
9dc8b66f | 82 | background-color: whitesmoke; |
32de5a57 LM |
83 | } |
84 | ||
1d41bc6b JB |
85 | .cs-table__column { |
86 | height: fit-content; | |
97ea01ab | 87 | width: calc((100% - calc(100% / 3)) / 10); |
3802683b JB |
88 | display: flex; |
89 | flex-direction: column; | |
9dc8b66f JB |
90 | text-align: center; |
91 | } | |
92 | ||
b002bbab JB |
93 | #cs-table__head .cs-table__row { |
94 | background-color: lightgrey; | |
95 | } | |
96 | ||
9dc8b66f JB |
97 | .cs-table__connectors-column { |
98 | height: fit-content; | |
97ea01ab | 99 | width: calc(100% / 3); |
25dbae90 JB |
100 | display: flex; |
101 | flex-direction: column; | |
32de5a57 LM |
102 | } |
103 | </style> |