wcrisman/PetitTeton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated site to scale better on small screens; Added clearfix css; Updated shadow feature to use css shadows instead of js/images.

Browse Source 
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
2016-10-26 14:48:11 -07:00
parent 33de2aa5d2
commit e82078174b
106 changed files with 29016 additions and 1971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

451
public/admin/items.html
View File

@@ -1,5 +1,7 @@
<div id="items" class="page">
<div class="col-sm-12 col-sm-offset-0">
<!-- Main Page Content -->
<h1><span class="fa fa-users"></span> Manage Items</h1>
<div class="col-sm-6">
@@ -7,77 +9,63 @@
<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="item-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>
<th data-key-name="category">Category</th>
<th data-key-name="subcategory">Subcategory</th>
<th data-key-name="defaultPrice">Default Price</th>
<th data-key-name="measures">Measures</th>
</tr>
</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">&times;</button>
<h4 class="modal-title">Create Item</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="Strawberry Jam" required>
</div>
<label for="DFSubcategory">Subcategory</label>
<div class="form-group">
<select name="subcategory" id="DFSubcategory" class="js-states form-control" style="width: 100%;" required></select>
</div>
<label for="DFPrice">Default Price</label>
<div class="input-group">
<span class="input-group-addon">$</span><input name="defaultPrice" id="DFPrice" type="number" min="0.00" step="0.50" value="10.00" data-number-to-fixed="2" class="form-control currency" tabindex="0" required>
</div>
<label for="DFMeasures">Measures</label>
<div class="form-group">
<select class="js-states form-control" name="measures" id="DFMeasures" multiple="multiple" tabindex="0" style="width: 100%;" required></select>
</div>
</div>
<div class="form-group">
<label>Default Price</label>
<input type="text" class="form-control" name="name" id="createDialog_DefaultPriceField" tabindex="0">
<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>
<div class="form-group">
<label>Measures</label>
<input type="text" class="form-control" name="name" id="createDialog_MeasuresField" 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 Item</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 class="form-group">
<label>Default Price</label>
<input type="text" class="form-control" name="name" id="editDialog_DefaultPriceField" tabindex="0">
</div>
<div class="form-group">
<label>Measures</label>
<input type="text" class="form-control" name="name" id="editDialog_MeasuresField" 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>
</form>
</div>
</div>
<!-- Delete Dialog -->
<div id="deleteDialog" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-header">
@@ -85,28 +73,103 @@
<h4 class="modal-title">Delete Item</h4>
</div>
<div class="modal-body">
Are you certain you wish to delete the item <span id="deleteDialog_NameField"></span>?
Are you certain you wish to delete the item <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=items.html
$(function() {
//# sourceURL=items.html
var dataTable = new LinkedTable($('#items-table'), {
url: "items/list",
var $page = $('#items');
var $btnCreate = $page.find("#createButton");
var $btnEdit = $page.find("#editButton");
var $btnDelete = $page.find("#deleteButton");
var $btnRestore = $page.find("#restoreButton");
var dataTable = new LinkedTable($page.find('#dataTable'), {
url: "data/Item/readAll",
attr: "data-key-name",
selection: "row",
parameters: function() {
return {showDeleted: $('#includeDeletedToggle').is(":checked") ? true : false};
return {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
},
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();
}
},
supportingData: [
{name: "categories", url: "data/Category/readAll", parameters: {showDeleted: true}, postProcess: function(data) {
var byId;
//Convert the category list into a map by category id.
byId = data.reduce(function(map, category) {
map[category.id] = category;
return map;
}, {});
//Save the categories by id for use when setting the editor dialog's dropdown selection.
categoriesById = byId;
return byId;
}},
{name: "subcategories", url: "data/Subcategory/readAll", parameters: {showDeleted: true}, postProcess: function(data) {
var byId;
//Convert the category list into a map by category id.
byId = data.reduce(function(map, category) {
map[category.id] = category;
return map;
}, {});
//Save the categories by id for use when setting the editor dialog's dropdown selection.
subcategoriesById = byId;
return byId;
}}
],
cellDataHandlers: {category: function($cell, item, supportingData) {
try {
var subcategory = supportingData.subcategories[item.subcategoryId];
var category = supportingData.categories[subcategory.categoryId];
$cell.html(category.name);
} catch(err) {
console.log(err);
$cell.html("Not Found");
}
}, subcategory: function($cell, item, supportingData) {
try {
var subcategory = supportingData.subcategories[item.subcategoryId];
$cell.html(subcategory.name);
} catch(err) {
console.log(err);
$cell.html("Not Found");
}
}},
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>");
$page.find("td:first", $row).prepend("<span class='glyphicon glyphicon-remove-circle' style='margin-right: 10px;' aria-hidden='true'></span>");
}
}
});
@@ -114,93 +177,199 @@
//Call the refresh user table function once initially.
dataTable.refresh();
//---- Create Dialog ----
$("#items #createButton").on("click", function(event) {
$("#items #createDialog").modal();
});
$("#items #createDialog_CreateButton").on("click", function(event) {
try {
$.post("/admin/items/create", {
name: $("#items #createDialog_NameField").val(),
defaultPrice: $("#items #createDialog_DefaultPriceField").val(),
measures: $("#items #createDialog_MeasuresField").val()
}, function(data) {
if(data.result == "success") {
$("#items #createDialog").modal("hide");
dataTable.refresh();
}
else {
alert(data.result);
}
}, "json");
} catch(e) {
alert(e);
}
});
$("#items #createDialog").on('shown.bs.modal', function() {
$('#createDialog_NameField').focus();
});
//----------------------------
//---- Delete Dialog ----
$("#items #deleteButton").on("click", function(event) {
//debugger;
if(dataTable.getSelectedRow() != null) {
$("#items #deleteDialog_NameField").html(dataTable.getSelectedRow().data("model").name);
$("#items #deleteDialog").modal();
}
});
$("#items #deleteDialog_DeleteButton").on("click", function(event) {
if(dataTable.getSelectedRow() != null) {
$.post("/admin/items/delete", {id: dataTable.getSelectedRow().data("model").id}, function(data) {
if(data.result == "success") {
$("#items #deleteDialog").modal("hide");
dataTable.refresh();
}
else {
alert(data.result);
}
}, "json");
}
});
//-----------------------------
//----- Edit Dialog ----
$("#items #editButton").on("click", function(event) {
//debugger;
if(dataTable.getSelectedRow() != null) {
$('#editDialog_NameField').val(dataTable.getSelectedRow().data("model").name);
$('#editDialog_DefaultPriceField').val(dataTable.getSelectedRow().data("model").defaultPrice);
$('#editDialog_MeasuresField').val(dataTable.getSelectedRow().data("model").measures);
$("#items #editDialog").modal();
}
});
$("#items #editDialog_SaveButton").on("click", function(event) {
if(dataTable.getSelectedRow() != null) {
$.post("/admin/items/edit", {
id: dataTable.getSelectedRow().data("model").id,
name: $("#items #editDialog_NameField").val(),
defaultPrice: $("#items #editDialog_DefaultPriceField").val(),
measures: $("#items #editDialog_MeasuresField").val()
}, function(data) {
if(data.result == "success") {
$("#items #editDialog").modal("hide");
dataTable.refresh();
}
else {
alert(data.result);
}
}, "json");
}
});
$("#items #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/Item/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');
var queries = [$.get("data/Category/readAll", {include: [{model: 'Subcategory', paranoid: true, as: 'subcategories'}], order: ['name', ['name']]}), $.get('data/Measure/readAll', {order: ['name']})];
//Update the dialog drop downs when the queries finish.
$.when.apply($, queries).then(function(query1, query2) {
var categories = query1[0];
var measures = query2[0];
var categoriesData = [];
var measureData = [];
//Iterate over the categories and their subcategories to build the tree of data for the dropdown.
for(var cat = 0; cat < categories.length; cat++) {
var nextCategory = categories[cat];
//If the category has subcategories then add it, otherwise ignore it.
if(nextCategory.subcategories) {
var category = {text: nextCategory.name, children: []};
for(var sub = 0; sub < nextCategory.subcategories.length; sub++) {
var next = nextCategory.subcategories[sub];
category.children.push({id: "" + next.id, text: next.name});
}
categoriesData.push(category);
}
}
//Build the measures list.
for(var i = 0; i < measures.length; i++) {
var nextMeasure = measures[i];
measureData.push({id: '' + nextMeasure.id, text: nextMeasure.name});
}
//Initialize the data for the dropdown.
$editorForm.find("#DFSubcategory").select2({data: categoriesData}).focus(function() {$(this).select2('focus')});
//Initialize the measures selector.
$editorForm.find('#DFMeasures').select2({data: measureData}).focus(function() {$(this).select2('focus')});
//Initialize the validator
$editorForm.validator();
//Debug Events
// $('#createDialog form').find('*').on('focusout focus change input', function(event) {
// console.log("Event [" + event.type + "] on " + event.target + (event.target.name ? "." + event.target.name : event.target.id ? "." + event.target.id : "") + "{" + event.target.classList + "}");
// });
});
//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 Item");
//Reset fields to default values.
$editorDialog.find("#DFName").val("");
$editorDialog.find("#DFPrice").val("10.00");
//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 Item");
//Reset fields to selected values.
$editorDialog.find('#DFName').val(dataTable.getSelectedRow().data("model").name);
$editorDialog.find('#DFSubcategory').val(dataTable.getSelectedRow().data("model").subcategoryId);
$editorDialog.find('#DFPrice').val(dataTable.getSelectedRow().data("model").defaultPrice);
$editorDialog.find('#DFMeasures').val(dataTable.getSelectedRow().data("model").measures);
//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/Item/create", {
name: $editorForm.find("#DFName").val(),
subcategoryId: parseInt($editorForm.find("#DFSubcategory").val()),
defaultPrice: $editorForm.find("#DFPrice").val(),
measures: JSON.stringify($editorForm.find("#DFMeasures").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/Item/edit", {
id: dataTable.getSelectedRow().data("model").id,
name: $editorForm.find("#DFName").val(),
subcategoryId: parseInt($editorForm.find("#DFSubcategory").val()),
defaultPrice: $editorForm.find("#DFPrice").val(),
measures: JSON.stringify($editorForm.find("#DFMeasures").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('#deleteButton').on("click", function(event) {
if(dataTable.getSelectedRow() != null) {
$.post("data/Item/delete", {where: {id: dataTable.getSelectedRow().data("model").id}}, function(data) {
if(data.result == "success") {
$deleteDialog.modal("hide");
dataTable.refresh();
}
else {
alert(data.result);
}
}, "json");
}
});
$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>