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; | |
51 | border-collapse: collapse; | |
52 | empty-cells: show; | |
53 | } | |
54 | ||
32de5a57 | 55 | #cs-table__body { |
aeb31e77 | 56 | height: fit-content; |
32de5a57 | 57 | width: 100%; |
1d41bc6b JB |
58 | display: flex; |
59 | flex-direction: column; | |
32de5a57 | 60 | } |
60c59a02 | 61 | |
7e649b03 | 62 | #cs-table__caption { |
9dc8b66f JB |
63 | color: white; |
64 | background-color: black; | |
7e649b03 JB |
65 | font-size: 1.5rem; |
66 | font-weight: bold; | |
67 | padding: 0.5rem; | |
68 | } | |
69 | ||
32de5a57 | 70 | .cs-table__row { |
1d41bc6b | 71 | height: fit-content; |
32de5a57 | 72 | width: 100%; |
32de5a57 | 73 | display: flex; |
b002bbab | 74 | flex-direction: row; |
8fc2e5cc JB |
75 | justify-content: center; |
76 | align-items: center; | |
6dba76a5 | 77 | border: solid 0.5px black; |
32de5a57 | 78 | } |
60c59a02 | 79 | |
32de5a57 | 80 | .cs-table__row:nth-of-type(even) { |
9dc8b66f | 81 | background-color: whitesmoke; |
32de5a57 LM |
82 | } |
83 | ||
1d41bc6b JB |
84 | .cs-table__column { |
85 | height: fit-content; | |
421fcdc9 | 86 | width: calc(65% / 10); |
9dc8b66f JB |
87 | text-align: center; |
88 | } | |
89 | ||
b002bbab JB |
90 | #cs-table__head .cs-table__row { |
91 | background-color: lightgrey; | |
92 | } | |
93 | ||
9dc8b66f JB |
94 | .cs-table__connectors-column { |
95 | height: fit-content; | |
421fcdc9 | 96 | width: 35%; |
32de5a57 LM |
97 | } |
98 | </style> |