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 | |
02cde3b7 | 23 | v-for="chargingStation in props.chargingStations" |
513c1626 | 24 | :key="chargingStation.stationInfo?.hashId" |
32de5a57 | 25 | :charging-station="chargingStation" |
01ff4231 | 26 | :id-tag="props.idTag" |
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 LM |
35 | |
36 | const props = defineProps<{ | |
66a7748d JB |
37 | chargingStations: ChargingStationData[] |
38 | idTag: string | |
39 | }>() | |
32de5a57 LM |
40 | </script> |
41 | ||
42 | <style> | |
43 | #cs-table { | |
1d41bc6b | 44 | height: fit-content; |
32de5a57 | 45 | width: 100%; |
60c59a02 | 46 | background-color: white; |
32de5a57 LM |
47 | display: flex; |
48 | flex-direction: column; | |
49 | overflow: auto hidden; | |
50 | border-collapse: collapse; | |
51 | empty-cells: show; | |
52 | } | |
53 | ||
54 | #cs-table__head, | |
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; |
8fc2e5cc JB |
74 | justify-content: center; |
75 | align-items: center; | |
32de5a57 | 76 | } |
60c59a02 | 77 | |
32de5a57 | 78 | #cs-table__head .cs-table__row { |
9dc8b66f | 79 | background-color: lightgrey; |
32de5a57 | 80 | } |
60c59a02 | 81 | |
32de5a57 | 82 | .cs-table__row:nth-of-type(even) { |
9dc8b66f | 83 | background-color: whitesmoke; |
32de5a57 LM |
84 | } |
85 | ||
1d41bc6b JB |
86 | .cs-table__column { |
87 | height: fit-content; | |
9dc8b66f JB |
88 | width: calc(65% / 10); |
89 | text-align: center; | |
90 | } | |
91 | ||
92 | .cs-table__connectors-column { | |
93 | height: fit-content; | |
94 | width: 35%; | |
32de5a57 | 95 | text-align: center; |
32de5a57 LM |
96 | } |
97 | </style> |