mirror of
https://github.com/key-networks/ztncui.git
synced 2025-08-01 21:32:51 +02:00
Change network rename UI/UX
This commit is contained in:
lideming
parent
32d43462db
commit
885589f1bf
2 changed files with 122 additions and 90 deletions
|
|
@ -5,100 +5,131 @@
|
||||||
|
|
||||||
extends network_layout
|
extends network_layout
|
||||||
|
|
||||||
|
//- Don't display that title
|
||||||
block title
|
block title
|
||||||
//- don't display that title
|
|
||||||
|
//- Replace the network title with the editable one
|
||||||
|
block network_title
|
||||||
|
h2
|
||||||
|
| Network
|
||||||
|
a#change-name(href='#')
|
||||||
|
span#name= network.name
|
||||||
|
i.glyphicon.glyphicon-pencil(style='font-size: 20px;')
|
||||||
|
input#name-input.form-control(type='text' style='width: 200px; display: none;')
|
||||||
|
| (#{network.nwid}):
|
||||||
|
script.
|
||||||
|
$(function() {
|
||||||
|
var nwurl = '/controller/network/#{network.nwid}';
|
||||||
|
var name = !{JSON.stringify(network.name)};
|
||||||
|
|
||||||
|
function toggleNameEditor(show) {
|
||||||
|
$('#change-name').css('display', !show ? '' : 'none');
|
||||||
|
$('#name-input').css('display', show ? 'inline-block' : 'none');
|
||||||
|
}
|
||||||
|
|
||||||
|
function submit() {
|
||||||
|
var newName = $('#name-input').val();
|
||||||
|
if (newName != name) {
|
||||||
|
name = newName;
|
||||||
|
$.post(nwurl + '/name', {'name': name})
|
||||||
|
.done(function () {
|
||||||
|
$('#name').text(newName);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
toggleNameEditor(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#change-name').on('click', function() {
|
||||||
|
toggleNameEditor(true);
|
||||||
|
$('#name-input').val(name);
|
||||||
|
$('#name-input').focus();
|
||||||
|
});
|
||||||
|
$('#name-input').on('focusout', submit);
|
||||||
|
$('#name-input').keypress(function (e) {
|
||||||
|
if (e.which == 13) submit();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
block net_content
|
block net_content
|
||||||
- const nwurl = '/controller/network/' + network.nwid;
|
- const nwurl = '/controller/network/' + network.nwid;
|
||||||
if error
|
|
||||||
b #{error}
|
|
||||||
else
|
|
||||||
form(method='POST' action=(nwurl + '/name'))
|
|
||||||
.form-group.row
|
|
||||||
.col-sm-2
|
|
||||||
label(for='name') Name:
|
|
||||||
.col-sm-8.col-xs-9
|
|
||||||
input#name.form-control(type='text' name='name' placeholder='New network name' value=(undefined===network.name? '' : network.name))
|
|
||||||
.col-sm-2.col-xs-3
|
|
||||||
button.btn.btn-primary(type='submit') Submit
|
|
||||||
|
|
||||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/private') role='button')
|
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/private') role='button')
|
||||||
= network.private ? "Private" : "Public"
|
= network.private ? "Private" : "Public"
|
||||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/easy') role='button') Easy setup
|
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/easy') role='button') Easy setup
|
||||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/routes') role='button') Routes
|
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/routes') role='button') Routes
|
||||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/ipAssignmentPools') role='button') Assignment Pools
|
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/ipAssignmentPools') role='button') Assignment Pools
|
||||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/v4AssignMode') role='button') IPv4 Assign Mode
|
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/v4AssignMode') role='button') IPv4 Assign Mode
|
||||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/v6AssignMode') role='button') IPv6 Assign Mode
|
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/v6AssignMode') role='button') IPv6 Assign Mode
|
||||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/dns') role='button') DNS
|
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/dns') role='button') DNS
|
||||||
|
|
||||||
if (members !== undefined)
|
if (members !== undefined)
|
||||||
script.
|
script.
|
||||||
$(function() {
|
$(function() {
|
||||||
const url = "#{nwurl}/members";
|
const url = "#{nwurl}/members";
|
||||||
$('.authCheck').on('click', function() {
|
$('.authCheck').on('click', function() {
|
||||||
$.post(url, {'id': this.value, 'auth': this.checked});
|
$.post(url, {'id': this.value, 'auth': this.checked});
|
||||||
});
|
|
||||||
$('.bridgeCheck').on('click', function() {
|
|
||||||
$.post(url, {'id': this.value, 'activeBridge': this.checked});
|
|
||||||
});
|
|
||||||
$('.text').on('change', function() {
|
|
||||||
$.post(url, {'id': this.name, 'name': this.value});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
h3#members Members (#{members.length})
|
$('.bridgeCheck').on('click', function() {
|
||||||
form(method='POST' action='')
|
$.post(url, {'id': this.value, 'activeBridge': this.checked});
|
||||||
table.table.table-responsive.table-striped.table-hover
|
});
|
||||||
|
$('.text').on('change', function() {
|
||||||
|
$.post(url, {'id': this.name, 'name': this.value});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
h3#members Members (#{members.length})
|
||||||
|
form(method='POST' action='')
|
||||||
|
table.table.table-responsive.table-striped.table-hover
|
||||||
|
tr
|
||||||
|
td(width='3%')
|
||||||
|
= ''
|
||||||
|
td(width='20%')
|
||||||
|
| Member name
|
||||||
|
td(width='10%')
|
||||||
|
| Member ID
|
||||||
|
td(width='10%')
|
||||||
|
| Authorized
|
||||||
|
td(width='10%')
|
||||||
|
| Active bridge
|
||||||
|
td(width='47%')
|
||||||
|
| IP assignment
|
||||||
|
each member in members
|
||||||
tr
|
tr
|
||||||
td(width='3%')
|
- const url = nwurl + '/member/' + member.id
|
||||||
= ''
|
td
|
||||||
td(width='20%')
|
a(href=url + '/delete')
|
||||||
| Member name
|
i.glyphicon.glyphicon-trash
|
||||||
td(width='10%')
|
td
|
||||||
| Member ID
|
input.form-control.text(type='text' name=member.id value=member.name)
|
||||||
td(width='10%')
|
td
|
||||||
| Authorized
|
a(href=url) #{member.id}
|
||||||
td(width='10%')
|
td
|
||||||
| Active bridge
|
input.authCheck(type='checkbox' value=member.id checked=(member.authorized? true : false))
|
||||||
td(width='47%')
|
td
|
||||||
| IP assignment
|
input.bridgeCheck(type='checkbox' value=member.id checked=(member.activeBridge? true : false))
|
||||||
each member in members
|
td
|
||||||
tr
|
each ipAssignment in member.ipAssignments
|
||||||
- const url = nwurl + '/member/' + member.id
|
a(href=nwurl + '/member/' + member.id + '/ipAssignments')
|
||||||
td
|
each digit in ipAssignment
|
||||||
a(href=url + '/delete')
|
= digit
|
||||||
i.glyphicon.glyphicon-trash
|
= ' '
|
||||||
td
|
else
|
||||||
input.form-control.text(type='text' name=member.id value=member.name)
|
a(href=nwurl + '/member/' + member.id + '/ipAssignments')
|
||||||
td
|
| IP assignment
|
||||||
a(href=url) #{member.id}
|
else
|
||||||
td
|
.alert.alert-info
|
||||||
input.authCheck(type='checkbox' value=member.id checked=(member.authorized? true : false))
|
strong There are no members on this network - invite users to join #{network.nwid}
|
||||||
td
|
|
||||||
input.bridgeCheck(type='checkbox' value=member.id checked=(member.activeBridge? true : false))
|
|
||||||
td
|
|
||||||
each ipAssignment in member.ipAssignments
|
|
||||||
a(href=nwurl + '/member/' + member.id + '/ipAssignments')
|
|
||||||
each digit in ipAssignment
|
|
||||||
= digit
|
|
||||||
= ' '
|
|
||||||
else
|
|
||||||
a(href=nwurl + '/member/' + member.id + '/ipAssignments')
|
|
||||||
| IP assignment
|
|
||||||
else
|
|
||||||
.alert.alert-info
|
|
||||||
strong There are no members on this network - invite users to join #{network.nwid}
|
|
||||||
|
|
||||||
a.btn.btn-default(href='' name='refresh' role='button') Refresh
|
a.btn.btn-default(href='' name='refresh' role='button') Refresh
|
||||||
|
|
||||||
h3#detail Detail for network
|
h3#detail Detail for network
|
||||||
each value, key in network
|
each value, key in network
|
||||||
.row
|
.row
|
||||||
.col-sm-2
|
.col-sm-2
|
||||||
a(href= network.nwid + '/' + key) #{key}:
|
a(href= network.nwid + '/' + key) #{key}:
|
||||||
.col-sm-10
|
.col-sm-10
|
||||||
- if ((!!value ) && (value.constructor == Object || value.constructor == Array))
|
- if ((!!value ) && (value.constructor == Object || value.constructor == Array))
|
||||||
code #{JSON.stringify(value)}
|
code #{JSON.stringify(value)}
|
||||||
- else
|
- else
|
||||||
code #{value}
|
code #{value}
|
||||||
|
|
||||||
a.btn.btn-default(href='/controller/networks' name='networks' role='button' style='margin-top: 10px;') Networks
|
a.btn.btn-default(href='/controller/networks' name='networks' role='button' style='margin-top: 10px;') Networks
|
||||||
|
|
|
||||||
|
|
@ -11,10 +11,11 @@ block content
|
||||||
else
|
else
|
||||||
.row
|
.row
|
||||||
.col-sm-10
|
.col-sm-10
|
||||||
h2
|
block network_title
|
||||||
| Network
|
h2
|
||||||
a(href='/controller/network/' + network.nwid) #{network.name}
|
| Network
|
||||||
| (#{network.nwid}):
|
a(href='/controller/network/' + network.nwid) #{network.name}
|
||||||
|
| (#{network.nwid}):
|
||||||
block title
|
block title
|
||||||
if title
|
if title
|
||||||
h3= title
|
h3= title
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue