Version 1.3

Changed library for MQTT connection.
Added support for LAN connection.
Added getting data from NTP server.

data/function.js

@@ -29,6 +29,7 @@ function loadBlock() {
     }
     document.getElementsByTagName('body')[0].innerHTML = newString;
     setFirmvareValue('version', 'firmware');
+    setGpioValue('workModeSelect', 'workMode');
     handleServerResponse();
 }
 
@@ -37,6 +38,12 @@ function getValue(id) {
     return value;
 }
 
+function getSelectValue(id) {
+    var select = document.getElementById(id);
+    var value = select.value;
+    return value;
+}
+
 function sendRequest(submit, server) {
     request = new XMLHttpRequest();
     request.open("GET", server, true);
@@ -49,7 +56,10 @@ function saveSetting(submit) {
         + "&login=" + getValue('mqttUserLogin') + "&pass=" + encodeURIComponent(getValue('mqttUserPassword'))
         + "&prefix=" + getValue('topicPrefix')
         + "&name=" + getValue('deviceName')
-        + "&net=" + getValue('espnowNetName');
+        + "&net=" + getValue('espnowNetName')
+        + "&mode=" + getSelectValue('workModeSelect')
+        + "&ntp=" + getValue('ntpHostName')
+        + "&zone=" + getValue('gmtOffset');
     sendRequest(submit, server);
     alert("Please restart device for changes apply.");
 }
@@ -62,3 +72,8 @@ function restart(submit) {
 function setFirmvareValue(id, value) {
     document.getElementById(id).innerHTML = document.getElementById(value).value;
 }
+
+function setGpioValue(id, value) {
+    var select = document.getElementById(id);
+    select.value = document.getElementById(value).value;
+}

data/index.htm

@@ -29,6 +29,16 @@
                 title="ESP-NOW network name (1 to 20 characters)" />
         </div>
 
+        <div class="wrapper">
+            <p class="text-select">Work mode:</p>
+            <input id="workMode" value="{{workMode}}" hidden />
+            <p><select id="workModeSelect">
+                    <option value="0">ESP-NOW</option>
+                    <option value="1">ESP-NOW WIFI</option>
+                    <option value="2">ESP-NOW LAN</option>
+                </select></p>
+        </div>
+
         <p class="text">WiFi settings</p>
         <div class="wrapper">
             <input class="text-inp" id="ssid" value="{{ssid}}" placeholder="SSID" label title="WiFi network name" />
@@ -36,6 +46,13 @@
                 autocomplete="off" label title="WiFi password" />
         </div>
 
+        <p class="text">NTP settings</p>
+        <div class="wrapper">
+            <input class="text-inp" id="ntpHostName" value="{{ntpHostName}}" placeholder="URL or IP" label
+                title="NTP server URL or IP" />
+            <input id="gmtOffset" value="{{gmtOffset}}" placeholder="Time zone" label title="Time zone" />
+        </div>
+
         <p class="text">MQTT settings</p>
         <div class="wrapper">
             <input class="text-inp" id="mqttHostName" value="{{mqttHostName}}" placeholder="URL or IP" label

data/style.css

@@ -29,6 +29,13 @@ h1 {
     margin: 10px 0;
 }
 
+.text-select {
+    width: 35%;
+    font-weight: 600;
+    flex-shrink: 0;
+    margin-right: 10px;
+}
+
 .text-inp {
     width: 48%;
     min-height: 30px;
@@ -61,11 +68,28 @@ input {
     margin-left: 10px;
 }
 
+select {
+    width: 140px;
+    min-height: 30px;
+    border-radius: 5px;
+    border: none;
+    margin-bottom: 10px;
+    padding: 0 10px;
+    color: rgb(0, 0, 0);
+    background: #a3e0f1;
+    transition: .5s;
+}
+
 input:hover {
     background: white;
     cursor: pointer;
 }
 
+select:hover {
+    background: white;
+    cursor: pointer;
+}
+
 .btn {
     width: 48%;
     background: rgb(65, 125, 238);
@@ -88,7 +112,7 @@ input:hover {
 }
 
 #espnowNetName {
-    margin-bottom: 10px;
+    margin-bottom: 15px;
 }
 
 .wrapper.wrapper--end {