mirror of
https://github.com/logicog/RTLPlayground.git
synced 2026-08-30 14:52:51 +08:00
Initial web-files for system settings and configuration management
This commit is contained in:
Symlink
+1
@@ -0,0 +1 @@
|
|||||||
|
../config.txt
|
||||||
@@ -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);
|
||||||
|
});
|
||||||
@@ -5,5 +5,6 @@ document.getElementById('sidebar').innerHTML =
|
|||||||
+ "<li><a href='mirror.html'>Mirroring</a></li>"
|
+ "<li><a href='mirror.html'>Mirroring</a></li>"
|
||||||
+ "<li><a href='trunk.html'>Port Aggregation</a></li>"
|
+ "<li><a href='trunk.html'>Port Aggregation</a></li>"
|
||||||
+ "<li><a href='eee.html'>EEE</a></li>"
|
+ "<li><a href='eee.html'>EEE</a></li>"
|
||||||
|
+ "<li><a href='system.html'>System Settings</a></li>"
|
||||||
+ "<li><a href='update.html'>Firmware Update</a></li></ul>";
|
+ "<li><a href='update.html'>Firmware Update</a></li></ul>";
|
||||||
|
|
||||||
|
|||||||
+7
-1
@@ -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;}
|
input[type=submit]:hover { background-color: #226; color: white;}
|
||||||
button {padding: 8px; background-color:#99f; color:#000;}
|
button {padding: 8px; background-color:#99f; color:#000;}
|
||||||
button:hover { background-color: #226; color: white;}
|
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 {
|
.psel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@@ -73,4 +76,7 @@ object {
|
|||||||
.isSFP{ opacity: .4; background-color: #660;}
|
.isSFP{ opacity: .4; background-color: #660;}
|
||||||
.isNOK{ color: #900;}
|
.isNOK{ color: #900;}
|
||||||
.isOK{ color: #090;}
|
.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%;}
|
||||||
|
|||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<title>System Settings</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav id="sidebar"></nav>
|
||||||
|
<div style="margin-left:16%;padding:1px 16px;height:1000px;">
|
||||||
|
<div id="ports"></div>
|
||||||
|
<h1>System Settings</h1>
|
||||||
|
<div class="row">
|
||||||
|
<div class="lcol"> <label for="ip">IP address:</label></div>
|
||||||
|
<div class="rcol"> <input id="ip" class="ip" type="text" minlength="7" maxlength="15" size="15"/></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="lcol"> <label for="nm">Netmask:</label></div>
|
||||||
|
<div class="rcol"><input id="nm" class="ip" type="text" minlength="7" maxlength="15" size="15"/></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="lcol"> <label for="gw">Gateway:</label></div>
|
||||||
|
<div class="rcol"><input id="gw" class="ip" type="text" minlength="7" maxlength="15" size="15"/></div>
|
||||||
|
</div>
|
||||||
|
<br/><br/>
|
||||||
|
When updating the above settings, remember to point your browser to the new IP afterwards:<br/>
|
||||||
|
<input style="width:40%;" class="action" id="ip_sub" onclick="ipSub();" type="button" value="Update Settings"><br/>
|
||||||
|
<br/><br/>
|
||||||
|
Save all current settings to Flash:<br/>
|
||||||
|
<input style="width:40%;" class="action" id="flash_sub" onclick="flashSave();" type="button" value="Save Settings to Flash">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="/config.js"></script>
|
||||||
|
<script src="/system.js"></script>
|
||||||
|
<script src="/navigation.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user