Added loading to admin page
parent
6fb1772dab
commit
c1bf546112
|
@ -6,7 +6,8 @@
|
||||||
<p>Use this console to edit network-connected devices. </p>
|
<p>Use this console to edit network-connected devices. </p>
|
||||||
|
|
||||||
<h2>Peers</h2>
|
<h2>Peers</h2>
|
||||||
<table>
|
<p data-bind="hidden:isLoaded">Loading...</p>
|
||||||
|
<table data-bind="visible:isLoaded">
|
||||||
<thead><tr>
|
<thead><tr>
|
||||||
<th>Host</th><th>IPv4</th><th></th>
|
<th>Host</th><th>IPv4</th><th></th>
|
||||||
</tr></thead>
|
</tr></thead>
|
||||||
|
@ -19,7 +20,8 @@
|
||||||
|
|
||||||
<h2>Add peer</h2>
|
<h2>Add peer</h2>
|
||||||
<p>To add a new peer, type in a hostname and select a user. The hostname must be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>. </p>
|
<p>To add a new peer, type in a hostname and select a user. The hostname must be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>. </p>
|
||||||
<div>
|
<p data-bind="hidden:isLoaded">Loading...</p>
|
||||||
|
<div data-bind="visible:isLoaded">
|
||||||
<input type="text" data-bind="textInput:newPeerHostname,event:{keypress:addPeerKeyPress}" placeholder="phone"></input>
|
<input type="text" data-bind="textInput:newPeerHostname,event:{keypress:addPeerKeyPress}" placeholder="phone"></input>
|
||||||
<select data-bind="options:users,optionsText:'name',value:newPeerUser,optionsCaption:'(user)'"></select>
|
<select data-bind="options:users,optionsText:'name',value:newPeerUser,optionsCaption:'(user)'"></select>
|
||||||
<button data-bind="click:addPeer,disable:isAddingPeer,text:addPeerText">Add</button>
|
<button data-bind="click:addPeer,disable:isAddingPeer,text:addPeerText">Add</button>
|
||||||
|
@ -28,7 +30,8 @@
|
||||||
|
|
||||||
<h2>Add user</h2>
|
<h2>Add user</h2>
|
||||||
<p>To add a new user, type in the user's first device name and a username and click 'add'. The hostname and username must each be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>. </p>
|
<p>To add a new user, type in the user's first device name and a username and click 'add'. The hostname and username must each be 3-10 lowercase letters and numbers <code>/[a-z0-9]{3,10}/</code>. </p>
|
||||||
<div>
|
<p data-bind="hidden:isLoaded">Loading...</p>
|
||||||
|
<div data-bind="visible:isLoaded">
|
||||||
<input type="text" data-bind="textInput:newUserHostname,event:{keypress:addUserKeyPress}" placeholder="pc1"></input>
|
<input type="text" data-bind="textInput:newUserHostname,event:{keypress:addUserKeyPress}" placeholder="pc1"></input>
|
||||||
<input type="text" data-bind="textInput:newUsername,event:{keypress:addUserKeyPress}" placeholder="joe"></input>
|
<input type="text" data-bind="textInput:newUsername,event:{keypress:addUserKeyPress}" placeholder="joe"></input>
|
||||||
<button data-bind="click:addUser,disable:isAddingUser,text:addUserText">Add</button>
|
<button data-bind="click:addUser,disable:isAddingUser,text:addUserText">Add</button>
|
||||||
|
@ -37,7 +40,8 @@
|
||||||
|
|
||||||
<h2>Delete User</h2>
|
<h2>Delete User</h2>
|
||||||
<p>To delete a user, select the username from the list below and click 'Delete'. This will delete the user and all their peers. </p>
|
<p>To delete a user, select the username from the list below and click 'Delete'. This will delete the user and all their peers. </p>
|
||||||
<div>
|
<p data-bind="hidden:isLoaded">Loading...</p>
|
||||||
|
<div data-bind="visible:isLoaded">
|
||||||
<select data-bind="options:users,optionsText:'name',value:userToDelete,optionsCaption:'(user)'"></select>
|
<select data-bind="options:users,optionsText:'name',value:userToDelete,optionsCaption:'(user)'"></select>
|
||||||
<button data-bind="click:delUser,disable:isDeletingUser,text:deleteUserText">Delete</button>
|
<button data-bind="click:delUser,disable:isDeletingUser,text:deleteUserText">Delete</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -33,6 +33,7 @@ function PeerList() {
|
||||||
self.isDeletingUser = ko.observable(false)
|
self.isDeletingUser = ko.observable(false)
|
||||||
self.deleteUserText = ko.computed(() => self.isDeletingUser()?'Deleting...':'Delete')
|
self.deleteUserText = ko.computed(() => self.isDeletingUser()?'Deleting...':'Delete')
|
||||||
self.token = ko.observable('')
|
self.token = ko.observable('')
|
||||||
|
self.isLoaded = ko.observable(false)
|
||||||
|
|
||||||
// Initial loading
|
// Initial loading
|
||||||
self.getUsers = async () => {
|
self.getUsers = async () => {
|
||||||
|
@ -67,6 +68,7 @@ function PeerList() {
|
||||||
})).map(i=>[i['number'],i])
|
})).map(i=>[i['number'],i])
|
||||||
).values()])
|
).values()])
|
||||||
self.token(user.token)
|
self.token(user.token)
|
||||||
|
self.isLoaded(true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue