djpbessems/lucidAuth
1
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Implemented GUI aspect of usermanagement page

Browse Source 
TODO: add ajax-call that will update database
This commit is contained in:
Danny Bessems
2019-03-06 14:21:47 +01:00
parent a049bdbd24
commit 3dbb6b9932
7 changed files with 106 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
public/misc/script.manage.js
View File

@ -2,13 +2,71 @@ $(document).ready(function(){
// Initialize the editable-table functionality
$('#usertable').editableTableWidget();
$('#usertable button.delete').click(function() {
$(this).closest('tr').addClass('removed');
});
$('#btnnewuser').click(function() {
// Create a new user; generate pseudo-random username
var newUser = 'User' + String(Math.floor(Math.random() * Math.floor(9999))).padStart(4, '0');
$('#usertable tbody').append($('<tr class="new"><td>' + newUser + '</td><td>User</td><td class="immutable"><a href="?">0</a></td></tr>'));
// Add new user to the interface
// (new `<tr>` in `<table id="usertable">`)
$('#usertable tbody').append($('<tr>', {class: 'new'})
.append($('<td>', {
text: newUser
}))
.append($('<td>', {
text: 'User'
}))
.append($('<td>', {
class: 'immutable',
html: '<button class="bttn-simple bttn-xs bttn-primary disabled" data-translation="button_sessions" disabled="true">' +
locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'nl')]['button_sessions'] + '</button>&nbsp;' +
'<button class="bttn-simple bttn-xs bttn-primary delete" data-translation="button_delete">' +
locales[(localStorage.getItem('language') !== null ? localStorage.getItem('language') : 'nl')]['button_delete'] +
'</button>'
}))
);
// Call `editableTableWidget()` again to include the newly added `<tr>`
// To prevent recreating multiple new editors; reference the already existing `<input>`
$('#usertable').editableTableWidget({editor: $('#editor')});
// Add eventhandlers to buttons of newly added `<tr>`
$('#usertable .new button.delete').unbind().click(function() {
$(this).closest('tr').remove();
});
});
$('#btnsave').click(function() {
var newEntries = [];
$('#usertable .new').each(function() {
newEntries.push({
'userName': $(this).find('td:nth-child(1)').text(),
'roleName': $(this).find('td:nth-child(2)').text()
});
});
var removedEntries = [];
$('#usertable .removed').each(function() {
removedEntries.push({
'userId': $(this).find('td:nth-child(1)').data('userid'),
'userName': $(this).find('td:nth-child(1)').text(),
'roleName': $(this).find('td:nth-child(2)').text()
});
});
console.log({'new': newEntries, 'removed': removedEntries});
/* $.get("psworker.php", {
do: "mutate",
mutations: {
new: newEntries,
removed: removedEntries
}
})*/
});
$('#btncancel').click(function() {
window.location.reload();
});
if (localStorage.getItem('theme') !== null) {

16
public/misc/script.translation.js
View File

@ -3,6 +3,7 @@ var locales = {
button_new: "new",
button_save: "save",
button_cancel: "cancel",
button_sessions: "sessions",
button_delete: "delete",
button_login: "login",
heading_error: "ERROR!",
@ -10,12 +11,16 @@ var locales = {
label_username: "Username:",
link_logout: "Logout",
span_credentialsavailable: "Login credentials available upon request!",
span_loggedinas: "Logged in as"
span_loggedinas: "Logged in as",
th_username: "Username",
th_role: "Role",
th_manage: "Manage"
},
nl: {
button_new: "nieuw",
button_save: "opslaan",
button_cancel: "annuleren",
button_sessions: "sessies",
button_delete: "verwijder",
button_login: "log in",
heading_error: "FOUT!",
@ -23,7 +28,10 @@ var locales = {
label_username: "Gebruikersnaam:",
link_logout: "Log uit",
span_credentialsavailable: "Inloggegevens verkrijgbaar op aanvraag!",
span_loggedinas: "Ingelogd als"
span_loggedinas: "Ingelogd als",
th_username: "Gebruikersnaam",
th_role: "Rol",
th_manage: "Beheer"
} // ... etc.
};
@ -31,7 +39,7 @@ $(document).ready(function(){
$('[id^=linklanguage-]').click(function() {
var selectedlang = $(this).attr('id').split('-')[1];
// Replace text of each element with translated value
$('[data-translation]').each(function(index) {
$('[data-translation]').each(function() {
$(this).text(locales[selectedlang][$(this).data('translation')]);
});
// Enable/disable (toggle) anchors
@ -43,7 +51,7 @@ $(document).ready(function(){
});
if (localStorage.getItem('language') !== null) {
$('[data-translation]').each(function(index) {
$('[data-translation]').each(function() {
$(this).text(locales[localStorage.getItem('language')][$(this).data('translation')]);
});
$('span#user a.current').removeClass('current');

7
public/misc/style.css
View File

@ -137,6 +137,13 @@ body {
padding: 2px;
margin: 0;
}
.main section table .new {
font-weight: bold;
}
.main section table .removed td:nth-child(-n+2) {
text-decoration: line-through;
color: grey;
}
.main section table tbody tr:nth-child(odd) {
background-color: rgb(215, 215, 215);
}

4
public/misc/style.panes.css
View File

@ -8,7 +8,7 @@ body{
flex-direction: column;
}
.header {
height: 125px;
height: 100px;
background: #FFFFFF;
color: #000000;
}
@ -36,7 +36,7 @@ body{
}
.main section {
overflow-y: scroll;
height: calc(100% - 125px);
height: calc(100% - 100px);
}
.sidebar-first{
width: 25%;