enhance display theme wrapper

openWB · Jul 30, 2024 · cff1c8e · cff1c8e
1 parent 217bf48
commit cff1c8e
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 14 deletions.
diff --git a/web/display/index.html b/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>

diff --git a/web/display/processAllMqttMsg.js b/web/display/processAllMqttMsg.js
@@ -123,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

diff --git a/web/display/setupMqttServices.js b/web/display/setupMqttServices.js
@@ -39,6 +39,7 @@ var options = {
 	onSuccess: function () {
 		console.debug("connected!");
 		retries = 0;
+		updateProgress();
 		Object.keys(topicsToSubscribe).forEach((topic) => {
 			client.subscribe(topic, { qos: 0 });
 		});
@@ -83,6 +84,7 @@ client.onMessageArrived = function (message) {
 		secondaryTopicsToSubscribe[message.destinationName] = true;
 	}
 	data[message.destinationName] = JSON.parse(message.payloadString);
+	updateProgress();
 	handleMessage(message.destinationName, message.payloadString);
 };
 
@@ -100,19 +102,45 @@ function publish(payload, topic) {
 	client.send(message);
 }
 
-function allTopicsReceived() {
-	var ready = true;
+function totalTopicCount() {
+	var counter = Object.keys(topicsToSubscribe).length;
+	if (data["openWB/general/extern"] === true) {
+		counter += Object.keys(secondaryTopicsToSubscribe).length;
+	} else {
+		Object.keys(primaryTopicsToSubscribe).forEach((topic) => {
+			counter += primaryTopicsToSubscribe[topic];
+		});
+	}
+	return counter;
+}
+
+function missingTopics() {
+	var counter = 0;
 	Object.keys(topicsToSubscribe).forEach((topic) => {
-		ready &= topicsToSubscribe[topic];
+		if (topicsToSubscribe[topic] === false) {
+			counter++;
+		};
 	});
 	if (data["openWB/general/extern"] === true) {
 		Object.keys(secondaryTopicsToSubscribe).forEach((topic) => {
-			ready &= secondaryTopicsToSubscribe[topic];
+			if (secondaryTopicsToSubscribe[topic] === false) {
+				counter++;
+			};
 		});
 	} else {
 		Object.keys(primaryTopicsToSubscribe).forEach((topic) => {
-			ready &= primaryTopicsToSubscribe[topic];
+			if (primaryTopicsToSubscribe[topic] === false) {
+				counter++;
+			};
 		});
 	}
-	return ready;
+	return counter;
+}
+
+function allTopicsReceived() {
+	return (missingTopics() == 0);
+}
+
+function updateProgress() {
+	document.getElementById("progress-value").style.width = `${(totalTopicCount() - missingTopics()) / totalTopicCount() * 100}%`;
 }
diff --git a/web/display/style.css b/web/display/style.css
@@ -29,13 +29,17 @@ iframe {
 }
 
 .hide {
-	display: none;
+	display: none !important;
 }
 
 #notReady {
 	width: 80vw;
-	height: 80vh;
-	overflow-y: auto;
+	height: 90vh;
+	padding-top: 10vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: stretch;
 }
 
 #log {
@@ -44,10 +48,69 @@ iframe {
 	white-space: nowrap;
 	padding-bottom: 0;
 	margin-bottom: 0;
+	flex-grow: 1;
 }
 
 .center {
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
 }
+
+#info p {
+	border: 1px solid #fff;
+	border-radius: 5px;
+	padding: 0.5em;
+	color: #fff;
+	background-color: rgba(255, 255, 255, 0.1);
+	box-shadow: 0px 0px 6px 1px #fff;
+	text-align: center;
+	margin: 6px;
+}
+
+#info p::before {
+	display: inline-block;
+	border: 1px solid #fff;
+	border-radius: 0.75em;
+	width: 1.5em;
+	height: 1.5em;
+	text-align: center;
+	background: #fff;
+	color: #000;
+}
+
+#info p:not(.warning)::before {
+	content: '\2139';
+}
+
+#info p.warning::before {
+	content: '!';
+	font-weight: bolder;
+}
+
+#info p.warning {
+	background-color: rgba(255, 202, 40, 0.1);
+	border-color: #ffca28;
+	box-shadow: 0px 0px 6px 1px #ffca28;
+}
+
+#progress {
+	margin-top: 0.75em;
+	width: auto;
+	height: 1em;
+	background: rgba(255,255,255,0.1);
+	justify-content: flex-start;
+	border-radius: 100px;
+	align-items: center;
+	position: relative;
+	padding: 0 5px;
+	display: flex;
+}
+
+#progress-value {
+	border-radius: 0.25em;
+	background: #00ff0a;
+	height: 0.5em;
+	width: 0;
+	box-shadow: 0px 0px 12px 2px #00ff0a;
+}