From ba9bc2e8458da93368e9f80b214085e6ace094c3 Mon Sep 17 00:00:00 2001 From: logicog Date: Fri, 31 Oct 2025 17:47:36 +0100 Subject: [PATCH] Initial web-files for system settings and configuration management --- html/config | 1 + html/config.js | 41 ++++++++++++++++++++++++++++++ html/navigation.js | 1 + html/style.css | 8 +++++- html/system.html | 36 ++++++++++++++++++++++++++ html/system.js | 63 ++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 149 insertions(+), 1 deletion(-) create mode 120000 html/config create mode 100644 html/config.js create mode 100644 html/system.html create mode 100644 html/system.js diff --git a/html/config b/html/config new file mode 120000 index 0000000..f1a6cc6 --- /dev/null +++ b/html/config @@ -0,0 +1 @@ +../config.txt \ No newline at end of file diff --git a/html/config.js b/html/config.js new file mode 100644 index 0000000..92a07e5 --- /dev/null +++ b/html/config.js @@ -0,0 +1,41 @@ +var configInterval = Number(); +var configuration = {}; + +function parseConf(c){ + var a = s.split(/\r\n|\n/); + for (var l = 0; l < a.length; l++) { + console.log(l + ' --> ' + a[l]); + } +} + +function fetchConfig() { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + s = xhttp.responseText; + console.log("CONFIG: ", s); + parseConf(s); + clearInterval(configInterval); + } + } + xhttp.open("GET", `/config`, true); + xhttp.send(); +} + +function fetchCmdLog() { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + s = xhttp.responseText; + console.log("CMD-Log: ", s); + parseConf(s); + clearInterval(configInterval); + } + } + xhttp.open("GET", `/cmd_log`, true); + xhttp.send(); +} + +window.addEventListener("load", function() { + configInterval = setInterval(fetchConfig, 1000); +}); diff --git a/html/navigation.js b/html/navigation.js index 92366c2..8b88bb8 100644 --- a/html/navigation.js +++ b/html/navigation.js @@ -5,5 +5,6 @@ document.getElementById('sidebar').innerHTML = + "
  • Mirroring
    • " + "
  • Port Aggregation
    • " + "
  • EEE
    • " + + "
  • System Settings
    • " + "
  • Firmware Update
    • "; diff --git a/html/style.css b/html/style.css index b1cdecc..f0f1a5a 100644 --- a/html/style.css +++ b/html/style.css @@ -42,6 +42,9 @@ input[type=submit] { padding: 8px 16px;background-color:#aaf;color:#000; margin- input[type=submit]:hover { background-color: #226; color: white;} button {padding: 8px; background-color:#99f; color:#000;} button:hover { background-color: #226; color: white;} +.action{padding: 8px 16px;margin-top: 2em;margin-right: 3em; background-color: #aaf;color: #000;} +.action:hover { background-color: #226; color: white;} + .psel { position: absolute; opacity: 0; @@ -73,4 +76,7 @@ object { .isSFP{ opacity: .4; background-color: #660;} .isNOK{ color: #900;} .isOK{ color: #090;} -.action{padding: 8px 16px;margin-top: 2em;margin-right: 3em; background-color: #aaf;color: #000;} +.ip{padding:8px 16px;margin-bottom: 1em;margin-left: 1em} +.row {display: flex;} +.rcol {flex: 90%;} +.lcol {flex: 10%;} diff --git a/html/system.html b/html/system.html new file mode 100644 index 0000000..728b300 --- /dev/null +++ b/html/system.html @@ -0,0 +1,36 @@ + + + + + System Settings + + + +
    +
    +

    System Settings

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +

    + When updating the above settings, remember to point your browser to the new IP afterwards:
    +
    +

    + Save all current settings to Flash:
    + + +
    + + + + + diff --git a/html/system.js b/html/system.js new file mode 100644 index 0000000..a368f9f --- /dev/null +++ b/html/system.js @@ -0,0 +1,63 @@ +var systemInterval = Number(); +const ips = ["ip", "nm", "gw"]; + +function checkIp(ip) { + const ipv4 = /^(\d{1,3}\.){3}\d{1,3}$/; + if (!ipv4.test(ip)) {alert(`Invalid ip:${ip}`); return false }; + return true; +} + +async function ipSub() { + for (let i=0;i<3;i++) { + if (!checkIp(document.getElementById(ips[i]).value)) + return; + } + for (let i=0; i<3;i++){ + var cmd = ips[i]+' '+document.getElementById(ips[i]).value; + try { + const response = await fetch('/cmd', { + method: 'POST', + body: cmd + }); + console.log('Completed!', response); + fetchIP(); + } catch(err) { + console.error(`Error: ${err}`); + } + } +} + +async function flashSave() { + fetchConfig(); + fetchCmdLog(); + return; + try { + const response = await fetch('/save', { + method: 'POST', + body: cmd + }); + console.log('Completed!', response); + } catch(err) { + console.error(`Error: ${err}`); + } +} + +function fetchIP() { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + const s = JSON.parse(xhttp.responseText); + console.log("IP: ", s); + document.getElementById("ip").value=s.ip_address; + document.getElementById("nm").value=s.ip_netmask; + document.getElementById("gw").value=s.ip_gateway; + clearInterval(systemInterval); + } + } + xhttp.open("GET", `/information.json`, true); + xhttp.send(); +} + +window.addEventListener("load", function() { + systemInterval = setInterval(fetchIP, 1000); +});