diff --git a/html/app.js b/html/app.js
index 29429e54..52d1ddfa 100644
--- a/html/app.js
+++ b/html/app.js
@@ -49,7 +49,7 @@ v_empty:"No VLANs configured.",v_mgmt:"Management VLAN",v_mgmt_none:"untagged",v
v_optional:"optional",v_setmgmt_q:"Set {n} as the management ID?",v_setmgmt_t:"Make this the management VLAN",
v_member:"Member",v_pvid:"PVID",v_add:"Add a new VLAN", v_mgmt_c:"WARNING: You must be able to access this VLAN to continue to manage the switch.",
v_legend:"U = untagged member, T = tagged member, - = not a member. PVID is automatically assigned based on the untagged membership.",
-v_accept:"Accept",v_ing_all:"All",v_del_t:"Delete VLAN",
+v_accept:"Accept",v_ing_all:"All",v_del_t:"Delete VLAN",v_rename:"Rename",v_rename_t:"Rename VLAN",
v_del_q:"Delete VLAN {n}?",v_del_d:"Ports keep their PVID until reassigned.",
v_vid_err:"Enter a VLAN ID (1-4094)",v_name_err:"Name must start with a letter (letters, digits, _) and cannot be just 'd' or 'mgmt'",
v_loaded:"Loaded VLAN {n}",v_notfound:"VLAN {n} not found (a new one can still be created)",
@@ -1503,14 +1503,35 @@ function vlanRefresh() {
}
var act = tr.insertCell();
act.onclick=function(e){e.stopPropagation()};
+ act.appendChild(h("button", {
+ class: "ctl",
+ text: t("v_rename"),
+ title: t("v_rename_t"),
+ onclick: function() {
+ var body = h("div");
+ body.appendChild(h("p", null, [
+ h("label", {class: "row"}, [
+ h("span",{class:"lb", "data-i18n":"c_name"},[document.createTextNode(t("c_name"))]),
+ h("input", {id: "nvlrename", class: "in", size: "12", maxlength: "15", "data-i18n-p": "v_optional", value:(v.name||"")})
+ ])
+ ]));
+ modal("Rename VLAN "+v.id, body, [h("button", {
+ class: "ctl pri", text: t("v_rename_t"),
+ onclick: function(){
+ if(!validVlanName($("nvlrename").value)) return;
+ postCmd(vlan2str(v.id, $("nvlrename").value,mySplit(l.dataset.t),mySplit(l.dataset.u))).then(function(){closeModal();vlanRefresh()});
+ }
+ })]);
+ },
+ }));
if (v.id == $("vmgmtcur").dataset.id) {
- //act.appendChild(h("button",{class:"ctl", title:t("v_mgmt_tt"), disabled:"disabled", text:"\u{1F6C8}"}));
- act.appendChild(h("span",{class:"ctl", title:t("v_mgmt_tt"), class:"hint", style:"color: var(--fg2); font-size: 150%; padding-left: 4px;"},[document.createTextNode("\u{1F6C8}")]));
+ act.appendChild(h("span",{class:"ctl", title:t("v_mgmt_tt"), class:"hint", style:"color: var(--fg2); font-size: 150%; padding-left: 10px;"},[document.createTextNode("\u{1F6C8}")]));
} else {
act.appendChild(h("button", {
class: "ctl",
text: "\u2715",
title: t("v_del_t"),
+ style: "margin-left: 5px;",
onclick: function() {
confirmModal(t("v_del_q", {
n: v.id
@@ -1522,7 +1543,7 @@ function vlanRefresh() {
act.appendChild(h("button", {
class: "ctl",
text: "\u2605",
- style: "margin-left: 1em;",
+ style: "margin-left: 5px;",
title: t("v_setmgmt_t"),
onclick: function() {
confirmModal(t("v_setmgmt_q", {
@@ -1618,10 +1639,10 @@ function vlan2str(i, n, t, u) {
function pvidcmd(i, p){
return "pvid " + p + " " + i;
}
- function mySplit(a){
- if(a.trim()=="") return [];
- return a.trim().split(",");
- }
+function mySplit(a){
+ if(a.trim()=="") return [];
+ return a.trim().split(",");
+}
function vlanApply() {
var vid = $("vtitle").dataset.id;
var vname = $("vtitle").dataset.name;
@@ -1707,7 +1728,13 @@ $("vlan_add").addEventListener("click", function() {
onclick: addVlan
})]);
});
-
+function validVlanName(n){
+ if (n && (!/^[a-zA-Z]\w*$/.test(n) || n == "d" || n == "mgmt")) {
+ toast(t("v_name_err"), "err");
+ return false;
+ }
+ return true;
+}
function addVlan() {
var vid = parseInt($("nvlid").value, 10);
for (const r of $("vtable").tBodies[0].rows) {
@@ -1717,10 +1744,7 @@ function addVlan() {
}
}
var name = $("nvlname").value;
- if (name && (!/^[a-zA-Z]\w*$/.test(name) || name == "d" || name == "mgmt")) {
- toast(t("v_name_err"), "err");
- return;
- }
+ if(!validVlanName(name)) return false;
var cmd = "vlan " + vid + (name ? " " + name : "");
postCmd(cmd).then(function() {
closeModal();