mirror of
https://github.com/key-networks/ztncui.git
synced 2025-07-29 03:42: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
|
||||
|
||||
//- Don't display that 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
|
||||
- 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')
|
||||
= 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 + '/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 + '/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 + '/dns') role='button') DNS
|
||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/private') role='button')
|
||||
= 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 + '/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 + '/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 + '/dns') role='button') DNS
|
||||
|
||||
if (members !== undefined)
|
||||
script.
|
||||
$(function() {
|
||||
const url = "#{nwurl}/members";
|
||||
$('.authCheck').on('click', function() {
|
||||
$.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});
|
||||
});
|
||||
if (members !== undefined)
|
||||
script.
|
||||
$(function() {
|
||||
const url = "#{nwurl}/members";
|
||||
$('.authCheck').on('click', function() {
|
||||
$.post(url, {'id': this.value, 'auth': this.checked});
|
||||
});
|
||||
h3#members Members (#{members.length})
|
||||
form(method='POST' action='')
|
||||
table.table.table-responsive.table-striped.table-hover
|
||||
$('.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})
|
||||
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
|
||||
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
|
||||
- const url = nwurl + '/member/' + member.id
|
||||
td
|
||||
a(href=url + '/delete')
|
||||
i.glyphicon.glyphicon-trash
|
||||
td
|
||||
input.form-control.text(type='text' name=member.id value=member.name)
|
||||
td
|
||||
a(href=url) #{member.id}
|
||||
td
|
||||
input.authCheck(type='checkbox' value=member.id checked=(member.authorized? true : false))
|
||||
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}
|
||||
- const url = nwurl + '/member/' + member.id
|
||||
td
|
||||
a(href=url + '/delete')
|
||||
i.glyphicon.glyphicon-trash
|
||||
td
|
||||
input.form-control.text(type='text' name=member.id value=member.name)
|
||||
td
|
||||
a(href=url) #{member.id}
|
||||
td
|
||||
input.authCheck(type='checkbox' value=member.id checked=(member.authorized? true : false))
|
||||
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
|
||||
each value, key in network
|
||||
.row
|
||||
.col-sm-2
|
||||
a(href= network.nwid + '/' + key) #{key}:
|
||||
.col-sm-10
|
||||
- if ((!!value ) && (value.constructor == Object || value.constructor == Array))
|
||||
code #{JSON.stringify(value)}
|
||||
- else
|
||||
code #{value}
|
||||
h3#detail Detail for network
|
||||
each value, key in network
|
||||
.row
|
||||
.col-sm-2
|
||||
a(href= network.nwid + '/' + key) #{key}:
|
||||
.col-sm-10
|
||||
- if ((!!value ) && (value.constructor == Object || value.constructor == Array))
|
||||
code #{JSON.stringify(value)}
|
||||
- else
|
||||
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
|
||||
.row
|
||||
.col-sm-10
|
||||
h2
|
||||
| Network
|
||||
a(href='/controller/network/' + network.nwid) #{network.name}
|
||||
| (#{network.nwid}):
|
||||
block network_title
|
||||
h2
|
||||
| Network
|
||||
a(href='/controller/network/' + network.nwid) #{network.name}
|
||||
| (#{network.nwid}):
|
||||
block title
|
||||
if title
|
||||
h3= title
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue