Updates to the data tracking app; Updated the VAP list.
This commit is contained in:
Wynne Crisman
354
public/admin/sales.html
Normal file
354
public/admin/sales.html
Normal file
@@ -0,0 +1,354 @@
|
||||
<div id="sales" class="page">
|
||||
<div class="col-sm-12 col-sm-offset-0">
|
||||
|
||||
<!-- 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="deleteButton" class="btn btn-default buttons-selected buttons-remove" tabindex="0" href="javaScript:void(0);"><span>Delete</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<table id="dataTable" class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-key-name="date">Date</th>
|
||||
<th data-key-name="item">Item</th>
|
||||
<th data-key-name="amount">Amount</th>
|
||||
<th data-key-name="measure">Measure</th>
|
||||
<th data-key-name="price">Price</th>
|
||||
<th data-key-name="venue">Venue</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<!-- 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"></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>
|
||||
</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 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>
|
||||
|
||||
<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");
|
||||
|
||||
$btnEdit.disable(true);
|
||||
$btnDelete.disable(true);
|
||||
$btnRestore.disable(true);
|
||||
|
||||
var selectionChanged = function($tr, model) {
|
||||
if($tr && model) {
|
||||
$btnEdit.disable(false);
|
||||
|
||||
//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);
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
//Convert the list into a map by id.
|
||||
byId = data.reduce(function(map, item) {
|
||||
map[item.id] = item;
|
||||
return map;
|
||||
}, {});
|
||||
|
||||
return byId;
|
||||
}}],
|
||||
cellDataHandlers: {item: function($cell, sale, supportingData) {
|
||||
try {
|
||||
var item = supportingData.items[sale.itemId];
|
||||
|
||||
$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>");
|
||||
}
|
||||
|
||||
if($row.is(dataTable.getSelectedRow())) {
|
||||
selectionChanged($row, dataObject);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//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();
|
||||
});
|
||||
|
||||
|
||||
//+++++++++++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++++ Create/Edit Dialogs ++++++++++++
|
||||
|
||||
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) {
|
||||
//Configure the dialog to create a new element.
|
||||
$editorDialog.find("#DFCreate, #DFCreatePlus").show();
|
||||
$editorDialog.find("#DFSave").hide();
|
||||
$editorDialog.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;
|
||||
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");
|
||||
//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();
|
||||
}
|
||||
});
|
||||
|
||||
//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();
|
||||
}
|
||||
});
|
||||
//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) {
|
||||
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>
|
||||
</div>
|
||||
Reference in New Issue
Block a user