README.md: update to reflect response payload format change on
[e-mobility-charging-stations-simulator.git] / src / ui / web / src / components / charging-stations / CSTable.vue
CommitLineData
32de5a57
LM
1<template>
2 <table id="cs-table">
3 <thead id="cs-table__head">
4 <tr class="cs-table__row">
5 <th scope="col" class="cs-table__action-col">Action</th>
6 <th scope="col" class="cs-table__connector-col">Connector</th>
7 <th scope="col" class="cs-table__status-col">Status</th>
5a010bf0 8 <th scope="col" class="cs-table__transaction-col">Transaction</th>
32de5a57 9 <th scope="col" class="cs-table__name-col">Name</th>
452a82ca 10 <th scope="col" class="cs-table__started-col">Started</th>
5e3cb728 11 <th scope="col" class="cs-table__wsState-col">WebSocket State</th>
333c3566 12 <th scope="col" class="cs-table__registration-status-col">Registration Status</th>
32de5a57 13 <th scope="col" class="cs-table__vendor-col">Vendor</th>
5a010bf0 14 <th scope="col" class="cs-table__model-col">Model</th>
32de5a57
LM
15 <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
16 </tr>
17 </thead>
18 <tbody id="cs-table__body">
19 <CSData
02cde3b7 20 v-for="chargingStation in props.chargingStations"
513c1626 21 :key="chargingStation.stationInfo?.hashId"
32de5a57 22 :charging-station="chargingStation"
5a010bf0 23 :idTag="props.idTag"
32de5a57
LM
24 />
25 </tbody>
26 </table>
27</template>
28
29<script setup lang="ts">
30import CSData from './CSData.vue';
f27eb751 31import type { ChargingStationData } from '@/types/ChargingStationType';
32de5a57
LM
32
33const props = defineProps<{
5e3cb728 34 chargingStations: ChargingStationData[];
5a010bf0 35 idTag: string;
32de5a57
LM
36}>();
37</script>
38
39<style>
40#cs-table {
32de5a57
LM
41 height: 100%;
42 width: 100%;
60c59a02 43 background-color: white;
32de5a57 44 display: flex;
5a010bf0 45 flex-grow: 1;
32de5a57
LM
46 flex-direction: column;
47 overflow: auto hidden;
48 border-collapse: collapse;
49 empty-cells: show;
50}
51
52#cs-table__head,
53#cs-table__body {
aeb31e77 54 height: fit-content;
32de5a57 55 width: 100%;
aeb31e77 56 min-width: 100%;
fc040c43 57 display: block;
32de5a57 58}
60c59a02 59
32de5a57 60#cs-table__body {
32de5a57
LM
61 overflow: visible overlay;
62 flex-grow: 1;
63}
64
65.cs-table__row {
32de5a57 66 width: 100%;
32de5a57 67 display: flex;
8fc2e5cc
JB
68 justify-content: center;
69 align-items: center;
32de5a57 70}
60c59a02 71
32de5a57
LM
72#cs-table__head .cs-table__row {
73 background-color: rgb(194, 188, 188);
74}
60c59a02 75
32de5a57
LM
76.cs-table__row:nth-of-type(even) {
77 background-color: rgb(223, 217, 217);
78}
79
80.cs-table__action-col,
81.cs-table__connector-col,
82.cs-table__status-col,
5a010bf0 83.cs-table__transaction-col,
32de5a57 84.cs-table__name-col,
452a82ca 85.cs-table__started-col,
5e3cb728 86.cs-table__wsState-col,
333c3566 87.cs-table__registration-status-col,
32de5a57
LM
88.cs-table__model-col,
89.cs-table__vendor-col,
90.cs-table__firmware-col {
5a010bf0
JB
91 height: 0.1%;
92 width: 20%;
93 padding-top: 0.2%;
94 padding-bottom: 0.2%;
32de5a57 95 text-align: center;
32de5a57
LM
96}
97</style>