Added loading to admin page

master
Keith Irwin 2022-11-06 16:08:33 -07:00
parent 6fb1772dab
commit c1bf546112
Signed by: ki9
GPG Key ID: DF773B3F4A88DA86
2 changed files with 10 additions and 4 deletions

View File

@ -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>

View File

@ -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)
} }
} }