Updated site to scale better on small screens; Added clearfix css; Updated shadow feature to use css shadows instead of js/images.
Added code to the admin part of the site - still non-functional. Need to fix JSON streaming over HTTP such that native types (boolean, Date, int) are preserved for the DB; Need to finish the restore functionality & the hide/show of the edit, delete, and restore buttons on each editor page.
This commit is contained in:
Wynne Crisman
@@ -1,16 +1,18 @@
|
||||
<div id="users" class="page">
|
||||
<div class="col-sm-12 col-sm-offset-0">
|
||||
|
||||
<!-- Main Page Content -->
|
||||
<h1><span class="fa fa-users"></span> Manage Users</h1>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="dt-buttons btn-group">
|
||||
<a id="createButton" class="btn btn-default buttons-create" tabindex="0" href="javaScript:void(0);"><span>New</span></a>
|
||||
<a id="changeLoginButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="javaScript:void(0);"><span>Change Login</span></a>
|
||||
<a id="resetPasswordButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="javaScript:void(0);"><span>Reset Password</span></a>
|
||||
<a id="deleteButton" class="btn btn-default buttons-selected buttons-remove" tabindex="0" href="javaScript:void(0);"><span>Delete</span></a>
|
||||
<a id="changeLoginButton" class="btn btn-default buttons-selected buttons-edit" style="visibility: hidden; display: none;" tabindex="0" href="javaScript:void(0);"><span>Change Login</span></a>
|
||||
<a id="resetPasswordButton" class="btn btn-default buttons-selected buttons-edit" style="visibility: hidden; display: none;" tabindex="0" href="javaScript:void(0);"><span>Reset Password</span></a>
|
||||
<a id="deleteButton" class="btn btn-default buttons-selected buttons-remove" style="visibility: hidden; display: none;" tabindex="0" href="javaScript:void(0);"><span>Delete</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<table id="user-table" class="table table-striped table-hover">
|
||||
<table id="dataTable" class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-key-name="login">Name</th>
|
||||
@@ -19,108 +21,144 @@
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<!-- Create Dialog -->
|
||||
<div id="createUserDialog" class="modal fade" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Create User</h4>
|
||||
</div>
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Create User</h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Login</label>
|
||||
<input type="text" class="form-control" name="login" id="loginDialogLogin" tabindex="0">
|
||||
<input name="login" id="DFLogin" type="text" class="form-control" tabindex="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control" name="password" id="loginDialogPassword" tabindex="0">
|
||||
<input name="password" id="DFPassword" type="password" class="form-control" tabindex="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-warning btn-md" id="createUserDialogButton" tabindex="0">Create</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" tabindex="0">Close</button>
|
||||
<button id="DFCreateSave" type="button" class="btn btn-default btn-primary btn-md" tabindex="0">Create</button>
|
||||
<button id="DFCreateSavePlus" type="button" class="btn btn-primary btn-md" tabindex="0">Create++</button>
|
||||
<button id="DFCreateCancel" type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reset Password Dialog -->
|
||||
<div id="resetPasswordDialog" class="modal fade" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Reset Password</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" class="form-control" name="password" id="resetPasswordDialogPassword" tabindex="0">
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input name="password" id="DFResetPassword" type="password" class="form-control" tabindex="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-warning btn-md" id="resetPasswordDialogSaveButton" tabindex="0">Save</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFResetPasswordSave" type="button" class="btn btn-warning btn-md" tabindex="0">Save</button>
|
||||
<button id="DFResetPasswordCancel" type="button" class="btn btn-default" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Login Dialog -->
|
||||
<div id="changeLoginDialog" class="modal fade" role="dialog">
|
||||
<div id="changeLoginDialogInner" class="modal-dialog">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Change Login</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Login</label>
|
||||
<input type="text" class="form-control" name="password" id="changeLoginDialogLogin" tabindex="0">
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Login</label>
|
||||
<input name="login" id="DFChangeLogin" type="text" class="form-control" tabindex="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-warning btn-md" id="changeLoginDialogSaveButton" tabindex="0">Save</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFChangeLoginSave" type="button" class="btn btn-warning btn-md" tabindex="0">Save</button>
|
||||
<button id="DFChangeLoginCancel" type="button" class="btn btn-default" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Dialog -->
|
||||
<div id="deleteUserDialog" class="modal fade" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Delete User</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the user <span id="deleteUserDialogUserName"></span>?
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-warning btn-md" id="deleteUserDialogDeleteButton" tabindex="0">Delete</button>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal" tabindex="1">Cancel</button>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the user <span id="deleteUserDialogUserName"></span>?
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFDeleteSave" type="button" class="btn btn-warning btn-md" tabindex="0">Delete</button>
|
||||
<button id="DFDeleteCancel" type="button" class="btn btn-default" data-dismiss="modal" tabindex="1">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
<script language="JavaScript" type="text/javascript">//# sourceURL=users.html
|
||||
$(function() {
|
||||
//# sourceURL=users.html
|
||||
var userTable = new LinkedTable($('#user-table'), {
|
||||
url: "user/list",
|
||||
var $page = $('#users');
|
||||
var $btnCreate = $page.find("#createButton");
|
||||
var $btnChangeLogin = $page.find("#changeLoginButton");
|
||||
var $btnResetPassword = $page.find("#resetPasswordButton");
|
||||
var $btnDelete = $page.find("#deleteButton");
|
||||
var $createUserDialog = $page.find('#createUserDialog');
|
||||
var $resetPasswordDialog = $page.find('#resetPasswordDialog');
|
||||
var $changeLoginDialog = $page.find('#changeLoginDialog');
|
||||
var $deleteUserDialog = $page.find('#deleteUserDialog');
|
||||
|
||||
var dataTable = new LinkedTable($page.find('#dataTable'), {
|
||||
url: "data/User/readAll",
|
||||
attr: "data-key-name",
|
||||
selection: "row"
|
||||
selection: "row",
|
||||
selectionChanged: function($tr, model) {
|
||||
if($tr && model) {
|
||||
$btnChangeLogin.show();
|
||||
$btnResetPassword.show();
|
||||
$btnDelete.show();
|
||||
}
|
||||
else {
|
||||
$btnChangeLogin.hide();
|
||||
$btnResetPassword.hide();
|
||||
$btnDelete.hide();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
//Call the refresh user table function once initially.
|
||||
userTable.refresh();
|
||||
dataTable.refresh();
|
||||
|
||||
//----------------------------
|
||||
//---- Create User Dialog ----
|
||||
$("#users #createButton").on("click", function(event) {
|
||||
$("#users #createUserDialog").modal();
|
||||
|
||||
$btnCreate.on("click", function(event) {
|
||||
$createUserDialog.modal();
|
||||
});
|
||||
$("#users #createUserDialogButton").on("click", function(event) {
|
||||
$createUserDialog.find("#DFCreateSave").on("click", function(event) {
|
||||
try {
|
||||
$.post("/admin/user/create", {
|
||||
login: $("#users #loginDialogLogin").val(),
|
||||
password: $("#users #loginDialogPassword").val()
|
||||
$.post("data/User/create", {
|
||||
login: $createUserDialog.find("#loginDialogLogin").val(),
|
||||
password: $createUserDialog.find("#loginDialogPassword").val()
|
||||
}, function(data) {
|
||||
if(data.result == "success") {
|
||||
$("#users #createUserDialog").modal("hide");
|
||||
userTable.refresh();
|
||||
$createUserDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}
|
||||
else {
|
||||
alert(data.result);
|
||||
@@ -130,27 +168,31 @@
|
||||
alert(e);
|
||||
}
|
||||
});
|
||||
$("#users #createUserDialog").on('shown.bs.modal', function() {
|
||||
$('#createUserDialogLogin').focus();
|
||||
$createUserDialog.find("#DFCreateSave").on("click", function(event) {
|
||||
$createUserDialog.modal('hide');
|
||||
});
|
||||
$createUserDialog.on('shown.bs.modal', function() {
|
||||
$createUserDialog.find('#DFLogin').focus();
|
||||
});
|
||||
//----------------------------
|
||||
|
||||
//----------------------------
|
||||
//---- Delete User Dialog ----
|
||||
$("#users #deleteButton").on("click", function(event) {
|
||||
|
||||
$btnDelete.on("click", function(event) {
|
||||
//debugger;
|
||||
if(userTable.getSelectedRow() != null) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
//Note: This assumes that the first column is the user login (name).
|
||||
//$("#users #deleteUserDialogUserName").html($("td", userTable.getSelectedRow())[0].innerHTML);
|
||||
$("#users #deleteUserDialogUserName").html(userTable.getSelectedRow().data("model").login);
|
||||
$("#users #deleteUserDialog").modal();
|
||||
$deleteUserDialog.find("#deleteUserDialogUserName").html(dataTable.getSelectedRow().data("model").login);
|
||||
$deleteUserDialog.modal();
|
||||
}
|
||||
});
|
||||
$("#users #deleteUserDialogDeleteButton").on("click", function(event) {
|
||||
if(userTable.getSelectedRow() != null) {
|
||||
$.post("/admin/user/delete", {id: userTable.getSelectedRow().data("model").id}, function(data) {
|
||||
$deleteUserDialog.find("#DFDelete").on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$.post("data/User/delete", {where: {id: dataTable.getSelectedRow().data("model").id}}, function(data) {
|
||||
if(data.result == "success") {
|
||||
$("#users #deleteUserDialog").modal("hide");
|
||||
userTable.refresh();
|
||||
$deleteUserDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}
|
||||
else {
|
||||
alert(data.result);
|
||||
@@ -158,51 +200,31 @@
|
||||
}, "json");
|
||||
}
|
||||
});
|
||||
//-----------------------------
|
||||
$deleteUserDialog.find("#DFDeleteCancel").on("click", function(event) {
|
||||
$deleteUserDialog.modal('hide');
|
||||
});
|
||||
$deleteUserDialog.on('shown.bs.modal', function() {
|
||||
$deleteUserDialog.find('#DFDeleteCancel').focus();
|
||||
});
|
||||
|
||||
//------------------------------
|
||||
//----- Change Login Dialog ----
|
||||
$("#users #changeLoginButton").on("click", function(event) {
|
||||
if(userTable.getSelectedRow() != null) {
|
||||
$('#changeLoginDialogLogin').val(userTable.getSelectedRow().data("model").login);
|
||||
$("#users #changeLoginDialog").modal();
|
||||
}
|
||||
});
|
||||
$("#users #changeLoginDialogSaveButton").on("click", function(event) {
|
||||
if(userTable.getSelectedRow() != null) {
|
||||
$.post("/admin/user/changeLogin", {
|
||||
id: userTable.getSelectedRow().data("model").id,
|
||||
login: $("#users #changeLoginDialogLogin").val()
|
||||
}, function(data) {
|
||||
if(data.result == "success") {
|
||||
$("#users #changeLoginDialog").modal("hide");
|
||||
userTable.refresh();
|
||||
}
|
||||
else {
|
||||
alert(data.result);
|
||||
}
|
||||
}, "json");
|
||||
}
|
||||
});
|
||||
$("#users #changeLoginDialog").on('shown.bs.modal', function() {
|
||||
$('#changeLoginDialogLogin').focus().select();
|
||||
});
|
||||
//---------------------
|
||||
|
||||
//---- Reset Password Dialog ----
|
||||
$("#users #resetPasswordButton").on("click", function(event) {
|
||||
if(userTable.getSelectedRow() != null) {
|
||||
$("#users #resetPasswordDialog").modal();
|
||||
$btnChangeLogin.on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$changeLoginDialog.find('#changeLoginDialogLogin').val(dataTable.getSelectedRow().data("model").login);
|
||||
$changeLoginDialog.modal();
|
||||
}
|
||||
});
|
||||
$("#users #resetPasswordDialogSaveButton").on("click", function(event) {
|
||||
if(userTable.getSelectedRow() != null) {
|
||||
$.post("/admin/user/resetPassword", {
|
||||
id: userTable.getSelectedRow().data("model").id,
|
||||
password: $("#users #resetPasswordDialogPassword").val()
|
||||
$changeLoginDialog.find("#DFChangeLoginSave").on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$.post("data/User/update", {
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
login: $changeLoginDialog("#DFChangeLogin").val()
|
||||
}, function(data) {
|
||||
if(data.result == "success") {
|
||||
$("#users #resetPasswordDialog").modal("hide");
|
||||
userTable.refresh();
|
||||
$changeLoginDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}
|
||||
else {
|
||||
alert(data.result);
|
||||
@@ -210,10 +232,43 @@
|
||||
}, "json");
|
||||
}
|
||||
});
|
||||
$("#users #resetPasswordDialog").on('shown.bs.modal', function() {
|
||||
$('#resetPasswordDialogPassword').focus();
|
||||
$changeLoginDialog.find("#DFChangeLoginCancel").on("click", function(event) {
|
||||
$changeLoginDialog.modal('hide');
|
||||
});
|
||||
$changeLoginDialog.on('shown.bs.modal', function() {
|
||||
$changeLoginDialog.find('#DFChangeLogin').focus().select();
|
||||
});
|
||||
|
||||
//-------------------------------
|
||||
//---- Reset Password Dialog ----
|
||||
|
||||
$btnResetPassword.on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$resetPasswordDialog.modal();
|
||||
}
|
||||
});
|
||||
$resetPasswordDialog.find("#DFResetPasswordSave").on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$.post("data/User/update", {
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
password: $resetPasswordDialog.find("#DFResetPassword").val()
|
||||
}, function(data) {
|
||||
if(data.result == "success") {
|
||||
$resetPasswordDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}
|
||||
else {
|
||||
alert(data.result);
|
||||
}
|
||||
}, "json");
|
||||
}
|
||||
});
|
||||
$resetPasswordDialog.find("#DFResetPasswordCancel").on("click", function(event) {
|
||||
$resetPasswordDialog.modal('hide');
|
||||
});
|
||||
$resetPasswordDialog.on('shown.bs.modal', function() {
|
||||
$resetPasswordDialog.find('#DFResetPassword').focus();
|
||||
});
|
||||
//----------------------------------
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user