PetitTeton/public/admin/users.html

<div id="users" class="page">
	<div class="buttonContainer">
		<!-- Main Page Content -->
		<h1><span class="fa fa-users"></span> Manage Users</h1>

		<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>
		</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" required>
					</div>
					<div class="form-group">
						<label>Password</label>
						<input name="password" id="DFPassword" type="password" class="form-control" tabindex="0" required>
					</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" required>
					</div>
				</div>
				<div class="modal-footer">
					<button id="DFResetPasswordSave" type="button" class="btn btn-default btn-warning btn-md" tabindex="0">Save</button>
					<button id="DFResetPasswordCancel" type="button" class="btn" 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" required>
					</div>
				</div>
				<div class="modal-footer">
					<button id="DFChangeLoginSave" type="button" class="btn btn-default btn-warning btn-md" tabindex="0">Save</button>
					<button id="DFChangeLoginCancel" type="button" class="btn" 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="DFDelete" type="button" class="btn btn-default btn-warning btn-md" tabindex="0">Delete</button>
					<button id="DFDeleteCancel" type="button" class="btn" data-dismiss="modal" tabindex="1">Cancel</button>
				</div>
			</form>
		</div>
	</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 $createUserForm = $createUserDialog.find('form');
	var $resetPasswordForm = $resetPasswordDialog.find('form');
	var $changeLoginForm = $changeLoginDialog.find('form');

	$btnChangeLogin.disable(true);
	$btnDelete.disable(true);
	$btnResetPassword.disable(true);

	var selectionChanged = function($tr, model) {
		if($tr && model) {
			$btnChangeLogin.disable(false);
			$btnResetPassword.disable(false);
			$btnDelete.disable(false);
		}
		else {
			$btnChangeLogin.disable(true);
			$btnResetPassword.disable(true);
			$btnDelete.disable(true);
		}
	};

	var dataTable = new LinkedTable($page.find('#dataTable'), {
		url: "data/User/readAll",
		attr: "data-key-name",
		selection: "row",
		selectionChanged: selectionChanged
	});

	//Call the refresh user table function once initially.
	dataTable.build();

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

	//Initialize the validator
	$createUserForm.validator();

	$btnCreate.on("click", function(event) {
		$createUserDialog.modal();
	});
	$createUserDialog.find("#DFCreateSave").on("click", function(event) {
		$createUserForm.data('bs.validator').validate(function(isValid) {
			if(isValid) {
				$.ajax({
					url: "data/User/create", type: "POST", dataType: "json", data: encodeData({
						login: $createUserDialog.find("#DFLogin").val(),
						password: $createUserDialog.find("#DFPassword").val()
					})
				}).done(function(data) {
					$createUserDialog.modal("hide");
					dataTable.refresh();
				}).fail(function(data) {
					alert("Server call failed.");
				});
			}
		});
	});
	$createUserDialog.find("#DFCreateSave").on("click", function(event) {
		$createUserDialog.modal('hide');
	});
	$createUserDialog.on('shown.bs.modal', function() {
		$createUserDialog.find('#DFLogin').focus();
	});

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

	//Initialize the validator
	$changeLoginForm.validator();

	$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) {
		$changeLoginForm.data('bs.validator').validate(function(isValid) {
			if(isValid) {
				$.ajax({
					url: "data/User/update", type: "POST", dataType: "json", data: encodeData({
						id: dataTable.getSelectedRow().data("model").id,
						login: $changeLoginDialog("#DFChangeLogin").val()
					})
				}).done(function(data) {
					$changeLoginDialog.modal("hide");
					dataTable.refresh();
				}).fail(function(data) {
					alert("Server call failed.");
				});
			}
		});
	});
	$changeLoginDialog.find("#DFChangeLoginCancel").on("click", function(event) {
		$changeLoginDialog.modal('hide');
	});
	$changeLoginDialog.on('shown.bs.modal', function() {
		$changeLoginDialog.find('#DFChangeLogin').focus().select();
	});

	//-------------------------------
	//---- Reset Password Dialog ----

	//Initialize the validator
	$resetPasswordForm.validator();

	$btnResetPassword.on("click", function(event) {
		if(dataTable.getSelectedRow() != null) {
			$resetPasswordDialog.modal();
		}
	});
	$resetPasswordDialog.find("#DFResetPasswordSave").on("click", function(event) {
		$resetPasswordForm.data('bs.validator').validate(function(isValid) {
			if(isValid) {
				$.ajax({
					url: "data/User/update", type: "POST", dataType: "json", data: encodeData({
						id: dataTable.getSelectedRow().data("model").id,
						password: $resetPasswordDialog.find("#DFResetPassword").val()
					})
				}).done(function(data) {
					$resetPasswordDialog.modal("hide");
					dataTable.refresh();
				}).fail(function(data) {
					alert("Server call failed.");
				});
			}
		});
	});
	$resetPasswordDialog.find("#DFResetPasswordCancel").on("click", function(event) {
		$resetPasswordDialog.modal('hide');
	});
	$resetPasswordDialog.on('shown.bs.modal', function() {
		$resetPasswordDialog.find('#DFResetPassword').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) {
		$.ajax({url: "data/User/delete", type: "POST", dataType: "json", data: encodeData({where: {id: dataTable.getSelectedRow().data("model").id}})}).done(function(data) {
			$deleteUserDialog.modal("hide");
			dataTable.refresh();
		}).fail(function(data) {
			alert("Server call failed.");
		});
	});
	$deleteUserDialog.find("#DFDeleteCancel").on("click", function(event) {
		$deleteUserDialog.modal('hide');
	});
	$deleteUserDialog.on('shown.bs.modal', function() {
		$deleteUserDialog.find('#DFDeleteCancel').focus();
	});
});
</script>