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,5 +1,7 @@
|
||||
<div id="venues" class="page">
|
||||
<div class="col-sm-12 col-sm-offset-0">
|
||||
|
||||
<!-- Main Page Content -->
|
||||
<h1><span class="fa fa-users"></span> Manage Venues</h1>
|
||||
|
||||
<div class="col-sm-6">
|
||||
@@ -7,14 +9,15 @@
|
||||
<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 type="checkbox" id="includeDeletedToggle"><span style="margin-left: 0; padding-left: 24px;">Include Deleted</span>
|
||||
<input id="includeDeletedToggle" type="checkbox"><span style="margin-left: 0; padding-left: 24px;">Include Deleted</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<table id="venue-table" class="table table-striped table-hover">
|
||||
<table id="dataTable" class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-key-name="name">Name</th>
|
||||
@@ -23,69 +26,85 @@
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<div id="createDialog" class="modal fade" role="dialog">
|
||||
<!-- Create/Edit Dialog -->
|
||||
<div id="editorDialog" 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 Venue</h4>
|
||||
<h4 class="modal-title"></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">
|
||||
<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="Boonville" required>
|
||||
</div>
|
||||
</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">×</button>
|
||||
<h4 class="modal-title">Edit Venue</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 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 Dialog -->
|
||||
<div id="deleteDialog" 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 Venue</h4>
|
||||
<h4 class="modal-title">Delete Item</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the venue <span id="deleteDialog_NameField"></span>?
|
||||
Are you certain you wish to delete the venue <span id="deleteName"></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>
|
||||
<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>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
<script language="JavaScript" type="text/javascript">//# sourceURL=venues.html
|
||||
$(function() {
|
||||
//# sourceURL=venues.html
|
||||
var dataTable = new LinkedTable($('#venue-table'), {
|
||||
url: "venues/list",
|
||||
var $page = $('#venues');
|
||||
var $btnCreate = $page.find("#createButton");
|
||||
var $btnEdit = $page.find("#editButton");
|
||||
var $btnDelete = $page.find("#deleteButton");
|
||||
var $btnRestore = $page.find("#restoreButton");
|
||||
|
||||
$btnEdit.hide();
|
||||
$btnDelete.hide();
|
||||
$btnRestore.hide();
|
||||
|
||||
var dataTable = new LinkedTable($page.find('#dataTable'), {
|
||||
url: "data/Venue/readAll",
|
||||
attr: "data-key-name",
|
||||
selection: "row",
|
||||
selectionChanged: function($tr, model) {
|
||||
if($tr && model) {
|
||||
$btnEdit.show();
|
||||
|
||||
//If the object was deleted (hidden), then allow it to be restored, otherwise allow the model to be deleted.
|
||||
if(model.deletedAt) {
|
||||
$btnRestore.show();
|
||||
$btnDelete.hide();
|
||||
}
|
||||
else {
|
||||
$btnRestore.hide();
|
||||
$btnDelete.show();
|
||||
}
|
||||
}
|
||||
else {
|
||||
$btnEdit.hide();
|
||||
$btnDelete.hide();
|
||||
$btnRestore.hide();
|
||||
}
|
||||
},
|
||||
parameters: function() {
|
||||
return {showDeleted: $('#includeDeletedToggle').is(":checked") ? true : false};
|
||||
return {msgpack: msgpack.encode({paranoid: !$page.find('#includeDeletedToggle').is(":checked")})};
|
||||
},
|
||||
postAddRowHandler: function($row, dataObject) {
|
||||
if(dataObject.deletedAt) {
|
||||
@@ -97,87 +116,149 @@
|
||||
//Call the refresh user table function once initially.
|
||||
dataTable.refresh();
|
||||
|
||||
//---- Create Dialog ----
|
||||
$("#venues #createButton").on("click", function(event) {
|
||||
$("#venues #createDialog").modal();
|
||||
});
|
||||
$("#venues #createDialog_CreateButton").on("click", function(event) {
|
||||
try {
|
||||
$.post("/admin/venues/create", {
|
||||
name: $("#venues #createDialog_NameField").val()
|
||||
}, function(data) {
|
||||
if(data.result == "success") {
|
||||
$("#venues #createDialog").modal("hide");
|
||||
dataTable.refresh();
|
||||
}
|
||||
else {
|
||||
alert(data.result);
|
||||
}
|
||||
}, "json");
|
||||
} catch(e) {
|
||||
alert(e);
|
||||
}
|
||||
});
|
||||
$("#venues #createDialog").on('shown.bs.modal', function() {
|
||||
$('#createDialog_NameField').focus();
|
||||
});
|
||||
//----------------------------
|
||||
|
||||
//---- Delete Dialog ----
|
||||
$("#venues #deleteButton").on("click", function(event) {
|
||||
//debugger;
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$("#venues #deleteDialog_NameField").html(dataTable.getSelectedRow().data("model").name);
|
||||
$("#venues #deleteDialog").modal();
|
||||
}
|
||||
});
|
||||
$("#venues #deleteDialog_DeleteButton").on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$.post("/admin/venues/delete", {id: dataTable.getSelectedRow().data("model").id}, function(data) {
|
||||
if(data.result == "success") {
|
||||
$("#venues #deleteDialog").modal("hide");
|
||||
dataTable.refresh();
|
||||
}
|
||||
else {
|
||||
alert(data.result);
|
||||
}
|
||||
}, "json");
|
||||
}
|
||||
});
|
||||
//-----------------------------
|
||||
|
||||
//----- Edit Dialog ----
|
||||
$("#venues #editButton").on("click", function(event) {
|
||||
//debugger;
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$('#editDialog_NameField').val(dataTable.getSelectedRow().data("model").name);
|
||||
$("#venues #editDialog").modal();
|
||||
}
|
||||
});
|
||||
$("#venues #editDialog_SaveButton").on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$.post("/admin/venues/edit", {
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
name: $("#venues #editDialog_NameField").val()
|
||||
}, function(data) {
|
||||
if(data.result == "success") {
|
||||
$("#venues #editDialog").modal("hide");
|
||||
dataTable.refresh();
|
||||
}
|
||||
else {
|
||||
alert(data.result);
|
||||
}
|
||||
}, "json");
|
||||
}
|
||||
});
|
||||
$("#venues #editDialog").on('shown.bs.modal', function() {
|
||||
$('#editDialog_NameField').focus().select();
|
||||
});
|
||||
//---------------------
|
||||
|
||||
$('#includeDeletedToggle').on('click', function(event) {
|
||||
//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/Venue/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 Dialogs ++++++++++++
|
||||
|
||||
var $editorDialog = $page.find('#editorDialog');
|
||||
var $deleteDialog = $page.find('#deleteDialog');
|
||||
var $editorForm = $editorDialog.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.
|
||||
$editorDialog.find("#DFCreate, #DFCreatePlus").show();
|
||||
$editorDialog.find("#DFSave").hide();
|
||||
$editorDialog.find(".modal-title").text("Create Venue");
|
||||
//Reset fields to default values.
|
||||
$editorDialog.find("#DFName").val("");
|
||||
//Open the dialog.
|
||||
$editorDialog.modal();
|
||||
});
|
||||
//Handle opening the edit dialog.
|
||||
$btnEdit.on("click", function(event) {
|
||||
//debugger;
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
//Configure the dialog to edit an existing element.
|
||||
$editorDialog.find("#DFCreate, #DFCreatePlus").hide();
|
||||
$editorDialog.find("#DFSave").show();
|
||||
$editorDialog.find(".modal-title").text("Edit Venue");
|
||||
//Reset fields to selected values.
|
||||
$editorDialog.find('#DFName').val(dataTable.getSelectedRow().data("model").name);
|
||||
//Open the dialog.
|
||||
$editorDialog.modal();
|
||||
}
|
||||
});
|
||||
|
||||
//Handle the Create Button being clicked.
|
||||
var createFunction = function(close) {
|
||||
$editorForm.data('bs.validator').validate(function(isValid) {
|
||||
if(isValid) {
|
||||
try {
|
||||
$.post("data/Venue/create", {
|
||||
name: $editorForm.find("#DFName").val()
|
||||
}, function(data) {
|
||||
if(data.result == "success") {
|
||||
if(close) $editorDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}
|
||||
else {
|
||||
alert(data.result);
|
||||
}
|
||||
}, "json");
|
||||
} catch(e) {
|
||||
alert(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
$editorDialog.find('#DFCreatePlus').on('click', function(event) {
|
||||
createFunction(false);
|
||||
});
|
||||
$editorDialog.find('#DFCreate').on('click', function(event) {
|
||||
createFunction(true);
|
||||
});
|
||||
//Handle the Save Button being clicked.
|
||||
$editorDialog.find('#DFSave').on('click', function(event) {
|
||||
$editorForm.data('bs.validator').validate(function(isValid) {
|
||||
if(isValid) {
|
||||
try {
|
||||
$.post("data/Venue/edit", {
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
name: $editorForm.find("#DFName").val()
|
||||
}, function(data) {
|
||||
if(data.result == "success") {
|
||||
$editorDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}
|
||||
else {
|
||||
alert(data.result);
|
||||
}
|
||||
}, "json");
|
||||
} catch(e) {
|
||||
alert(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
$editorDialog.find('#DFCancel').on('click', function(event) {
|
||||
$editorDialog.modal('hide');
|
||||
});
|
||||
//Set the initial focus control.
|
||||
$editorDialog.on('shown.bs.modal', function() {
|
||||
$editorDialog.find('#DFName').focus();
|
||||
});
|
||||
|
||||
//++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++ Delete Dialog +++++++++++
|
||||
|
||||
//Open the dialog.
|
||||
$btnDelete.on("click", function(event) {
|
||||
//debugger;
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$deleteDialog.find("#deleteName").html(dataTable.getSelectedRow().data("model").name);
|
||||
$deleteDialog.modal();
|
||||
}
|
||||
});
|
||||
//Delete the element and close the dialog.
|
||||
$deleteDialog.find('#DFDelete').on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$.post("data/Venue/delete", {where: {id: dataTable.getSelectedRow().data("model").id}}, "json").done(function(data) {
|
||||
$deleteDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Failed to delete the selection.")
|
||||
});
|
||||
}
|
||||
});
|
||||
$deleteDialog.find('#DFCancelDelete').on('click', function(event) {
|
||||
$deleteDialog.modal('hide');
|
||||
});
|
||||
//Set the initial focus control.
|
||||
$editorDialog.on('shown.bs.modal', function() {
|
||||
$deleteDialog.find('#DFCancelDelete').focus();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user