mirror of
https://github.com/logicog/RTLPlayground.git
synced 2026-08-30 14:52:51 +08:00
d00f
1a55a134c7
`vlan <id> mgmt` existed on the CLI, but nothing reported which VLAN currently carries management, so the setting was invisible from the web UI - the only way to find out was to read the startup config. Report it in information.json and offer it where the other switch-wide addressing settings live, between Gateway and Language, as a picker filled from the configured VLANs. When management is untagged there is no VLAN to select, so that state shows as a disabled entry rather than inventing an id the switch would reject. Confirm before applying, and say what will happen rather than echoing the action back: the switch starts tagging its own frames, and if the port you came in on does not carry that VLAN the page becomes unreachable and the way back is the console. Cancelling puts the picker back where it was.
108 lines
5.7 KiB
HTML
108 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="/i18n.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
<title data-i18n="sys_title">System Settings</title>
|
|
<style>
|
|
.tab-bar { display: flex; border-bottom: 2px solid #226; margin-bottom: 0; margin-left: 16%; padding: 1px 16px; padding-bottom: 0; }
|
|
.tab-btn { padding: 10px 20px; background-color: #ddf; border: none; cursor: pointer; font-size: 1em; border-radius: 8px 8px 0 0; margin-right: 4px; }
|
|
.tab-btn:hover { background-color: #aaf; }
|
|
.tab-btn.active { background-color: #aaf; font-weight: bold; border-bottom: 2px solid #aaf; margin-bottom: -2px; }
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="tab-bar">
|
|
<button class="tab-btn active" onclick="openTab(event, 'system-tab')" data-i18n="sys_tab_system">System</button>
|
|
<button class="tab-btn" onclick="openTab(event, 'advanced-tab')" data-i18n="sys_tab_advanced">Advanced</button>
|
|
<button class="tab-btn" onclick="openTab(event, 'console-tab')" data-i18n="sys_tab_console">Console</button>
|
|
</div>
|
|
<nav id="sidebar"></nav>
|
|
<div style="margin-left:16%;padding:1px 16px;height:1000px;">
|
|
<div id="ports"></div>
|
|
|
|
<div id="system-tab" class="tab-content active">
|
|
<h1 data-i18n="sys_heading">System Settings</h1>
|
|
<div class="row">
|
|
<div class="lcol"> <label for="hostname" data-i18n="sys_hostname">Hostname:</label></div>
|
|
<div class="rcol"> <input id="hostname" type="text" maxlength="23" size="20"/>
|
|
<button onclick="hostSub()" data-i18n="sys_apply">Apply</button></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label data-i18n="sys_model">Model:</label></div>
|
|
<div class="rcol"><span id="model" class="rotext"></span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label for="ip" data-i18n="sys_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="netmask" data-i18n="sys_netmask">Netmask:</label></div>
|
|
<div class="rcol"><input id="netmask" class="ip" type="text" minlength="7" maxlength="15" size="15"/></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label for="gw" data-i18n="sys_gateway">Gateway:</label></div>
|
|
<div class="rcol"><input id="gw" class="ip" type="text" minlength="7" maxlength="15" size="15"/></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label for="mgmtvlan" data-i18n="sys_mgmt_vlan">Management VLAN:</label></div>
|
|
<div class="rcol"><select id="mgmtvlan" class="ip" onchange="mgmtVlanChanged()"></select></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label data-i18n="sys_language">Language:</label></div>
|
|
<div class="rcol">
|
|
<select id="lang-select" onchange="changeLang()">
|
|
<option value="en">English</option>
|
|
<option value="ja">日本語</option>
|
|
<option value="zh">中文</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<span data-i18n="sys_ip_note">When updating the above settings, remember to point your browser to the new IP afterwards:</span><br/>
|
|
<input style="width:40%;" class="action" id="ip_sub" onclick="ipSub();" type="button" data-i18n="sys_update" value="Update Settings"><br/>
|
|
<br/>
|
|
<span data-i18n="sys_save_label">Save all current settings to Flash:</span><br/>
|
|
<input style="width:40%;" class="action" id="flash_sub" onclick="flashSave();" type="button" data-i18n="sys_save" value="Save Settings to Flash">
|
|
</div>
|
|
|
|
<div id="advanced-tab" class="tab-content">
|
|
<h1 data-i18n="sys_advanced">Advanced Settings</h1>
|
|
<div class="lcol"> <label for="config_display" data-i18n="sys_startup_config">Startup configuration:</label></div>
|
|
<textarea id="config_display" rows="8" cols="60"></textarea>
|
|
<br/><br/>
|
|
<span data-i18n="sys_startup_warn">Be careful when saving the directly edited startup configuration, you can lock yourself out:</span><br/>
|
|
<input style="width:40%;" class="action" id="clear_config" onclick="clearConfig();" type="button" data-i18n="sys_clear_config" value="Clear Startup Config">
|
|
<br/>
|
|
<input style="width:40%;" class="action" id="flash_startup_sub" onclick="flashStartupSave();" type="button" data-i18n="sys_save_startup" value="Save Startup Settings to Flash">
|
|
<br/>
|
|
<input style="width:40%;" class="action" id="switch_reset" onclick="resetSwitch();" type="button" data-i18n="sys_reset" value="Reset Switch">
|
|
</div>
|
|
|
|
<div id="console-tab" class="tab-content">
|
|
<h1 data-i18n="sys_console">Console Command</h1>
|
|
<label for="console_command" data-i18n="sys_enter_cmd">Enter command:</label>
|
|
<input type="text" id="console_cmd" name="console_cmd" style="width:40%;">
|
|
<input style="width:20%;" class="action" id="cmd_sub" onclick="cmdSub();" type="button" data-i18n="sys_send_cmd" value="Send Command"><br/>
|
|
<br/><br/>
|
|
<span data-i18n="sys_console_warn">Be careful when entering console commands, you can lock yourself out!</span><br/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<script src="/config.js"></script>
|
|
<script src="/system.js"></script>
|
|
<script src="/navigation.js"></script>
|
|
<script>
|
|
function openTab(evt, tabId) {
|
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
document.getElementById(tabId).classList.add('active');
|
|
evt.currentTarget.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|