[Kimchi-devel] [PATCH 1/8] Changing Collapse from Admin Screen to Bootstrap Accodion

From: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: Andre Teodoro <andreteodoro.work(a)gmail.com&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- ui/css/src/host-admin.scss | 52 ++++- ui/js/host-admin.js | 467 +++++++++++++++++++++++------------------- ui/pages/host-admin.html.tmpl | 343 +++++++++++++++++++------------ 3 files changed, 511 insertions(+), 351 deletions(-) diff --git a/ui/css/src/host-admin.scss b/ui/css/src/host-admin.scss index 599a360..f718917 100644 --- a/ui/css/src/host-admin.scss +++ b/ui/css/src/host-admin.scss @@ -29,9 +29,43 @@ } .ginger .host-admin h3 { - font-weight: bold; - font-size: 14px; + height: 32px; + padding: 10px 15px; + font-size: 20px; border-radius: 2px 2px 0 0; + display: inline-block; +} + +.ginger .host-admin h3 > a > span.accordion-icon { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-size: 20px; + color: #5a595b; +} + +.ginger .host-admin h3 > a > span.accordion-text { + margin-left: 20px; +} + +.ginger .host-admin h3 > a[aria-expanded="true"] > span.accordion-icon:before { + content: "\f01b"; +} + +.ginger .host-admin h3 > a[aria-expanded="false"] > span.accordion-icon:before { + content: "\f01a"; +} + +.ginger .host-admin a { + color: #9e9e9e; + text-decoration: none; +} + +.ginger .host-admin hr { + width: 93%; + border: 1.8px solid #eaeaea; + margin-top: 30px !important; } .ginger .host-admin .content-area { @@ -60,8 +94,8 @@ .ginger .host-admin .content-area .section .pack-path-input { width: 400px; - height:30px; - border: 1px solid gray; + height: 30px; + border: 1px solid grey; } .ginger .host-admin .message-area { @@ -109,7 +143,7 @@ vertical-align: top; } -.ginger .host-admin button{ +.ginger .host-admin button { font-weight: bold; height: 35px; width: 80px; @@ -327,7 +361,7 @@ .ginger .host-admin .nw-config .interface .grid-head { margin-bottom: 10px; - color:#888888; + color: #888888; border-bottom: solid 1px #BBBBBB; } @@ -497,13 +531,11 @@ } .ginger .host-admin .subsc-manage .status-header .up { - background: linear-gradient(to bottom, #BFD255 0%, #8EB92A 50%, - #72AA00 51%, #9ECB2D 100%) repeat scroll 0 0 transparent; + background: linear-gradient(to bottom, #BFD255 0%, #8EB92A 50%, #72AA00 51%, #9ECB2D 100%) repeat scroll 0 0 transparent; } .ginger .host-admin .subsc-manage .status-header .down { - background: linear-gradient(to bottom, #AFAFAF 0%, #AFAFAF 50%, - #AFAFAF 51%, #AFAFAF 100%) repeat scroll 0 0 transparent; + background: linear-gradient(to bottom, #AFAFAF 0%, #AFAFAF 50%, #AFAFAF 51%, #AFAFAF 100%) repeat scroll 0 0 transparent; } #subscriptionAdd .subsc-colume { diff --git a/ui/js/host-admin.js b/ui/js/host-admin.js index 821c2a5..93a4169 100644 --- a/ui/js/host-admin.js +++ b/ui/js/host-admin.js @@ -18,42 +18,46 @@ ginger.initBakDialog = function() { $("#newBakDialog").dialog({ - autoOpen : false, - modal : true, - width : 800, + autoOpen: false, + modal: true, + width: 800, height: 600, - draggable : false, - resizable : false, + draggable: false, + resizable: false, closeText: "X", - open : function(){ + open: function() { $(".ui-dialog-titlebar-close", $("#newBakDialog").parent()).removeAttr("title"); - var setBtnState = function(){ - var isValid = $(".invalid-field", "#newBakDialog").length===0; + var setBtnState = function() { + var isValid = $(".invalid-field", "#newBakDialog").length === 0; $("#newBakFormBtn").button(isValid ? "enable" : "disable"); }; - var attachEvent = function(pathItem){ + var attachEvent = function(pathItem) { $(".add", pathItem).button({ - icons: { primary: "ui-icon-plusthick" }, + icons: { + primary: "ui-icon-plusthick" + }, text: false - }).click(function(){ + }).click(function() { var pathNode = $.parseHTML($("#pathItem").html()); $(this).parent().after(pathNode); attachEvent($(pathNode)); }); $(".delete", pathItem).button({ - icons: { primary: "ui-icon-minusthick" }, + icons: { + primary: "ui-icon-minusthick" + }, text: false - }).click(function(){ - if(pathItem.parent().children().length===1){ + }).click(function() { + if (pathItem.parent().children().length === 1) { $("input", pathItem).prop("value", null); $("input", pathItem).removeClass("invalid-field"); - }else{ + } else { pathItem.remove(); } setBtnState(); }); - $("input", pathItem).on("keyup", function(){ - $(this).toggleClass("invalid-field", !(/(^\/.*)$/.test($(this).val())||$(this).val().trim()==="")); + $("input", pathItem).on("keyup", function() { + $(this).toggleClass("invalid-field", !(/(^\/.*)$/.test($(this).val()) || $(this).val().trim() === "")); setBtnState(); }); }; @@ -64,7 +68,7 @@ ginger.initBakDialog = function() { $("#excludeBox").append(tempNode); attachEvent($(tempNode)); }, - beforeClose: function(){ + beforeClose: function() { $("body").css('cursor', 'default'); $(".desc", "#newBakDialog").prop("value", null); $("#includeBox").empty(); @@ -74,26 +78,26 @@ ginger.initBakDialog = function() { $("body input").css("cursor", "text"); $("body button").css("cursor", "pointer"); }, - buttons : [{ + buttons: [{ id: "newBakFormBtn", text: "OK", - click: function(){ + click: function() { var content = { description: $(".desc", "#newBakDialog").val().trim(), include: [], exclude: [] }; - $("input:text","#includeBox").each(function(){ - if($(this).val().trim()!=="") + $("input:text", "#includeBox").each(function() { + if ($(this).val().trim() !== "") content.include.push($(this).val().trim()) }); - $("input:text","#excludeBox").each(function(){ - if($(this).val().trim()!=="") + $("input:text", "#excludeBox").each(function() { + if ($(this).val().trim() !== "") content.exclude.push($(this).val().trim()) }); - if(content.description=="") delete content.description; - if(content.include.length==0) delete content.include; - if(content.exclude.length==0) delete content.exclude; + if (content.description == "") delete content.description; + if (content.include.length == 0) delete content.include; + if (content.exclude.length == 0) delete content.exclude; // Disable Ok button and changing cursor // while processing. $("body").css("cursor", "wait"); @@ -101,7 +105,7 @@ ginger.initBakDialog = function() { $("body button").prop("disabled", "disabled"); $("body input").css("cursor", "wait"); $("body button").css("cursor", "wait"); - ginger.createBackupArchive(content, function(){ + ginger.createBackupArchive(content, function() { $("#newBakDialog").dialog("close"); $("#bakGridBody").empty(); ginger.setupBakGrid(); @@ -120,16 +124,16 @@ ginger.initBakDialog = function() { ginger.initBatDelDialog = function() { $("#batDelDialog").dialog({ - autoOpen : false, - modal : true, - width : 600, - draggable : false, - resizable : false, + autoOpen: false, + modal: true, + width: 600, + draggable: false, + resizable: false, closeText: "X", - open: function(){ + open: function() { $(".ui-dialog-titlebar-close", $("#batDelDialog").parent()).removeAttr("title"); }, - beforeClose: function(){ + beforeClose: function() { $("input:text", "#batDelDialog").prop("value", null); $("input:text", "#batDelDialog").prop("disabled", true); $("input:text", "#batDelDialog").removeClass("invalid-field"); @@ -137,16 +141,19 @@ ginger.initBatDelDialog = function() { $("input:radio[name=batDelType]:first").prop("checked", true); $("#batDelFormBtn").button("disable"); }, - buttons : [{ + buttons: [{ id: "batDelFormBtn", text: "OK", disabled: true, - click: function(){ - var content = {counts_ago: -1, days_ago: -1}; + click: function() { + var content = { + counts_ago: -1, + days_ago: -1 + }; var delOption = $("input:radio[name=batDelType]:checked"); var delValue = $("input:text", delOption.parent()).prop("value"); content[delOption.val()] = parseInt(delValue); - ginger.deleteBackupArchives(content, function(){ + ginger.deleteBackupArchives(content, function() { $("#batDelDialog").dialog("close"); $("#bakGridBody").empty(); ginger.setupBakGrid(); @@ -155,33 +162,33 @@ ginger.initBatDelDialog = function() { }] }); - var validateInput = function(input){ + var validateInput = function(input) { var isValid = new RegExp('^[0-9]*$').test(input.val()); input.toggleClass("invalid-field", !isValid); - $("#batDelFormBtn").button(isValid && input.val().trim()!=="" ? "enable" : "disable"); + $("#batDelFormBtn").button(isValid && input.val().trim() !== "" ? "enable" : "disable"); }; - $("input:radio[name=batDelType]").on("click", function(){ + $("input:radio[name=batDelType]").on("click", function() { $("input:text", "#batDelDialog").prop("disabled", true); var activeInput = $("input:text", $("input:radio[name=batDelType]:checked").parent()); activeInput.prop("disabled", false); validateInput(activeInput); }); - $("input:text", "#batDelDialog").on("keyup", function(){ + $("input:text", "#batDelDialog").on("keyup", function() { validateInput($(this)); }); }; ginger.setupBakGrid = function() { - ginger.listBackupArchives(function(data){ - for(var i=0;i<data.length;i++){ - data[i].timestamp = new Date(data[i].timestamp*1000).toLocaleString(); + ginger.listBackupArchives(function(data) { + for (var i = 0; i < data.length; i++) { + data[i].timestamp = new Date(data[i].timestamp * 1000).toLocaleString(); var tempNode = $.parseHTML(wok.substitute($("#backupItem").html(), data[i])); $("#bakGridBody").append(tempNode); var parts = ["include", "exclude"]; - for(var x=0;x<parts.length;x++){ + for (var x = 0; x < parts.length; x++) { var path = ""; - for(var y=0;y<data[i][parts[x]].length;y++){ - path += "<div class='path-item'>"+data[i][parts[x]][y]+"</div>" + for (var y = 0; y < data[i][parts[x]].length; y++) { + path += "<div class='path-item'>" + data[i][parts[x]][y] + "</div>" } data[i][parts[x]] = path; } @@ -192,101 +199,123 @@ ginger.setupBakGrid = function() { items: $(tempNode), content: tooltipContent, tooltipClass: "ginger-dialog", - position: { my: "left top-3", at: "left+30 bottom", collision: "flipfit" }, + position: { + my: "left top-3", + at: "left+30 bottom", + collision: "flipfit" + }, hide: 100 }); $(".download", $(tempNode)).button({ - icons: { primary: "ui-icon ui-icon-arrowthickstop-1-s" }, + icons: { + primary: "ui-icon ui-icon-arrowthickstop-1-s" + }, text: false - }).click(function(){ + }).click(function() { var bakItem = $(this).parent(); - window.open('plugins/ginger/backup/archives/'+encodeURIComponent(bakItem.prop("id"))+'/file'); + window.open('plugins/ginger/backup/archives/' + encodeURIComponent(bakItem.prop("id")) + '/file'); }); $(".delete", $(tempNode)).button({ - icons: { primary: "ui-icon ui-icon-close" }, + icons: { + primary: "ui-icon ui-icon-close" + }, text: false - }).click(function(){ + }).click(function() { var bakItem = $(this).parent(); - ginger.deleteBackupArchive(bakItem.prop("id"), function(){ bakItem.remove(); }); + ginger.deleteBackupArchive(bakItem.prop("id"), function() { + bakItem.remove(); + }); }); } }); }; ginger.initConfigBak = function() { - $("#newDefaultBakBtn").button().click(function(){ginger.createBackupArchive({}, function(){ - $("#bakGridBody").empty(); - ginger.setupBakGrid(); - })}); - $("#newCustomBakBtn").button().click(function(){$("#newBakDialog").dialog("open");}); - $("#batDelBtn").button().click(function(){$("#batDelDialog").dialog("open");}); + $("#newDefaultBakBtn").button().click(function() { + ginger.createBackupArchive({}, function() { + $("#bakGridBody").empty(); + ginger.setupBakGrid(); + }) + }); + $("#newCustomBakBtn").button().click(function() { + $("#newBakDialog").dialog("open"); + }); + $("#batDelBtn").button().click(function() { + $("#batDelDialog").dialog("open"); + }); ginger.setupBakGrid(); ginger.initBakDialog(); ginger.initBatDelDialog(); }; ginger.initNetworkConfig = function() { - var toggleBtnEdit = function(item, on){ + var toggleBtnEdit = function(item, on) { $("button", item).toggleClass("hide"); $(".cancel", item).toggleClass("hide", !on); }; - var attachBtnEvt = function(node, editFunc, saveFunc, cancelFunc){ - $("input", node).each(function(){ - $(this).on("keyup", function(){ + var attachBtnEvt = function(node, editFunc, saveFunc, cancelFunc) { + $("input", node).each(function() { + $(this).on("keyup", function() { var isValid = ginger.validateIp($(this).val()); - if($(this).parent().hasClass("mask")){ + if ($(this).parent().hasClass("mask")) { isValid = isValid && ginger.validateMask($(this).val()); } - isValid = isValid || $(this).val().trim()==""; + isValid = isValid || $(this).val().trim() == ""; $(this).toggleClass("invalid-field", !isValid); $(".save", node).prop("disabled", !isValid); }); }); $(".edit", node).button({ - icons: { primary: "ui-icon-pencil" }, + icons: { + primary: "ui-icon-pencil" + }, text: false }).click(editFunc); $(".save", node).button({ - icons: { primary: "ui-icon-disk" }, + icons: { + primary: "ui-icon-disk" + }, text: false }).click(saveFunc); $(".cancel", node).button({ - icons: { primary: "ui-icon-arrowreturnthick-1-w" }, + icons: { + primary: "ui-icon-arrowreturnthick-1-w" + }, text: false }).click(cancelFunc); }; - ginger.getInterfaces(function(data){ - var toggleInterfaceEdit = function(item, on){ + ginger.getInterfaces(function(data) { + var toggleInterfaceEdit = function(item, on) { $("label", item).toggleClass("hide", on); $("input", item).toggleClass("hide", !on) toggleBtnEdit(item, on); }; - for(var i=0;i<data.length;i++){ - var isEdit = data[i].ipaddr=="" || data[i].netmask==""; + for (var i = 0; i < data.length; i++) { + var isEdit = data[i].ipaddr == "" || data[i].netmask == ""; data[i].viewMode = isEdit ? "hide" : ""; data[i].editMode = isEdit ? "" : "hide"; var tempNode = $.parseHTML(wok.substitute($("#nicItem").html(), data[i])); $("#gingerInterface").append(tempNode); - attachBtnEvt(tempNode, function(){ + attachBtnEvt(tempNode, function() { var item = $(this).parent().parent(); toggleInterfaceEdit(item, true); - }, function(){ + }, function() { var item = $(this).parent().parent(); var name = $("span", item).first().html(); var ip = $(".ip", item); var mask = $(".mask", item); var interface = { ipaddr: $("input", ip).val(), - netmask: $("input", mask).val() + netmask: $("input", mask).val() }; - ginger.updateInterface(name, interface, function(){ - ginger.confirmInterfaceUpdate(name, function(){ + ginger.updateInterface(name, interface, function() { + ginger.confirmInterfaceUpdate(name, function() { $("label", ip).text(interface.ipaddr); $("label", mask).text(interface.netmask); toggleInterfaceEdit(item, false); }); }); - }, function(){ + }, function() { var item = $(this).parent().parent(); $("input", item).removeClass("invalid-field"); $("button", item).prop("disabled", false); @@ -298,93 +327,97 @@ ginger.initNetworkConfig = function() { }); } }); - ginger.getNetworkGlobals(function(data){ - var toggleNWGlobalsEdit = function(item, on){ + ginger.getNetworkGlobals(function(data) { + var toggleNWGlobalsEdit = function(item, on) { $("input", item).prop("disabled", !on); toggleBtnEdit(item, on); }; - var attachNWGlobalBtnEvt = function(node, saveFunc){ - attachBtnEvt(node, function(){ + var attachNWGlobalBtnEvt = function(node, saveFunc) { + attachBtnEvt(node, function() { toggleNWGlobalsEdit($(this).parent(), true); - }, function(){ + }, function() { saveFunc(); - }, function(){ + }, function() { toggleNWGlobalsEdit($(this).parent(), false); }); }; - if(!data.nameservers || data.nameservers.length==0){ + if (!data.nameservers || data.nameservers.length == 0) { data.nameservers = [""]; } - var addGlobalItem = function(container, itemValue, saveFunc){ + var addGlobalItem = function(container, itemValue, saveFunc) { var ip = itemValue; var tempNode = $.parseHTML(wok.substitute($("#nwGlobalItem").html(), { ip: ip, - viewMode: ip=="" ? "hide" : "", - editMode: ip=="" ? "": "hide" + viewMode: ip == "" ? "hide" : "", + editMode: ip == "" ? "" : "hide" })); - $("input", tempNode).prop("disabled", ip!=""); - $("#"+container).append(tempNode); + $("input", tempNode).prop("disabled", ip != ""); + $("#" + container).append(tempNode); $("input", tempNode).prop("oriVal", ip); - attachBtnEvt(tempNode, function(){ + attachBtnEvt(tempNode, function() { toggleNWGlobalsEdit($(this).parent(), true); - }, function(){ - saveFunc($(this).parent(), function(item){ + }, function() { + saveFunc($(this).parent(), function(item) { var input = $("input", item); - if(input.val()=="" && $(".sec-content", "#"+container).length!=1){ + if (input.val() == "" && $(".sec-content", "#" + container).length != 1) { item.remove(); - }else{ + } else { input.prop("oriVal", input.val()); toggleNWGlobalsEdit(item, false); } }); - }, function(){ + }, function() { var input = $("input", $(this).parent()); input.removeClass("invalid-field"); $("button", $(this).parent()).prop("disabled", false); input.val(input.prop("oriVal")); - if(input.prop("oriVal")==""){ + if (input.prop("oriVal") == "") { $(this).parent().remove(); - }else{ + } else { toggleNWGlobalsEdit($(this).parent(), false); } }); return tempNode; }; - var addDnsItem = function(dnsVal){ - return addGlobalItem("gingerDNS", dnsVal, function(item, postSave){ - if(!($("input", item).val().trim()==""&&$("input", item).prop("oriVal").trim()=="")){ - var nwGol = {nameservers:[]}; - $("input", item.parent()).each(function(){ - if($(this).val().trim()!=""){ + var addDnsItem = function(dnsVal) { + return addGlobalItem("gingerDNS", dnsVal, function(item, postSave) { + if (!($("input", item).val().trim() == "" && $("input", item).prop("oriVal").trim() == "")) { + var nwGol = { + nameservers: [] + }; + $("input", item.parent()).each(function() { + if ($(this).val().trim() != "") { nwGol.nameservers.push($(this).val()); } }); - if(nwGol.nameservers.length==0){ + if (nwGol.nameservers.length == 0) { delete nwGol.nameservers; } - ginger.updateNetworkGlobals(nwGol, function(){ + ginger.updateNetworkGlobals(nwGol, function() { postSave(item); }); } }); }; $("#gingerDnsAdd").button({ - icons: { primary: "ui-icon-plusthick" }, + icons: { + primary: "ui-icon-plusthick" + }, text: false - }).click(function(){ + }).click(function() { var item = addDnsItem(""); $(".cancel", item).removeClass("hide"); }); - for(var i=0;i<data.nameservers.length;i++){ + for (var i = 0; i < data.nameservers.length; i++) { addDnsItem(data.nameservers[i]); } - addGlobalItem("gingerGateway", data.gateway ? data.gateway : "", function(item, postSave){ + addGlobalItem("gingerGateway", data.gateway ? data.gateway : "", function(item, postSave) { var gateway = $("input", item.parent()).val(); - if(gateway.trim()!=""){ + if (gateway.trim() != "") { ginger.updateNetworkGlobals({ gateway: gateway - }, function(){ - ginger.confirmNetworkUpdate(function(){ + }, function() { + ginger.confirmNetworkUpdate(function() { postSave(item); }); }); @@ -393,17 +426,19 @@ ginger.initNetworkConfig = function() { }); }; -ginger.initPowerMgmt = function(){ +ginger.initPowerMgmt = function() { var selectedClass = "ui-icon-check"; var toSelectClass = "ui-icon-radio-off"; var onSelectClass = "ui-icon-radio-on"; - $(".actBtn", "#gingerPowerMgmt").button({disabled: true}).click(function(){ - var currentSelected = $('.'+selectedClass, $(".body", "#gingerPowerMgmt")); - var toBeSelected = $('.'+onSelectClass, $(".body", "#gingerPowerMgmt")); + $(".actBtn", "#gingerPowerMgmt").button({ + disabled: true + }).click(function() { + var currentSelected = $('.' + selectedClass, $(".body", "#gingerPowerMgmt")); + var toBeSelected = $('.' + onSelectClass, $(".body", "#gingerPowerMgmt")); var optName = $(":last-child", toBeSelected.parent()).html(); $("#progressIndicator", ".ginger .host-admin").addClass("progress-icon"); $(".actBtn", "#gingerPowerMgmt").button("option", "disabled", true); - ginger.activatePowerProfile(optName, function(){ + ginger.activatePowerProfile(optName, function() { currentSelected.removeClass(selectedClass).addClass(toSelectClass); currentSelected.next().addClass("to-select"); toBeSelected.removeClass(onSelectClass).addClass(selectedClass); @@ -412,20 +447,20 @@ ginger.initPowerMgmt = function(){ $("#progressIndicator", ".ginger .host-admin").removeClass("progress-icon"); }); }); - ginger.getPowerProfiles(function(data){ - for(var i=0;i<data.length;i++){ + ginger.getPowerProfiles(function(data) { + for (var i = 0; i < data.length; i++) { data[i].selected = data[i].active ? selectedClass : toSelectClass; data[i].toSelect = data[i].active ? "" : "to-select"; var tempNode = $.parseHTML(wok.substitute($("#pwMgmtItem").html(), data[i])); $(".body", "#gingerPowerMgmt").append(tempNode); - $(tempNode).on("click", function(){ - $(".item :first-child", $(this).parent()).each(function(){ - if($(this).hasClass(onSelectClass)){ + $(tempNode).on("click", function() { + $(".item :first-child", $(this).parent()).each(function() { + if ($(this).hasClass(onSelectClass)) { $(this).removeClass(onSelectClass).addClass(toSelectClass); } }); var iconNode = $(":first-child", $(this)); - if(iconNode.hasClass(toSelectClass)){ + if (iconNode.hasClass(toSelectClass)) { iconNode.removeClass(toSelectClass).addClass(onSelectClass); $(".actBtn", "#gingerPowerMgmt").button("option", "disabled", false); } @@ -434,17 +469,31 @@ ginger.initPowerMgmt = function(){ }); }; -ginger.initSANAdapter = function(){ - ginger.getSANAdapters(function(data){ +ginger.initSANAdapter = function() { + ginger.getSANAdapters(function(data) { var temStr = "<div class='item'>{value}</div>"; - for(var i=0; i<data.length; i++){ - $(".body", $(".name", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].name})); - $(".body", $(".wwpn", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].wwpn})); - $(".body", $(".wwnn", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].wwnn})); - $(".body", $(".state", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].state})); - $(".body", $(".port", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].vports_inuse+"/"+data[i].max_vports})); - $(".body", $(".speed", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].speed})); - $(".body", $(".symbolic", ".san-adapter")).append(wok.substitute(temStr, {value: data[i].symbolic_name})); + for (var i = 0; i < data.length; i++) { + $(".body", $(".name", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].name + })); + $(".body", $(".wwpn", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].wwpn + })); + $(".body", $(".wwnn", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].wwnn + })); + $(".body", $(".state", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].state + })); + $(".body", $(".port", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].vports_inuse + "/" + data[i].max_vports + })); + $(".body", $(".speed", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].speed + })); + $(".body", $(".symbolic", ".san-adapter")).append(wok.substitute(temStr, { + value: data[i].symbolic_name + })); } }); }; @@ -452,26 +501,26 @@ ginger.initSANAdapter = function(){ ginger.listSensors = function() { $(".progress-icon-sensor").show(); ginger.getSensors(function(result) { - if($(".ginger .host-admin .sensor-inline").length > 0) { + if ($(".ginger .host-admin .sensor-inline").length > 0) { $(".ginger .host-admin .sensor-inline").remove(); } $(".progress-icon-sensor").hide(); $.each(result, function(i1, d1) { - if(d1 && d1 != null && i1 != "hdds") { + if (d1 && d1 != null && i1 != "hdds") { $.each(d1, function(i2, d2) { var pathNode = $.parseHTML(wok.substitute($("#sensorBody").html(), { - labelHead : i2 + labelHead: i2 })); $(".sensor-panel").append(pathNode); - if(d2 && d2 != null) { + if (d2 && d2 != null) { $.each(d2, function(i3, d3) { - if(i3 && d3 != null && i3 != "unit") { + if (i3 && d3 != null && i3 != "unit") { $.each(d3, function(i4, d4) { - if(i4.match("input")) { + if (i4.match("input")) { var pathNodeU = $.parseHTML(wok.substitute($("#sensorUnit").html(), { - labelBody : i3, - labelNumber : d4, - labelUnit : d2["unit"] + labelBody: i3, + labelNumber: d4, + labelUnit: d2["unit"] })); $("#" + i2).append(pathNodeU); } @@ -481,24 +530,24 @@ ginger.listSensors = function() { } }); } else { - if(d1 != null) { + if (d1 != null) { var pathNode = $.parseHTML(wok.substitute($("#sensorBody").html(), { - labelHead : i1 + labelHead: i1 })); $(".sensor-panel").append(pathNode); $.each(d1, function(i5, d5) { - if(i5 != "unit") { + if (i5 != "unit") { var pathNodeU = $.parseHTML(wok.substitute($("#sensorUnit").html(), { - labelBody : i5, - labelNumber : d5, - labelUnit : d1["unit"] + labelBody: i5, + labelNumber: d5, + labelUnit: d1["unit"] })); - $("#" + i1).append(pathNodeU); + $("#" + i1).append(pathNodeU); } }); } } - $(".progress-icon-sensor").hide(); + $(".progress-icon-sensor").hide(); }); setTimeout(ginger.listSensors, 5000); }); @@ -511,11 +560,11 @@ ginger.initSensorsMonitor = function() { ginger.initSEPConfig = function() { var sepStatus = function() { ginger.getSEPStatus(function(result) { - if(result.status === "running") { + if (result.status === "running") { $("#sepStatusLog").removeClass("down"); $("#sepStatusLog").addClass("up"); - $("#sepStart").button().attr("style","display:none"); - $("#sepStop").button().attr("style","display"); + $("#sepStart").button().attr("style", "display:none"); + $("#sepStop").button().attr("style", "display"); } else { $("#sepStatusLog").removeClass("up"); $("#sepStatusLog").addClass("down"); @@ -528,11 +577,11 @@ ginger.initSEPConfig = function() { sepStatus(); $(".content-body", ".ginger .host-admin .subsc-manage").empty(); ginger.getSEPSubscriptions(function(result) { - for (var i=0; i<result.length; i++) { + for (var i = 0; i < result.length; i++) { var subscItem = $.parseHTML(wok.substitute($("#subscItem").html(), { - hostname : result[i]["hostname"], - port : result[i]["port"], - community : result[i]["community"] + hostname: result[i]["hostname"], + port: result[i]["port"], + community: result[i]["community"] })); $(".ginger .host-admin .subsc-manage .content-body").append(subscItem); } @@ -580,20 +629,20 @@ ginger.initSEPConfig = function() { $("#subsc-cancel").button("option", "disabled", false); }; $("#subscriptionAdd").dialog({ - modal : true, - width : 350, - draggable : false, - resizable : false, + modal: true, + width: 350, + draggable: false, + resizable: false, closeText: "X", - open : function() { + open: function() { $(".subsc-add-content .inputbox").keyup(function() { var sum = 0; $(".subsc-add-content .inputbox").each(function(index, data) { - if($(data).val() === "") { + if ($(data).val() === "") { sum += 1; } }) - if(sum != 0) { + if (sum != 0) { $("#subsc-submit").button("option", "disabled", true); } else { $("#subsc-submit").button("option", "disabled", false); @@ -608,9 +657,9 @@ ginger.initSEPConfig = function() { var port = parseInt($(".subsc-add-content .subsc-input[name='port']", ".subsc-add-body").val()); var community = $(".subsc-add-content .subsc-input[name='community']", ".subsc-add-body").val(); var dataSubmit = { - hostname : hostname, - port : port, - community : community, + hostname: hostname, + port: port, + community: community, }; ginger.addSEPSubscription(dataSubmit, function() { $("#subscriptionAdd").dialog("close"); @@ -624,7 +673,7 @@ ginger.initSEPConfig = function() { $("#subscriptionAdd").dialog("close"); }); }, - beforeClose : function() { + beforeClose: function() { clearSubscriptionSubmit(true); $("#subsc-submit").unbind("click"); } @@ -643,11 +692,11 @@ ginger.initUserManagement = function() { var listUsers = function() { $(".content-body", ".ginger .host-admin .user-manage").empty(); ginger.getUsers(function(result) { - for (var i=0; i<result.length; i++) { + for (var i = 0; i < result.length; i++) { var nodeNameItem = $.parseHTML(wok.substitute($("#userItem").html(), { - userName : result[i]["name"], - userGroup : result[i]["group"], - userProfile : result[i]["profile"] + userName: result[i]["name"], + userGroup: result[i]["group"], + userProfile: result[i]["profile"] })); $(".ginger .host-admin .user-manage .content-body").append(nodeNameItem); } @@ -681,20 +730,20 @@ ginger.initUserManagement = function() { $("#user-cancel").button("option", "disabled", false); }; $("#hostUserAdd").dialog({ - modal : true, - width : "auto", - height : 300, - draggable : false, - resizable : false, + modal: true, + width: "auto", + height: 300, + draggable: false, + resizable: false, closeText: "X", - open : function() { + open: function() { $("#kimchiuser").prop("checked", true); $(".user-input[name='userName']", ".user-add-content").keyup(function() { var tmpVal = $(this).val(); $(".user-input[name='userGroup']", ".user-add-content").val(tmpVal); }); $("#enableEditGroup").click(function() { - if($(this).prop("checked")) { + if ($(this).prop("checked")) { $(".user-input[name='userGroup']", ".user-add-content").attr("disabled", false); } else { $(".user-input[name='userGroup']", ".user-add-content").attr("disabled", true); @@ -703,11 +752,11 @@ ginger.initUserManagement = function() { $(".user-add-content .inputbox").keyup(function() { var sum = 0; $(".user-add-content .inputbox").each(function(index, data) { - if($(data).val() === "") { + if ($(data).val() === "") { sum += 1; } }) - if(sum != 0) { + if (sum != 0) { $("#user-submit").button("option", "disabled", true); } else { $("#user-submit").button("option", "disabled", false); @@ -724,10 +773,10 @@ ginger.initUserManagement = function() { var userGroup = $(".user-add-content .user-input[name='userGroup']", ".user-add-body").val(); var userProfile = $(".user-add-content .user-input>[type='radio']:checked", ".user-add-body").val(); var dataSubmit = { - name : userName, - password : userPasswd, - group : userGroup, - profile : userProfile + name: userName, + password: userPasswd, + group: userGroup, + profile: userProfile }; if (userPasswd === userConfirmPasswd) { ginger.addUser(dataSubmit, function() { @@ -738,10 +787,10 @@ ginger.initUserManagement = function() { }); } else { wok.confirm({ - title : i18n['KCHAPI6006M'], - content : i18n['GINUM0002E'], - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHAPI6006M'], + content: i18n['GINUM0002E'], + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }, function() { clearUMSubmit(); }, function() { @@ -753,7 +802,7 @@ ginger.initUserManagement = function() { $("#hostUserAdd").dialog("close"); }); }, - beforeClose : function() { + beforeClose: function() { clearUMSubmit(); $("#user-submit").unbind("click"); } @@ -763,23 +812,27 @@ ginger.initUserManagement = function() { }; ginger.initFirmware = function() { - ginger.getFirmware(function(data){ + ginger.getFirmware(function(data) { $("#gingerFWVer").html(data.level); }); $("#gingerPackPath").on("keyup", function(evt) { var packPath = $("#gingerPackPath").prop("value"); var isValid = /(^\/.*)$/.test(packPath); - $("#gingerPackPath").toggleClass("invalid-field", !isValid && packPath!==""); + $("#gingerPackPath").toggleClass("invalid-field", !isValid && packPath !== ""); $("#gingerPackPathSub").button(isValid ? "enable" : "disable"); }); - $("#gingerPackPathSub").button({disabled: true}).click(function(){ + $("#gingerPackPathSub").button({ + disabled: true + }).click(function() { wok.confirm({ - title : i18n['KCHAPI6006M'], - content : "The system will be immediately reset to flash the firmware. It may take longer than normal for it to reboot.", - confirm : i18n['KCHAPI6002M'], - cancel : i18n['KCHAPI6003M'] + title: i18n['KCHAPI6006M'], + content: "The system will be immediately reset to flash the firmware. It may take longer than normal for it to reboot.", + confirm: i18n['KCHAPI6002M'], + cancel: i18n['KCHAPI6003M'] }, function() { - ginger.updateFirmware({ path: $("#gingerPackPath").prop("value") }, function(){ + ginger.updateFirmware({ + path: $("#gingerPackPath").prop("value") + }, function() { $("#gingerFWUpdateMess").css("display", "inline-block"); $("#gingerPackPathSub").button("disable"); $("#gingerPackPath").prop("disabled", true); @@ -788,11 +841,7 @@ ginger.initFirmware = function() { }); }; -ginger.initAdmin = function(){ - $("#gingerHostAdmin").accordion({ - collapsible: true, - active: 1 - }); +ginger.initAdmin = function() { $(".content-area", "#gingerHostAdmin").css("height", "100%"); ginger.getCapabilities(function(result) { @@ -800,7 +849,7 @@ ginger.initAdmin = function(){ var itemLowCase = enableItem.toLowerCase(); if (capability) { $("." + itemLowCase + "-ppc-enabled").show(); - switch(itemLowCase) { + switch (itemLowCase) { case "firmware": ginger.initFirmware(); break; @@ -831,4 +880,4 @@ ginger.initAdmin = function(){ } }); }); -}; +}; \ No newline at end of file diff --git a/ui/pages/host-admin.html.tmpl b/ui/pages/host-admin.html.tmpl index 62db466..f23ad5a 100644 --- a/ui/pages/host-admin.html.tmpl +++ b/ui/pages/host-admin.html.tmpl @@ -23,123 +23,203 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA #silent _t = t.gettext <html> <head> -<link rel="stylesheet" type="text/css" href="plugins/ginger/css/ginger.css"> -<script type="text/javascript" src="plugins/ginger/js/util.js"></script> -<script type="text/javascript" src="plugins/ginger/js/host-admin.js"></script> + <link rel="stylesheet" type="text/css" href="plugins/ginger/css/ginger.css"> + <script type="text/javascript" src="plugins/ginger/js/util.js"></script> + <script type="text/javascript" src="plugins/ginger/js/host-admin.js"></script> </head> <body> -<div class="ginger"> - -<div id="gingerHostAdmin" class="host-admin"> - <h3 class="firmware-ppc-enabled">$_("Firmware Update")</h3> - <div class="content-area"> - <div id="gingerFWUpdateMess" class="message-area" style="display: none;"> - <span class="progress-icon"></span> - <span>$_("Firmware update is initializing. System will reboot in order to flash the firmware.")</span> - </div> - <div class="section"> - <span>$_("Firmware Version: ")</span> - <span id="gingerFWVer" class="firmware-ver"></span> + <div id="administration-root-container" class="ginger"> + <nav class="navbar navbar-default toolbar"> + <div class="container"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + </div> + <div class="collapse navbar-collapse" id="toolbar"> + </div> </div> - <div class="section"> - <div class="pack-path-label">$_("Package Path: ")</div> - <div class="pack-path-content"> - <input type="text" id="gingerPackPath" class="pack-path-input"> - <div class="input-hint"> - <span class="ui-icon ui-icon-info input-hint-icon"></span> - <span class="input-hint-text">$_("The absolute path to the firmware rpm/hpm.")</span> + </nav> + <div class="container"> + <div id="gingerHostAdmin" class="host-admin"> + <!-- Firmware Update Panel --> + <div class="panel-group firmware-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#firmware-update-content-area" aria-expanded="false" aria-controls="firmware-update-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Firmware Update")</span> + </a> + </h3> + <div id="firmware-update-content-area" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> + <div id="gingerFWUpdateMess" class="message-area" style="display: none;"> + <span class="progress-icon"></span> + <span>$_("Firmware update is initializing. System will reboot in order to flash the firmware.")</span> </div> + <div class="section"> + <span>$_("Firmware Version: ")</span> + <span id="gingerFWVer" class="firmware-ver"></span> + </div> + <div class="section"> + <div class="pack-path-label">$_("Package Path: ")</div> + <div class="pack-path-content"> + <input type="text" id="gingerPackPath" class="pack-path-input"> + <div class="input-hint"> + <span class="ui-icon ui-icon-info input-hint-icon"></span> + <span class="input-hint-text">$_("The absolute path to the firmware rpm/hpm.")</span> + </div> + </div> + <button id="gingerPackPathSub">$_("Update")</button> + </div> + </div> + <hr> </div> - <button id="gingerPackPathSub">$_("Update")</button> - </div> - </div> - <h3 class="backup-ppc-enabled">$_("Configuration Backup")</h3> - <div class="content-area"> - <div class="action-bar"> - <span id="batDelBtn" class="item">$_("Batch Delete")</span> - <span id="newCustomBakBtn" class="item">$_("New Custom Backup")</span> - <span id="newDefaultBakBtn" class="item">$_("Generate Default Backup")</span> - </div> - <div class="bak-grid-header"> - <div class="cell file-col">$_("File")</div> - <div class="cell time-col">$_("Timestamp")</div> - </div> - <div id="bakGridBody" class="bak-grid-body"></div> - </div> - <h3 class="network-ppc-enabled">$_("Network Configuration")</h3> - <div class="content-area nw-config"> - <div class="pane interface"> - <div class="sec-label"><span>$_("Interface")</span></div> - <div class="sec-content"> - <div class="grid-head"><span class="cell name">$_("Name")</span><span class="cell ip">$_("IP")</span><span class="cell mask">$_("Mask")</span></div> - <div class="grid-body" id="gingerInterface"></div> + <!-- Configuration Backup Panel --> + <div class="panel-group backup-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#backup-ppc-content-area" aria-expanded="false" aria-controls="backup-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Configuration Backup")</span> + </a> + </h3> + <div id="backup-ppc-content-area" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> + <div class="action-bar"> + <span id="batDelBtn" class="item">$_("Batch Delete")</span> + <span id="newCustomBakBtn" class="item">$_("New Custom Backup")</span> + <span id="newDefaultBakBtn" class="item">$_("Generate Default Backup")</span> + </div> + <div class="bak-grid-header"> + <div class="cell file-col">$_("File")</div> + <div class="cell time-col">$_("Timestamp")</div> + </div> + <div id="bakGridBody" class="bak-grid-body"></div> </div> + <hr> </div> - <div class="pane global"> - <div class="vertical-separator"> - <div class="sec-label"><span>$_("DNS")</span><button id="gingerDnsAdd" class="addBtn"></button></div> - <div id="gingerDNS"></div> - </div> - <div> - <div class="sec-label"><span>$_("Gateway")</span></div> - <div id="gingerGateway"></div> + <!-- Network Configuration Panel --> + <div class="panel-group network-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#network-ppc-content-area" aria-expanded="false" aria-controls="network-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Network Configuration")</span> + </a> + </h3> + <div id="network-ppc-content-area" class="panel-collapse collapse nw-config" role="tabpanel" aria-labelledby="headingOne"> + <div class="pane interface"> + <div class="sec-label"><span>$_("Interface")</span></div> + <div class="sec-content"> + <div class="grid-head"><span class="cell name">$_("Name")</span><span class="cell ip">$_("IP")</span><span class="cell mask">$_("Mask")</span></div> + <div class="grid-body" id="gingerInterface"></div> + </div> + </div> + <div class="pane global"> + <div class="vertical-separator"> + <div class="sec-label"><span>$_("DNS")</span><button id="gingerDnsAdd" class="addBtn"></button></div> + <div id="gingerDNS"></div> + </div> + <div> + <div class="sec-label"><span>$_("Gateway")</span></div> + <div id="gingerGateway"></div> + </div> + </div> </div> + <hr> </div> - </div> - <h3 class="powerprofiles-ppc-enabled">$_("Power Options")</h3> - <div class="content-area" id="gingerPowerMgmt"> - <div class="pw-opt"> - <div class="header"> - <span class="ui-icon ui-icon-check legend"></span><span class="legend separator">$_("Activated Option")</span> - <span class="ui-icon ui-icon-radio-on legend"></span><span class="legend separator">$_("Selected Option")</span> - <span class="ui-icon ui-icon-radio-off legend"></span><span class="legend">$_("Unselected Option")</span> - <span class="actBtn">$_("Activate")</span> - <span id="progressIndicator"></span> + <!-- Power Options Panel --> + <div class="panel-group powerprofiles-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#gingerPowerMgmt" aria-expanded="false" aria-controls="gingerPowerMgmt" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Power Options")</span> + </a> + </h3> + <div id="gingerPowerMgmt" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> + <div class="pw-opt"> + <div class="header"> + <span class="ui-icon ui-icon-check legend"></span><span class="legend separator">$_("Activated Option")</span> + <span class="ui-icon ui-icon-radio-on legend"></span><span class="legend separator">$_("Selected Option")</span> + <span class="ui-icon ui-icon-radio-off legend"></span><span class="legend">$_("Unselected Option")</span> + <span class="actBtn">$_("Activate")</span> + <span id="progressIndicator"></span> + </div> + <div class="body"></div> + </div> + </div> + <hr> </div> - <div class="body"></div> + <!-- SAN Adapters Panel --> + <div class="panel-group sanadapters-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#sanadapters-ppc-content-area" aria-expanded="false" aria-controls="sanadapters-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("SAN Adapters")</span> + </a> + </h3> + <div id="sanadapters-ppc-content-area" class="panel-collapse collapse san-adapter" role="tabpanel" aria-labelledby="headingOne"> + <div class="cell name"><div class="head">$_("Name")</div><div class="body"></div></div> + <div class="cell wwpn"><div class="head">$_("WWPN")</div><div class="body"></div></div> + <div class="cell wwnn"><div class="head">$_("WWNN")</div><div class="body"></div></div> + <div class="cell state"><div class="head">$_("State")</div><div class="body"></div></div> + <div class="cell port"><div class="head">$_("In-Use/Max Ports")</div><div class="body"></div></div> + <div class="cell speed"><div class="head">$_("Speed")</div><div class="body"></div></div> + <div class="cell symbolic"><div class="head">$_("Symbolic Name")</div><div class="body"></div></div> + </div> + <hr> </div> - </div> - <h3 class="sanadapters-ppc-enabled">$_("SAN Adapters")</h3> - <div class="content-area san-adapter"> - <div class="cell name"><div class="head">$_("Name")</div><div class="body"></div></div> - <div class="cell wwpn"><div class="head">$_("WWPN")</div><div class="body"></div></div> - <div class="cell wwnn"><div class="head">$_("WWNN")</div><div class="body"></div></div> - <div class="cell state"><div class="head">$_("State")</div><div class="body"></div></div> - <div class="cell port"><div class="head">$_("In-Use/Max Ports")</div><div class="body"></div></div> - <div class="cell speed"><div class="head">$_("Speed")</div><div class="body"></div></div> - <div class="cell symbolic"><div class="head">$_("Symbolic Name")</div><div class="body"></div></div> - </div> - <h3 class="sensors-ppc-enabled">$_("Sensor Monitor")</h3> - <div class="content-area sensor-panel"> - <div class="progress-icon-sensor"></div> - </div> - <h3 class="sep-ppc-enabled">$_("SEP Configuration")</h3> - <div class="content-area subsc-manage"> - <div class="status-header"> - <div class="sep-label">$_("Status:")</div> - <div id="sepStatusLog" class="sep-dot-active down"></div> - <div class="sep-field sep-buttons"> - <span id="sepStart" class="actBtn">$_("Start")</span> - <span id="sepStop" class="actBtn" style="display:none">$_("Stop")</span> + <!-- Sensor Monitor Panel --> + <div class="panel-group sensors-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#sensors-ppc-content-area" aria-expanded="false" aria-controls="sensors-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("Sensor Monitor")</span> + </a> + </h3> + <div id="sensors-ppc-content-area" class="panel-collapse collapse sensor-panel" role="tabpanel" aria-labelledby="headingOne"> + <div class="progress-icon-sensor"></div> </div> + <hr> </div> - <div class="content-header"> - <span>$_("Hostname")</span> - <span>$_("Port")</span> - <span>$_("Community")</span> - <button class="add-subscription"></button> + <!-- SEP Configuration Panel --> + <div class="panel-group sep-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#sep-ppc-content-area" aria-expanded="false" aria-controls="sep-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("SEP Configuration")</span> + </a> + </h3> + <div id="sep-ppc-content-area" class="panel-collapse collapse subsc-manage" role="tabpanel" aria-labelledby="headingOne"> + <div class="status-header"> + <div class="sep-label">$_("Status:")</div> + <div id="sepStatusLog" class="sep-dot-active down"></div> + <div class="sep-field sep-buttons"> + <span id="sepStart" class="actBtn">$_("Start")</span> + <span id="sepStop" class="actBtn" style="display:none">$_("Stop")</span> + </div> + </div> + <div class="content-header"> + <span>$_("Hostname")</span> + <span>$_("Port")</span> + <span>$_("Community")</span> + <button class="add-subscription"></button> + </div> + <div class="content-body"></div> + </div> + <hr> </div> - <div class="content-body"></div> - </div> - <h3 class="users-ppc-enabled">$_("User Management")</h3> - <div class="content-area user-manage"> - <div class="content-header"> - <span>$_("Name")</span> - <span>$_("Group")</span> - <span>$_("Profile")</span> - <button class="add-user"></button> + <!-- User Management Panel --> + <div class="panel-group users-ppc-enabled" id="accordion" role="tablist" aria-multiselectable="true"> + <h3> + <a role="button" data-toggle="collapse" data-parent="#accordion" href="#users-ppc-content-area" aria-expanded="false" aria-controls="users-ppc-content-area" class=""> + <span class="accordion-icon"></span><span class="accordion-text">$_("User Management")</span> + </a> + </h3> + <div id="users-ppc-content-area" class="panel-collapse collapse user-manage" role="tabpanel" aria-labelledby="headingOne"> + <div class="content-header"> + <span>$_("Name")</span> + <span>$_("Group")</span> + <span>$_("Profile")</span> + <button class="add-user"></button> + </div> + <div class="content-body"></div> + </div> + <hr> </div> - <div class="content-body"></div> </div> </div> @@ -176,7 +256,6 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </div> <div class="subsc-add-content subsc-colume"> <input class="subsc-input inputbox" name="hostname" /><br> - <input class="subsc-input inputbox" name="port" /><br> <input class="subsc-input inputbox" name="community" /><br> </div> <div class="subsc-manage-footer"> @@ -217,18 +296,18 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </div> <script id="backupItem" type="text/html"> <div class="bak-grid-item" id="{identity}"> - <div class="cell file-col">{file}</div> - <div class="cell time-col">{timestamp}</div> - <span class="cell act-button download"></span> - <span class="cell act-button delete"></span> +<div class="cell file-col">{file}</div> +<div class="cell time-col">{timestamp}</div> +<span class="cell act-button download"></span> +<span class="cell act-button delete"></span> </div> </script> <script id="backupTooltip" type="text/html"> <div class="header">$_("Description")</div> <div class="sub-content">{description}</div> <div class="crt-bak-section"> - <div class="path-pick"><div class="header">$_("Path Included")</div><div class="sub-content">includePlaceHodler</div></div> - <div class="path-pick"><div class="header">$_("Path Excluded")</div><div class="sub-content">excludePlaceHodler</div></div> +<div class="path-pick"><div class="header">$_("Path Included")</div><div class="sub-content">includePlaceHodler</div></div> +<div class="path-pick"><div class="header">$_("Path Excluded")</div><div class="sub-content">excludePlaceHodler</div></div> </div> </script> <script id="pathItem" type="text/html"> @@ -236,22 +315,22 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </script> <script id="nicItem" type="text/html"> <div class="item"> - <span class="cell name">{name}</span><!-- - --><span class="cell ip"><label class="{viewMode}">{ipaddr}</label><input type="text" class="{editMode}" value="{ipaddr}"></span><!-- - --><span class="cell mask"><label class="{viewMode}">{netmask}</label><input type="text" class="{editMode}" value="{netmask}"></span> - <span class="action-area"> - <button class="edit {viewMode}"></button> - <button class="save {editMode}"></button> - <button class="cancel hide"></button> - </span> +<span class="cell name">{name}</span><!-- +--><span class="cell ip"><label class="{viewMode}">{ipaddr}</label><input type="text" class="{editMode}" value="{ipaddr}"></span><!-- +--><span class="cell mask"><label class="{viewMode}">{netmask}</label><input type="text" class="{editMode}" value="{netmask}"></span> +<span class="action-area"> +<button class="edit {viewMode}"></button> +<button class="save {editMode}"></button> +<button class="cancel hide"></button> +</span> </div> </script> <script id="nwGlobalItem" type="text/html"> <div class="sec-content"> - <input type="text" value="{ip}"> - <button class="edit {viewMode}"></button> - <button class="save {editMode}"></button> - <button class="cancel hide"></button> +<input type="text" value="{ip}"> +<button class="edit {viewMode}"></button> +<button class="save {editMode}"></button> +<button class="cancel hide"></button> </div> </script> <script id="pwMgmtItem" type="text/html"> @@ -259,8 +338,8 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </script> <script id="sensorBody" type="text/html"> <div class="sensor-inline"> - <div class="sensor-head">{labelHead}</div> - <div class="sensor-body" id={labelHead}></div> +<div class="sensor-head">{labelHead}</div> +<div class="sensor-body" id={labelHead}></div> </div> </script> <script id="sensorUnit" type="text/html"> @@ -268,22 +347,22 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA </script> <script id="userItem" type="text/html"> <div class="user-item"> - <div class="user-manage-column" data-type="name">{userName}</div> - <div class="user-manage-column" data-type="group">{userGroup}</div> - <div class="user-manage-column" data-type="profile">{userProfile}</div> - <button class="detach"></button> +<div class="user-manage-column" data-type="name">{userName}</div> +<div class="user-manage-column" data-type="group">{userGroup}</div> +<div class="user-manage-column" data-type="profile">{userProfile}</div> +<button class="detach"></button> </div> </script> <script id="subscItem" type="text/html"> <div class="subsc-item"> - <div class="subsc-manage-column" data-type="hostname">{hostname}</div> - <div class="subsc-manage-column" data-type="port">{port}</div> - <div class="subsc-manage-column" data-type="community">{community}</div> - <button class="detach"></button> +<div class="subsc-manage-column" data-type="hostname">{hostname}</div> +<div class="subsc-manage-column" data-type="port">{port}</div> +<div class="subsc-manage-column" data-type="community">{community}</div> +<button class="detach"></button> </div> </script> <script> - ginger.initAdmin(); +ginger.initAdmin(); </script> <script id="userManagement" type="text/javascript"></script> </body> -- 1.9.3