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__stopped-col">Stopped</th>
  11         <th scope="col" class="cs-table__registration-status-col">Registration Status</th>
  12         <th scope="col" class="cs-table__vendor-col">Vendor</th>
  13         <th scope="col" class="cs-table__model-col">Model</th>
  14         <th scope="col" class="cs-table__firmware-col">Firmware Version</th>
  15       </tr>
  16     </thead>
  17     <tbody id="cs-table__body">
  18       <CSData
  19         v-for="chargingStation in chargingStations"
  20         :key="chargingStation.hashId"
  21         :charging-station="chargingStation"
  22         :idTag="props.idTag"
  23       />
  24     </tbody>
  25   </table>
  26 </template>
  27
  28 <script setup lang="ts">
  29 import CSData from './CSData.vue';
  30 import type { ChargingStationData } from '@/types/ChargingStationType';
  31
  32 const props = defineProps<{
  33   chargingStations: Record<string, ChargingStationData>;
  34   idTag: string;
  35 }>();
  36 </script>
  37
  38 <style>
  39 #cs-table {
  40   height: 100%;
  41   width: 100%;
  42   background-color: white;
  43   display: flex;
  44   flex-grow: 1;
  45   flex-direction: column;
  46   overflow: auto hidden;
  47   border-collapse: collapse;
  48   empty-cells: show;
  49 }
  50
  51 #cs-table__head,
  52 #cs-table__body {
  53   width: 100%;
  54   min-width: 930px;
  55   display: block;
  56 }
  57
  58 #cs-table__body {
  59   overflow: visible overlay;
  60   flex-grow: 1;
  61 }
  62
  63 .cs-table__row {
  64   width: 100%;
  65   display: flex;
  66   justify-content: center;
  67   align-items: center;
  68 }
  69
  70 #cs-table__head .cs-table__row {
  71   background-color: rgb(194, 188, 188);
  72 }
  73
  74 .cs-table__row:nth-of-type(even) {
  75   background-color: rgb(223, 217, 217);
  76 }
  77
  78 .cs-table__action-col,
  79 .cs-table__connector-col,
  80 .cs-table__status-col,
  81 .cs-table__transaction-col,
  82 .cs-table__name-col,
  83 .cs-table__stopped-col,
  84 .cs-table__registration-status-col,
  85 .cs-table__model-col,
  86 .cs-table__vendor-col,
  87 .cs-table__firmware-col {
  88   height: 0.1%;
  89   width: 20%;
  90   padding-top: 0.2%;
  91   padding-bottom: 0.2%;
  92   text-align: center;
  93 }
  94 </style>