wrapper styling

Author: benderl

web/index.html

@@ -14,9 +14,9 @@
 				// load mqtt library
 				'js/mqttws31.js',
 				// functions for processing messages
-				'processAllMqttMsg.js?ver=20230127',
+				'processAllMqttMsg.js?ver=20230926',
 				// functions performing mqtt and start mqtt-service
-				'setupMqttServices.js?ver=20230127',
+				'setupMqttServices.js?ver=20230926',
 			];
 
 			scriptsToLoad.forEach((src) => {
@@ -40,14 +40,15 @@
 			</div>
 			<p id="log">Lade Einstellungen...</p>
 			<div id="info">
-				<p id="isss" class="hide">
-					Diese openWB ist nur als Ladepunkt konfiguriert. Alle Einstellungen erfolgen über die Haupt openWB.<br />
-					Die Betriebsart dieser openWB kann in den <a href="settings/">Einstellungen</a> geändert werden.
+				<p id="secondary-mode" class="warning hide">
+					Der Steuerungsmodus dieser openWB ist auf "secondary" konfiguriert. Alle Einstellungen erfolgen über die
+					übergeordnete <a href="">primary openWB</a>. Der Steuerungsmodus dieser openWB kann in den
+					<a href="settings/">Einstellungen</a> geändert werden.
 				</p>
-				<p id="boot" class="hide">
+				<p id="boot" class="warning hide">
 					Der Startvorgang ist noch nicht abgeschlossen.
 				</p>
-				<p id="update" class="hide">
+				<p id="update" class="warning hide">
 					Es wird gerade ein Update ausgeführt.
 				</p>
 				<p id="general">

web/processAllMqttMsg.js

@@ -6,6 +6,7 @@ function setIframeSource() {
 	if (allTopicsReceived()) {
 		const startup = document.getElementById("notReady");
 		const iframe = document.getElementById("themeTarget");
+		const logMessages = document.getElementById("log");
 		if (!data["openWB/system/boot_done"]) {
 			addLog("backend still booting");
 			startup.classList.remove("hide");
@@ -26,7 +27,10 @@ function setIframeSource() {
 			console.log("openWB is configured as external charge point");
 			startup.classList.remove("hide");
 			iframe.classList.add("hide");
+			logMessages.classList.add("hide");
 			return;
+		} else {
+			logMessages.classList.remove("hide");
 		}
 
 		var request = new XMLHttpRequest();
@@ -69,9 +73,9 @@ function addLog(message) {
 function handleMessage(topic, payload) {
 	addLog(`Topic: ${topic} Payload: ${payload}`);
 	if (data["openWB/general/extern"]) {
-		document.getElementById("isss").classList.remove("hide");
+		document.getElementById("secondary-mode").classList.remove("hide");
 	} else {
-		document.getElementById("isss").classList.add("hide");
+		document.getElementById("secondary-mode").classList.add("hide");
 	}
 	if (!data["openWB/system/boot_done"]) {
 		document.getElementById("boot").classList.remove("hide");

web/style.css

@@ -70,10 +70,10 @@ a {
 
 #progress-value {
 	border-radius: 0.25em;
-	background: #fff;
+	background: #00ff0a;
 	height: 0.5em;
 	width: 0;
-	box-shadow: 0px 0px 12px 2px white;
+	box-shadow: 0px 0px 12px 2px #00ff0a;
 }
 
 #log {
@@ -94,7 +94,6 @@ a {
 
 #info p::before {
 	display: inline-block;
-	content: '\2139';
 	border: 1px solid #fff;
 	border-radius: 0.75em;
 	width: 1.5em;
@@ -103,3 +102,17 @@ a {
 	background: #fff;
 	color: #000;
 }
+
+#info p:not(.warning)::before {
+	content: '\2139';
+}
+
+#info p.warning::before {
+	content: '!';
+	font-weight: bolder;
+}
+
+#info p.warning {
+	background-color: #ffca284d;
+	border-color: #ffca28;
+}