src/ui/web/src/components/charging-stations/CSTable.vue

   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>
   8         <th scope="col" class="cs-table__transaction-col">Transaction</th>
   9         <th scope="col" class="cs-table__name-col">Name</th>
  10         <th scope="col" class="cs-table__started-col">Started</th>
  11         <th scope="col" class="cs-table__wsState-col">WebSocket State</th>
  12         <th scope="col" class="cs-table__registration-status-col">Registration Status</th>
  13         <th scope="col" class="cs-table__vendor-col">Vendor</th>
  14         <th scope="col" class="cs-table__model-col">Model</th>
  15         <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
  16       </tr>
  17     </thead>
  18     <tbody id="cs-table__body">
  19       <CSData
  20         v-for="chargingStation in props.chargingStations"
  21         :key="chargingStation.stationInfo?.hashId"
  22         :charging-station="chargingStation"
  23         :idTag="props.idTag"
  24       />
  25     </tbody>
  26   </table>
  27 </template>
  28
  29 <script setup lang="ts">
  30 import CSData from './CSData.vue';
  31 import type { ChargingStationData } from '@/types/ChargingStationType';
  32
  33 const props = defineProps<{
  34   chargingStations: ChargingStationData[];
  35   idTag: string;
  36 }>();
  37 </script>
  38
  39 <style>
  40 #cs-table {
  41   height: 100%;
  42   width: 100%;
  43   background-color: white;
  44   display: flex;
  45   flex-grow: 1;
  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 {
  54   height: fit-content;
  55   width: 100%;
  56   min-width: 100%;
  57   display: block;
  58 }
  59
  60 #cs-table__body {
  61   overflow: visible overlay;
  62   flex-grow: 1;
  63 }
  64
  65 .cs-table__row {
  66   width: 100%;
  67   display: flex;
  68   justify-content: center;
  69   align-items: center;
  70 }
  71
  72 #cs-table__head .cs-table__row {
  73   background-color: rgb(194, 188, 188);
  74 }
  75
  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,
  83 .cs-table__transaction-col,
  84 .cs-table__name-col,
  85 .cs-table__started-col,
  86 .cs-table__wsState-col,
  87 .cs-table__registration-status-col,
  88 .cs-table__model-col,
  89 .cs-table__vendor-col,
  90 .cs-table__firmware-col {
  91   height: 0.1%;
  92   width: 20%;
  93   padding-top: 0.2%;
  94   padding-bottom: 0.2%;
  95   text-align: center;
  96 }
  97 </style>