index.html: fix LCDlock checkbox

Author: mstegen

SmartEVSE-3/data/index.html

@@ -42,9 +42,6 @@
 
               let minCurrent=parseInt(data.settings.current_min.toFixed(1));
               let maxCurrent=parseInt(data.settings.current_max.toFixed(1));
-              let lcdlock=parseInt(data.settings.lcdlock);
-              if (lcdlock)
-                document.getElementById("lcdlock").checked = true;
 
               // Initialize at page load
               // value 0 = no override
@@ -262,6 +259,16 @@
                 $('#mqtt_topic_prefix').val(data.mqtt.topic_prefix);
             }
 
+            if (data.settings.lcdlock == 1) {
+              document.getElementById("lcdlock").checked = true;
+              document.getElementById("lcdlock_label").classList.remove("ui-checkbox-off")
+              document.getElementById("lcdlock_label").classList.add("ui-checkbox-on")
+            } else {
+              document.getElementById("lcdlock").checked = false;
+              document.getElementById("lcdlock_label").classList.remove("ui-checkbox-on")
+              document.getElementById("lcdlock_label").classList.add("ui-checkbox-off")
+            }            
+
             if (data.ocpp) {
               if (data.ocpp.mode == "Enabled") {
                 $('[id=ocpp_settings]').show();
@@ -1057,12 +1064,16 @@ <h1 id="serialnr" class="h5 mb-0 text-white-800">SmartEVSE-</h1>
                                           <button onclick="update()" style="width: 100px; display:inline-block;" title="Update your firmware">Update</button>
                                           <button onclick="rawData()" style="width: 120px; display:inline-block;" title="Display your settings in JSON format">Raw Data</button>
                                         </div>
-<!--                                        <div class="col">
-                                          <label for="lcdlock" style="width: 140px; display:inline-block;" title="Lock buttons on LCD screen">LCD Lock</label>
-                                          <input type="checkbox" id="lcdlock" value="lcdlock" onclick="toggleLCDlock()">
-                                        </div>
--->                                        
                                     </div>
+                                    <div class="row no-gutters align-items-center">
+                                      <div class="col-auto h5 mb-0 mr-3 font-weight-bold text-gray-800" style="width: 120px;">
+                                        LCD:
+                                      </div>
+                                      <div class="col">
+                                          <input type="checkbox" class="form-check-input" id="lcdlock" onclick="toggleLCDlock()">
+                                          <label class="form-check-label" style="width: 140px; display:inline-block;" for="lcdlock" id="lcdlock_label" title="Lock buttons on LCD screen">LCD Lock</label>
+                                        </div>
+                                    </div>  
                                     <div class="row no-gutters align-items-center with_modem">
                                         <div class="col-auto h5 mb-0 mr-3 font-weight-bold text-gray-800" style="width: 120px;">
                                             Override PWM:
@@ -1130,8 +1141,8 @@ <h1 id="serialnr" class="h5 mb-0 text-white-800">SmartEVSE-</h1>
                                             OCPP:
                                         </div>
                                         <div class="col">
-                                          <input type="checkbox" class="form-check-input" id="enable_ocpp" onclick="toggleEnableOcpp()" title="Check to enable connection to a backoffice provider">
-                                          <label class="form-check-label" for="enable_ocpp" id="enable_ocpp_label">Enable OCPP</label>
+                                          <input type="checkbox" class="form-check-input" id="enable_ocpp" onclick="toggleEnableOcpp()">
+                                          <label class="form-check-label" for="enable_ocpp" id="enable_ocpp_label" title="Check to enable connection to a backoffice provider">Enable OCPP</label>
                                           <div id="ocpp_settings" style="display: none;">
                                               <div class="row no-gutters align-items-center" style="margin-top:20px;margin-bottom:10px">
                                                 <div class="col-auto h5 mb-0 mr-3 font-weight-bold text-gray-800" style="width: 200px">