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);
+});