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