Version 1.0

Initial version.
2023-03-07 12:18:18 +03:00
parent d7cf863cfc
commit cb7f4f3faa
7 changed files with 699 additions and 1 deletions
--- a/data/function.js
+++ b/data/function.js
@ -0,0 +1,60 @@
+var xmlHttp = createXmlHttpObject();
+function createXmlHttpObject() {
+    if (window.XMLHttpRequest) {
+        xmlHttp = new XMLHttpRequest();
+    } else {
+        xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
+    }
+    return xmlHttp;
+}
+
+function load() {
+    if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4) {
+        xmlHttp.open('GET', '/config', true);
+        xmlHttp.send(null);
+        xmlHttp.onload = function () {
+            jsonResponse = JSON.parse(xmlHttp.responseText);
+            loadBlock();
+        }
+    }
+}
+
+function loadBlock() {
+    newData = JSON.parse(xmlHttp.responseText);
+    data = document.getElementsByTagName('body')[0].innerHTML;
+    var newString;
+    for (var key in newData) {
+        newString = data.replace(new RegExp('{{' + key + '}}', 'g'), newData[key]);
+        data = newString;
+    }
+    document.getElementsByTagName('body')[0].innerHTML = newString;
+    setFirmvareValue('version', 'firmware');
+    handleServerResponse();
+}
+
+function getValue(id) {
+    var value = document.getElementById(id).value;
+    return value;
+}
+
+function sendRequest(submit, server) {
+    request = new XMLHttpRequest();
+    request.open("GET", server, true);
+    request.send();
+}
+
+function saveSetting(submit) {
+    server = "/setting?deviceName=" + getValue('deviceName')
+        + "&espnowNetName=" + getValue('espnowNetName');
+    sendRequest(submit, server);
+    alert("Please restart device for changes apply.");
+}
+
+function restart(submit) {
+    server = "/restart";
+    sendRequest(submit, server);
+}
+
+function setFirmvareValue(id, value) {
+    document.getElementById(id).innerHTML = document.getElementById(value).value;
+}
--- a/data/index.htm
+++ b/data/index.htm
@ -0,0 +1,39 @@
+<html>
+
+<head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=0.9">
+    <link rel="stylesheet" href="style.css">
+    <script type="text/javascript" src="function.js"></script>
+    <title>RF Gateway</title>
+</head>
+
+<body onload="load();">
+    <form class="box">
+        <h1>RF Gateway</h1>
+        <div class="wrapper">
+            <p class="text">Firmware:</p>
+            <p class="text" id="version"></p>
+            <input id="firmware" value="{{firmware}}" hidden />
+        </div>
+
+        <div class="wrapper">
+            <p class="text">Device name:</p>
+            <input id="deviceName" value="{{deviceName}}" placeholder="Name" autocomplete="off" label
+                title="ESP-NOW device name (up to 150 characters)" />
+        </div>
+
+        <div class="wrapper">
+            <p class="text">ESP-NOW network name:</p>
+            <input id="espnowNetName" value="{{espnowNetName}}" placeholder="Name" autocomplete="off" label
+                title="ESP-NOW network name (1 to 20 characters)" />
+        </div>
+
+        <div class="wrapper">
+            <input class="btn" type="submit" value="Save" onclick="saveSetting(this);">
+            <input class="btn" type="submit" value="Restart" onclick="restart(this);">
+        </div>
+    </form>
+</body>
+
+</html>
--- a/data/style.css
+++ b/data/style.css
@ -0,0 +1,88 @@
+p{
+    margin: 0 0;
+}
+
+body {
+    font-family: "Gill Sans", sans-serif;
+    background: rgb(255, 255, 255);
+}
+
+.box {
+    width: 400px;
+    padding: 20px 20px;
+    margin: 20px auto;
+    background: #e0f5fb;
+    box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+}
+
+h1 {
+    color: rgb(65, 125, 238);
+    text-align: center;
+}
+
+.text {
+    font-weight: 600;
+    flex-shrink: 0;
+    margin-right: 10px;
+    margin-left: 10px;
+    margin: 10px 0;
+}
+
+.wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}
+
+input {
+    width: 48%;
+    min-height: 30px;
+    border-radius: 5px;
+    border: none;
+    margin-bottom: 10px;
+    margin-left: 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);
+    color: white;
+    transition: .5s;
+    margin-left: 0;
+    margin-top: 8px;
+}
+
+.btn:hover {
+    background: rgb(65, 125, 238);
+    opacity: 0.5;
+    transform: translatey(-3px);
+}
+
+#deviceName,
+#espnowNetName {
+    width: 100%;
+}
+
+#espnowNetName {
+    margin-bottom: 15px;
+}
+
+.wrapper.wrapper--end {
+    align-items: baseline;
+}