Merge pull request #1770 from openWB/feature-secondary-display

Feature secondary display

packages/helpermodules/command.py

@@ -16,6 +16,7 @@
 from control.chargepoint.chargepoint_template import get_autolock_plan_default, get_chargepoint_template_default
 
 # ToDo: move to module commands if implemented
+from helpermodules import pub
 from helpermodules.utils.run_command import run_command
 from modules.backup_clouds.onedrive.api import generateMSALAuthCode, retrieveMSALTokens
 
@@ -602,6 +603,18 @@ def removeMqttBridge(self, connection_id: str, payload: dict) -> None:
                              f'Die ID \'{payload["data"]["bridge"]}\' ist größer als die maximal vergebene '
                              f'ID \'{self.max_id_mqtt_bridge}\'.', MessageType.ERROR)
 
+    def chargepointReboot(self, connection_id: str, payload: dict) -> None:
+        pub.pub_single("openWB/set/command/primary/todo",
+                       {"command": "systemReboot", "data": {}},
+                       hostname=SubData.cp_data[f'cp{payload["data"]["chargepoint"]}'
+                                                ].chargepoint.chargepoint_module.config.configuration.ip_address)
+
+    def chargepointShutdown(self, connection_id: str, payload: dict) -> None:
+        pub.pub_single("openWB/set/command/primary/todo",
+                       {"command": "systemReboot", "data": {}},
+                       hostname=SubData.cp_data[payload["data"]["chargepoint"]
+                                                ].chargepoint.chargepoint_module.config.configuration.ip_address)
+
     def systemReboot(self, connection_id: str, payload: dict) -> None:
         pub_user_message(payload, connection_id, "Neustart wird ausgeführt.", MessageType.INFO)
         parent_file = Path(__file__).resolve().parents[2]

packages/modules/display_themes/cards/source/src/App.vue

@@ -84,9 +84,13 @@ export default {
     if (uri != "") {
       console.debug("search", uri);
       let params = new URLSearchParams(uri);
-      params.forEach((value, key) => {
-        this.mqttStore.updateSetting(key, parseInt(value));
-      });
+      if (params.has("data")) {
+        let data = JSON.parse(params.get("data"));
+        Object.entries(data).forEach(([key, value]) => {
+          console.log("updateSetting", key, value);
+          this.mqttStore.updateSetting(key, value);
+        });
+      }
     }
     // subscribe our topics
     this.doSubscribe(this.mqttTopicsToSubscribe);

packages/modules/display_themes/cards/source/src/components/NumberPad.vue

@@ -117,8 +117,9 @@ export default {
 }
 
 .pin-button {
-  min-width: 3em;
-  min-height: 3.5em;
+  min-height: 2em;
   flex-grow: 1;
+  font-size: 200%;
+  font-weight: bold;
 }
 </style>

packages/modules/display_themes/cards/source/src/components/Status/RebootButton.vue

@@ -39,7 +39,13 @@ export default {
      */
     confirm() {
       console.log("reboot requested");
-      this.$root.sendSystemCommand("systemReboot");
+      if (this.mqttStore.state.settings.parentChargePoint1 !== undefined) {
+        this.$root.sendSystemCommand("chargepointReboot", {
+          chargePoint: this.mqttStore.state.settings.parentChargePoint1,
+        });
+      } else {
+        this.$root.sendSystemCommand("systemReboot");
+      }
     },
   },
 };

packages/modules/display_themes/cards/source/src/components/Status/ShutdownButton.vue

@@ -39,7 +39,13 @@ export default {
      */
     confirm() {
       console.log("shutdown requested");
-      this.$root.sendSystemCommand("systemShutdown");
+      if (this.mqttStore.state.settings.parentChargePoint1 !== undefined) {
+        this.$root.sendSystemCommand("chargepointShutdown", {
+          chargePoint: this.mqttStore.state.settings.parentChargePoint1,
+        });
+      } else {
+        this.$root.sendSystemCommand("systemShutdown");
+      }
     },
   },
 };

packages/modules/display_themes/cards/source/src/stores/mqtt.js

