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" |
a1cfaa16 | 24 | :key="chargingStation.stationInfo?.chargingStationId" |
32de5a57 | 25 | :charging-station="chargingStation" |
32de5a57 LM |
26 | /> |
27 | </tbody> | |
28 | </table> | |
29 | </template> | |
30 | ||
31 | <script setup lang="ts"> | |
9d76f5ec | 32 | import CSData from '@/components/charging-stations/CSData.vue' |
66a7748d | 33 | import type { ChargingStationData } from '@/types' |
32de5a57 | 34 | |
3a3ba0a2 | 35 | defineProps<{ |
66a7748d | 36 | chargingStations: ChargingStationData[] |
66a7748d | 37 | }>() |
32de5a57 LM |
38 | </script> |
39 | ||
40 | <style> | |
41 | #cs-table { | |
1d41bc6b | 42 | height: fit-content; |
32de5a57 | 43 | width: 100%; |
60c59a02 | 44 | background-color: white; |
32de5a57 LM |
45 | display: flex; |
46 | flex-direction: column; | |
47 | overflow: auto hidden; | |
48 | border-collapse: collapse; | |
49 | empty-cells: show; | |
50 | } | |
51 | ||
32de5a57 | 52 | #cs-table__body { |
aeb31e77 | 53 | height: fit-content; |
32de5a57 | 54 | width: 100%; |
1d41bc6b JB |
55 | display: flex; |
56 | flex-direction: column; | |
32de5a57 | 57 | } |
60c59a02 | 58 | |
7e649b03 | 59 | #cs-table__caption { |
9dc8b66f JB |
60 | color: white; |
61 | background-color: black; | |
7e649b03 JB |
62 | font-size: 1.5rem; |
63 | font-weight: bold; | |
64 | padding: 0.5rem; | |
65 | } | |
66 | ||
32de5a57 | 67 | .cs-table__row { |
1d41bc6b | 68 | height: fit-content; |
32de5a57 | 69 | width: 100%; |
32de5a57 | 70 | display: flex; |
b002bbab | 71 | flex-direction: row; |
8fc2e5cc JB |
72 | justify-content: center; |
73 | align-items: center; | |
6dba76a5 | 74 | border: solid 0.5px black; |
32de5a57 | 75 | } |
60c59a02 | 76 | |
32de5a57 | 77 | .cs-table__row:nth-of-type(even) { |
9dc8b66f | 78 | background-color: whitesmoke; |
32de5a57 LM |
79 | } |
80 | ||
1d41bc6b JB |
81 | .cs-table__column { |
82 | height: fit-content; | |
6dba76a5 | 83 | width: calc(60% / 10); |
9dc8b66f JB |
84 | text-align: center; |
85 | } | |
86 | ||
b002bbab JB |
87 | #cs-table__head .cs-table__row { |
88 | background-color: lightgrey; | |
89 | } | |
90 | ||
9dc8b66f JB |
91 | .cs-table__connectors-column { |
92 | height: fit-content; | |
6dba76a5 | 93 | width: 40%; |
32de5a57 LM |
94 | } |
95 | </style> |