X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fviews%2FChargingStationsView.vue;h=6f589ccc6a8030136f4449ac5de1a2e64daaf78e;hb=c63085548339556d66ced562e9649a84d0544ff4;hp=03d0ee2b0ff1f50f64001597543d486f008a3220;hpb=de3e2a49ef1c8b39ab1992c7e217aec48c67aa90;p=e-mobility-charging-stations-simulator.git
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 03d0ee2b..6f589ccc 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,120 +1,225 @@
-
-
-
-
-
-
-
+
(state.renderChargingStationsList = randomUUID()))"
+ @click="loadChargingStations(() => (state.renderChargingStations = randomUUID()))"
/>
{
+ state.renderAddChargingStations = randomUUID()
+ state.renderChargingStations = randomUUID()
+ }
+ "
/>
@@ -188,31 +299,43 @@ const stopSimulator = (): void => {
#ui-server-container {
display: flex;
- flex-direction: row;
+ justify-content: center;
}
#ui-server-selector {
width: 100%;
+ background-color: rgb(239, 239, 239);
+ font: small-caption;
text-align: center;
}
+#ui-server-selector:hover {
+ background-color: rgb(229, 229, 229);
+}
+
#buttons-container {
display: flex;
flex-direction: row;
}
+.simulator-start-button {
+ color: ivory;
+ background-color: green;
+}
+
+.simulator-stop-button {
+ color: ivory;
+ background-color: red;
+}
+
#action-button {
flex: none;
}
#reload-button {
- flex: auto;
- color: white;
+ color: ivory;
background-color: blue;
- font-size: 1.5rem;
- font-weight: bold;
- align-items: center;
- justify-content: center;
+ font-size: 2rem;
}
#reload-button:hover {
@@ -220,11 +343,11 @@ const stopSimulator = (): void => {
}
#reload-button:active {
- background-color: red;
+ background-color: darkblue;
}
#action {
- color: white;
+ color: ivory;
background-color: black;
padding: 1%;
}