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

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