X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fviews%2FChargingStationsView.vue;h=fe361c1c1766dfe11753890146dfb5c5ed4f36f6;hb=4b10e4f94fe91fab12f8ba298137c49fc295774c;hp=d0acc4e3562c9e3a1b5ffb9f531cb5adc82ec614;hpb=878855a218443d8d0a610f1e79d8d4afaf07153a;p=e-mobility-charging-stations-simulator.git
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index d0acc4e3..fe361c1c 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,39 +1,225 @@
+
+
+
-
-
- startSimulator()"
+ :off="() => stopSimulator()"
+ >
+ {{ state.simulatorState?.started === true ? 'Stop' : 'Start' }} Simulator
+
+ {
+ state.renderChargingStations = randomUUID()
+ }
+ "
>
+ Add Charging Stations
+
$router.go(0))"
+ :loading="state.loading"
+ @click="loadChargingStations(() => (state.renderChargingStations = randomUUID()))"
/>
-
+ {
+ state.renderAddChargingStations = randomUUID()
+ state.renderChargingStations = randomUUID()
+ }
+ "
+ />
@@ -70,13 +284,23 @@ function stopSimulator(): void {
flex-direction: column;
}
+#ui-server-container {
+ display: flex;
+ flex-direction: row;
+}
+
+#ui-server-selector {
+ width: 100%;
+ text-align: center;
+}
+
#buttons-container {
display: flex;
flex-direction: row;
}
-#button {
- flex: auto;
+#action-button {
+ flex: none;
}
#reload-button {
@@ -94,6 +318,12 @@ function stopSimulator(): void {
}
#reload-button:active {
- background-color: red;
+ background-color: darkblue;
+}
+
+#action {
+ color: white;
+ background-color: black;
+ padding: 1%;
}