@@ -3,6 +3,10 @@ import { defineStore } from "pinia";
 export const useMqttStore = defineStore("mqtt", {
   state: () => ({
     settings: {
+      localIp: undefined,
+      localBranch: undefined,
+      localCommit: undefined,
+      localVersion: undefined,
       parentChargePoint1: undefined,
       parentChargePoint2: undefined,
     },
@@ -795,35 +799,47 @@ export const useMqttStore = defineStore("mqtt", {
 
     /* system getters */
 
-    getSystemCurrentCommit(state) {
-      if (state.topics["openWB/system/current_commit"]) {
-        return state.topics["openWB/system/current_commit"];
+    getSystemTime(state) {
+      if (state.topics["openWB/system/time"]) {
+        return new Date(
+          state.topics["openWB/system/time"] * 1000,
+        ).toLocaleString();
       }
       return undefined;
     },
     getSystemIp(state) {
+      if (state.settings.localIp !== undefined) {
+        return state.settings.localIp;
+      }
       if (state.topics["openWB/system/ip_address"]) {
         return state.topics["openWB/system/ip_address"];
       }
       return undefined;
     },
+    getSystemVersion(state) {
+      if (state.settings.localVersion !== undefined) {
+        return state.settings.localVersion;
+      }
+      if (state.topics["openWB/system/version"]) {
+        return state.topics["openWB/system/version"];
+      }
+      return undefined;
+    },
     getSystemBranch(state) {
+      if (state.settings.localBranch !== undefined) {
+        return state.settings.localBranch;
+      }
       if (state.topics["openWB/system/current_branch"]) {
         return state.topics["openWB/system/current_branch"];
       }
       return undefined;
     },
-    getSystemTime(state) {
-      if (state.topics["openWB/system/time"]) {
-        return new Date(
-          state.topics["openWB/system/time"] * 1000,
-        ).toLocaleString();
+    getSystemCurrentCommit(state) {
+      if (state.settings.localCommit !== undefined) {
+        return state.settings.localCommit;
       }
-      return undefined;
-    },
-    getSystemVersion(state) {
-      if (state.topics["openWB/system/version"]) {
-        return state.topics["openWB/system/version"];
+      if (state.topics["openWB/system/current_commit"]) {
+        return state.topics["openWB/system/current_commit"];
       }
       return undefined;
     },

packages/modules/display_themes/cards/source/src/views/ChargePointsView.vue

@@ -342,11 +342,15 @@ export default {
     </template>
     <i-form>
       <i-form-group>
-        <i-form-label>Lademodus</i-form-label>
-        <i-button-group block>
+        <i-button-group
+          block
+          vertical
+        >
           <i-button
             v-for="mode in filteredChargeModes"
             :key="mode.id"
+            size="lg"
+            class="large-button"
             outline
             :color="mode.class != 'dark' ? mode.class : 'light'"
             :active="
@@ -373,6 +377,8 @@ export default {
         <i-form-label>Priorität</i-form-label>
         <i-button-group block>
           <i-button
+            size="lg"
+            class="large-button"
             :color="
               mqttStore.getChargePointConnectedVehiclePriority(
                 modalChargePointId,
@@ -424,6 +430,8 @@ export default {
           <i-button
             v-for="vehicle in vehicleList"
             :key="vehicle.id"
+            size="lg"
+            class="large-button"
             :active="
               mqttStore.getChargePointConnectedVehicleId(modalChargePointId) ==
                 vehicle.id
@@ -1054,6 +1062,12 @@ export default {
   grid-gap: var(--spacing);
 }
 
+.large-button {
+  height: 3.5rem;
+  font-size: 1.5rem;
+  padding: 0.75rem 1.5rem;
+}
+
 :deep(.toggle .toggle-label::before) {
   border-color: var(--color--dark-45);
 }

web/display/index.html

@@ -5,17 +5,17 @@
 	<base href="/openWB/web/">
 	<meta charset="UTF-8">
 	<!-- display style -->
-	<link rel="stylesheet" type="text/css" href="display/style.css?ver=20230322">
+	<link rel="stylesheet" type="text/css" href="display/style.css?ver=20240730">
 	<script>
 		window.addEventListener("load", () => {
 			// load scripts synchronous in order specified
 			var scriptsToLoad = [
 				// load mqtt library
 				'js/mqttws31.js',
 				// functions for processing messages
-				'display/processAllMqttMsg.js?ver=20240716',
+				'display/processAllMqttMsg.js?ver=20240730',
 				// functions performing mqtt and start mqtt-service
-				'display/setupMqttServices.js?ver=20230825',
+				'display/setupMqttServices.js?ver=20240730',
 			];
 
 			scriptsToLoad.forEach((src) => {
@@ -24,15 +24,34 @@
 				script.async = false;
 				document.body.appendChild(script);
 			});
+			document.getElementById("general").addEventListener("click", () => {
+				document.getElementById("log").classList.toggle("hide");
+			});
 		});
 	</script>
 </head>
 
 <body>
 	<div class="wrapper">
 		<div id="notReady">
-			<img src="img/openWB_logo_dark.png" class="center" />
-			<p id="log">Lade Einstellungen...</p>
+			<div id="logo">
+				<img src="img/openWB_logo_dark.png" class="center" />
+				<div id="progress">
+					<div id="progress-value"></div>
+				</div>
+			</div>
+			<p id="log" class="hide">Lade Einstellungen...</p>
+			<div id="info">
+				<p id="boot" class="warning">
+					Der Startvorgang ist noch nicht abgeschlossen.
+				</p>
+				<p id="update" class="warning">
+					Es wird gerade ein Update ausgeführt.
+				</p>
+				<p id="general">
+					Display Theme wird gestartet. Für Details hier klicken.
+				</p>
+			</div>
 		</div>
 		<iframe id="displayTarget" src="about:blank" class="hide"></iframe>
 	</div>

web/display/processAllMqttMsg.js

@@ -35,7 +35,7 @@ function setIframeSource() {
 		var host = "";
 		var query = new URLSearchParams();
 		var destination = "";
-		if (data["openWB/general/extern"]) {
+		if (data["openWB/general/extern"] === true) {
 			// load secondary display (from secondary openWB)
 			switch (data["openWB/general/extern_display_mode"]) {
 				case "local":
@@ -48,9 +48,18 @@ function setIframeSource() {
 				default:
 					// retrieve display theme from primary
 					host = data["openWB/internal_chargepoint/global_data"]["parent_ip"];
-					// we need to know how to map local charge points to primary
-					query.append("parentChargePoint1", data["openWB/internal_chargepoint/0/data/parent_cp"]);
-					query.append("parentChargePoint2", data["openWB/internal_chargepoint/1/data/parent_cp"]);
+					const queryObject = {
+						// we need our own ip address for status information
+						localIp: data["openWB/system/ip_address"],
+						// we need to know the current branch, commit and version
+						localBranch: data["openWB/system/current_branch"],
+						localCommit: data["openWB/system/current_commit"],
+						localVersion: data["openWB/system/version"],
+						// we need to know how to map local charge points to primary
+						parentChargePoint1: data["openWB/internal_chargepoint/0/data/parent_cp"],
+						parentChargePoint2: data["openWB/internal_chargepoint/1/data/parent_cp"]
+					}
+					query.append("data", JSON.stringify(queryObject));
 					break;
 			}
 			// load display from primary or local
@@ -67,12 +76,8 @@ function setIframeSource() {
 
 			if (data["openWB/optional/int_display/only_local_charge_points"]) {
 				const searchParams = new URLSearchParams(location.search);
-
-				if (searchParams.has("parentChargePoint1")) {
-					query.append("parentChargePoint1", searchParams.get("parentChargePoint1"));
-				}
-				if (searchParams.has("parentChargePoint2")) {
-					query.append("parentChargePoint2", searchParams.get("parentChargePoint2"));
+				if (searchParams.has("data")) {
+					query.append("data", searchParams.get("data"));
 				}
 			}
 			destination = `${location.protocol}//${host}/openWB/web/display/themes/${theme}/?${query.toString()}`;
@@ -118,6 +123,16 @@ function addLog(message) {
 function handleMessage(topic, payload) {
 	addLog(`Topic: ${topic} Payload: ${payload}`);
 	// receives all topics and calls respective function to process them
+	if (!data["openWB/system/boot_done"]) {
+		document.getElementById("boot").classList.remove("hide");
+	} else {
+		document.getElementById("boot").classList.add("hide");
+	}
+	if (data["openWB/system/update_in_progress"]) {
+		document.getElementById("update").classList.remove("hide");
+	} else {
+		document.getElementById("update").classList.add("hide");
+	}
 	if (topic.match(/^openwb\/system\//i)) { processSystemTopics(topic, payload); }
 	setIframeSource();
 }  // end handleMessage