fix styling of chargepoint messages

Author: benderl

web/themes/dark/processAllMqttMsg.js

@@ -592,20 +592,23 @@ function processChargepointMessages(mqttmsg, mqttpayload) {
 		var parent = $('.chargepoint-card[data-cp="' + index + '"]');  // get parent row element for charge point
 		parent.find('.chargepoint-faultstate[data-option="'+mqttpayload+'"').removeClass('hide');
 		parent.find('.chargepoint-faultstate').not('[data-option="'+mqttpayload+'"]').addClass('hide');
-		textElement = parent.find('.chargepoint-faultstr');
+		// textElement = parent.find('.chargepoint-faultstr');
+		alertElement = parent.find('.chargepoint-alert');
 		switch (parseInt(mqttpayload, 10)){
 			case 1: // warning
-				$(textElement).removeClass('hide');
-				$(textElement).addClass('alert-warning');
-				$(textElement).removeClass('alert-danger');
+				$(alertElement).addClass('alert-warning');
+				$(alertElement).removeClass('alert-danger');
+				$(alertElement).removeClass('hide');
 				break;
 			case 2: // error
-				$(textElement).removeClass('hide');
-				$(textElement).removeClass('alert-warning');
-				$(textElement).addClass('alert-danger');
+				$(alertElement).removeClass('alert-warning');
+				$(alertElement).addClass('alert-danger');
+				$(alertElement).removeClass('hide');
 				break;
 			default:
-				$(textElement).addClass('hide');
+				$(alertElement).addClass('hide');
+				$(alertElement).removeClass('alert-warning');
+				$(alertElement).removeClass('alert-danger');
 		}
 	}
 	else if ( mqttmsg.match( /^openWB\/chargepoint\/[1-9][0-9]*\/get\/power_all$/i ) ) {

web/themes/dark/theme.php

@@ -238,15 +238,15 @@ function getCookie(cname) {
 							</div>
 							<div class="row">
 								<div class="col pr-0">
-									Import
+									Bezug
 								</div>
 								<div class="grid-import col pl-0 text-right">
 									XX kWh
 								</div>
 							</div>
 							<div class="row">
 								<div class="col pr-0">
-									Export
+									Einspeisung
 								</div>
 								<div class="grid-export col pl-0 text-right">
 									XX kWh
@@ -336,6 +336,7 @@ function getCookie(cname) {
 									XX kWh
 								</div>
 							</div>
+							<!-- Preparation for bidirectional charging V2H/V2G
 							<div class="row">
 								<div class="col pr-0">
 									Entladen
@@ -344,6 +345,7 @@ function getCookie(cname) {
 									XX kWh
 								</div>
 							</div>
+							-->
 						</div>
 					</div>
 				</div>
@@ -436,10 +438,12 @@ function getCookie(cname) {
 						</div>
 						<div class="form-row">
 							<div class="col-3">
-								<!-- <i class="chargepoint-faultstate fas fa-check-circle text-success hide" data-option="0"></i> -->
-								<i class="chargepoint-faultstate fas fa-exclamation-triangle text-warning hide" data-option="1"></i>
-								<i class="chargepoint-faultstate fas fa-times-circle text-danger hide" data-option="2"></i>
-								<span class="chargepoint-faultstr hide"></span>
+								<div class="chargepoint-alert alert m-0 px-1 py-0">
+									<!-- <i class="chargepoint-faultstate fas fa-check-circle text-success hide" data-option="0"></i> -->
+									<i class="chargepoint-faultstate fas fa-exclamation-triangle text-warning hide" data-option="1"></i>
+									<i class="chargepoint-faultstate fas fa-times-circle text-danger hide" data-option="2"></i>
+									<span class="chargepoint-faultstr"></span>
+								</div>
 							</div>
 							<div class="col-3 chargepoint-vehiclename">?</div>
 							<div class="col-3">