PetitTeton/public/admin/measures.html

<div id="measures" class="page">
	<div id="listView" class="view">
		<div class="buttonContainer">
			<h1><span class="fa fa-users"></span> Manage Measures</h1>

			<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>
				<a id="restoreButton" class="btn btn-default buttons-selected buttons-restore" tabindex="0" href="javaScript:void(0);"><span>Restore</span></a>
			</div>
			<div class="checkbox checkbox-slider checkbox-slider--b-flat" style="display: inline-block; margin-left: 20px">
				<label>
					<input id="includeDeletedToggle" type="checkbox"><span style="margin-left: 0; padding-left: 24px;">Include Deleted</span>
				</label>
			</div>
		</div>
		<table id="dataTable" class="table table-striped table-hover">
			<thead>
			<tr>
				<th data-key-name="name">Name</th>
				<th data-key-name="postfix">Postfix</th>
			</tr>
			</thead>
		</table>
	</div>

	<!-- Create/Edit Dialog -->
	<div id="editorView" class="view" style="display: none;" data-menu="false">
		<div class="modal-dialog">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title"></h4>
			</div>
			<form role="form" autocomplete="off">
				<div class="modal-body">
					<label for="DFName">Name</label>
					<div class="form-group">
						<input name="name" id="DFName" type="text" class="form-control" tabindex="0" placeholder="Jar" required>
					</div>
					<div class="form-group">
						<label>Postfix</label>
						<input type="text" class="form-control" name="postfix" id="DFPostfix" tabindex="0">
					</div>
				</div>
				<div class="modal-footer">
					<button id="DFSave" type="button" class="btn btn-default btn-primary btn-md" tabindex="0">Save</button>
					<button id="DFCreate" type="button" class="btn btn-default btn-primary btn-md" tabindex="0">Create</button>
					<button id="DFCreatePlus" type="button" class="btn btn-primary btn-md" tabindex="0">Create++</button>
					<button id="DFCancel" type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
				</div>
			</form>
		</div>
	</div>

	<!-- Delete View -->
	<div id="deleteView" 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 Item</h4>
			</div>
			<div class="modal-body">
				Are you certain you wish to delete the measure <span id="deleteName"></span>?
			</div>
			<div class="modal-footer">
				<button id="DFDelete" type="button" class="btn btn-warning btn-md" tabindex="0">Delete</button>
				<button id="DFCancelDelete" type="button" class="btn btn-primary btn-default" data-dismiss="modal" tabindex="1">Cancel</button>
			</div>
		</div>
	</div>
</div>

