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