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">Action</th> |
9 | <th scope="col" class="cs-table__column">Connector</th> | |
10 | <th scope="col" class="cs-table__column">Status</th> | |
11 | <th scope="col" class="cs-table__column">Transaction</th> | |
12 | <th scope="col" class="cs-table__column">Name</th> | |
13 | <th scope="col" class="cs-table__column">Started</th> | |
14 | <th scope="col" class="cs-table__column">Supervision Url</th> | |
15 | <th scope="col" class="cs-table__column">WebSocket State</th> | |
16 | <th scope="col" class="cs-table__column">Registration Status</th> | |
17 | <th scope="col" class="cs-table__column">Template</th> | |
18 | <th scope="col" class="cs-table__column">Vendor</th> | |
19 | <th scope="col" class="cs-table__column">Model</th> | |
20 | <th scope="col" class="cs-table__column">Firmware Version</th> | |
32de5a57 LM |
21 | </tr> |
22 | </thead> | |
23 | <tbody id="cs-table__body"> | |
24 | <CSData | |
02cde3b7 | 25 | v-for="chargingStation in props.chargingStations" |
513c1626 | 26 | :key="chargingStation.stationInfo?.hashId" |
32de5a57 | 27 | :charging-station="chargingStation" |
01ff4231 | 28 | :id-tag="props.idTag" |
32de5a57 LM |
29 | /> |
30 | </tbody> | |
31 | </table> | |
32 | </template> | |
33 | ||
34 | <script setup lang="ts"> | |
66a7748d JB |
35 | import CSData from './CSData.vue' |
36 | import type { ChargingStationData } from '@/types' | |
32de5a57 LM |
37 | |
38 | const props = defineProps<{ | |
66a7748d JB |
39 | chargingStations: ChargingStationData[] |
40 | idTag: string | |
41 | }>() | |
32de5a57 LM |
42 | </script> |
43 | ||
44 | <style> | |
45 | #cs-table { | |
1d41bc6b | 46 | height: fit-content; |
32de5a57 | 47 | width: 100%; |
60c59a02 | 48 | background-color: white; |
32de5a57 LM |
49 | display: flex; |
50 | flex-direction: column; | |
51 | overflow: auto hidden; | |
52 | border-collapse: collapse; | |
53 | empty-cells: show; | |
54 | } | |
55 | ||
56 | #cs-table__head, | |
57 | #cs-table__body { | |
aeb31e77 | 58 | height: fit-content; |
32de5a57 | 59 | width: 100%; |
1d41bc6b JB |
60 | display: flex; |
61 | flex-direction: column; | |
32de5a57 | 62 | } |
60c59a02 | 63 | |
32de5a57 | 64 | #cs-table__body { |
32de5a57 | 65 | overflow: visible overlay; |
32de5a57 LM |
66 | } |
67 | ||
7e649b03 JB |
68 | #cs-table__caption { |
69 | font-size: 1.5rem; | |
70 | font-weight: bold; | |
71 | padding: 0.5rem; | |
72 | } | |
73 | ||
32de5a57 | 74 | .cs-table__row { |
1d41bc6b | 75 | height: fit-content; |
32de5a57 | 76 | width: 100%; |
32de5a57 | 77 | display: flex; |
8fc2e5cc JB |
78 | justify-content: center; |
79 | align-items: center; | |
32de5a57 | 80 | } |
60c59a02 | 81 | |
32de5a57 LM |
82 | #cs-table__head .cs-table__row { |
83 | background-color: rgb(194, 188, 188); | |
84 | } | |
60c59a02 | 85 | |
32de5a57 LM |
86 | .cs-table__row:nth-of-type(even) { |
87 | background-color: rgb(223, 217, 217); | |
88 | } | |
89 | ||
1d41bc6b JB |
90 | .cs-table__column { |
91 | height: fit-content; | |
92 | width: calc(100% / 13); | |
32de5a57 | 93 | text-align: center; |
32de5a57 LM |
94 | } |
95 | </style> |