X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=ui%2Fweb%2Fsrc%2Fviews%2FChargingStationsView.vue;h=695b88608b4df60c0e90ff848167057ddcbcdfb7;hb=350f7bd5cff80ae49bb8e6145f2e59caa8e9842a;hp=18b0cc028d1373845cf5a3f4e73f8c83339a5958;hpb=a4868fd7e236faf73e62efeeadad20119e2d96eb;p=e-mobility-charging-stations-simulator.git
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 18b0cc02..695b8860 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -1,118 +1,299 @@
-
-
-
-
-
-
-
+
(state.reload = randomUUID()))"
+ :loading="state.gettingChargingStations"
+ @click="getChargingStations()"
/>
0"
+ :key="state.renderChargingStations"
+ :charging-stations="$chargingStations.value"
+ @need-refresh="
+ () => {
+ state.renderAddChargingStations = randomUUID()
+ state.renderChargingStations = randomUUID()
+ }
"
- :key="state.reload"
- :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
/>
@@ -150,17 +335,44 @@ const stopSimulator = (): void => {
#ui-server-container {
display: flex;
- flex-direction: row;
+ justify-content: center;
+ border-style: outset;
}
#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;
+ position: sticky;
+ top: 0;
+}
+
+.simulator-start-button {
+ color: ivory;
+ background-color: green;
+}
+
+.simulator-start-button:hover {
+ background-color: rgb(0, 98, 0);
+}
+
+.simulator-stop-button {
+ color: ivory;
+ background-color: red;
+}
+
+.simulator-stop-button:hover {
+ background-color: rgb(225, 0, 0);
}
#action-button {
@@ -168,13 +380,9 @@ const stopSimulator = (): void => {
}
#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 {
@@ -182,12 +390,13 @@ const stopSimulator = (): void => {
}
#reload-button:active {
- background-color: red;
+ background-color: darkblue;
}
#action {
- color: white;
+ min-width: max-content;
+ color: ivory;
background-color: black;
- padding: 1%;
+ padding: 0.8%;
}