|
@@ -38,20 +38,23 @@
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
- <div class="ui basic segment form">
|
|
|
- <div class="unstackable fields">
|
|
|
- <div class="ten wide field">
|
|
|
- <label>Multicast Recipient Limit</label>
|
|
|
- <input type="number" id="" placeholder="32" value="32">
|
|
|
+ <br>
|
|
|
+ <div class="ui form">
|
|
|
+ <h3>Custom IP Range</h3>
|
|
|
+ <p>Manual IP Range Configuration. The IP range must be within the selected CIDR range.
|
|
|
+ <br>Use <code>Utilities > IP to CIDR tool</code> if you are not too familiar with CIDR notations.</p>
|
|
|
+ <div class="two fields">
|
|
|
+ <div class="field">
|
|
|
+ <label>IP Start</label>
|
|
|
+ <input type="text" class="ganIpStart" placeholder="">
|
|
|
</div>
|
|
|
- <div class="six wide field">
|
|
|
- <div class="ui toggle checkbox" style="margin-top: 2.3em; padding-left: 0.6em;">
|
|
|
- <label>Enable Multicast</label>
|
|
|
- <input type="checkbox" tabindex="0" class="hidden">
|
|
|
- </div>
|
|
|
+ <div class="field">
|
|
|
+ <label>IP End</label>
|
|
|
+ <input type="text" class="ganIpEnd" placeholder="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <button onclick="setNetworkRange();" class="ui basic button"><i class="ui blue save icon"></i> Save Settings</button>
|
|
|
|
|
|
<div class="ui divider"></div>
|
|
|
<h2>Members</h2>
|
|
@@ -65,9 +68,9 @@
|
|
|
<tr>
|
|
|
<th>Auth</th>
|
|
|
<th>Address</th>
|
|
|
- <th>Name/Description</th>
|
|
|
+ <th>Name</th>
|
|
|
<th>Managed IP</th>
|
|
|
- <th>Last Seen</th>
|
|
|
+ <th>Authorized Since</th>
|
|
|
<th>Version</th>
|
|
|
<th>Remove</th>
|
|
|
</tr>
|
|
@@ -138,7 +141,7 @@
|
|
|
td.innerHTML = cidrs[i];
|
|
|
let thisCidr = cidrs[i];
|
|
|
td.onclick = function(){
|
|
|
- selectNetworkRange(thisCidr);
|
|
|
+ selectNetworkRange(thisCidr, td);
|
|
|
};
|
|
|
|
|
|
row.appendChild(td);
|
|
@@ -159,12 +162,68 @@
|
|
|
$(".iprange").each(function(){
|
|
|
if ($(this).attr("CIDR") == currentCIDR){
|
|
|
$(this).addClass("active");
|
|
|
+ populateStartEndIpByCidr(currentCIDR);
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- function selectNetworkRange(cidr){
|
|
|
- alert(cidr);
|
|
|
+ function populateStartEndIpByCidr(cidr){
|
|
|
+ function cidrToRange(cidr) {
|
|
|
+ var range = [2];
|
|
|
+ cidr = cidr.split('/');
|
|
|
+ var start = ip2long(cidr[0]);
|
|
|
+ range[0] = long2ip(start);
|
|
|
+ range[1] = long2ip(Math.pow(2, 32 - cidr[1]) + start - 1);
|
|
|
+ return range;
|
|
|
+ }
|
|
|
+ var cidrRange = cidrToRange(cidr);
|
|
|
+ $(".ganIpStart").val(cidrRange[0]);
|
|
|
+ $(".ganIpEnd").val(cidrRange[1]);
|
|
|
+ }
|
|
|
+
|
|
|
+ function selectNetworkRange(cidr, object){
|
|
|
+ populateStartEndIpByCidr(cidr);
|
|
|
+
|
|
|
+ $(".iprange.active").removeClass("active");
|
|
|
+ $(object).addClass("active");
|
|
|
+ }
|
|
|
+
|
|
|
+ function setNetworkRange(){
|
|
|
+ var ipstart = $(".ganIpStart").val().trim();
|
|
|
+ var ipend = $(".ganIpEnd").val().trim();
|
|
|
+
|
|
|
+ if (ipstart == ""){
|
|
|
+ $(".ganIpStart").parent().addClass("error");
|
|
|
+ }else{
|
|
|
+ $(".ganIpStart").parent().removeClass("error");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (ipend == ""){
|
|
|
+ $(".ganIpEnd").parent().addClass("error");
|
|
|
+ }else{
|
|
|
+ $(".ganIpEnd").parent().removeClass("error");
|
|
|
+ }
|
|
|
+
|
|
|
+ //Get CIDR from selected range group
|
|
|
+ var cidr = $(".iprange.active").attr("cidr");
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: "/api/gan/network/setRange",
|
|
|
+ metohd: "POST",
|
|
|
+ data:{
|
|
|
+ netid: currentGANetID,
|
|
|
+ cidr: cidr,
|
|
|
+ ipstart: ipstart,
|
|
|
+ ipend: ipend
|
|
|
+ },
|
|
|
+ success: function(data){
|
|
|
+ if (data.error != undefined){
|
|
|
+ msgbox(data.error, false, 5000)
|
|
|
+ }else{
|
|
|
+ msgbox("Network Range Updated")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
|
|
@@ -218,10 +277,15 @@
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ //Handle delete IP from memeber
|
|
|
+ function deleteIpFromMemeber(memberid, ip){
|
|
|
+ alert(ip);
|
|
|
+ }
|
|
|
+
|
|
|
//Member table populate
|
|
|
function renderMemeberTable(forceUpdate = false) {
|
|
|
$.ajax({
|
|
|
- url: '/api/gan/members/list?netid=e7dd1ce7bfd3b1f9&detail=true',
|
|
|
+ url: '/api/gan/members/list?netid=' + currentGANetID + '&detail=true',
|
|
|
type: 'GET',
|
|
|
success: function(data) {
|
|
|
const tableBody = $('#networkMemeberTable');
|
|
@@ -264,11 +328,29 @@
|
|
|
if (!member.authorized){
|
|
|
rowClass = "unauthorized"
|
|
|
}
|
|
|
+
|
|
|
+ let assignedIp = "";
|
|
|
+
|
|
|
+ if (member.ipAssignments.length == 0){
|
|
|
+ assignedIp = "Not assigned"
|
|
|
+ }else{
|
|
|
+ assignedIp = `<div class="ui list">`
|
|
|
+ member.ipAssignments.forEach(function(thisIp){
|
|
|
+ assignedIp += `<div class="item" style="width: 100%;">${thisIp} <a style="cursor:pointer; float: right;" onclick="deleteIpFromMemeber('${member.address}','${thisIp}');"><i class="red remove icon"></i></a></div>`;
|
|
|
+ })
|
|
|
+ assignedIp += `</div>`
|
|
|
+ }
|
|
|
const row = $(`<tr class="GANetMemberEntity ${rowClass}" style="${unauthorizedStyle}">`);
|
|
|
row.append($(`<td class="GANetMember ${rowClass}" style="text-align: center;">`).html(authorizedCheckbox));
|
|
|
row.append($('<td>').text(member.address));
|
|
|
row.append($('<td>').text(""));
|
|
|
- row.append($('<td>').text(member.ipAssignments || ''));
|
|
|
+ row.append($('<td>').html(`${assignedIp}
|
|
|
+ <div class="ui action mini fluid input">
|
|
|
+ <input type="text" placeholder="Search...">
|
|
|
+ <button class="ui basic icon button">
|
|
|
+ <i class="add icon"></i>
|
|
|
+ </button>
|
|
|
+ </div>`));
|
|
|
row.append($('<td>').text(lastAuthTime));
|
|
|
row.append($('<td>').text(version));
|
|
|
row.append($(`<td style="text-align: center;" onclick="handleMemberDelete('${member.address}');">`).html(`<button class="ui basic mini icon button"><i class="red remove icon"></i></button>`));
|