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

   1 <template>
   2   <table id="cs-table">
   3     <caption id="cs-table__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__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>
  21       </tr>
  22     </thead>
  23     <tbody id="cs-table__body">
  24       <CSData
  25         v-for="chargingStation in props.chargingStations"
  26         :key="chargingStation.stationInfo?.hashId"
  27         :charging-station="chargingStation"
  28         :id-tag="props.idTag"
  29       />
  30     </tbody>
  31   </table>
  32 </template>
  33
  34 <script setup lang="ts">
  35 import CSData from '@/components/charging-stations/CSData.vue'
  36 import type { ChargingStationData } from '@/types'
  37
  38 const props = defineProps<{
  39   chargingStations: ChargingStationData[]
  40   idTag: string
  41 }>()
  42 </script>
  43
  44 <style>
  45 #cs-table {
  46   height: fit-content;
  47   width: 100%;
  48   background-color: white;
  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 {
  58   height: fit-content;
  59   width: 100%;
  60   display: flex;
  61   flex-direction: column;
  62 }
  63
  64 #cs-table__body {
  65   overflow: visible overlay;
  66 }
  67
  68 #cs-table__caption {
  69   font-size: 1.5rem;
  70   font-weight: bold;
  71   padding: 0.5rem;
  72 }
  73
  74 .cs-table__row {
  75   height: fit-content;
  76   width: 100%;
  77   display: flex;
  78   justify-content: center;
  79   align-items: center;
  80 }
  81
  82 #cs-table__head .cs-table__row {
  83   background-color: rgb(194, 188, 188);
  84 }
  85
  86 .cs-table__row:nth-of-type(even) {
  87   background-color: rgb(223, 217, 217);
  88 }
  89
  90 .cs-table__column {
  91   height: fit-content;
  92   width: calc(100% / 13);
  93   text-align: center;
  94 }
  95 </style>