PetitTeton/public/admin/users.html

<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" 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="dataTable" class="table table-striped table-hover">
			<thead>
				<tr>
					<th data-key-name="login">Name</th>
					<th data-key-name="admin">Admin</th>
				</tr>
			</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">&times;</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 name="login" id="DFLogin" type="text" class="form-control" tabindex="0">
						</div>
						<div class="form-group">
							<label>Password</label>
							<input name="password" id="DFPassword" type="password" class="form-control" tabindex="0">
						</div>
					</div>
					<div class="modal-footer">
						<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">&times;</button>
					<h4 class="modal-title">Reset Password</h4>
				</div>
				<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 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">&times;</button>
					<h4 class="modal-title">Change Login</h4>
				</div>
				<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 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">&times;</button>
					<h4 class="modal-title">Delete User</h4>
				</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">//# sourceURL=users.html
			$(function() {
				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",
					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.
				dataTable.refresh();

				//----------------------------
				//---- Create User Dialog ----

				$btnCreate.on("click", function(event) {
					$createUserDialog.modal();
				});
				$createUserDialog.find("#DFCreateSave").on("click", function(event) {
					try {
						$.post("data/User/create", {
							login: $createUserDialog.find("#loginDialogLogin").val(),
							password: $createUserDialog.find("#loginDialogPassword").val()
						}, function(data) {
							if(data.result == "success") {
								$createUserDialog.modal("hide");
								dataTable.refresh();
							}
							else {
								alert(data.result);
							}
						}, "json");
					} catch(e) {
						alert(e);
					}
				});
				$createUserDialog.find("#DFCreateSave").on("click", function(event) {
					$createUserDialog.modal('hide');
				});
				$createUserDialog.on('shown.bs.modal', function() {
					$createUserDialog.find('#DFLogin').focus();
				});

				//----------------------------
				//---- Delete User Dialog ----

				$btnDelete.on("click", function(event) {
					//debugger;
					if(dataTable.getSelectedRow() != null) {
						//Note: This assumes that the first column is the user login (name).
						//$("#users #deleteUserDialogUserName").html($("td", userTable.getSelectedRow())[0].innerHTML);
						$deleteUserDialog.find("#deleteUserDialogUserName").html(dataTable.getSelectedRow().data("model").login);
						$deleteUserDialog.modal();
					}
				});
				$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") {
								$deleteUserDialog.modal("hide");
								dataTable.refresh();
							}
							else {
								alert(data.result);
							}
						}, "json");
					}
				});
				$deleteUserDialog.find("#DFDeleteCancel").on("click", function(event) {
					$deleteUserDialog.modal('hide');
				});
				$deleteUserDialog.on('shown.bs.modal', function() {
					$deleteUserDialog.find('#DFDeleteCancel').focus();
				});

				//------------------------------
				//----- Change Login Dialog ----

				$btnChangeLogin.on("click", function(event) {
					if(dataTable.getSelectedRow() != null) {
						$changeLoginDialog.find('#changeLoginDialogLogin').val(dataTable.getSelectedRow().data("model").login);
						$changeLoginDialog.modal();
					}
				});
				$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") {
								$changeLoginDialog.modal("hide");
								dataTable.refresh();
							}
							else {
								alert(data.result);
							}
						}, "json");
					}
				});
				$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>
</div>