X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;ds=sidebyside;f=ui%2Fweb%2Fsrc%2Fviews%2FChargingStationsView.vue;h=094988b101d4f9df3184437e6609f022e046b994;hb=239bd875c259755721a45f2e677bc6cb73d88f7d;hp=c2e12cb58c088cbe3cefc67ee4ceb9c9f2e1a21b;hpb=ca1e5439d7a19520d752a8c60513d4229b118e35;p=e-mobility-charging-stations-simulator.git
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index c2e12cb5..094988b1 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,36 +1,237 @@
-
-
+
+
+
+
+ {{ 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()
+ }
+ "
+ />
@@ -67,19 +296,45 @@ function stopSimulator(): void {
flex-direction: column;
}
+#ui-server-container {
+ display: flex;
+ justify-content: center;
+}
+
+#ui-server-selector {
+ width: 100%;
+ background-color: rgb(239, 239, 239);
+ text-align: center;
+}
+
+#ui-server-selector:hover {
+ background-color: lightgrey;
+}
+
#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;
}
#reload-button:hover {
@@ -87,10 +342,12 @@ function stopSimulator(): void {
}
#reload-button:active {
- background-color: red;
+ background-color: darkblue;
}
-#simulator-button {
- flex: auto;
+#action {
+ color: ivory;
+ background-color: black;
+ padding: 1%;
}