Major changes to the structure of pages to utilize the flex layout system.

This commit is contained in:
Wynne Crisman
2016-11-19 19:39:02 -08:00
parent 46ef9680c3
commit 4315418aa1
64 changed files with 3590 additions and 16015 deletions

View File

@@ -1,13 +1,11 @@
<div id="sales" class="page">
<div class="col-sm-12 col-sm-offset-0">
<div id="listView" class="view">
<div class="buttonContainer">
<h1><span class="fa fa-money"></span> Sales</h1>
<!-- Main Page Content -->
<h1><span class="fa fa-money"></span> Sales</h1>
<div class="col-sm-12">
<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="createButton" class="btn btn-default buttons-create" tabindex="0" href="#!/sales-create"><span>New</span></a>
<a id="editButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="#!/sales-edit"><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>
@@ -23,332 +21,303 @@
</tr>
</thead>
</table>
</div>
<!-- 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"></h4>
</div>
<form role="form" autocomplete="off">
<div class="modal-body">
<label for="DFDate">Date</label>
<div class="input-group date">
<input name="date" id="DFDate" type="text" class="form-control" tabindex="0" placeholder="" required>
<span class="input-group-addon">
<!-- Create/Edit View -->
<div id="editorView" class="view" style="display: none;" data-menu="false">
<div class="modal-dialog">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<form role="form" autocomplete="off">
<div class="modal-body">
<label for="DFDate">Date</label>
<div class="input-group date">
<input name="date" id="DFDate" type="text" class="form-control" tabindex="0" placeholder="" required>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<label for="DFItem">Item</label>
<div class="form-group">
<select name="item" id="DFItem" class="js-states form-control" style="width: 100%;" required></select>
</div>
<label for="DFAmount">Amount</label>
<div class="input-group">
<input name="amount" id="DFAmount" type="number" min="0" step="1" value="1" data-number-to-fixed="2" class="form-control" tabindex="0" required>
</div>
<label for="DFMeasure">Measure</label>
<div class="form-group">
<select name="measure" id="DFMeasure" class="js-states form-control" style="width: 100%;" required></select>
</div>
<label for="DFPrice">Price</label>
<div class="input-group">
<span class="input-group-addon">$</span><input name="price" 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="DFVenue">Venue</label>
<div class="form-group">
<select name="venue" id="DFVenue" class="js-states form-control" style="width: 100%;" required></select>
</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>
<label for="DFItem">Item</label>
<div class="form-group">
<input name="itemId" id="DFItemId" type="hidden"/>
<input name="item" id="DFItem" class="form-control" tabindex="0" required/>
</div>
<label for="DFAmount">Amount</label>
<div class="input-group">
<input name="amount" id="DFAmount" type="number" min="0" step="1" value="1" data-number-to-fixed="2" class="form-control" tabindex="0" required>
</div>
<label for="DFMeasure">Measure</label>
<div class="form-group">
<input name="measureId" id="DFMeasureId" type="hidden"/>
<input name="measure" id="DFMeasure" class="form-control" tabindex="0" required/>
</div>
<label for="DFPrice">Price</label>
<div class="input-group">
<span class="input-group-addon">$</span><input name="price" 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="DFVenue">Venue</label>
<div class="form-group">
<input name="venueId" id="DFVenueId" type="hidden"/>
<input name="venue" id="DFVenue" class="form-control" tabindex="0" required/>
</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">&times;</button>
<h4 class="modal-title">Delete Item</h4>
</div>
<div class="modal-body">
Are you certain you wish to delete the sale <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>
<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" onclick="location.href='#!/sales'">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 sale <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=subcategories.html
$(function() {
var $page = $('#sales');
var $btnCreate = $page.find("#createButton");
var $btnEdit = $page.find("#editButton");
var $btnDelete = $page.find("#deleteButton");
var $btnRestore = $page.find("#restoreButton");
<script language="JavaScript" type="text/javascript">//# sourceURL=sales.html
$(function() {
var $page = $('#sales');
var $btnCreate = $page.find("#createButton");
var $btnEdit = $page.find("#editButton");
var $btnDelete = $page.find("#deleteButton");
$btnEdit.disable(true);
$btnDelete.disable(true);
var selectionChanged = function($tr, model) {
if($tr && model) {
$btnDelete.disable(false);
$btnEdit.disable(false);
}
else {
$btnEdit.disable(true);
$btnDelete.disable(true);
$btnRestore.disable(true);
}
};
var selectionChanged = function($tr, model) {
if($tr && model) {
$btnEdit.disable(false);
var dataTable = new LinkedTable($page.find('#dataTable'), {
url: "data/Sale/readAll",
attr: "data-key-name",
selection: "row",
parameters: undefined,
selectionChanged: selectionChanged,
selectionOpened: function($tr, model) {
history.hash = "#!/sales-edit";
},
supportingData: [{name: "items", url: "data/Item/readAll", parameters: {showDeleted: true}, postProcess: function(data) {
var byId;
//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);
}
else {
$btnRestore.disable(true);
$btnDelete.disable(false);
}
}
else {
$btnEdit.disable(true);
$btnDelete.disable(true);
$btnRestore.disable(true);
}
};
//Convert the list into a map by id.
byId = data.reduce(function(map, item) {
map[item.id] = item;
return map;
}, {});
var dataTable = new LinkedTable($page.find('#dataTable'), {
url: "data/Sale/readAll",
attr: "data-key-name",
selection: "row",
parameters: function() {
return {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
},
selectionChanged: selectionChanged,
supportingData: [{name: "items", url: "data/Item/readAll", parameters: {showDeleted: true}, postProcess: function(data) {
var byId;
return byId;
}}],
cellDataHandlers: {item: function($cell, sale, supportingData) {
try {
var item = supportingData.items[sale.itemId];
//Convert the list into a map by id.
byId = data.reduce(function(map, item) {
map[item.id] = item;
return map;
}, {});
$cell.html(item.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>");
}
},
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>");
}
return byId;
}}],
cellDataHandlers: {item: function($cell, sale, supportingData) {
try {
var item = supportingData.items[sale.itemId];
if($row.is(dataTable.getSelectedRow())) {
selectionChanged($row, dataObject);
}
}
});
$page.find('#dataTable').on('dblclick', 'tr', function(event) {
if(dataTable.getSelectedRow()) {
location.hash = "#!/sales-edit";
}
});
$cell.html(item.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>");
}
},
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>");
}
//Call the refresh user table function once initially.
dataTable.build();
if($row.is(dataTable.getSelectedRow())) {
selectionChanged($row, dataObject);
}
}
});
//Refresh the data table if the user toggles the button to show/hide deleted elements.
$page.find('#includeDeletedToggle').on('click', function(event) {
dataTable.refresh();
});
//Call the refresh user table function once initially.
dataTable.build();
var $listView = $page.find('#listView');
var $editorView = $page.find('#editorView');
var $deleteView = $page.find('#deleteView');
//Refresh the data table if the user toggles the button to show/hide deleted elements.
$page.find('#includeDeletedToggle').on('click', function(event) {
dataTable.refresh();
});
//+++++++++++++++++++++++++++++++++++++++++++++++
// ++++++++++++ Create/Edit Views ++++++++++++
var $editorForm = $editorView.find('form');
var queries = [
$.get("data/Item/readAll", {request: JSON.stringify({paranoid: false, order: ['name', ['name']]})}),
$.get("data/Measure/readAll", {request: JSON.stringify({paranoid: false})}),
$.get("data/Venue/readAll", {request: JSON.stringify({paranoid: false})})
];
//+++++++++++++++++++++++++++++++++++++++++++++++
// ++++++++++++ Create/Edit Dialogs ++++++++++++
//Update the dialog drop downs when the queries finish.
$.when.apply($, queries).then(function(query1, query2, query3) {
//Initialize the drop down menus.
$editorForm.find("#DFItem").buildEditableSelect(query1[0], {textAttr: 'name', listClass: 'comboList'});
$editorForm.find("#DFMeasure").buildEditableSelect(query2[0], {textAttr: 'name', listClass: 'comboList'});
$editorForm.find("#DFVenue").buildEditableSelect(query3[0], {textAttr: 'name', listClass: 'comboList'});
//Initialize the validator
$editorForm.validator();
});
var $editorDialog = $page.find('#editorDialog');
var $deleteDialog = $page.find('#deleteDialog');
var $editorForm = $editorDialog.find('form');
var queries = [
$.get("data/Item/readAll", {request: JSON.stringify({paranoid: false, order: ['name', ['name']]})}),
$.get("data/Measure/readAll", {request: JSON.stringify({paranoid: false})}),
$.get("data/Venue/readAll", {request: JSON.stringify({paranoid: false})})
];
//Update the dialog drop downs when the queries finish.
$.when.apply($, queries).then(function(query1, query2) {
var items = query1[0];
var itemsData = [];
var measures = query2[0];
var measuresData = [];
var venues = query2[0];
var venueData = [];
//Collect the data for the drop down controls in the form they need (array of id/text pairs).
for(var i = 0; i < items.length; i++) {
var next = items[i];
itemsData.push({id: '' + next.id, text: next.name});
}
for(var i = 0; i < measures.length; i++) {
var next = measures[i];
measuresData.push({id: '' + next.id, text: next.name});
}
for(var i = 0; i < venues.length; i++) {
var next = venues[i];
venueData.push({id: '' + next.id, text: next.name});
}
//Initialize the data for the dropdown.
$editorForm.find("#DFItems").select2({data: itemsData}).focus(function() {$(this).select2('focus')});
$editorForm.find("#DFMeasures").select2({data: measuresData}).focus(function() {$(this).select2('focus')});
//Initialize the validator
$editorForm.validator();
});
//Handle opening the create dialog.
$btnCreate.on("click", function(event) {
//Setup a display-handler that will be called when the hash changes - allowing us to configure this page as necessary.
$page.data('display-handler', function(data, internal) {
switch(data) {
case 'create':
//Configure the dialog to create a new element.
$editorDialog.find("#DFCreate, #DFCreatePlus").show();
$editorDialog.find("#DFSave").hide();
$editorDialog.find(".modal-title").text("Create Sale");
$editorView.find("#DFCreate, #DFCreatePlus").show();
$editorView.find("#DFSave").hide();
$editorView.find(".modal-title").text("Create Sale");
//Reset fields to default values.
$editorDialog.find("#DFAmount").val("1");
$editorDialog.find("#DFPrice").val("");
//Open the dialog.
$editorDialog.modal();
});
//Handle opening the edit dialog.
$btnEdit.on("click", function(event) {
//debugger;
$editorView.find("#DFAmount").val("1");
$editorView.find("#DFPrice").val("");
showView($editorView, $editorView.find("#DFDate"), internal);
break;
case 'edit':
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 Sale");
$editorView.find("#DFCreate, #DFCreatePlus").hide();
$editorView.find("#DFSave").show();
$editorView.find(".modal-title").text("Edit Sale");
//Reset fields to selected values.
$editorDialog.find('#DFDate').val(dataTable.getSelectedRow().data("model").date);
$editorDialog.find('#DFPrice').val(dataTable.getSelectedRow().data("model").price);
$editorDialog.find('#DFAmount').val(dataTable.getSelectedRow().data("model").amount);
$editorDialog.find('#DFItem').val(dataTable.getSelectedRow().data("model").itemId).trigger("change");
$editorDialog.find('#DFVenue').val(dataTable.getSelectedRow().data("model").venueId).trigger("change");
$editorDialog.find('#DFMeasure').val(dataTable.getSelectedRow().data("model").measureId).trigger("change");
//Open the dialog.
$editorDialog.modal();
$editorView.find('#DFDate').val(dataTable.getSelectedRow().data("model").date);
$editorView.find('#DFPrice').val(dataTable.getSelectedRow().data("model").price);
$editorView.find('#DFAmount').val(dataTable.getSelectedRow().data("model").amount);
$editorView.find('#DFItemId').val(dataTable.getSelectedRow().data("model").itemId).trigger("change");
$editorView.find('#DFVenueId').val(dataTable.getSelectedRow().data("model").venueId).trigger("change");
$editorView.find('#DFMeasureId').val(dataTable.getSelectedRow().data("model").measureId).trigger("change");
showView($editorView, $editorView.find("#DFDate"), internal);
}
});
//Handle the Create Button being clicked.
var createFunction = function(close) {
$editorForm.data('bs.validator').validate(function(isValid) {
if(isValid) {
$.ajax({url: "data/Sale/create", type: "POST", dataType: "json", data: encodeData({
date: $editorForm.find("#DFDate").val(),
price: parseFloat($editorForm.find("#DFPrice").val()),
amount: parseFloat($editorForm.find("#DFAmount").val()),
itemId: parseInt($editorForm.find("#DFItem").val()),
venueId: parseInt($editorForm.find("#DFVenue").val()),
measureId: parseInt($editorForm.find("#DFMeasure").val())
})}).done(function(data) {
if(close) $editorDialog.modal("hide");
dataTable.refresh();
}).fail(function(data) {
alert("Server call failed.");
});
}
});
};
$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/Sale/edit", {
id: dataTable.getSelectedRow().data("model").id,
date: $editorForm.find("#DFDate").val(),
price: parseFloat($editorForm.find("#DFPrice").val()),
amount: parseFloat($editorForm.find("#DFAmount").val()),
itemId: parseInt($editorForm.find("#DFItem").val()),
venueId: parseInt($editorForm.find("#DFVenue").val()),
measureId: parseInt($editorForm.find("#DFMeasure").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();
else {
//Change the hash without adding to the history.
history.replaceState(undefined, undefined, "#!/sales")
}
});
//Delete the element and close the dialog.
$deleteDialog.find('#deleteButton').on("click", function(event) {
if(dataTable.getSelectedRow() != null) {
$.post("data/Sale/delete", {where: {id: dataTable.getSelectedRow().data("model").id}}, function(data) {
break;
default:
if(internal) dataTable.refresh();
showView($listView, null, internal);
break;
}
});
//Handle the Create Button being clicked.
var createFunction = function(close) {
$editorForm.data('bs.validator').validate(function(isValid) {
if(isValid) {
$.ajax({url: "data/Sale/create", type: "POST", dataType: "json", data: encodeData({
date: $editorForm.find("#DFDate").val(),
price: parseFloat($editorForm.find("#DFPrice").val()),
amount: parseFloat($editorForm.find("#DFAmount").val()),
itemId: parseInt($editorForm.find("#DFItemId").val()),
venueId: parseInt($editorForm.find("#DFVenueId").val()),
measureId: parseInt($editorForm.find("#DFMeasureId").val())
})}).done(function(data) {
if(close) window.location.hash = "#!/sales";
}).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) {
try {
$.post("data/Sale/edit", {
id: dataTable.getSelectedRow().data("model").id,
date: $editorForm.find("#DFDate").val(),
price: parseFloat($editorForm.find("#DFPrice").val()),
amount: parseFloat($editorForm.find("#DFAmount").val()),
itemId: parseInt($editorForm.find("#DFItemId").val()),
venueId: parseInt($editorForm.find("#DFVenueId").val()),
measureId: parseInt($editorForm.find("#DFMeasureId").val())
}, function(data) {
if(data.result == "success") {
$deleteDialog.modal("hide");
dataTable.refresh();
if(close) window.location.hash = "#!/sales";
}
else {
alert(data.result);
}
}, "json");
} catch(e) {
alert(e);
}
});
$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>
</div>
});
//++++++++++++++++++++++++++++++++++++++
// ++++++++++ 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('#DFDelete').on("click", function(event) {
if(dataTable.getSelectedRow() != null) {
$.post("data/Sale/delete", {where: {id: dataTable.getSelectedRow().data("model").id}}, function(data) {
if(data.result == "success") {
$deleteView.modal("hide");
dataTable.refresh();
}
else {
alert(data.result);
}
}, "json");
}
});
$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>