repositories
/
e-mobility-charging-stations-simulator.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
refactor(ui): cleanup props usage
[e-mobility-charging-stations-simulator.git]
/
ui
/
web
/
src
/
components
/
charging-stations
/
CSTable.vue
diff --git
a/ui/web/src/components/charging-stations/CSTable.vue
b/ui/web/src/components/charging-stations/CSTable.vue
index c80c190b5e37b7b0af82acfa9a70cfa218046f29..cc826287e2384f7600d1494ca8a5e18f4917f950 100644
(file)
--- a/
ui/web/src/components/charging-stations/CSTable.vue
+++ b/
ui/web/src/components/charging-stations/CSTable.vue
@@
-5,10
+5,6
@@
</caption>
<thead id="cs-table__head">
<tr class="cs-table__row">
</caption>
<thead id="cs-table__head">
<tr class="cs-table__row">
- <th scope="col" class="cs-table__column">Action</th>
- <th scope="col" class="cs-table__column">Connector</th>
- <th scope="col" class="cs-table__column">Status</th>
- <th scope="col" class="cs-table__column">Transaction</th>
<th scope="col" class="cs-table__column">Name</th>
<th scope="col" class="cs-table__column">Started</th>
<th scope="col" class="cs-table__column">Supervision Url</th>
<th scope="col" class="cs-table__column">Name</th>
<th scope="col" class="cs-table__column">Started</th>
<th scope="col" class="cs-table__column">Supervision Url</th>
@@
-17,27
+13,27
@@
<th scope="col" class="cs-table__column">Template</th>
<th scope="col" class="cs-table__column">Vendor</th>
<th scope="col" class="cs-table__column">Model</th>
<th scope="col" class="cs-table__column">Template</th>
<th scope="col" class="cs-table__column">Vendor</th>
<th scope="col" class="cs-table__column">Model</th>
- <th scope="col" class="cs-table__column">Firmware Version</th>
+ <th scope="col" class="cs-table__column">Firmware</th>
+ <th scope="col" class="cs-table__column">Actions</th>
+ <th scope="col" class="cs-table__connectors-column">Connector(s)</th>
</tr>
</thead>
<tbody id="cs-table__body">
<CSData
</tr>
</thead>
<tbody id="cs-table__body">
<CSData
- v-for="chargingStation in
props.
chargingStations"
+ v-for="chargingStation in chargingStations"
:key="chargingStation.stationInfo?.hashId"
:charging-station="chargingStation"
:key="chargingStation.stationInfo?.hashId"
:charging-station="chargingStation"
- :id-tag="props.idTag"
/>
</tbody>
</table>
</template>
<script setup lang="ts">
/>
</tbody>
</table>
</template>
<script setup lang="ts">
-import CSData from '
.
/CSData.vue'
+import CSData from '
@/components/charging-stations
/CSData.vue'
import type { ChargingStationData } from '@/types'
import type { ChargingStationData } from '@/types'
-
const props =
defineProps<{
+defineProps<{
chargingStations: ChargingStationData[]
chargingStations: ChargingStationData[]
- idTag: string
}>()
</script>
}>()
</script>
@@
-53,7
+49,6
@@
const props = defineProps<{
empty-cells: show;
}
empty-cells: show;
}
-#cs-table__head,
#cs-table__body {
height: fit-content;
width: 100%;
#cs-table__body {
height: fit-content;
width: 100%;
@@
-61,11
+56,9
@@
const props = defineProps<{
flex-direction: column;
}
flex-direction: column;
}
-#cs-table__body {
- overflow: visible overlay;
-}
-
#cs-table__caption {
#cs-table__caption {
+ color: white;
+ background-color: black;
font-size: 1.5rem;
font-weight: bold;
padding: 0.5rem;
font-size: 1.5rem;
font-weight: bold;
padding: 0.5rem;
@@
-75,21
+68,27
@@
const props = defineProps<{
height: fit-content;
width: 100%;
display: flex;
height: fit-content;
width: 100%;
display: flex;
+ flex-direction: row;
justify-content: center;
align-items: center;
}
justify-content: center;
align-items: center;
}
-#cs-table__head .cs-table__row {
- background-color: rgb(194, 188, 188);
-}
-
.cs-table__row:nth-of-type(even) {
.cs-table__row:nth-of-type(even) {
- background-color:
rgb(223, 217, 217)
;
+ background-color:
whitesmoke
;
}
.cs-table__column {
height: fit-content;
}
.cs-table__column {
height: fit-content;
- width: calc(
100% / 13
);
+ width: calc(
65% / 10
);
text-align: center;
}
text-align: center;
}
+
+#cs-table__head .cs-table__row {
+ background-color: lightgrey;
+}
+
+.cs-table__connectors-column {
+ height: fit-content;
+ width: 35%;
+}
</style>
</style>