PetitTeton/public/admin/categories.html

<div id="categories" class="page">
	<div class="col-sm-12 col-sm-offset-0">
		<h1><span class="fa fa-users"></span> Manage Categories</h1>

		<div class="col-sm-6">
			<div class="dt-buttons btn-group" style="display: inline-block">
				<a id="createButton" class="btn btn-default buttons-create" tabindex="0" href="javaScript:void(0);"><span>New</span></a>
				<a id="editButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="javaScript:void(0);"><span>Edit</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 class="checkbox checkbox-slider checkbox-slider--b-flat" style="display: inline-block; margin-left: 20px">
				<label>
					<input type="checkbox" id="includeDeletedToggle"><span style="margin-left: 0; padding-left: 24px;">Include Deleted</span>
				</label>
			</div>
		</div>
		<table id="category-table" class="table table-striped table-hover">
			<thead>
			<tr>
				<th data-key-name="name">Name</th>
			</tr>
			</thead>
		</table>

		<div id="createDialog" 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 Category</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label>Name</label>
						<input type="text" class="form-control" name="name" id="createDialog_NameField" tabindex="0">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default btn-md" id="createDialog_CreateButton" tabindex="0">Create</button>
					<button type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
				</div>
			</div>
		</div>

		<div id="editDialog" 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">Edit Category</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label>Name</label>
						<input type="text" class="form-control" name="name" id="editDialog_NameField" tabindex="0">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default btn-md" id="editDialog_SaveButton" tabindex="0">Save</button>
					<button type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
				</div>
			</div>
		</div>

		<div id="deleteDialog" 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 Category</h4>
				</div>
				<div class="modal-body">
					Are you certain you wish to delete the category <span id="deleteDialog_NameField"></span>?
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-warning btn-md" id="deleteDialog_DeleteButton" tabindex="0">Delete</button>
					<button type="button" class="btn btn-default" data-dismiss="modal" tabindex="1">Cancel</button>
				</div>
			</div>
		</div>

		<script language="JavaScript" type="text/javascript">
			$(function() {
				//# sourceURL=categories.html
				var dataTable = new LinkedTable($('#category-table'), {
					url: "categories/list",
					attr: "data-key-name",
					selection: "row",
					parameters: function() {
						return {showDeleted: $('#includeDeletedToggle').is(":checked") ? true : false};
					},
					postAddRowHandler: function($row, dataObject) {
						if(dataObject.deletedAt) {
							$("td:first", $row).prepend("<span class='glyphicon glyphicon-remove-circle' style='margin-right: 10px;' aria-hidden='true'></span>");
						}
					}
				});

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

				//---- Create Dialog ----
				$("#createButton").on("click", function(event) {
					$("#createDialog").modal();
				});
				$("#createDialog_CreateButton").on("click", function(event) {
					try {
						$.post("/admin/categories/create", {
							name: $("#createDialog_NameField").val()
						}, function(data) {
							if(data.result == "success") {
								$("#createDialog").modal("hide");
								dataTable.refresh();
							}
							else {
								alert(data.result);
							}
						}, "json");
					} catch(e) {
						alert(e);
					}
				});
				$("#createDialog").on('shown.bs.modal', function() {
					$('#createDialog_NameField').focus();
				});
				//----------------------------

				//---- Delete Dialog ----
				$("#deleteButton").on("click", function(event) {
					//debugger;
					if(dataTable.getSelectedRow() != null) {
						$("#deleteDialog_NameField").html(dataTable.getSelectedRow().data("model").name);
						$("#deleteDialog").modal();
					}
				});
				$("#deleteDialog_DeleteButton").on("click", function(event) {
					if(dataTable.getSelectedRow() != null) {
						$.post("/admin/categories/delete", {id: dataTable.getSelectedRow().data("model").id}, function(data) {
							if(data.result == "success") {
								$("#deleteDialog").modal("hide");
								dataTable.refresh();
							}
							else {
								alert(data.result);
							}
						}, "json");
					}
				});
				//-----------------------------

				//----- Edit Dialog ----
				$("#editButton").on("click", function(event) {
					//debugger;
					if(dataTable.getSelectedRow() != null) {
						$('#editDialog_NameField').val(dataTable.getSelectedRow().data("model").name);
						$("#editDialog").modal();
					}
				});
				$("#editDialog_SaveButton").on("click", function(event) {
					if(dataTable.getSelectedRow() != null) {
						$.post("/admin/categories/edit", {
							id: dataTable.getSelectedRow().data("model").id,
							name: $("#editDialog_NameField").val()
						}, function(data) {
							if(data.result == "success") {
								$("#editDialog").modal("hide");
								dataTable.refresh();
							}
							else {
								alert(data.result);
							}
						}, "json");
					}
				});
				$("#editDialog").on('shown.bs.modal', function() {
					$('#editDialog_NameField').focus().select();
				});
				//---------------------

				$('#includeDeletedToggle').on('click', function(event) {
					dataTable.refresh();
				});
			});
		</script>
	</div>
</div>