mirror of
https://github.com/logicog/RTLPlayground.git
synced 2026-08-30 14:52:51 +08:00
Erdnusschokolade
a369e46fe6
Below the configuration form, a new table lists all configured VLANs with their port memberships: Member, Tagged, Untagged, and PVID columns. Port ranges are formatted compactly (e.g. "1-2,5"). Port-to-bit mapping uses the existing physToLogPort[] array populated by /status.json, so the table is consistent with the icon view in fetchVLAN() and works on any supported machine. Each row has a delete button that sends "vlan N d" via /cmd, with a confirmation dialog. VLAN 1 cannot be deleted (no button shown). Table and dropdown both refresh automatically after Update/Create and after delete via a new refreshVlanViews() helper. The N+1 request pattern (1x /vlanlist + Nx /vlan.json) keeps the backend simple and avoids buffer overflow risks for systems with many VLANs. For typical configurations (<50 VLANs), page load remains under one second.
59 lines
2.2 KiB
HTML
59 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<script src="/main.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
<title>FreeSwitchOS VLAN Configuration</title>
|
|
</head>
|
|
<body>
|
|
<nav id="sidebar"></nav>
|
|
<div style="margin-left:16%;padding:1px 16px;height:1000px;">
|
|
<div id="ports"></div>
|
|
<h1>VLAN Configuration</h1>
|
|
<form id="vform" action="/vlan.html">
|
|
<div>
|
|
<label for="vlanSelect">VLAN auswählen:</label>
|
|
<select id="vlanSelect" style="margin: 0 0 0 8px">
|
|
<option value="" disabled selected>— VLAN wählen —</option>
|
|
</select>
|
|
</div>
|
|
<br/>
|
|
<div>
|
|
<label for="vid">VLAN ID:</label>
|
|
<input type="number" min="1" max="4094" id="vid" name="vid">
|
|
<button type="button" style="margin: 0 0 0 24px" onclick="fetchVLAN();">Get Configuration</button>
|
|
</div>
|
|
<br/><br/>
|
|
<label for="vname">VLAN Name:</label>
|
|
<input type="text" id="vname" name="vname"><br><br>
|
|
<br/>
|
|
<h2>Tagged Ports</h2>
|
|
<div id="tPorts"><button type="button" style="transform: translateY(-100%);margin: 0 50px 0 0" onclick="utClicked(true);">Select all</button></div>
|
|
<h2>Untagged Ports</h2>
|
|
<div id="uPorts"><button type="button" style="transform: translateY(-100%); margin: 0 50px 0 0" onclick="utClicked(false);">Select all</button> </div>
|
|
<h2>Use as default VLAN for incoming traffic (PVID)</h2>
|
|
<div id="pPorts"><button type="button" style="transform: translateY(-100%); margin: 0 50px 0 0" onclick="pvClicked(true);">Select all</button> </div>
|
|
<script src="/vlan.js"></script>
|
|
<br/> <input style="width:40%;" class="action" id="vlan_sub" onclick="vlanSub();" type="button" value="Update / Create">
|
|
<script src="/vlan_sub.js"></script>
|
|
</form>
|
|
<h2>Configured VLANs</h2>
|
|
<table id="vlanTable" style="width:90%">
|
|
<thead>
|
|
<tr>
|
|
<th>VLAN</th>
|
|
<th>Name</th>
|
|
<th>Member Ports</th>
|
|
<th>Tagged Ports</th>
|
|
<th>Untagged Ports</th>
|
|
<th>PVID Ports</th>
|
|
<th>Delete</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="vlanTableBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script src="/navigation.js"></script>
|
|
</body>
|
|
</html>
|