<script language="JavaScript" type="text/javascript">//# sourceURL=measures.html
$(function() {
	var $page = $('#measures');
	var $btnCreate = $page.find("#createButton");
	var $btnEdit = $page.find("#editButton");
	var $btnDelete = $page.find("#deleteButton");
	var $btnRestore = $page.find("#restoreButton");

	$btnEdit.disable(true);
	$btnDelete.disable(true);
	$btnRestore.disable(true);

	var selectionChanged = function($tr, model) {
		if($tr && model) {
			//If the object was deleted (hidden), then allow it to be restored, otherwise allow the model to be deleted.
			if(model.deletedAt) {
				$btnRestore.disable(false);
				$btnDelete.disable(true);
				$btnEdit.disable(true);
			}
			else {
				$btnRestore.disable(true);
				$btnDelete.disable(false);
				$btnEdit.disable(false);
			}
		}
		else {
			$btnEdit.disable(true);
			$btnDelete.disable(true);
			$btnRestore.disable(true);
		}
	};

	var dataTable = new LinkedTable($page.find('#dataTable'), {
		url: "data/Measure/readAll",
		attr: "data-key-name",
		selection: "row",
		parameters: function() {
			return {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
		},
		selectionChanged: selectionChanged,
		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>");
			}
		},
		postUpdateRowHandler: function($row, dataObject) {
			if(dataObject.deletedAt) {
				$("td:first", $row).prepend("<span class='glyphicon glyphicon-remove-circle' style='margin-right: 10px;' aria-hidden='true'></span>");
			}

			if($row.is(dataTable.getSelectedRow())) {
				selectionChanged($row, dataObject);
			}
		}
	});
	$page.find('#dataTable').on('dblclick', 'tr', function(event) {
		if(dataTable.getSelectedRow()) {
			location.hash = "#!/measures-edit";
		}
	});

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

	//Refresh the data table if the user toggles the button to show/hide deleted elements.
	$page.find('#includeDeletedToggle').on('click', function(event) {
		dataTable.refresh();
	});

	//Restore the selected model so it is no longer considered 'deleted'.
	$btnRestore.on("click", function(event) {
		var model = dataTable.getSelectedRow() ? dataTable.getSelectedRow().data('model') : undefined;

		if(model && model.deletedAt) {
			$.post("data/Measure/restore", {id: model.id}, "json").done(function(data) {
				dataTable.refresh();
			}).fail(function(data) {
				alert("Failed to restore the desired object due to a server side error.");
			});
		}
	});


	//+++++++++++++++++++++++++++++++++++++++++++++++
	// ++++++++++++ Create/Edit Views ++++++++++++

	var $editorView = $page.find('#editorView');
	var $deleteView = $page.find('#deleteView');
	var $editorForm = $editorView.find('form');

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

	//Handle opening the create dialog.
	$btnCreate.on("click", function(event) {
		//Configure the dialog to create a new element.
		$editorView.find("#DFCreate, #DFCreatePlus").show();
		$editorView.find("#DFSave").hide();
		$editorView.find(".modal-title").text("Create Measure");
		//Reset fields to default values.
		$editorView.find("#DFName").val("").focus();
		$editorView.find("#DFPostfix").val("");
		//Open the view.
		openView($editorView, function() {
			dataTable.refresh();
		}, $editorView.find("#DFName"));
	});
	//Handle opening the edit dialog.
	$btnEdit.on("click", function(event) {
		//debugger;
		if(dataTable.getSelectedRow() != null) {
			//Configure the dialog to edit an existing element.
			$editorView.find("#DFCreate, #DFCreatePlus").hide();
			$editorView.find("#DFSave").show();
			$editorView.find(".modal-title").text("Edit Measure");
			//Reset fields to selected values.
			$editorView.find('#DFName').val(dataTable.getSelectedRow().data("model").name).focus();
			$editorView.find('#DFPostfix').val(dataTable.getSelectedRow().data("model").postfix);
			//Open the view.
			openView($editorView, function() {
				dataTable.refresh();
			}, $editorView.find("#DFName"));
		}
	});

	//Handle the Create Button being clicked.
	var createFunction = function(close) {
		$editorForm.data('bs.validator').validate(function(isValid) {
			if(isValid) {
				$.ajax({url: "data/Measure/create", type: "POST", dataType: "json", data: encodeData({
					name: $editorForm.find("#DFName").val()
				})}).done(function(data) {
					if(close) closeView();
				}).fail(function(data) {
					alert("Server call failed.");
				});
			}
		});
	};
	$editorView.find('#DFCreatePlus').on('click', function(event) {
		createFunction(false);
	});
	$editorView.find('#DFCreate').on('click', function(event) {
		createFunction(true);
	});
	//Handle the Save Button being clicked.
	$editorView.find('#DFSave').on('click', function(event) {
		$editorForm.data('bs.validator').validate(function(isValid) {
			if(isValid) {
				$.ajax({url: "data/Measure/edit", type: "POST", dataType: "json", data: encodeData({
					id: dataTable.getSelectedRow().data("model").id,
					name: $editorForm.find("#DFName").val()
				})}).done(function(data) {
					if(close) closeView();
				}).fail(function(data) {
					alert("Server call failed.");
				});
			}
		});
	});
	$editorView.find('#DFCancel').on('click', function(event) {
		closeView();
	});
	//Set the initial focus control.
	$editorView.on('shown.bs.modal', function() {
		$editorView.find('#DFName').focus();
	});

	//++++++++++++++++++++++++++++++++++++++
	// ++++++++++ Delete View +++++++++++

	//Open the dialog.
	$btnDelete.on("click", function(event) {
		//debugger;
		if(dataTable.getSelectedRow() != null) {
			$deleteView.find("#deleteName").html(dataTable.getSelectedRow().data("model").name);
			$deleteView.modal();
		}
	});
	//Delete the element and close the dialog.
	$deleteView.find('#deleteButton').on("click", function(event) {
		if(dataTable.getSelectedRow() != null) {
			$.ajax({url: "data/Measure/delete", type: "POST", dataType: "json", data: encodeData({where: {id: dataTable.getSelectedRow().data("model").id}})}).done(function(data) {
				$deleteView.modal("hide");
				dataTable.refresh();
			}).fail(function(data) {
				alert("Server call failed.");
			});
		}
	});
	$deleteView.find('#DFCancelDelete').on('click', function(event) {
		$deleteView.modal('hide');
	});
	//Set the initial focus control.
	$editorView.on('shown.bs.modal', function() {
		$deleteView.find('#DFCancelDelete').focus();
	});
});
</script>