Major changes to the structure of pages to utilize the flex layout system.
This commit is contained in:
Wynne Crisman
@@ -1,13 +1,11 @@
|
||||
<div id="venues" class="page">
|
||||
<div class="col-sm-12 col-sm-offset-0">
|
||||
<div id="listView" class="view">
|
||||
<div class="buttonContainer">
|
||||
<h1><span class="fa fa-users"></span> Manage Venues</h1>
|
||||
|
||||
<!-- Main Page Content -->
|
||||
<h1><span class="fa fa-users"></span> Manage Venues</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="#!/venues-create"><span>New</span></a>
|
||||
<a id="editButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="#!/venues-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>
|
||||
<a id="restoreButton" class="btn btn-default buttons-selected buttons-restore" tabindex="0" href="javaScript:void(0);"><span>Restore</span></a>
|
||||
</div>
|
||||
@@ -25,238 +23,258 @@
|
||||
</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">×</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="Boonville" required>
|
||||
</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>
|
||||
<!-- 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>
|
||||
</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>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the venue <span id="deleteName"></span>?
|
||||
<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 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='#!/venues'">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">×</button>
|
||||
<h4 class="modal-title">Delete Item</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the venue <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>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">//# sourceURL=venues.html
|
||||
$(function() {
|
||||
var $page = $('#venues');
|
||||
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/Venue/readAll",
|
||||
attr: "data-key-name",
|
||||
selection: "row",
|
||||
selectionChanged: selectionChanged,
|
||||
parameters: function() {
|
||||
return {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
|
||||
},
|
||||
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();
|
||||
});
|
||||
|
||||
//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", {request: JSON.stringify({where: {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) {
|
||||
$.ajax({url: "data/Venue/create", type: "POST", dataType: "json", data: encodeData({
|
||||
name: $editorForm.find("#DFName").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) {
|
||||
$.ajax({url: "data/Venue/edit", type: "POST", dataType: "json", data: encodeData({
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
name: $editorForm.find("#DFName").val()
|
||||
})}).done(function(data) {
|
||||
if(close) $editorDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$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) {
|
||||
$.ajax({url: "data/Venue/delete", type: "POST", dataType: "json", data: encodeData({where: {id: dataTable.getSelectedRow().data("model").id}})}).done(function(data) {
|
||||
$deleteDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
$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>
|
||||
</div>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">//# sourceURL=venues.html
|
||||
$(function() {
|
||||
var $page = $('#venues');
|
||||
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/Venue/readAll",
|
||||
attr: "data-key-name",
|
||||
selection: "row",
|
||||
selectionChanged: selectionChanged,
|
||||
parameters: function() {
|
||||
return {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
|
||||
},
|
||||
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 = "#!/venues-edit";
|
||||
}
|
||||
});
|
||||
$page.find('#dataTable').on('keyup', 'table', function(event) {
|
||||
switch(event.keyCode || event.which) {
|
||||
case 0x0D: //Enter
|
||||
if(dataTable.getSelectedRow()) {
|
||||
$btnEdit.click();
|
||||
}
|
||||
break;
|
||||
case 0x08: //Backspace
|
||||
if(dataTable.getSelectedRow()) {
|
||||
$btnDelete.click();
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
//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/Venue/restore", {request: JSON.stringify({where: {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.");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var $listView = $page.find('#listView');
|
||||
var $editorView = $page.find('#editorView');
|
||||
var $deleteView = $page.find('#deleteView');
|
||||
|
||||
//+++++++++++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++++ Create/Edit Views ++++++++++++
|
||||
|
||||
var $editorForm = $editorView.find('form');
|
||||
|
||||
//Initialize the validator
|
||||
$editorForm.validator();
|
||||
|
||||
//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.
|
||||
$editorView.find("#DFCreate, #DFCreatePlus").show();
|
||||
$editorView.find("#DFSave").hide();
|
||||
$editorView.find(".modal-title").text("Create Venue");
|
||||
//Reset fields to default values.
|
||||
$editorView.find("#DFName").val("");
|
||||
showView($editorView, $editorView.find("#DFName"), internal);
|
||||
break;
|
||||
case 'edit':
|
||||
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 Venue");
|
||||
//Reset fields to selected values.
|
||||
$editorView.find('#DFName').val(dataTable.getSelectedRow().data("model").name);
|
||||
showView($editorView, $editorView.find("#DFName"), internal);
|
||||
}
|
||||
else {
|
||||
//Change the hash without adding to the history.
|
||||
history.replaceState(undefined, undefined, "#!/sales")
|
||||
}
|
||||
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/Venue/create", type: "POST", dataType: "json", data: encodeData({
|
||||
name: $editorForm.find("#DFName").val()
|
||||
})}).done(function(data) {
|
||||
if(close) window.location.hash = "#!/venues";
|
||||
}).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/Venue/edit", type: "POST", dataType: "json", data: encodeData({
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
name: $editorForm.find("#DFName").val()
|
||||
})}).done(function(data) {
|
||||
if(close) window.location.hash = "#!/venues";
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++ 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) {
|
||||
$.ajax({url: "data/Venue/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>
|
||||
@@ -1,13 +1,11 @@
|
||||
<div id="categories" class="page">
|
||||
<div class="col-sm-12 col-sm-offset-0">
|
||||
<div id="listView" class="view">
|
||||
<div class="buttonContainer">
|
||||
<h1><span class="fa fa-users"></span> Manage Categories</h1>
|
||||
|
||||
<!-- Main Page Content -->
|
||||
<h1><span class="fa fa-users"></span> Manage Categories</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="#!/categories-create"><span>New</span></a>
|
||||
<a id="editButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="#!/categories-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>
|
||||
<a id="restoreButton" class="btn btn-default buttons-selected buttons-restore" tabindex="0" href="javaScript:void(0);"><span>Restore</span></a>
|
||||
</div>
|
||||
@@ -24,238 +22,243 @@
|
||||
</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">×</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="VAP" required>
|
||||
</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>
|
||||
<!-- Create/Edit View -->
|
||||
<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">×</button>
|
||||
<h4 class="modal-title"></h4>
|
||||
</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>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the category <span id="deleteName"></span>?
|
||||
<label for="DFName">Name</label>
|
||||
<div class="form-group">
|
||||
<input name="name" id="DFName" type="text" class="form-control" tabindex="0" placeholder="VAP" required>
|
||||
</div>
|
||||
</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='#!/categories'">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">×</button>
|
||||
<h4 class="modal-title">Delete Item</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the category <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>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">//# sourceURL=categories.html
|
||||
$(function() {
|
||||
var $page = $('#categories');
|
||||
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/Category/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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//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/Category/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 Category");
|
||||
//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 Category");
|
||||
//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) {
|
||||
$.ajax({url: "data/Category/create", type: "POST", dataType: "json", data: encodeData({
|
||||
name: $editorForm.find("#DFName").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) {
|
||||
$.ajax({url: "data/Category/edit", type: "POST", dataType: "json", data: {
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
name: $editorForm.find("#DFName").val()
|
||||
}}).done(function(data) {
|
||||
$editorDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server side error.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$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) {
|
||||
$.ajax({url: "data/Category/delete", type: "POST", dataType: "json", data: encodeData({where: {id: dataTable.getSelectedRow().data("model").id}})}).done(function(data) {
|
||||
$deleteDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
$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>
|
||||
</div>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">//# sourceURL=categories.html
|
||||
$(function() {
|
||||
var $page = $('#categories');
|
||||
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/Category/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 = "#!/categories-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/Category/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.");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var $listView = $page.find('#listView');
|
||||
var $editorView = $page.find('#editorView');
|
||||
var $deleteView = $page.find('#deleteView');
|
||||
|
||||
//+++++++++++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++++ Create/Edit Views ++++++++++++
|
||||
|
||||
var $editorForm = $editorView.find('form');
|
||||
|
||||
//Initialize the validator
|
||||
$editorForm.validator();
|
||||
|
||||
//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.
|
||||
$editorView.find("#DFCreate, #DFCreatePlus").show();
|
||||
$editorView.find("#DFSave").hide();
|
||||
$editorView.find(".modal-title").text("Create Category");
|
||||
//Reset fields to default values.
|
||||
$editorView.find("#DFName").val("");
|
||||
showView($editorView, $editorView.find("#DFName"), internal);
|
||||
break;
|
||||
case 'edit':
|
||||
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 Category");
|
||||
//Reset fields to selected values.
|
||||
$editorView.find('#DFName').val(dataTable.getSelectedRow().data("model").name);
|
||||
showView($editorView, $editorView.find("#DFName"), internal);
|
||||
}
|
||||
else {
|
||||
//Change the hash without adding to the history.
|
||||
history.replaceState(undefined, undefined, "#!/sales")
|
||||
}
|
||||
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/Category/create", type: "POST", dataType: "json", data: encodeData({
|
||||
name: $editorForm.find("#DFName").val()
|
||||
})}).done(function(data) {
|
||||
if(close) window.location.hash = "#!/categories";
|
||||
}).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/Category/edit", type: "POST", dataType: "json", data: {
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
name: $editorForm.find("#DFName").val()
|
||||
}}).done(function(data) {
|
||||
if(close) window.location.hash = "#!/categories";
|
||||
}).fail(function(data) {
|
||||
alert("Server side error.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++ 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) {
|
||||
$.ajax({url: "data/Category/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>
|
||||
@@ -1,2 +1,30 @@
|
||||
#categories {
|
||||
height: 100%;
|
||||
|
||||
#listView {
|
||||
height: 100%;
|
||||
//Flex container options.
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: flex-start; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: center; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
.buttonContainer {
|
||||
//Flex element options.
|
||||
flex: 0 0; //Grow, Shrink, Basis
|
||||
}
|
||||
|
||||
#dataTable {
|
||||
overflow: auto;
|
||||
//Flex element options.
|
||||
flex: 1 1 120px; //Grow, Shrink, Basis
|
||||
align-self: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
public/admin/configMenu.html
Normal file
22
public/admin/configMenu.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<div id="configMenu" class="page">
|
||||
<a class="option" href="#!/categories">
|
||||
<i class="fa fa-file-o"></i>
|
||||
<p>Categories</p>
|
||||
</a>
|
||||
<a class="option" href="#!/subcategories">
|
||||
<i class="fa fa-files-o"></i>
|
||||
<p>Subcategories</p>
|
||||
</a>
|
||||
<a class="option" href="#!/measures">
|
||||
<i class="fa fa-tint"></i>
|
||||
<p>Measures</p>
|
||||
</a>
|
||||
<a class="option" href="#!/venues">
|
||||
<i class="fa fa-truck"></i>
|
||||
<p>Venues</p>
|
||||
</a>
|
||||
<a class="option" href="#!/users">
|
||||
<i class="fa fa-user"></i>
|
||||
<p>Users</p>
|
||||
</a>
|
||||
</div>
|
||||
56
public/admin/configMenu.styl
Normal file
56
public/admin/configMenu.styl
Normal file
@@ -0,0 +1,56 @@
|
||||
#configMenu {
|
||||
flex: 0 0 100%;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: flex-start; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: flex-start; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
width: 100%;
|
||||
|
||||
.option {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
background: grey;
|
||||
margin: 20px;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
//Flex element options.
|
||||
flex: 0 0 120px; //Grow, Shrink, Basis
|
||||
//Flex container options.
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: center; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: center; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
flex: 0 0;
|
||||
font-size: 8em;
|
||||
}
|
||||
p {
|
||||
flex: 0 0;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.option:hover {
|
||||
-moz-box-shadow: inset 0 0 20px #7a5a7a;
|
||||
-webkit-box-shadow: inset 0 0 20px #7a5a7a;
|
||||
box-shadow: inset 0 0 20px #7a5a7a;
|
||||
}
|
||||
.option:active {
|
||||
background: #CCC;
|
||||
}
|
||||
}
|
||||
@@ -1,447 +0,0 @@
|
||||
/*!
|
||||
Chosen, a Select Box Enhancer for jQuery and Prototype
|
||||
by Patrick Filler for Harvest, http://getharvest.com
|
||||
|
||||
Version 1.6.2
|
||||
Full source at https://github.com/harvesthq/chosen
|
||||
Copyright (c) 2011-2016 Harvest http://getharvest.com
|
||||
|
||||
MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
|
||||
This file is generated by `grunt build`, do not edit it by hand.
|
||||
*/
|
||||
|
||||
/* @group Base */
|
||||
.chosen-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.chosen-container * {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chosen-container .chosen-drop {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -9999px;
|
||||
z-index: 1010;
|
||||
width: 100%;
|
||||
border: 1px solid #aaa;
|
||||
border-top: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.chosen-container.chosen-with-drop .chosen-drop {
|
||||
left: 0;
|
||||
}
|
||||
.chosen-container a {
|
||||
cursor: pointer;
|
||||
}
|
||||
.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
|
||||
margin-right: 4px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
}
|
||||
.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
|
||||
content: ":";
|
||||
padding-left: 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Single Chosen */
|
||||
.chosen-container-single .chosen-single {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0 0 0 8px;
|
||||
height: 25px;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
|
||||
background: -webkit-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background: -moz-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background: -o-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
line-height: 24px;
|
||||
}
|
||||
.chosen-container-single .chosen-default {
|
||||
color: #999;
|
||||
}
|
||||
.chosen-container-single .chosen-single span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin-right: 26px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chosen-container-single .chosen-single-with-deselect span {
|
||||
margin-right: 38px;
|
||||
}
|
||||
.chosen-container-single .chosen-single abbr {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 26px;
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: url('chosen-sprite.png') -42px 1px no-repeat;
|
||||
font-size: 1px;
|
||||
}
|
||||
.chosen-container-single .chosen-single abbr:hover {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chosen-container-single .chosen-single div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 100%;
|
||||
}
|
||||
.chosen-container-single .chosen-single div b {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('chosen-sprite.png') no-repeat 0px 2px;
|
||||
}
|
||||
.chosen-container-single .chosen-search {
|
||||
position: relative;
|
||||
z-index: 1010;
|
||||
margin: 0;
|
||||
padding: 3px 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chosen-container-single .chosen-search input[type="text"] {
|
||||
margin: 1px 0;
|
||||
padding: 4px 20px 4px 5px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
outline: 0;
|
||||
border: 1px solid #aaa;
|
||||
background: white url('chosen-sprite.png') no-repeat 100% -20px;
|
||||
background: url('chosen-sprite.png') no-repeat 100% -20px;
|
||||
font-size: 1em;
|
||||
font-family: sans-serif;
|
||||
line-height: normal;
|
||||
border-radius: 0;
|
||||
}
|
||||
.chosen-container-single .chosen-drop {
|
||||
margin-top: -1px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Results */
|
||||
.chosen-container .chosen-results {
|
||||
color: #444;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin: 0 4px 4px 0;
|
||||
padding: 0 0 0 4px;
|
||||
max-height: 240px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.chosen-container .chosen-results li {
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 5px 6px;
|
||||
list-style: none;
|
||||
line-height: 15px;
|
||||
word-wrap: break-word;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
.chosen-container .chosen-results li.active-result {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chosen-container .chosen-results li.disabled-result {
|
||||
display: list-item;
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
.chosen-container .chosen-results li.highlighted {
|
||||
background-color: #3875d7;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
|
||||
background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
|
||||
background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
|
||||
background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
|
||||
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
|
||||
color: #fff;
|
||||
}
|
||||
.chosen-container .chosen-results li.no-results {
|
||||
color: #777;
|
||||
display: list-item;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.chosen-container .chosen-results li.group-result {
|
||||
display: list-item;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
.chosen-container .chosen-results li.group-option {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.chosen-container .chosen-results li em {
|
||||
font-style: normal;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Multi Chosen */
|
||||
.chosen-container-multi .chosen-choices {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #aaa;
|
||||
background-color: #fff;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
|
||||
cursor: text;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-field {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
|
||||
margin: 1px 0;
|
||||
padding: 0;
|
||||
height: 25px;
|
||||
outline: 0;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none;
|
||||
color: #999;
|
||||
font-size: 100%;
|
||||
font-family: sans-serif;
|
||||
line-height: normal;
|
||||
border-radius: 0;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice {
|
||||
position: relative;
|
||||
margin: 3px 5px 3px 0;
|
||||
padding: 3px 20px 3px 5px;
|
||||
border: 1px solid #aaa;
|
||||
max-width: 100%;
|
||||
border-radius: 3px;
|
||||
background-color: #eeeeee;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-size: 100% 19px;
|
||||
background-repeat: repeat-x;
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
|
||||
color: #333;
|
||||
line-height: 13px;
|
||||
cursor: default;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice span {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 3px;
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: url('chosen-sprite.png') -42px 1px no-repeat;
|
||||
font-size: 1px;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice-disabled {
|
||||
padding-right: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #e4e4e4;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
color: #666;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice-focus {
|
||||
background: #d4d4d4;
|
||||
}
|
||||
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
|
||||
background-position: -42px -10px;
|
||||
}
|
||||
.chosen-container-multi .chosen-results {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.chosen-container-multi .chosen-drop .result-selected {
|
||||
display: list-item;
|
||||
color: #ccc;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Active */
|
||||
.chosen-container-active .chosen-single {
|
||||
border: 1px solid #5897fb;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.chosen-container-active.chosen-with-drop .chosen-single {
|
||||
border: 1px solid #aaa;
|
||||
-moz-border-radius-bottomright: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
-moz-border-radius-bottomleft: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
|
||||
background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
|
||||
background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
|
||||
background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
|
||||
background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
|
||||
box-shadow: 0 1px 0 #fff inset;
|
||||
}
|
||||
.chosen-container-active.chosen-with-drop .chosen-single div {
|
||||
border-left: none;
|
||||
background: transparent;
|
||||
}
|
||||
.chosen-container-active.chosen-with-drop .chosen-single div b {
|
||||
background-position: -18px 2px;
|
||||
}
|
||||
.chosen-container-active .chosen-choices {
|
||||
border: 1px solid #5897fb;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.chosen-container-active .chosen-choices li.search-field input[type="text"] {
|
||||
color: #222 !important;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Disabled Support */
|
||||
.chosen-disabled {
|
||||
opacity: 0.5 !important;
|
||||
cursor: default;
|
||||
}
|
||||
.chosen-disabled .chosen-single {
|
||||
cursor: default;
|
||||
}
|
||||
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Right to Left */
|
||||
.chosen-rtl {
|
||||
text-align: right;
|
||||
}
|
||||
.chosen-rtl .chosen-single {
|
||||
overflow: visible;
|
||||
padding: 0 8px 0 0;
|
||||
}
|
||||
.chosen-rtl .chosen-single span {
|
||||
margin-right: 0;
|
||||
margin-left: 26px;
|
||||
direction: rtl;
|
||||
}
|
||||
.chosen-rtl .chosen-single-with-deselect span {
|
||||
margin-left: 38px;
|
||||
}
|
||||
.chosen-rtl .chosen-single div {
|
||||
right: auto;
|
||||
left: 3px;
|
||||
}
|
||||
.chosen-rtl .chosen-single abbr {
|
||||
right: auto;
|
||||
left: 26px;
|
||||
}
|
||||
.chosen-rtl .chosen-choices li {
|
||||
float: right;
|
||||
}
|
||||
.chosen-rtl .chosen-choices li.search-field input[type="text"] {
|
||||
direction: rtl;
|
||||
}
|
||||
.chosen-rtl .chosen-choices li.search-choice {
|
||||
margin: 3px 5px 3px 0;
|
||||
padding: 3px 5px 3px 19px;
|
||||
}
|
||||
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
.chosen-rtl.chosen-container-single-nosearch .chosen-search,
|
||||
.chosen-rtl .chosen-drop {
|
||||
left: 9999px;
|
||||
}
|
||||
.chosen-rtl.chosen-container-single .chosen-results {
|
||||
margin: 0 0 4px 4px;
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
.chosen-rtl .chosen-results li.group-option {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
|
||||
border-right: none;
|
||||
}
|
||||
.chosen-rtl .chosen-search input[type="text"] {
|
||||
padding: 4px 5px 4px 20px;
|
||||
background: white url('chosen-sprite.png') no-repeat -30px -20px;
|
||||
background: url('chosen-sprite.png') no-repeat -30px -20px;
|
||||
direction: rtl;
|
||||
}
|
||||
.chosen-rtl.chosen-container-single .chosen-single div b {
|
||||
background-position: 6px 2px;
|
||||
}
|
||||
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
|
||||
background-position: -12px 2px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
/* @group Retina compatibility */
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
|
||||
.chosen-rtl .chosen-search input[type="text"],
|
||||
.chosen-container-single .chosen-single abbr,
|
||||
.chosen-container-single .chosen-single div b,
|
||||
.chosen-container-single .chosen-search input[type="text"],
|
||||
.chosen-container-multi .chosen-choices .search-choice .search-choice-close,
|
||||
.chosen-container .chosen-results-scroll-down span,
|
||||
.chosen-container .chosen-results-scroll-up span {
|
||||
background-image: url('chosen-sprite@2x.png') !important;
|
||||
background-size: 52px 37px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
}
|
||||
/* @end */
|
||||
3
public/admin/css/chosen.min.css
vendored
3
public/admin/css/chosen.min.css
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 335 B |
Binary file not shown.
|
Before Width: | Height: | Size: 207 B |
Binary file not shown.
|
Before Width: | Height: | Size: 262 B |
Binary file not shown.
|
Before Width: | Height: | Size: 262 B |
Binary file not shown.
|
Before Width: | Height: | Size: 332 B |
Binary file not shown.
|
Before Width: | Height: | Size: 280 B |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
1225
public/admin/css/jquery-ui-1.11.4/jquery-ui.css
vendored
1225
public/admin/css/jquery-ui-1.11.4/jquery-ui.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,833 +0,0 @@
|
||||
/*!
|
||||
* jQuery UI CSS Framework 1.11.4
|
||||
* http://jqueryui.com
|
||||
*
|
||||
* Copyright jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://api.jqueryui.com/category/theming/
|
||||
*/
|
||||
|
||||
/* Layout helpers
|
||||
----------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
.ui-helper-hidden-accessible {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
.ui-helper-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
font-size: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
.ui-helper-clearfix:before,
|
||||
.ui-helper-clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.ui-helper-clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.ui-helper-clearfix {
|
||||
min-height: 0; /* support: IE7 */
|
||||
}
|
||||
.ui-helper-zfix {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
filter:Alpha(Opacity=0); /* support: IE8 */
|
||||
}
|
||||
|
||||
.ui-front {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-disabled {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon {
|
||||
display: block;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-draggable-handle {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-resizable {
|
||||
position: relative;
|
||||
}
|
||||
.ui-resizable-handle {
|
||||
position: absolute;
|
||||
font-size: 0.1px;
|
||||
display: block;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-resizable-disabled .ui-resizable-handle,
|
||||
.ui-resizable-autohide .ui-resizable-handle {
|
||||
display: none;
|
||||
}
|
||||
.ui-resizable-n {
|
||||
cursor: n-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
top: -5px;
|
||||
left: 0;
|
||||
}
|
||||
.ui-resizable-s {
|
||||
cursor: s-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
}
|
||||
.ui-resizable-e {
|
||||
cursor: e-resize;
|
||||
width: 7px;
|
||||
right: -5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-w {
|
||||
cursor: w-resize;
|
||||
width: 7px;
|
||||
left: -5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
}
|
||||
.ui-resizable-sw {
|
||||
cursor: sw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
}
|
||||
.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
.ui-resizable-ne {
|
||||
cursor: ne-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
right: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
.ui-selectable {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-selectable-helper {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
border: 1px dotted black;
|
||||
}
|
||||
.ui-sortable-handle {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-accordion .ui-accordion-header {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin: 2px 0 0 0;
|
||||
padding: .5em .5em .5em .7em;
|
||||
min-height: 0; /* support: IE7 */
|
||||
font-size: 100%;
|
||||
}
|
||||
.ui-accordion .ui-accordion-icons {
|
||||
padding-left: 2.2em;
|
||||
}
|
||||
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
|
||||
padding-left: 2.2em;
|
||||
}
|
||||
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
|
||||
position: absolute;
|
||||
left: .5em;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.ui-accordion .ui-accordion-content {
|
||||
padding: 1em 2.2em;
|
||||
border-top: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.ui-autocomplete {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
}
|
||||
.ui-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
line-height: normal;
|
||||
margin-right: .1em;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
overflow: visible; /* removes extra width in IE */
|
||||
}
|
||||
.ui-button,
|
||||
.ui-button:link,
|
||||
.ui-button:visited,
|
||||
.ui-button:hover,
|
||||
.ui-button:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
/* to make room for the icon, a width needs to be set here */
|
||||
.ui-button-icon-only {
|
||||
width: 2.2em;
|
||||
}
|
||||
/* button elements seem to need a little more width */
|
||||
button.ui-button-icon-only {
|
||||
width: 2.4em;
|
||||
}
|
||||
.ui-button-icons-only {
|
||||
width: 3.4em;
|
||||
}
|
||||
button.ui-button-icons-only {
|
||||
width: 3.7em;
|
||||
}
|
||||
|
||||
/* button text element */
|
||||
.ui-button .ui-button-text {
|
||||
display: block;
|
||||
line-height: normal;
|
||||
}
|
||||
.ui-button-text-only .ui-button-text {
|
||||
padding: .4em 1em;
|
||||
}
|
||||
.ui-button-icon-only .ui-button-text,
|
||||
.ui-button-icons-only .ui-button-text {
|
||||
padding: .4em;
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
.ui-button-text-icon-primary .ui-button-text,
|
||||
.ui-button-text-icons .ui-button-text {
|
||||
padding: .4em 1em .4em 2.1em;
|
||||
}
|
||||
.ui-button-text-icon-secondary .ui-button-text,
|
||||
.ui-button-text-icons .ui-button-text {
|
||||
padding: .4em 2.1em .4em 1em;
|
||||
}
|
||||
.ui-button-text-icons .ui-button-text {
|
||||
padding-left: 2.1em;
|
||||
padding-right: 2.1em;
|
||||
}
|
||||
/* no icon support for input elements, provide padding by default */
|
||||
input.ui-button {
|
||||
padding: .4em 1em;
|
||||
}
|
||||
|
||||
/* button icon element(s) */
|
||||
.ui-button-icon-only .ui-icon,
|
||||
.ui-button-text-icon-primary .ui-icon,
|
||||
.ui-button-text-icon-secondary .ui-icon,
|
||||
.ui-button-text-icons .ui-icon,
|
||||
.ui-button-icons-only .ui-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.ui-button-icon-only .ui-icon {
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
}
|
||||
.ui-button-text-icon-primary .ui-button-icon-primary,
|
||||
.ui-button-text-icons .ui-button-icon-primary,
|
||||
.ui-button-icons-only .ui-button-icon-primary {
|
||||
left: .5em;
|
||||
}
|
||||
.ui-button-text-icon-secondary .ui-button-icon-secondary,
|
||||
.ui-button-text-icons .ui-button-icon-secondary,
|
||||
.ui-button-icons-only .ui-button-icon-secondary {
|
||||
right: .5em;
|
||||
}
|
||||
|
||||
/* button sets */
|
||||
.ui-buttonset {
|
||||
margin-right: 7px;
|
||||
}
|
||||
.ui-buttonset .ui-button {
|
||||
margin-left: 0;
|
||||
margin-right: -.3em;
|
||||
}
|
||||
|
||||
/* workarounds */
|
||||
/* reset extra padding in Firefox, see h5bp.com/l */
|
||||
input.ui-button::-moz-focus-inner,
|
||||
button.ui-button::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ui-datepicker {
|
||||
width: 17em;
|
||||
padding: .2em .2em 0;
|
||||
display: none;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-header {
|
||||
position: relative;
|
||||
padding: .2em 0;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-prev,
|
||||
.ui-datepicker .ui-datepicker-next {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-prev-hover,
|
||||
.ui-datepicker .ui-datepicker-next-hover {
|
||||
top: 1px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-prev {
|
||||
left: 2px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-next {
|
||||
right: 2px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-prev-hover {
|
||||
left: 1px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-next-hover {
|
||||
right: 1px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-prev span,
|
||||
.ui-datepicker .ui-datepicker-next span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-title {
|
||||
margin: 0 2.3em;
|
||||
line-height: 1.8em;
|
||||
text-align: center;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-title select {
|
||||
font-size: 1em;
|
||||
margin: 1px 0;
|
||||
}
|
||||
.ui-datepicker select.ui-datepicker-month,
|
||||
.ui-datepicker select.ui-datepicker-year {
|
||||
width: 45%;
|
||||
}
|
||||
.ui-datepicker table {
|
||||
width: 100%;
|
||||
font-size: .9em;
|
||||
border-collapse: collapse;
|
||||
margin: 0 0 .4em;
|
||||
}
|
||||
.ui-datepicker th {
|
||||
padding: .7em .3em;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
}
|
||||
.ui-datepicker td {
|
||||
border: 0;
|
||||
padding: 1px;
|
||||
}
|
||||
.ui-datepicker td span,
|
||||
.ui-datepicker td a {
|
||||
display: block;
|
||||
padding: .2em;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-buttonpane {
|
||||
background-image: none;
|
||||
margin: .7em 0 0 0;
|
||||
padding: 0 .2em;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-buttonpane button {
|
||||
float: right;
|
||||
margin: .5em .2em .4em;
|
||||
cursor: pointer;
|
||||
padding: .2em .6em .3em .6em;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* with multiple calendars */
|
||||
.ui-datepicker.ui-datepicker-multi {
|
||||
width: auto;
|
||||
}
|
||||
.ui-datepicker-multi .ui-datepicker-group {
|
||||
float: left;
|
||||
}
|
||||
.ui-datepicker-multi .ui-datepicker-group table {
|
||||
width: 95%;
|
||||
margin: 0 auto .4em;
|
||||
}
|
||||
.ui-datepicker-multi-2 .ui-datepicker-group {
|
||||
width: 50%;
|
||||
}
|
||||
.ui-datepicker-multi-3 .ui-datepicker-group {
|
||||
width: 33.3%;
|
||||
}
|
||||
.ui-datepicker-multi-4 .ui-datepicker-group {
|
||||
width: 25%;
|
||||
}
|
||||
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
|
||||
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
|
||||
border-left-width: 0;
|
||||
}
|
||||
.ui-datepicker-multi .ui-datepicker-buttonpane {
|
||||
clear: left;
|
||||
}
|
||||
.ui-datepicker-row-break {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/* RTL support */
|
||||
.ui-datepicker-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-prev {
|
||||
right: 2px;
|
||||
left: auto;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-next {
|
||||
left: 2px;
|
||||
right: auto;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-prev:hover {
|
||||
right: 1px;
|
||||
left: auto;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-next:hover {
|
||||
left: 1px;
|
||||
right: auto;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane {
|
||||
clear: right;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
|
||||
float: left;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
|
||||
.ui-datepicker-rtl .ui-datepicker-group {
|
||||
float: right;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
|
||||
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
|
||||
border-right-width: 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.ui-dialog {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: .2em;
|
||||
outline: 0;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar {
|
||||
padding: .4em 1em;
|
||||
position: relative;
|
||||
}
|
||||
.ui-dialog .ui-dialog-title {
|
||||
float: left;
|
||||
margin: .1em 0;
|
||||
white-space: nowrap;
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ui-dialog .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
right: .3em;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
margin: -10px 0 0 0;
|
||||
padding: 1px;
|
||||
height: 20px;
|
||||
}
|
||||
.ui-dialog .ui-dialog-content {
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: .5em 1em;
|
||||
background: none;
|
||||
overflow: auto;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane {
|
||||
text-align: left;
|
||||
border-width: 1px 0 0 0;
|
||||
background-image: none;
|
||||
margin-top: .5em;
|
||||
padding: .3em 1em .5em .4em;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
|
||||
float: right;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane button {
|
||||
margin: .5em .4em .5em 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-dialog .ui-resizable-se {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
background-position: 16px 16px;
|
||||
}
|
||||
.ui-draggable .ui-dialog-titlebar {
|
||||
cursor: move;
|
||||
}
|
||||
.ui-menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
outline: none;
|
||||
}
|
||||
.ui-menu .ui-menu {
|
||||
position: absolute;
|
||||
}
|
||||
.ui-menu .ui-menu-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 3px 1em 3px .4em;
|
||||
cursor: pointer;
|
||||
min-height: 0; /* support: IE7 */
|
||||
/* support: IE10, see #8844 */
|
||||
list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
|
||||
}
|
||||
.ui-menu .ui-menu-divider {
|
||||
margin: 5px 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
.ui-menu .ui-state-focus,
|
||||
.ui-menu .ui-state-active {
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
/* icon support */
|
||||
.ui-menu-icons {
|
||||
position: relative;
|
||||
}
|
||||
.ui-menu-icons .ui-menu-item {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
/* left-aligned */
|
||||
.ui-menu .ui-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: .2em;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
/* right-aligned */
|
||||
.ui-menu .ui-menu-icon {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.ui-progressbar {
|
||||
height: 2em;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui-progressbar .ui-progressbar-value {
|
||||
margin: -1px;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-progressbar .ui-progressbar-overlay {
|
||||
background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
|
||||
height: 100%;
|
||||
filter: alpha(opacity=25); /* support: IE8 */
|
||||
opacity: 0.25;
|
||||
}
|
||||
.ui-progressbar-indeterminate .ui-progressbar-value {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-selectmenu-menu {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
}
|
||||
.ui-selectmenu-menu .ui-menu {
|
||||
overflow: auto;
|
||||
/* Support: IE7 */
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
padding: 2px 0.4em;
|
||||
margin: 0.5em 0 0 0;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
.ui-selectmenu-open {
|
||||
display: block;
|
||||
}
|
||||
.ui-selectmenu-button {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-selectmenu-button span.ui-icon {
|
||||
right: 0.5em;
|
||||
left: auto;
|
||||
margin-top: -8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
.ui-selectmenu-button span.ui-selectmenu-text {
|
||||
text-align: left;
|
||||
padding: 0.4em 2.1em 0.4em 1em;
|
||||
display: block;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ui-slider {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
.ui-slider .ui-slider-handle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
cursor: default;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-slider .ui-slider-range {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
/* support: IE8 - See #6727 */
|
||||
.ui-slider.ui-state-disabled .ui-slider-handle,
|
||||
.ui-slider.ui-state-disabled .ui-slider-range {
|
||||
filter: inherit;
|
||||
}
|
||||
|
||||
.ui-slider-horizontal {
|
||||
height: .8em;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-handle {
|
||||
top: -.3em;
|
||||
margin-left: -.6em;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range-min {
|
||||
left: 0;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range-max {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui-slider-vertical {
|
||||
width: .8em;
|
||||
height: 100px;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-handle {
|
||||
left: -.3em;
|
||||
margin-left: 0;
|
||||
margin-bottom: -.6em;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range-min {
|
||||
bottom: 0;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range-max {
|
||||
top: 0;
|
||||
}
|
||||
.ui-spinner {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui-spinner-input {
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
margin: .2em 0;
|
||||
vertical-align: middle;
|
||||
margin-left: .4em;
|
||||
margin-right: 22px;
|
||||
}
|
||||
.ui-spinner-button {
|
||||
width: 16px;
|
||||
height: 50%;
|
||||
font-size: .5em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
right: 0;
|
||||
}
|
||||
/* more specificity required here to override default borders */
|
||||
.ui-spinner a.ui-spinner-button {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
/* vertically center icon */
|
||||
.ui-spinner .ui-icon {
|
||||
position: absolute;
|
||||
margin-top: -8px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
.ui-spinner-up {
|
||||
top: 0;
|
||||
}
|
||||
.ui-spinner-down {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* TR overrides */
|
||||
.ui-spinner .ui-icon-triangle-1-s {
|
||||
/* need to fix icons sprite */
|
||||
background-position: -65px -16px;
|
||||
}
|
||||
.ui-tabs {
|
||||
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
|
||||
padding: .2em;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav {
|
||||
margin: 0;
|
||||
padding: .2em .2em 0;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: 1px .2em 0 0;
|
||||
border-bottom-width: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
|
||||
float: left;
|
||||
padding: .5em 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
|
||||
margin-bottom: -1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
|
||||
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
|
||||
cursor: text;
|
||||
}
|
||||
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-tabs .ui-tabs-panel {
|
||||
display: block;
|
||||
border-width: 0;
|
||||
padding: 1em 1.4em;
|
||||
background: none;
|
||||
}
|
||||
.ui-tooltip {
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
max-width: 300px;
|
||||
-webkit-box-shadow: 0 0 5px #aaa;
|
||||
box-shadow: 0 0 5px #aaa;
|
||||
}
|
||||
body .ui-tooltip {
|
||||
border-width: 2px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,410 +0,0 @@
|
||||
/*!
|
||||
* jQuery UI CSS Framework 1.11.4
|
||||
* http://jqueryui.com
|
||||
*
|
||||
* Copyright jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://api.jqueryui.com/category/theming/
|
||||
*
|
||||
* To view and modify this theme, visit http://jqueryui.com/themeroller/
|
||||
*/
|
||||
|
||||
|
||||
/* Component containers
|
||||
----------------------------------*/
|
||||
.ui-widget {
|
||||
font-family: Verdana,Arial,sans-serif;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.ui-widget .ui-widget {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui-widget input,
|
||||
.ui-widget select,
|
||||
.ui-widget textarea,
|
||||
.ui-widget button {
|
||||
font-family: Verdana,Arial,sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui-widget-content {
|
||||
border: 1px solid #aaaaaa;
|
||||
background: #ffffff;
|
||||
color: #222222;
|
||||
}
|
||||
.ui-widget-content a {
|
||||
color: #222222;
|
||||
}
|
||||
.ui-widget-header {
|
||||
border: 1px solid #aaaaaa;
|
||||
background: #cccccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;
|
||||
color: #222222;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui-widget-header a {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
/* Interaction states
|
||||
----------------------------------*/
|
||||
.ui-state-default,
|
||||
.ui-widget-content .ui-state-default,
|
||||
.ui-widget-header .ui-state-default {
|
||||
border: 1px solid #d3d3d3;
|
||||
background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
|
||||
font-weight: normal;
|
||||
color: #555555;
|
||||
}
|
||||
.ui-state-default a,
|
||||
.ui-state-default a:link,
|
||||
.ui-state-default a:visited {
|
||||
color: #555555;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-state-hover,
|
||||
.ui-widget-content .ui-state-hover,
|
||||
.ui-widget-header .ui-state-hover,
|
||||
.ui-state-focus,
|
||||
.ui-widget-content .ui-state-focus,
|
||||
.ui-widget-header .ui-state-focus {
|
||||
border: 1px solid #999999;
|
||||
background: #dadada url("images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;
|
||||
font-weight: normal;
|
||||
color: #212121;
|
||||
}
|
||||
.ui-state-hover a,
|
||||
.ui-state-hover a:hover,
|
||||
.ui-state-hover a:link,
|
||||
.ui-state-hover a:visited,
|
||||
.ui-state-focus a,
|
||||
.ui-state-focus a:hover,
|
||||
.ui-state-focus a:link,
|
||||
.ui-state-focus a:visited {
|
||||
color: #212121;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-state-active,
|
||||
.ui-widget-content .ui-state-active,
|
||||
.ui-widget-header .ui-state-active {
|
||||
border: 1px solid #aaaaaa;
|
||||
background: #ffffff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
|
||||
font-weight: normal;
|
||||
color: #212121;
|
||||
}
|
||||
.ui-state-active a,
|
||||
.ui-state-active a:link,
|
||||
.ui-state-active a:visited {
|
||||
color: #212121;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-highlight,
|
||||
.ui-widget-content .ui-state-highlight,
|
||||
.ui-widget-header .ui-state-highlight {
|
||||
border: 1px solid #fcefa1;
|
||||
background: #fbf9ee url("images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;
|
||||
color: #363636;
|
||||
}
|
||||
.ui-state-highlight a,
|
||||
.ui-widget-content .ui-state-highlight a,
|
||||
.ui-widget-header .ui-state-highlight a {
|
||||
color: #363636;
|
||||
}
|
||||
.ui-state-error,
|
||||
.ui-widget-content .ui-state-error,
|
||||
.ui-widget-header .ui-state-error {
|
||||
border: 1px solid #cd0a0a;
|
||||
background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
|
||||
color: #cd0a0a;
|
||||
}
|
||||
.ui-state-error a,
|
||||
.ui-widget-content .ui-state-error a,
|
||||
.ui-widget-header .ui-state-error a {
|
||||
color: #cd0a0a;
|
||||
}
|
||||
.ui-state-error-text,
|
||||
.ui-widget-content .ui-state-error-text,
|
||||
.ui-widget-header .ui-state-error-text {
|
||||
color: #cd0a0a;
|
||||
}
|
||||
.ui-priority-primary,
|
||||
.ui-widget-content .ui-priority-primary,
|
||||
.ui-widget-header .ui-priority-primary {
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui-priority-secondary,
|
||||
.ui-widget-content .ui-priority-secondary,
|
||||
.ui-widget-header .ui-priority-secondary {
|
||||
opacity: .7;
|
||||
filter:Alpha(Opacity=70); /* support: IE8 */
|
||||
font-weight: normal;
|
||||
}
|
||||
.ui-state-disabled,
|
||||
.ui-widget-content .ui-state-disabled,
|
||||
.ui-widget-header .ui-state-disabled {
|
||||
opacity: .35;
|
||||
filter:Alpha(Opacity=35); /* support: IE8 */
|
||||
background-image: none;
|
||||
}
|
||||
.ui-state-disabled .ui-icon {
|
||||
filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
|
||||
}
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ui-icon,
|
||||
.ui-widget-content .ui-icon {
|
||||
background-image: url("images/ui-icons_222222_256x240.png");
|
||||
}
|
||||
.ui-widget-header .ui-icon {
|
||||
background-image: url("images/ui-icons_222222_256x240.png");
|
||||
}
|
||||
.ui-state-default .ui-icon {
|
||||
background-image: url("images/ui-icons_888888_256x240.png");
|
||||
}
|
||||
.ui-state-hover .ui-icon,
|
||||
.ui-state-focus .ui-icon {
|
||||
background-image: url("images/ui-icons_454545_256x240.png");
|
||||
}
|
||||
.ui-state-active .ui-icon {
|
||||
background-image: url("images/ui-icons_454545_256x240.png");
|
||||
}
|
||||
.ui-state-highlight .ui-icon {
|
||||
background-image: url("images/ui-icons_2e83ff_256x240.png");
|
||||
}
|
||||
.ui-state-error .ui-icon,
|
||||
.ui-state-error-text .ui-icon {
|
||||
background-image: url("images/ui-icons_cd0a0a_256x240.png");
|
||||
}
|
||||
|
||||
/* positioning */
|
||||
.ui-icon-blank { background-position: 16px 16px; }
|
||||
.ui-icon-carat-1-n { background-position: 0 0; }
|
||||
.ui-icon-carat-1-ne { background-position: -16px 0; }
|
||||
.ui-icon-carat-1-e { background-position: -32px 0; }
|
||||
.ui-icon-carat-1-se { background-position: -48px 0; }
|
||||
.ui-icon-carat-1-s { background-position: -64px 0; }
|
||||
.ui-icon-carat-1-sw { background-position: -80px 0; }
|
||||
.ui-icon-carat-1-w { background-position: -96px 0; }
|
||||
.ui-icon-carat-1-nw { background-position: -112px 0; }
|
||||
.ui-icon-carat-2-n-s { background-position: -128px 0; }
|
||||
.ui-icon-carat-2-e-w { background-position: -144px 0; }
|
||||
.ui-icon-triangle-1-n { background-position: 0 -16px; }
|
||||
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
|
||||
.ui-icon-triangle-1-e { background-position: -32px -16px; }
|
||||
.ui-icon-triangle-1-se { background-position: -48px -16px; }
|
||||
.ui-icon-triangle-1-s { background-position: -64px -16px; }
|
||||
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
|
||||
.ui-icon-triangle-1-w { background-position: -96px -16px; }
|
||||
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
|
||||
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
|
||||
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
|
||||
.ui-icon-arrow-1-n { background-position: 0 -32px; }
|
||||
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
|
||||
.ui-icon-arrow-1-e { background-position: -32px -32px; }
|
||||
.ui-icon-arrow-1-se { background-position: -48px -32px; }
|
||||
.ui-icon-arrow-1-s { background-position: -64px -32px; }
|
||||
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
|
||||
.ui-icon-arrow-1-w { background-position: -96px -32px; }
|
||||
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
|
||||
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
|
||||
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
|
||||
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
|
||||
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
|
||||
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
|
||||
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
|
||||
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
|
||||
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
|
||||
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
|
||||
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
|
||||
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
|
||||
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
|
||||
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
|
||||
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
|
||||
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
|
||||
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
|
||||
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
|
||||
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
|
||||
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
|
||||
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
|
||||
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
|
||||
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
|
||||
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
|
||||
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
|
||||
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
|
||||
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
|
||||
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
|
||||
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
|
||||
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
|
||||
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
|
||||
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
|
||||
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
|
||||
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
|
||||
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
|
||||
.ui-icon-arrow-4 { background-position: 0 -80px; }
|
||||
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
|
||||
.ui-icon-extlink { background-position: -32px -80px; }
|
||||
.ui-icon-newwin { background-position: -48px -80px; }
|
||||
.ui-icon-refresh { background-position: -64px -80px; }
|
||||
.ui-icon-shuffle { background-position: -80px -80px; }
|
||||
.ui-icon-transfer-e-w { background-position: -96px -80px; }
|
||||
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
|
||||
.ui-icon-folder-collapsed { background-position: 0 -96px; }
|
||||
.ui-icon-folder-open { background-position: -16px -96px; }
|
||||
.ui-icon-document { background-position: -32px -96px; }
|
||||
.ui-icon-document-b { background-position: -48px -96px; }
|
||||
.ui-icon-note { background-position: -64px -96px; }
|
||||
.ui-icon-mail-closed { background-position: -80px -96px; }
|
||||
.ui-icon-mail-open { background-position: -96px -96px; }
|
||||
.ui-icon-suitcase { background-position: -112px -96px; }
|
||||
.ui-icon-comment { background-position: -128px -96px; }
|
||||
.ui-icon-person { background-position: -144px -96px; }
|
||||
.ui-icon-print { background-position: -160px -96px; }
|
||||
.ui-icon-trash { background-position: -176px -96px; }
|
||||
.ui-icon-locked { background-position: -192px -96px; }
|
||||
.ui-icon-unlocked { background-position: -208px -96px; }
|
||||
.ui-icon-bookmark { background-position: -224px -96px; }
|
||||
.ui-icon-tag { background-position: -240px -96px; }
|
||||
.ui-icon-home { background-position: 0 -112px; }
|
||||
.ui-icon-flag { background-position: -16px -112px; }
|
||||
.ui-icon-calendar { background-position: -32px -112px; }
|
||||
.ui-icon-cart { background-position: -48px -112px; }
|
||||
.ui-icon-pencil { background-position: -64px -112px; }
|
||||
.ui-icon-clock { background-position: -80px -112px; }
|
||||
.ui-icon-disk { background-position: -96px -112px; }
|
||||
.ui-icon-calculator { background-position: -112px -112px; }
|
||||
.ui-icon-zoomin { background-position: -128px -112px; }
|
||||
.ui-icon-zoomout { background-position: -144px -112px; }
|
||||
.ui-icon-search { background-position: -160px -112px; }
|
||||
.ui-icon-wrench { background-position: -176px -112px; }
|
||||
.ui-icon-gear { background-position: -192px -112px; }
|
||||
.ui-icon-heart { background-position: -208px -112px; }
|
||||
.ui-icon-star { background-position: -224px -112px; }
|
||||
.ui-icon-link { background-position: -240px -112px; }
|
||||
.ui-icon-cancel { background-position: 0 -128px; }
|
||||
.ui-icon-plus { background-position: -16px -128px; }
|
||||
.ui-icon-plusthick { background-position: -32px -128px; }
|
||||
.ui-icon-minus { background-position: -48px -128px; }
|
||||
.ui-icon-minusthick { background-position: -64px -128px; }
|
||||
.ui-icon-close { background-position: -80px -128px; }
|
||||
.ui-icon-closethick { background-position: -96px -128px; }
|
||||
.ui-icon-key { background-position: -112px -128px; }
|
||||
.ui-icon-lightbulb { background-position: -128px -128px; }
|
||||
.ui-icon-scissors { background-position: -144px -128px; }
|
||||
.ui-icon-clipboard { background-position: -160px -128px; }
|
||||
.ui-icon-copy { background-position: -176px -128px; }
|
||||
.ui-icon-contact { background-position: -192px -128px; }
|
||||
.ui-icon-image { background-position: -208px -128px; }
|
||||
.ui-icon-video { background-position: -224px -128px; }
|
||||
.ui-icon-script { background-position: -240px -128px; }
|
||||
.ui-icon-alert { background-position: 0 -144px; }
|
||||
.ui-icon-info { background-position: -16px -144px; }
|
||||
.ui-icon-notice { background-position: -32px -144px; }
|
||||
.ui-icon-help { background-position: -48px -144px; }
|
||||
.ui-icon-check { background-position: -64px -144px; }
|
||||
.ui-icon-bullet { background-position: -80px -144px; }
|
||||
.ui-icon-radio-on { background-position: -96px -144px; }
|
||||
.ui-icon-radio-off { background-position: -112px -144px; }
|
||||
.ui-icon-pin-w { background-position: -128px -144px; }
|
||||
.ui-icon-pin-s { background-position: -144px -144px; }
|
||||
.ui-icon-play { background-position: 0 -160px; }
|
||||
.ui-icon-pause { background-position: -16px -160px; }
|
||||
.ui-icon-seek-next { background-position: -32px -160px; }
|
||||
.ui-icon-seek-prev { background-position: -48px -160px; }
|
||||
.ui-icon-seek-end { background-position: -64px -160px; }
|
||||
.ui-icon-seek-start { background-position: -80px -160px; }
|
||||
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
|
||||
.ui-icon-seek-first { background-position: -80px -160px; }
|
||||
.ui-icon-stop { background-position: -96px -160px; }
|
||||
.ui-icon-eject { background-position: -112px -160px; }
|
||||
.ui-icon-volume-off { background-position: -128px -160px; }
|
||||
.ui-icon-volume-on { background-position: -144px -160px; }
|
||||
.ui-icon-power { background-position: 0 -176px; }
|
||||
.ui-icon-signal-diag { background-position: -16px -176px; }
|
||||
.ui-icon-signal { background-position: -32px -176px; }
|
||||
.ui-icon-battery-0 { background-position: -48px -176px; }
|
||||
.ui-icon-battery-1 { background-position: -64px -176px; }
|
||||
.ui-icon-battery-2 { background-position: -80px -176px; }
|
||||
.ui-icon-battery-3 { background-position: -96px -176px; }
|
||||
.ui-icon-circle-plus { background-position: 0 -192px; }
|
||||
.ui-icon-circle-minus { background-position: -16px -192px; }
|
||||
.ui-icon-circle-close { background-position: -32px -192px; }
|
||||
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
|
||||
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
|
||||
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
|
||||
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
|
||||
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
|
||||
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
|
||||
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
|
||||
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
|
||||
.ui-icon-circle-zoomin { background-position: -176px -192px; }
|
||||
.ui-icon-circle-zoomout { background-position: -192px -192px; }
|
||||
.ui-icon-circle-check { background-position: -208px -192px; }
|
||||
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
|
||||
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
|
||||
.ui-icon-circlesmall-close { background-position: -32px -208px; }
|
||||
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
|
||||
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
|
||||
.ui-icon-squaresmall-close { background-position: -80px -208px; }
|
||||
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
|
||||
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
|
||||
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
|
||||
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
|
||||
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
|
||||
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Corner radius */
|
||||
.ui-corner-all,
|
||||
.ui-corner-top,
|
||||
.ui-corner-left,
|
||||
.ui-corner-tl {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.ui-corner-all,
|
||||
.ui-corner-top,
|
||||
.ui-corner-right,
|
||||
.ui-corner-tr {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.ui-corner-all,
|
||||
.ui-corner-bottom,
|
||||
.ui-corner-left,
|
||||
.ui-corner-bl {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.ui-corner-all,
|
||||
.ui-corner-bottom,
|
||||
.ui-corner-right,
|
||||
.ui-corner-br {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay {
|
||||
background: #aaaaaa;
|
||||
opacity: .3;
|
||||
filter: Alpha(Opacity=30); /* support: IE8 */
|
||||
}
|
||||
.ui-widget-shadow {
|
||||
margin: -8px 0 0 -8px;
|
||||
padding: 8px;
|
||||
background: #aaaaaa;
|
||||
opacity: .3;
|
||||
filter: Alpha(Opacity=30); /* support: IE8 */
|
||||
border-radius: 8px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
33
public/admin/editableSelect.styl
Normal file
33
public/admin/editableSelect.styl
Normal file
@@ -0,0 +1,33 @@
|
||||
|
||||
//For the Editable Select control?
|
||||
.comboList {
|
||||
z-index: 1000;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
-moz-box-shadow: 0 2px 3px #ccc;
|
||||
-webkit-box-shadow: 0 2px 3px #ccc;
|
||||
box-shadow: 0 2px 3px #ccc;
|
||||
border: 1px solid #d1d1d1;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
background: white;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
margin: 0;
|
||||
text-indent: 0
|
||||
background: white;
|
||||
}
|
||||
li.selected {
|
||||
background-color: #ffe184 !important;
|
||||
}
|
||||
li[role='node'] {
|
||||
font-weight: 800;
|
||||
}
|
||||
li[role='leaf'] {
|
||||
padding-left: 2em;
|
||||
}
|
||||
}
|
||||
@@ -21,37 +21,36 @@
|
||||
|
||||
<link rel="stylesheet" href="css/awesomplete.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css"/>
|
||||
<!--<link rel="stylesheet" href="/admin/css/jquery-ui-1.11.4/jquery-ui.min.css"/>-->
|
||||
<link rel="stylesheet" href="css/titatoggle-dist-min.css"/>
|
||||
<!--<link rel="stylesheet" href="/admin/css/chosen.css"/>-->
|
||||
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
|
||||
<link rel="stylesheet" href="css/select2.css"/>
|
||||
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
|
||||
<link rel="stylesheet" href="css/jquery.editable.select.css"/>
|
||||
<link rel="stylesheet" href="main.css" type="text/css"/>
|
||||
|
||||
<script type="text/javascript" language="JavaScript" src="js/jquery-1.11.3.min.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/jquery.history.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/layout.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/jquery.cycle.min.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/jquery.cycle2.min.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/jquery.shadow.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/scroller.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/framework_lite.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/polyfills.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/main.js"></script>
|
||||
<!--<script type="text/javascript" language="JavaScript" src="js/socket.io.js"></script>-->
|
||||
<script type="text/javascript" language="JavaScript" src="js/LinkedTable.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/Dropdown.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/moment.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/select2.min.js"></script>
|
||||
<!--<script type="text/javascript" language="JavaScript" src="js/chosen.jquery.js"></script>-->
|
||||
<!--<script type="text/javascript" language="JavaScript" src="js/jquery.validate.js"></script>-->
|
||||
<script type="text/javascript" language="JavaScript" src="js/validator.js"></script> <!-- https://github.com/1000hz/bootstrap-validator http://1000hz.github.io/bootstrap-validator/ -->
|
||||
<script type="text/javascript" language="JavaScript" src="js/bootstrap-datetimepicker.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/jquery.tabbable.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/jquery.editable.select.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/EditableSelect.js"></script>
|
||||
<script type="text/javascript" language="JavaScript" src="js/jquery.disableSelection.js"></script>
|
||||
|
||||
<script type="text/javascript" language="JavaScript">
|
||||
//Add functionality to jquery to display a class listing.
|
||||
$.fn.classList = function() {return this[0].className.split(/\s+/);};
|
||||
//Add a disable(bool) method on jquery objects.
|
||||
jQuery.fn.extend({
|
||||
disable: function(state) {
|
||||
@@ -64,16 +63,13 @@
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//Ignore clicks on links that are disabled.
|
||||
$('body').on('click', 'a.disabled', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
//Fix the select2 control to allow typing when focused.
|
||||
$(document).on('focus', 'span.select2', function () {
|
||||
$(this).prev('select:not([multiple])').select2('open');
|
||||
});
|
||||
|
||||
//Click the default button when the form is submitted.
|
||||
$(document).on('submit', 'form', function(event) {
|
||||
var $form = $(this);
|
||||
var $btn = $form.find('button.btn-default:visible');
|
||||
@@ -89,42 +85,59 @@
|
||||
return {request: JSON.stringify(data)};
|
||||
}
|
||||
|
||||
$(document).on('focusin', function(event) {
|
||||
var modal = $('div:visible[role="modal"]');
|
||||
var viewStack = [];
|
||||
|
||||
if(modal.length) {
|
||||
if(modal[0] !== event.target && !modal[0].contains(event.target)) {
|
||||
//Simulates a crossfade (not able to do this in css without position: absolute or complex javascript, which we want to avoid).
|
||||
function crossfade($in, $out, $focus) {
|
||||
$out.fadeOut(300, function() {
|
||||
$out.css({display: 'none'});
|
||||
$in.fadeOut(0);
|
||||
$in.css({display: 'block'});
|
||||
$in.fadeIn(500, function() {
|
||||
if($focus) $focus.focus();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
function showView($view, $focus, transition) {
|
||||
var $current = transition ? $view.siblings(":visible") : $view.siblings();
|
||||
|
||||
//Show or hide the menu.
|
||||
$view.data('menu') == undefined || $view.data('menu') ? $('#menu').show() : $('#menu').hide();
|
||||
|
||||
if(transition) {
|
||||
$current.fadeOut(300, function() {
|
||||
$current.css({display: 'none'});
|
||||
$view.fadeOut(0);
|
||||
$view.css({display: ''});
|
||||
$view.fadeIn(500, function() {
|
||||
if($focus) $focus.focus();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
else {
|
||||
$current.fadeOut(0);
|
||||
$current.css({display: 'none'});
|
||||
$view.fadeIn(0);
|
||||
$view.css({display: ''});
|
||||
if($focus) $focus.focus();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="overall">
|
||||
<div id="page">
|
||||
<div id="menu"><!-- Note: Comment out spacing between the elements since the browser will interpret the spaces as characters to be displayed.
|
||||
--><a href="#!/sales">Sales</a><!--
|
||||
--><a href="#!/categories">Categories</a><!--
|
||||
--><a href="#!/subcategories">Subcategories</a><!--
|
||||
--><a href="#!/items">Items</a><!--
|
||||
--><a href="#!/venues">Venues</a><!--
|
||||
--><a href="#!/measures">Measures</a><!--
|
||||
--><a href="#!/users">Users</a><!--
|
||||
--><a style="position: absolute; right: 0px;" href="logout">Log Out</a><!--
|
||||
--></div>
|
||||
<div id="menuBackground"></div>
|
||||
<div id="head">
|
||||
</div>
|
||||
<div id="content" bs-view="main-view">
|
||||
<!--CONTENT:main-->
|
||||
</div>
|
||||
<div id="everything">
|
||||
<div id="rightBar">
|
||||
<a id="menuButton" href="#!/menu" class="fa fa-bars" aria-hidden="true">
|
||||
</a>
|
||||
<a id='logoutButton' href="logout" class="fa fa-sign-out" aria-hidden="true">
|
||||
</a>
|
||||
<a id="legalButton" href="#!/legal" class="fa fa-copyright" aria-hidden="true">
|
||||
</a>
|
||||
</div>
|
||||
<!-- footer lines -->
|
||||
<div id="footer">© 2015 Petit Teton LLC | Farm Email <a href="mailto:farmer@petitteton.com">farmer@petitteton.com</a></div>
|
||||
<div id="designedBy" style="">
|
||||
Web Site By: <a href="http://de22.com" style="font-weight: normal" target="_blank">Declarative Engineering LLC</a>
|
||||
<div id="contentContainer">
|
||||
<!--CONTENT:main-->
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
#items {
|
||||
height: 100%;
|
||||
}
|
||||
#items #listView {
|
||||
height: 100%;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: flex-start;
|
||||
align-content: center;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
#items #listView .buttonContainer {
|
||||
flex: none;
|
||||
}
|
||||
#items #listView #dataTable {
|
||||
overflow-y: auto;
|
||||
flex: auto;
|
||||
align-self: stretch;
|
||||
height: 10%;
|
||||
max-height: 100%;
|
||||
}
|
||||
#items #listView .padding {
|
||||
flex: none;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
#items #DFAliases {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
overflow: auto;
|
||||
}
|
||||
#items #DFAliases span {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
#items #DFAliases span.selected {
|
||||
background-color: rgba(255,248,131,0.51);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
<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">
|
||||
<div id="listView" class="view">
|
||||
<div class="buttonContainer">
|
||||
<h1><span class="fa fa-sitemap"></span> Manage Items</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="createButton" class="btn btn-default buttons-create" tabindex="0" href="#!/items-create"><span>New</span></a>
|
||||
<a id="editButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="#!/items-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>
|
||||
<a id="restoreButton" class="btn btn-default buttons-selected buttons-restore" tabindex="0" href="javaScript:void(0);"><span>Restore</span></a>
|
||||
</div>
|
||||
@@ -17,426 +14,503 @@
|
||||
</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="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>
|
||||
<th data-key-name="aliases">Aliases</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="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>
|
||||
<label for="DFNewAlias">Aliases</label>
|
||||
<div class="input-group">
|
||||
<input name="newAlias" id="DFNewAlias" type="text" class="form-control text" tabindex="0"><span class="input-group-btn"><button id="DFNewAliasAdd" class="btn" type="button">Add</button></span>
|
||||
</div>
|
||||
<div id="DFAliases" class="list-group" 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 id="dataTable">
|
||||
<table 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>
|
||||
<th data-key-name="aliases">Aliases</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</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>
|
||||
<!-- Create/Edit View -->
|
||||
<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">×</button>
|
||||
<h4 class="modal-title"></h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the item <span id="deleteName"></span>?
|
||||
<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">
|
||||
<input name="subcategoryId" id="DFSubcategoryId" type="hidden"/>
|
||||
<input name="subcategory" id="DFSubcategory" class="form-control" tabindex="0" required/>
|
||||
</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>
|
||||
<label for="DFNewAlias">Aliases</label>
|
||||
<div class="input-group">
|
||||
<input name="newAlias" id="DFNewAlias" type="text" class="form-control text" tabindex="0"><span class="input-group-btn"><button id="DFNewAliasAdd" class="btn" type="button">Add</button></span>
|
||||
</div>
|
||||
<div id="DFAliases" class="list-group" tabindex="0">
|
||||
</div>
|
||||
</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='#!/items'">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">×</button>
|
||||
<h4 class="modal-title">Delete Item</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the item <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=items.html
|
||||
$(function() {
|
||||
var $page = $('#items');
|
||||
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=items.html
|
||||
$(function() {
|
||||
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 {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
|
||||
},
|
||||
selectionChanged: function($tr, model) {
|
||||
if($tr && model) {
|
||||
$btnEdit.show();
|
||||
$btnEdit.disable(true);
|
||||
$btnDelete.disable(true);
|
||||
$btnRestore.disable(true);
|
||||
|
||||
//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;
|
||||
var selectionChanged = function($tr, model) {
|
||||
if($tr && model) {
|
||||
$btnEdit.disable(false);
|
||||
|
||||
//Convert the category list into a map by category id.
|
||||
byId = data.reduce(function(map, category) {
|
||||
map[category.id] = category;
|
||||
return map;
|
||||
}, {});
|
||||
//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);
|
||||
}
|
||||
};
|
||||
|
||||
return byId;
|
||||
}},
|
||||
{name: "subcategories", url: "data/Subcategory/readAll", parameters: {showDeleted: true}, postProcess: function(data) {
|
||||
var byId;
|
||||
var $table = $page.find('#dataTable');
|
||||
var dataTable = new LinkedTable($table, {
|
||||
url: "data/Item/readAll",
|
||||
attr: "data-key-name",
|
||||
selection: "row",
|
||||
parameters: function() {
|
||||
return {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
|
||||
},
|
||||
selectionChanged: selectionChanged,
|
||||
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;
|
||||
}, {});
|
||||
//Convert the category list into a map by category id.
|
||||
byId = data.reduce(function(map, category) {
|
||||
map[category.id] = category;
|
||||
return map;
|
||||
}, {});
|
||||
|
||||
return byId;
|
||||
}}
|
||||
],
|
||||
cellDataHandlers: {category: function($cell, item, supportingData) {
|
||||
try {
|
||||
var subcategory = supportingData.subcategories[item.subcategoryId];
|
||||
var category = supportingData.categories[subcategory.categoryId];
|
||||
return byId;
|
||||
}},
|
||||
{name: "subcategories", url: "data/Subcategory/readAll", parameters: {showDeleted: true}, postProcess: function(data) {
|
||||
var byId;
|
||||
|
||||
$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];
|
||||
//Convert the category list into a map by category id.
|
||||
byId = data.reduce(function(map, category) {
|
||||
map[category.id] = category;
|
||||
return map;
|
||||
}, {});
|
||||
|
||||
$cell.html(subcategory.name);
|
||||
} catch(err) {
|
||||
console.log(err);
|
||||
$cell.html("Not Found");
|
||||
}
|
||||
}},
|
||||
postAddRowHandler: function($row, dataObject) {
|
||||
if(dataObject.deletedAt) {
|
||||
$page.find("td:first", $row).prepend("<span class='glyphicon glyphicon-remove-circle' style='margin-right: 10px;' aria-hidden='true'></span>");
|
||||
}
|
||||
}
|
||||
});
|
||||
return byId;
|
||||
}}
|
||||
],
|
||||
cellDataHandlers: {category: function($cell, item, supportingData) {
|
||||
try {
|
||||
var subcategory = supportingData.subcategories[item.subcategoryId];
|
||||
var category = supportingData.categories[subcategory.categoryId];
|
||||
|
||||
//Call the refresh user table function once initially.
|
||||
$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) {
|
||||
$page.find("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 = "#!/items-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/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.");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//Refresh the data table if the user toggles the button to show/hide deleted elements.
|
||||
$page.find('#includeDeletedToggle').on('click', function(event) {
|
||||
dataTable.refresh();
|
||||
});
|
||||
var $listView = $page.find('#listView');
|
||||
var $editorView = $page.find('#editorView');
|
||||
var $deleteView = $page.find('#deleteView');
|
||||
|
||||
//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;
|
||||
//+++++++++++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++++ Create/Edit Views ++++++++++++
|
||||
|
||||
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.");
|
||||
});
|
||||
}
|
||||
});
|
||||
var $editorForm = $editorView.find('form');
|
||||
var queries = [
|
||||
$.get("data/Category/readAll", {request: JSON.stringify({paranoid: true, include: [{model: 'Subcategory', paranoid: true, as: 'subcategories'}], order: ['name', ['name']]})}),
|
||||
$.get('data/Measure/readAll', {request: JSON.stringify({paranoid: true, 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 = [];
|
||||
|
||||
//+++++++++++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++++ Create/Edit Dialogs ++++++++++++
|
||||
// //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);
|
||||
// }
|
||||
// }
|
||||
|
||||
var $editorDialog = $page.find('#editorDialog');
|
||||
var $deleteDialog = $page.find('#deleteDialog');
|
||||
var $editorForm = $editorDialog.find('form');
|
||||
var queries = [
|
||||
$.get("data/Category/readAll", {request: JSON.stringify({paranoid: true, include: [{model: 'Subcategory', paranoid: true, as: 'subcategories'}], order: ['name', ['name']]})}),
|
||||
$.get('data/Measure/readAll', {request: JSON.stringify({paranoid: true, order: ['name']})})
|
||||
];
|
||||
//Build the measures list.
|
||||
for(var i = 0; i < measures.length; i++) {
|
||||
var nextMeasure = measures[i];
|
||||
measureData.push({id: '' + nextMeasure.id, text: nextMeasure.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) {
|
||||
//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 drop down menu.
|
||||
$editorForm.find("#DFSubcategory").buildEditableSelect(query1[0], {textAttr: 'name', listClass: 'comboList', groupFunctions: {
|
||||
groupParents: function(category) {
|
||||
return category;
|
||||
},
|
||||
parentText: function(category) {
|
||||
return category.name;
|
||||
},
|
||||
children: function(category) {
|
||||
return category.subcategories;
|
||||
}
|
||||
}});
|
||||
//Initialize the validator
|
||||
$editorForm.validator();
|
||||
//Debug Events
|
||||
// $('#createView 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 + "}");
|
||||
// });
|
||||
|
||||
$editorForm.find('#DFMeasures').on('select2:select', function(event) {
|
||||
var $el = $(event.params.data.element);
|
||||
$editorForm.find('#DFMeasures').on('select2:select', function(event) {
|
||||
var $el = $(event.params.data.element);
|
||||
|
||||
$el.detach();
|
||||
$(this).append($el);
|
||||
$(this).trigger("change");
|
||||
})
|
||||
});
|
||||
$el.detach();
|
||||
$(this).append($el);
|
||||
$(this).trigger("change");
|
||||
})
|
||||
});
|
||||
|
||||
//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) {
|
||||
var model = dataTable.getSelectedRow().data("model");
|
||||
//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.
|
||||
$editorView.find("#DFCreate, #DFCreatePlus").show();
|
||||
$editorView.find("#DFSave").hide();
|
||||
$editorView.find(".modal-title").text("Create Item");
|
||||
//Reset fields to default values.
|
||||
$editorView.find("#DFName").val("");
|
||||
$editorView.find("#DFPrice").val("10.00");
|
||||
$editorView.find('#DFAliases').empty();
|
||||
showView($editorView, $editorView.find("#DFName"), internal);
|
||||
break;
|
||||
case 'edit':
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
var model = dataTable.getSelectedRow().data("model");
|
||||
|
||||
//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(model.name);
|
||||
$editorDialog.find('#DFSubcategory').val(model.subcategoryId);
|
||||
$editorDialog.find('#DFPrice').val(model.defaultPrice);
|
||||
$editorDialog.find('#DFMeasures').val(model.measures);
|
||||
//Configure the dialog to edit an existing element.
|
||||
$editorView.find("#DFCreate, #DFCreatePlus").hide();
|
||||
$editorView.find("#DFSave").show();
|
||||
$editorView.find(".modal-title").text("Edit Item");
|
||||
//Reset fields to selected values.
|
||||
$editorView.find('#DFName').val(model.name);
|
||||
$editorView.find('#DFSubcategory').val(model.subcategoryId);
|
||||
$editorView.find('#DFPrice').val(model.defaultPrice);
|
||||
$editorView.find('#DFMeasures').val(model.measures);
|
||||
$editorView.find('#DFAliases').empty();
|
||||
|
||||
if(model.aliases && model.aliases.length) {
|
||||
var $aliasesList = $editorDialog.find('DFAliases');
|
||||
if(model.aliases && model.aliases.length) {
|
||||
var $aliasesList = $editorView.find('DFAliases');
|
||||
|
||||
for(var a = 0; a < model.aliases.length; a++) {
|
||||
var alias = model.aliases[a];
|
||||
$aliasesList.append("<li>" + alias + "</li>");
|
||||
}
|
||||
for(var a = 0; a < model.aliases.length; a++) {
|
||||
var alias = model.aliases[a];
|
||||
$aliasesList.append("<li>" + alias + "</li>");
|
||||
}
|
||||
|
||||
|
||||
//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/Item/create", type: "POST", dataType: "json", data: encodeData({
|
||||
name: $editorForm.find("#DFName").val(),
|
||||
subcategoryId: parseInt($editorForm.find("#DFSubcategory").val()),
|
||||
defaultPrice: $editorForm.find("#DFPrice").val(),
|
||||
measures: JSON.stringify($editorForm.find("#DFMeasures").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) {
|
||||
$.ajax({url: "data/Item/edit", type: "POST", dataType: "json", data: encodeData({
|
||||
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())
|
||||
})}).done(function(data) {
|
||||
if(close) $editorDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$editorDialog.find('#DFCancel').on('click', function(event) {
|
||||
$editorDialog.modal('hide');
|
||||
});
|
||||
//Add a new alias to the alias list.
|
||||
$editorDialog.find('#DFNewAliasAdd').on('click', function(event) {
|
||||
//Add the text in the DFNewAlias input as an alias in the list.
|
||||
var $aliasInput = $editorDialog.find('#DFNewAlias');
|
||||
var text = $aliasInput.val();
|
||||
|
||||
if(text) text = text.trim();
|
||||
|
||||
if(text && text.length) {
|
||||
var $aliases = $editorDialog.find('#DFAliases');
|
||||
|
||||
$("<span>", {
|
||||
roll: 'button',
|
||||
tabindex: '0',
|
||||
text: text
|
||||
}).appendTo($aliases);
|
||||
|
||||
$aliasInput.val("");
|
||||
}
|
||||
|
||||
$editorDialog.find('#DFNewAlias').focus();
|
||||
});
|
||||
//When the alias list is focused, select the first alias if none was previously selected.
|
||||
$editorDialog.find('#DFAliases').on('focus', function(event) {
|
||||
var $selected = $(event.target).children('.selected');
|
||||
showView($editorView, $editorView.find("#DFName"), internal);
|
||||
}
|
||||
else {
|
||||
//Change the hash without adding to the history.
|
||||
history.replaceState(undefined, undefined, "#!/sales")
|
||||
}
|
||||
break;
|
||||
default:
|
||||
if(internal) dataTable.refresh();
|
||||
showView($listView, null, internal);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
//If there isn't a selected list element, then select the first.
|
||||
if(!$selected.length) {
|
||||
$(event.target).children(':first').addClass('selected');
|
||||
//Handle the Create Button being clicked.
|
||||
var createFunction = function(close) {
|
||||
$editorForm.data('bs.validator').validate(function(isValid) {
|
||||
if(isValid) {
|
||||
var measures = $editorForm.find("#DFMeasures").val();
|
||||
var aliases = $editorForm.find("#DFAliases span");
|
||||
|
||||
if(aliases.length) {
|
||||
var array = [];
|
||||
|
||||
for(var i = 0; i < aliases.length; i++) {
|
||||
array.push($(aliases[i]).text());
|
||||
}
|
||||
|
||||
aliases = array;
|
||||
}
|
||||
else aliases = null;
|
||||
|
||||
//Convert the measure id's to integers.
|
||||
for(var i = 0; i < measures.length; i++) {
|
||||
measures[i] = parseInt(measures[i]);
|
||||
}
|
||||
|
||||
$.ajax({url: "data/Item/create", type: "POST", dataType: "json", data: encodeData({
|
||||
name: $editorForm.find("#DFName").val(),
|
||||
subcategoryId: parseInt($editorForm.find("#DFSubcategoryId").val()),
|
||||
defaultPrice: $editorForm.find("#DFPrice").val(),
|
||||
measures: JSON.stringify(measures),
|
||||
aliases: JSON.stringify(aliases)
|
||||
})}).done(function(data) {
|
||||
if(close) window.location.hash = "#!/items";
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
//Allow navigation of the selection with arrow keys, allow deletion with the delete key.
|
||||
$editorDialog.find('#DFAliases').on('keyup', function(event) {
|
||||
switch(event.keyCode) {
|
||||
case 46:
|
||||
var $selected = $(event.target).children('.selected');
|
||||
}
|
||||
});
|
||||
};
|
||||
$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) {
|
||||
var measures = $editorForm.find("#DFMeasures").val();
|
||||
var aliases = $editorForm.find("#DFAliases span");
|
||||
|
||||
$selected.prev().addClass('selected').siblings().removeClass('selected');
|
||||
$selected.remove();
|
||||
break;
|
||||
case 38:
|
||||
var $selected = $(event.target).children('.selected');
|
||||
var $nextSelected = $selected.length ? $selected.prev().length ? $selected.prev() : $(event.target).children(':last') : $(event.target).children(':first');
|
||||
if(aliases.length) {
|
||||
var array = [];
|
||||
|
||||
$nextSelected.addClass('selected').siblings().removeClass('selected');
|
||||
break;
|
||||
case 40:
|
||||
var $selected = $(event.target).children('.selected');
|
||||
var $nextSelected = $selected.length ? $selected.next().length ? $selected.next() : $(event.target).children(':first') : $(event.target).children(':first');
|
||||
|
||||
$nextSelected.addClass('selected').siblings().removeClass('selected');
|
||||
break;
|
||||
for(var i = 0; i < aliases.length; i++) {
|
||||
array.push($(aliases[i]).text());
|
||||
}
|
||||
});
|
||||
//Allow the user to click to select an alias.
|
||||
$editorDialog.find('#DFAliases').on('click', 'span', function(event) {
|
||||
$(event.target).addClass('selected').siblings().removeClass('selected');
|
||||
});
|
||||
//Set the initial focus control.
|
||||
$editorDialog.on('shown.bs.modal', function() {
|
||||
$editorDialog.find('#DFName').focus();
|
||||
});
|
||||
|
||||
//++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++ Delete Dialog +++++++++++
|
||||
aliases = array;
|
||||
}
|
||||
else aliases = null;
|
||||
|
||||
//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) {
|
||||
$.ajax({url: "data/Item/delete", type: "POST", dataType: "json", data: encodeData({where: {id: dataTable.getSelectedRow().data("model").id}})}).done(function(data) {
|
||||
$deleteDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
$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();
|
||||
//Convert the measure id's to integers.
|
||||
for(var i = 0; i < measures.length; i++) {
|
||||
measures[i] = parseInt(measures[i]);
|
||||
}
|
||||
|
||||
$.ajax({url: "data/Item/edit", type: "POST", dataType: "json", data: encodeData({
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
name: $editorForm.find("#DFName").val(),
|
||||
subcategoryId: parseInt($editorForm.find("#DFSubcategoryId").val()),
|
||||
defaultPrice: $editorForm.find("#DFPrice").val(),
|
||||
measures: JSON.stringify(measures),
|
||||
aliases: JSON.stringify(aliases)
|
||||
})}).done(function(data) {
|
||||
if(close) window.location.hash = "#!/items";
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$editorView.find('#DFCancel').on('click', function(event) {
|
||||
closeView();
|
||||
});
|
||||
//Add a new alias to the alias list.
|
||||
$editorView.find('#DFNewAliasAdd').on('click', function(event) {
|
||||
//Add the text in the DFNewAlias input as an alias in the list.
|
||||
var $aliasInput = $editorView.find('#DFNewAlias');
|
||||
var text = $aliasInput.val();
|
||||
|
||||
if(text) text = text.trim();
|
||||
|
||||
if(text && text.length) {
|
||||
var $aliases = $editorView.find('#DFAliases');
|
||||
|
||||
$("<span>", {
|
||||
roll: 'button',
|
||||
tabindex: '0',
|
||||
text: text
|
||||
}).appendTo($aliases);
|
||||
|
||||
$aliasInput.val("");
|
||||
}
|
||||
|
||||
$editorView.find('#DFNewAlias').focus();
|
||||
});
|
||||
//When the alias list is focused, select the first alias if none was previously selected.
|
||||
$editorView.find('#DFAliases').on('focus', function(event) {
|
||||
var $selected = $(event.target).children('.selected');
|
||||
|
||||
//If there isn't a selected list element, then select the first.
|
||||
if(!$selected.length) {
|
||||
$(event.target).children(':first').addClass('selected');
|
||||
}
|
||||
});
|
||||
//Allow navigation of the selection with arrow keys, allow deletion with the delete key.
|
||||
$editorView.find('#DFAliases').on('keyup', function(event) {
|
||||
switch(event.keyCode) {
|
||||
case 46:
|
||||
var $selected = $(event.target).children('.selected');
|
||||
|
||||
$selected.prev().addClass('selected').siblings().removeClass('selected');
|
||||
$selected.remove();
|
||||
break;
|
||||
case 38:
|
||||
var $selected = $(event.target).children('.selected');
|
||||
var $nextSelected = $selected.length ? $selected.prev().length ? $selected.prev() : $(event.target).children(':last') : $(event.target).children(':first');
|
||||
|
||||
$nextSelected.addClass('selected').siblings().removeClass('selected');
|
||||
break;
|
||||
case 40:
|
||||
var $selected = $(event.target).children('.selected');
|
||||
var $nextSelected = $selected.length ? $selected.next().length ? $selected.next() : $(event.target).children(':first') : $(event.target).children(':first');
|
||||
|
||||
$nextSelected.addClass('selected').siblings().removeClass('selected');
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
//++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++ 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) {
|
||||
$.ajax({url: "data/Item/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.");
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
});
|
||||
$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>
|
||||
@@ -1,8 +1,46 @@
|
||||
#items {
|
||||
height: 100%;
|
||||
|
||||
#listView {
|
||||
height: 100%;
|
||||
//Flex container options.
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: flex-start; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: center; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
.buttonContainer {
|
||||
//Flex element options.
|
||||
//flex: 0 0; //Grow, Shrink, Basis
|
||||
flex: none;
|
||||
}
|
||||
|
||||
#dataTable {
|
||||
overflow-y: auto;
|
||||
//Flex element options.
|
||||
flex: auto;
|
||||
align-self: stretch;
|
||||
height: 10%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.padding {
|
||||
flex: none;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#DFAliases {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
|
||||
span {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
@@ -15,4 +53,4 @@
|
||||
background-color: rgba(255, 248, 131, 0.51);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
"use strict";
|
||||
|
||||
//
|
||||
//A dropdown menu. Pass it a container and an array of data, and it will build the button, caret, and list of selectable elements inside the container.
|
||||
//
|
||||
(function($) {
|
||||
var Dropdown = function($element, data, options) {
|
||||
var _this = this
|
||||
var _this = this;
|
||||
var textSpan = $("<span>" + options.defaultText + "</span>");
|
||||
|
||||
this.$element = $element;
|
||||
|
||||
337
public/admin/js/EditableSelect.js
Normal file
337
public/admin/js/EditableSelect.js
Normal file
@@ -0,0 +1,337 @@
|
||||
"use strict";
|
||||
|
||||
//
|
||||
// Takes a input form element and a hidden form element (to store the selected id in) along with an array of objects, to build a dropdown select control that allows the user to type part of the selection to filter the list.
|
||||
//
|
||||
(function($) {
|
||||
var EditableSelect = function($input, $hidden, data, options) {
|
||||
var _this = this;
|
||||
|
||||
this.$input = $input;
|
||||
this.$hidden = $hidden;
|
||||
this.options = $.extend({}, EditableSelect.DEFAULTS, options);
|
||||
this.$selected = null;
|
||||
this.$listContainer = $('<div/>', {style: 'position: relative; height: 0;'});
|
||||
this.$list = $('<ul/>', {role: 'menu', class: this.options.listClass});
|
||||
|
||||
//Ensure that if the hidden field exists and changes, that the hidden field's id matches the text in the input field. If not then the hidden id field was changed manually and externally and the text field should be updated.
|
||||
if(this.$hidden) {
|
||||
this.$hidden.on('change', function(event) {
|
||||
var id = _this.$hidden.val();
|
||||
var $li = _this.$list.children("[role!='node']");
|
||||
|
||||
for(var i = 0; i < $li.length; i++) {
|
||||
var $next = $($li[i]);
|
||||
|
||||
if($next.data('model').id == id) {
|
||||
if(_this.$input.val() != $next.text())
|
||||
_this.$input.val($next.text());
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//this.$list.appendTo($input.parent());
|
||||
this.$list.appendTo(this.$listContainer);
|
||||
this.$listContainer.appendTo($input.parent());
|
||||
|
||||
//Setup the list to highlight the item the user is hovering over, to select the item the user clicks, and to remove the hover styling when the list closes due to a selection being made.
|
||||
this.$list
|
||||
.on('mousemove', 'li', function() {
|
||||
// _this.$list.find(_this.options.selectionClass).removeClass(_this.options.selectionClass);
|
||||
var $this = $(this);
|
||||
|
||||
//Skip nodes.
|
||||
while($this && $this.attr('role') == 'node') {
|
||||
$this = $this.next();
|
||||
}
|
||||
|
||||
//If we could find a non-node element then highlight it.
|
||||
if($this) $this.addClass(_this.options.selectionClass).siblings().removeClass(_this.options.selectionClass);
|
||||
})
|
||||
.on('mousedown', 'li', function() {
|
||||
var $this = $(this);
|
||||
|
||||
//Skip nodes.
|
||||
while($this && $this.attr('role') == 'node') {
|
||||
$this = $this.next();
|
||||
}
|
||||
|
||||
//If we could find a non-node element then highlight it.
|
||||
if($this) _this.select($this);
|
||||
})
|
||||
.on('mouseup', function() {
|
||||
//Remove the selection highlighting.
|
||||
_this.$list.children().removeClass(_this.options.selectionClass);
|
||||
//Hide the list.
|
||||
_this.hide();
|
||||
});
|
||||
//Setup the input field to handle opening the list when it receives focus, and close it when it loses focus.
|
||||
this.$input
|
||||
.on('focus', $.proxy(_this.focus, _this))
|
||||
.on('blur', $.proxy(_this.blur, _this));
|
||||
//Handle key events on the input field. Up/down arrows should change the selection in the list. Enter should select an item and close the list. Tab and escape should hide the list before moving to the next focusable element on the page.
|
||||
this.$input.on('input keydown', function(event) {
|
||||
switch(event.keyCode) {
|
||||
case 38: //Up
|
||||
var visibles = _this.$list.find('li.visible[role!="node"]');
|
||||
var selected = visibles.index(visibles.filter('.' + _this.options.selectionClass)) || 0;
|
||||
_this.highlight(selected - 1);
|
||||
event.preventDefault();
|
||||
break;
|
||||
case 40: //Down
|
||||
var visibles = _this.$list.find('li.visible[role!="node"]');
|
||||
var selected = visibles.index(visibles.filter('li.selected')) || 0;
|
||||
_this.highlight(selected + 1);
|
||||
event.preventDefault();
|
||||
break;
|
||||
case 13: //Enter
|
||||
if(_this.$list.is(':visible')) {
|
||||
_this.select(_this.$list.find('li.selected'));
|
||||
event.preventDefault();
|
||||
}
|
||||
case 9: //Tab
|
||||
_this.select(_this.$list.find('li.selected'));
|
||||
case 27: //Esc
|
||||
_this.hide();
|
||||
break;
|
||||
default:
|
||||
_this.filter();
|
||||
_this.highlight(0);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
// Adds one or more elements to the control.
|
||||
// data: The item or array of items to add. This will be the root tree elements if groupFunctions is provided.
|
||||
function add(data) {
|
||||
var groupFunctions = _this.options.groupFunctions;
|
||||
|
||||
var addOne = function(data, parent) { //role is optional.
|
||||
var text = $.isFunction(_this.options.textAttr) ? _this.options.textAttr(data) : data[_this.options.textAttr];
|
||||
var li = $("<li" + (parent ? " role='leaf'" : "") + ">" + text + "</li>");
|
||||
|
||||
li.appendTo(_this.$list);
|
||||
li.data('model', data);
|
||||
if(parent) li.data('parent-li', parent);
|
||||
};
|
||||
var addOneGroup = function(data, text, children) {
|
||||
var li = $("<li role='node'>" + text + "</li>");
|
||||
|
||||
li.appendTo(_this.$list);
|
||||
li.data('model', data);
|
||||
|
||||
for(var childIndex = 0; childIndex < children.length; childIndex++) {
|
||||
addOne(children[childIndex], li);
|
||||
}
|
||||
};
|
||||
var addOneBranch = function(data) {
|
||||
var parents = $.isFunction(groupFunctions.groupParents) ? groupFunctions.groupParents(data) : data;
|
||||
|
||||
//Since there may be one or more parents identified for each data element passed to us...
|
||||
if(Array.isArray(parents)) {
|
||||
for(var parentIndex = 0; parentIndex < parents.length; parentIndex++) {
|
||||
addOneGroup(parents[parentIndex], groupFunctions.parentText(parents[parentIndex]), groupFunctions.children(parents[parentIndex]));
|
||||
}
|
||||
}
|
||||
else {
|
||||
addOneGroup(parents, groupFunctions.parentText(parents), groupFunctions.children(parents));
|
||||
}
|
||||
};
|
||||
|
||||
if(groupFunctions instanceof Object && $.isFunction(groupFunctions.children) && $.isFunction(groupFunctions.parentText)) {
|
||||
if(Array.isArray(data)) {
|
||||
for(var dataIndex = 0; dataIndex < data.length; dataIndex++) {
|
||||
addOneBranch(data[dataIndex]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
addOneBranch(data);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if(Array.isArray(data)) {
|
||||
for(var dataIndex = 0; dataIndex < data.length; dataIndex++) {
|
||||
addOne(data[dataIndex]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
addOne(data);
|
||||
}
|
||||
}
|
||||
|
||||
//Filter the set of elements so that only those matching the text in the input field are marked as visible.
|
||||
_this.filter();
|
||||
}
|
||||
|
||||
//Add the initial set of data.
|
||||
add(data);
|
||||
};
|
||||
|
||||
EditableSelect.DEFAULTS = {
|
||||
textAttr: 'text', //The attribute of the data elements to use for the name. This can also be a function that takes the data object and returns the text.
|
||||
idAttr: 'id', //The attribute of the data elements to use for the ID. This can also be a function that takes the data obejct and returns the ID.
|
||||
// groupFunctions: The object containing three functions: 'groupParent', 'parentText', 'children'.
|
||||
// groupParents(data) will take a data element and return the objects that best represents the parents of the children (for a multi layer tree, this would be the node just before the leaf nodes).
|
||||
// parentText(parent) will be passed the group parent and the data object that generated it, and will return the text that represents the path to that parent.
|
||||
// children(parent) will be passed the group parent (returned by groupParents()), and will return an array of children or leaf nodes for the tree.
|
||||
groupFunctions: undefined,
|
||||
filter: true, //Whether to filter the list as the user types.
|
||||
effects: 'fade',
|
||||
duration: '200',
|
||||
listClass: 'editable-select-list',
|
||||
selectionClass: 'selected' //The class to use for the selected element in the dropdown list.
|
||||
};
|
||||
|
||||
EditableSelect.prototype.select = function($li) {
|
||||
if($li.length == 0) {
|
||||
if(this.$input.val() != '') {
|
||||
this.$input.val("")
|
||||
if(this.$hidden) this.$hidden.val(undefined);
|
||||
this.filter();
|
||||
//Note: Don't trigger the select event - for some reason it causes the dropdown to reopen and the control to retain focus when clicking out of the widget.
|
||||
}
|
||||
}
|
||||
else {
|
||||
if(!this.$list.has($li) || !$li.is('li.visible')) return;
|
||||
|
||||
//No need to change selection if the selection has not changed.
|
||||
if(this.$input.val() != $li.text()) {
|
||||
this.$input.val($li.text()); //Save the selected text into the text input.
|
||||
if(this.$hidden) this.$hidden.val($li.data('model')[this.options.idAttr]); //Save the ID into the hidden form input if it exists.
|
||||
this.hide();
|
||||
this.filter();
|
||||
//this.trigger('select', $li);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//Filters the list items by marking those that match the text in the text field as having the class 'visible'.
|
||||
EditableSelect.prototype.filter = function() {
|
||||
try {
|
||||
var search = this.$input.val();
|
||||
var _this = this;
|
||||
|
||||
search = search ? search : "";
|
||||
search = search.toLowerCase().trim();
|
||||
|
||||
//Show all list elements.
|
||||
this.$list.find('li').addClass('visible').show();
|
||||
//Hide any node list elements.
|
||||
this.$list.find('li[role="node"]').removeClass('visible').hide();
|
||||
|
||||
if(this.options.filter) {
|
||||
//Hide non-node elements (leaf nodes) that don't match.
|
||||
var li = this.$list.children();
|
||||
|
||||
//Iterate over the list elements:
|
||||
// hide all list items that are nodes;
|
||||
// show all list items that are not nodes and whose text matches the input value;
|
||||
// show all node list items associated with visible child list items (they occur after the parent, so the parent will be hidden first, then made visible).
|
||||
for(var i = 0; i < li.length; i++) {
|
||||
var $next = $(li[i]);
|
||||
var node = $next.attr('role') == 'node';
|
||||
var hidden = node || $next.text().toLowerCase().indexOf(search) < 0;
|
||||
|
||||
if(hidden) $next.removeClass('visible').hide();
|
||||
|
||||
//If this isn't hidden and we have a tree with grouping, then turn on the group (parent) associated with this option.
|
||||
if(!hidden && _this.options.groupFunctions) {
|
||||
var parent = $next.data('parent-li');
|
||||
|
||||
if(!parent.hasClass('visible')) parent.addClass('visible').show();
|
||||
}
|
||||
}
|
||||
|
||||
//If we hid all elements then hide the whole list.
|
||||
if(this.$list.find('li.visible').length == 0) this.hide();
|
||||
}
|
||||
}catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
EditableSelect.prototype.focus = function() {
|
||||
this.show();
|
||||
this.$input.select();
|
||||
};
|
||||
|
||||
EditableSelect.prototype.blur = function() {
|
||||
this.hide();
|
||||
this.select(this.$list.find('li.selected'));
|
||||
};
|
||||
|
||||
EditableSelect.prototype.show = function() {
|
||||
//Position the list relative to the edit field.
|
||||
this.$list.css({position: 'absolute', top: 0, left: 0, width: this.$input.outerWidth()});
|
||||
|
||||
if(!this.$list.is(':visible') && this.$list.find('li.visible').length > 0) {
|
||||
var fns = {default: 'show', fade: 'fadeIn', slide: 'slideDown'};
|
||||
var fn = fns[this.options.effects];
|
||||
|
||||
this.trigger('show');
|
||||
this.$input.addClass('open');
|
||||
this.$list[fn](this.options.duration, $.proxy(this.trigger, this, 'shown'));
|
||||
}
|
||||
};
|
||||
|
||||
EditableSelect.prototype.hide = function() {
|
||||
var fns = {default: 'hide', fade: 'fadeOut', slide: 'slideUp'};
|
||||
var fn = fns[this.options.effects];
|
||||
|
||||
this.trigger('hide');
|
||||
this.$input.removeClass('open');
|
||||
this.$list[fn](this.options.duration, $.proxy(this.trigger, this, 'hidden'));
|
||||
};
|
||||
|
||||
// goDown: true/false - defaults to true - indicating whether the highlighting should go up or down if the requested item is a node. Nodes cannot be highlighted or selected.
|
||||
EditableSelect.prototype.highlight = function(index) {
|
||||
var _this = this;
|
||||
|
||||
this.show();
|
||||
|
||||
setTimeout(function() {
|
||||
var visibles = _this.$list.find('li.visible[role!="node"]');
|
||||
var oldSelected = _this.$list.find('li.' + _this.options.selectionClass).removeClass(_this.options.selectionClass);
|
||||
var oldSelectedIndex = visibles.index(oldSelected);
|
||||
|
||||
if(visibles.length > 0) {
|
||||
var selectedIndex = (visibles.length + index) % visibles.length;
|
||||
var selected = visibles.eq(selectedIndex);
|
||||
var top = selected.position().top;
|
||||
|
||||
if(selected.attr('role') != 'node') selected.addClass(_this.options.selectionClass);
|
||||
|
||||
if(selectedIndex < oldSelectedIndex && top < 0)
|
||||
_this.$list.scrollTop(_this.$list.scrollTop() + top);
|
||||
if(selectedIndex > oldSelectedIndex && top + selected.outerHeight() > _this.$list.outerHeight())
|
||||
_this.$list.scrollTop(_this.$list.scrollTop() + selected.outerHeight() + 2 * (top - _this.$list.outerHeight()));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
EditableSelect.prototype.trigger = function(event) {
|
||||
var params = Array.prototype.slice.call(arguments, 1);
|
||||
var args = [event + '.editable-select'];
|
||||
|
||||
args.push(params);
|
||||
|
||||
if(this.$select) this.$select.trigger.apply(this.$select, args);
|
||||
this.$input.trigger.apply(this.$input, args);
|
||||
};
|
||||
|
||||
$.fn.buildEditableSelect = function(data, options) {
|
||||
for(var index = 0; index < this.length; index++) {
|
||||
var $next = $(this[index]);
|
||||
var nextEditableSelect = new EditableSelect($next, $next.siblings('input[type=hidden]').first(), data, options);
|
||||
|
||||
$next.data("editable-select", nextEditableSelect);
|
||||
}
|
||||
};
|
||||
$.fn.editableSelect = function() {
|
||||
if(this.length > 0) {
|
||||
return $(this[0]).data('editable-select');
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
File diff suppressed because it is too large
Load Diff
2
public/admin/js/chosen.jquery.min.js
vendored
2
public/admin/js/chosen.jquery.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,153 +0,0 @@
|
||||
//
|
||||
// Requires jquery at a minimum.
|
||||
//
|
||||
|
||||
var framework = new BrainstormFramework();
|
||||
var brainstormFramework = framework;
|
||||
|
||||
function BrainstormFramework() {
|
||||
|
||||
//
|
||||
// Loads the html at the given URL into the container. The container will be emptied of all content prior to loading. Any scripts inside <runonce>..</runonce> tags will be removed and executed as soon as the html is loaded.
|
||||
// @param containerRef The jquery reference to the container for the html. This can be for example 'body' to reference the body node, or '#body' to reference the node with the ID of 'body'.
|
||||
// @param url The URL of the html to be loaded.
|
||||
//
|
||||
this.append = function(containerRef, url) {
|
||||
var _this = this;
|
||||
var container = containerRef ? $(containerRef) : null;
|
||||
|
||||
$.ajax({url: url, dataType: 'html', async: false, success: function(data) {
|
||||
data = _this.extractViewData(data);
|
||||
|
||||
if(data.view) {
|
||||
if(container) {
|
||||
container.append(data.view);
|
||||
}
|
||||
else {
|
||||
htmlHandler(data.view);
|
||||
}
|
||||
}
|
||||
|
||||
if(data.script && data.script.length > 0) {
|
||||
try {
|
||||
eval(data.script);
|
||||
} catch(err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
}});
|
||||
}
|
||||
|
||||
//
|
||||
// Loads the html at the given URL into the container. The container will be emptied of all content prior to loading. Any scripts inside <runonce>..</runonce> tags will be removed and executed as soon as the html is loaded.
|
||||
// @param containerRef The jquery reference to the container for the html. This can be for example 'body' to reference the body node, or '#body' to reference the node with the ID of 'body'.
|
||||
// @param url The URL of the html to be loaded.
|
||||
// @param htmlHandler The optional handler to be called to place the html. This may be specified in place of the container ID. The handler will be passed the HTML for the view as a string.
|
||||
//
|
||||
this.load = function(containerRef, url, htmlHandler) {
|
||||
var _this = this;
|
||||
var container = containerRef ? $(containerRef) : null;
|
||||
|
||||
if(container) {
|
||||
container.empty();
|
||||
}
|
||||
|
||||
$.ajax({url: url, dataType: 'html', async: false, success: function(data) {
|
||||
data = _this.extractViewData(data);
|
||||
|
||||
if(data.view) {
|
||||
if(container) {
|
||||
container.html(data.view);
|
||||
}
|
||||
else {
|
||||
htmlHandler(data.view);
|
||||
}
|
||||
}
|
||||
|
||||
if(data.script && data.script.length > 0) {
|
||||
try {
|
||||
eval(data.script);
|
||||
} catch(err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
}});
|
||||
}
|
||||
|
||||
this.extractViewData = function(viewData) {
|
||||
if(viewData != undefined) {
|
||||
var data = {script: "", metadata: undefined, view: ""};
|
||||
var start;
|
||||
|
||||
//Remove the escaping that allowed it to be sent as part of a JSON response.//
|
||||
viewData = this.unescape(viewData);
|
||||
|
||||
//Strip out any run-once scripts to be run after loading the html.//
|
||||
while(viewData.indexOf("<runonce>") != -1) {
|
||||
//extract the script.//
|
||||
data.script += viewData.substring(viewData.indexOf("<runonce>") + 9, viewData.indexOf("</runonce>")).replace("<!--", "").replace("//-->", "");
|
||||
//Remove the script from the view data.//
|
||||
viewData = viewData.substring(0, viewData.indexOf("<runonce>")) + viewData.substring(viewData.indexOf("</runonce>") + 10);
|
||||
}
|
||||
|
||||
//Detect and remove any metadata.//
|
||||
if((start = viewData.indexOf('<metadata>')) != -1) {
|
||||
var end = viewData.indexOf('</metadata>', start + 10);
|
||||
var metadata = viewData.substring(start, end + 11);
|
||||
|
||||
//Remove the metadata from the document.//
|
||||
viewData = viewData.substring(0, start) + viewData.substring(end + 11);
|
||||
//Parse the metadata XML.//
|
||||
data.metadata = $.parseXML(metadata);
|
||||
}
|
||||
else if((start = viewData.indexOf('<metadata ')) != -1) {
|
||||
var end = viewData.indexOf('/>', start + 10);
|
||||
var metadata = viewData.substring(start, end + 2);
|
||||
|
||||
//Remove the metadata from the document.//
|
||||
viewData = viewData.substring(0, start) + viewData.substring(end + 2);
|
||||
//Parse the metadata XML.//
|
||||
data.metadata = $.parseXML(metadata);
|
||||
}
|
||||
else if((start = viewData.indexOf('<metadata/>')) != -1) {
|
||||
viewData = viewData.substring(0, start) + viewData.substring(start + 11);
|
||||
}
|
||||
|
||||
//Strip out any comments.//
|
||||
while(viewData.indexOf("<!--") != -1) {
|
||||
//Remove the comment from the view data.//
|
||||
viewData = viewData.substring(0, viewData.indexOf("<!--")) + viewData.substring(viewData.indexOf("-->") + 3);
|
||||
}
|
||||
|
||||
data.view = viewData;
|
||||
|
||||
return data;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Removes escape characters from text.
|
||||
// @param text The text whose escape characters are to be removed.
|
||||
//
|
||||
this.unescape = function(text) {
|
||||
var result = text.replace(/\x7C1/g, "\\").replace(/\x7C2/g, "'").replace(/\x7C3/g, "\"").replace(/\x7C4/g, "\x0D").replace(/\x7C5/g, "\x09").replace(/\x7C7/g, "&").replace(/\x7C8/g, "<").replace(/\x7C9/g, ">").replace(/\x7C6/g, "\x7C");
|
||||
return result;
|
||||
};
|
||||
|
||||
//
|
||||
// Adds escape characters to text.
|
||||
// @param text The text whose escape characters are to be added. If this is undefined then the result will be an empty string.
|
||||
//
|
||||
this.escape = function(text) {
|
||||
var result;
|
||||
|
||||
if(text) {
|
||||
result = text.replace(/\x0A\x0D/g, "\n").replace(/\x7C/g, "\x7C6").replace(/\\/g, "\x7C1").replace(/\'/g, "\x7C2").replace(/\"/g, "\x7C3").replace(/\n/g, "\x7C4").replace(/\x09/g, "\x7C5").replace(/%/g, "\x7C6").replace(/&/g, "\x7C7").replace(/\x3C/g, "\x7C8").replace(/\x3E/g, "\x7C9");
|
||||
}
|
||||
else {
|
||||
result = "";
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
}
|
||||
30
public/admin/js/jquery.disableSelection.js
Normal file
30
public/admin/js/jquery.disableSelection.js
Normal file
@@ -0,0 +1,30 @@
|
||||
(function($){
|
||||
$.fn.disableSelection = function() {
|
||||
return this
|
||||
.attr('unselectable', 'on')
|
||||
.css('user-select', 'none')
|
||||
.css('-moz-user-select', 'none')
|
||||
.css('-khtml-user-select', 'none')
|
||||
.css('-webkit-user-select', 'none')
|
||||
.on('selectstart', false)
|
||||
.on('contextmenu', false)
|
||||
.on('keydown', false)
|
||||
.on('mousedown', false)
|
||||
.css({cursor: 'default'});
|
||||
};
|
||||
|
||||
$.fn.enableSelection = function() {
|
||||
return this
|
||||
.attr('unselectable', '')
|
||||
.css('user-select', '')
|
||||
.css('-moz-user-select', '')
|
||||
.css('-khtml-user-select', '')
|
||||
.css('-webkit-user-select', '')
|
||||
.off('selectstart', false)
|
||||
.off('contextmenu', false)
|
||||
.off('keydown', false)
|
||||
.off('mousedown', false)
|
||||
.css({cursor: 'auto'});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
272
public/admin/js/jquery.editable.select.js
Normal file
272
public/admin/js/jquery.editable.select.js
Normal file
@@ -0,0 +1,272 @@
|
||||
/**
|
||||
* jQuery Editable Select
|
||||
* Indri Muska <indrimuska@gmail.com>
|
||||
*
|
||||
* Source on GitHub @ https://github.com/indrimuska/jquery-editable-select
|
||||
*/
|
||||
|
||||
+(function($) {
|
||||
// jQuery Editable Select
|
||||
EditableSelect = function(select, options) {
|
||||
var that = this;
|
||||
|
||||
if(select.nodeName == "SELECT") {
|
||||
var inputProperties = {
|
||||
type: "text",
|
||||
autocomplete: "off"
|
||||
};
|
||||
|
||||
//Add the user input properties to the ones specified above.
|
||||
if(options.inputProperties && options.inputProperties instanceof Object) $.extend(inputProperties, options.inputProperties);
|
||||
|
||||
this.$select = $(select);
|
||||
this.$input = $('<input/>', inputProperties);
|
||||
//Replace the select with an input widget in the view.
|
||||
this.$select.replaceWith(this.$input);
|
||||
}
|
||||
else if(select.nodeName == "INPUT") {
|
||||
this.$select = undefined;
|
||||
this.$input = $(select);
|
||||
}
|
||||
|
||||
//Save the options.
|
||||
this.options = options;
|
||||
|
||||
//Add the list to the input's parent or the appendTo in the options.
|
||||
this.$list = $('<ul class="es-list">');
|
||||
this.$list.appendTo(this.options.appendTo || this.$input.parent());
|
||||
|
||||
this.utility = new EditableSelectUtility(this);
|
||||
|
||||
//If the trigger is not focus or manual, then default it to focus.
|
||||
if(['focus', 'manual'].indexOf(this.options.trigger) < 0) this.options.trigger = 'focus';
|
||||
//Set the default transition.
|
||||
if(['default', 'fade', 'slide'].indexOf(this.options.effects) < 0) this.options.effects = 'default';
|
||||
//Ensure the duration is a number, fast, or slow, defaulting to fast.
|
||||
if(isNaN(this.options.duration) || ['fast', 'slow'].indexOf(this.options.duration) < 0) this.options.duration = 'fast';
|
||||
|
||||
// initalization
|
||||
this.utility.initialize();
|
||||
this.utility.initializeList();
|
||||
this.utility.initializeInput();
|
||||
this.utility.trigger('created');
|
||||
this.$select.data('editable-select', this);
|
||||
};
|
||||
|
||||
EditableSelect.DEFAULTS = { filter: true, effects: 'default', duration: 'fast', trigger: 'focus' };
|
||||
|
||||
EditableSelect.prototype.filter = function() {
|
||||
var hiddens = 0;
|
||||
var search = this.$input.val().toLowerCase().trim();
|
||||
|
||||
this.$list.find('li').addClass('es-visible').show();
|
||||
|
||||
if(this.options.filter) {
|
||||
hiddens = this.$list.find('li').filter(function (i, li) { return $(li).text().toLowerCase().indexOf(search) < 0; }).hide().removeClass('es-visible').length;
|
||||
if (this.$list.find('li').length == hiddens) this.hide();
|
||||
}
|
||||
};
|
||||
|
||||
EditableSelect.prototype.show = function() {
|
||||
this.$list.css({
|
||||
top: this.$input.position().top + this.$input.outerHeight() - 1,
|
||||
left: this.$input.position().left,
|
||||
width: this.$input.outerWidth()
|
||||
});
|
||||
|
||||
if (!this.$list.is(':visible') && this.$list.find('li.es-visible').length > 0) {
|
||||
var fns = { default: 'show', fade: 'fadeIn', slide: 'slideDown' };
|
||||
var fn = fns[this.options.effects];
|
||||
|
||||
this.utility.trigger('show');
|
||||
this.$input.addClass('open');
|
||||
this.$list[fn](this.options.duration, $.proxy(this.utility.trigger, this.utility, 'shown'));
|
||||
}
|
||||
};
|
||||
|
||||
EditableSelect.prototype.hide = function() {
|
||||
var fns = { default: 'hide', fade: 'fadeOut', slide: 'slideUp' };
|
||||
var fn = fns[this.options.effects];
|
||||
|
||||
this.utility.trigger('hide');
|
||||
this.$input.removeClass('open');
|
||||
this.$list[fn](this.options.duration, $.proxy(this.utility.trigger, this.utility, 'hidden'));
|
||||
};
|
||||
|
||||
EditableSelect.prototype.select = function($li) {
|
||||
if (!this.$list.has($li) || !$li.is('li.es-visible')) return;
|
||||
this.$input.val($li.text());
|
||||
this.hide();
|
||||
this.filter();
|
||||
this.utility.trigger('select', $li);
|
||||
};
|
||||
|
||||
EditableSelect.prototype.add = function(text, index, attrs, data) {
|
||||
var $li = $('<li>');
|
||||
$li.html(text);
|
||||
var $option = $('<option>');
|
||||
$option.text(text);
|
||||
var last = this.$list.find('li').length;
|
||||
|
||||
if(isNaN(index)) index = last;
|
||||
else index = Math.min(Math.max(0, index), last);
|
||||
|
||||
if(index == 0) {
|
||||
this.$list.prepend($li);
|
||||
if(this.$select) this.$select.prepend($option);
|
||||
}
|
||||
else {
|
||||
this.$list.find('li').eq(index - 1).after($li);
|
||||
if(this.$select) this.$select.find('option').eq(index - 1).after($option);
|
||||
}
|
||||
|
||||
this.utility.setAttributes($li, attrs, data);
|
||||
this.utility.setAttributes($option, attrs, data);
|
||||
this.filter();
|
||||
};
|
||||
|
||||
EditableSelect.prototype.remove = function(index) {
|
||||
var last = this.$list.find('li').length;
|
||||
|
||||
if (isNaN(index)) index = last;
|
||||
else index = Math.min(Math.max(0, index), last - 1);
|
||||
this.$list.find('li').eq(index).remove();
|
||||
if(this.$select) this.$select.find('option').eq(index).remove();
|
||||
this.filter();
|
||||
};
|
||||
|
||||
EditableSelect.prototype.destroy = function () {
|
||||
this.$list.off('mousemove mousedown mouseup');
|
||||
this.$input.off('focus blur input keydown');
|
||||
this.$input.replaceWith(this.$select);
|
||||
this.$list.remove();
|
||||
if(this.$select) this.$select.removeData('editable-select');
|
||||
};
|
||||
|
||||
// Utility
|
||||
EditableSelectUtility = function(es) {
|
||||
this.es = es;
|
||||
};
|
||||
EditableSelectUtility.prototype.initialize = function() {
|
||||
var that = this;
|
||||
|
||||
if(this.es.$select) that.setAttributes(that.es.$input, that.es.$select[0].attributes, that.es.$select.data());
|
||||
|
||||
//that.es.$input.addClass('es-input');
|
||||
that.es.$input.data('editable-select', that.es);
|
||||
|
||||
if(this.es.$select) that.es.$select.find('option').each(function (i, option) {
|
||||
var $option = $(option).remove();
|
||||
that.es.add($option.text(), i, option.attributes, $option.data());
|
||||
if ($option.attr('selected')) that.es.$input.val($option.text());
|
||||
});
|
||||
|
||||
that.es.filter();
|
||||
};
|
||||
EditableSelectUtility.prototype.initializeList = function() {
|
||||
var that = this;
|
||||
that.es.$list
|
||||
.on('mousemove', 'li', function () {
|
||||
that.es.$list.find('.selected').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
})
|
||||
.on('mousedown', 'li', function () {
|
||||
that.es.select($(this));
|
||||
})
|
||||
.on('mouseup', function () {
|
||||
that.es.$list.find('li.selected').removeClass('selected');
|
||||
});
|
||||
};
|
||||
EditableSelectUtility.prototype.initializeInput = function() {
|
||||
var that = this;
|
||||
switch (this.es.options.trigger) {
|
||||
default:
|
||||
case 'focus':
|
||||
that.es.$input
|
||||
.on('focus', $.proxy(that.es.show, that.es))
|
||||
.on('blur', $.proxy(that.es.hide, that.es));
|
||||
break;
|
||||
case 'manual':
|
||||
break;
|
||||
}
|
||||
that.es.$input.on('input keydown', function (e) {
|
||||
switch (e.keyCode) {
|
||||
case 38: // Up
|
||||
var visibles = that.es.$list.find('li.es-visible');
|
||||
var selected = visibles.index(visibles.filter('li.selected')) || 0;
|
||||
that.highlight(selected - 1);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case 40: // Down
|
||||
var visibles = that.es.$list.find('li.es-visible');
|
||||
var selected = visibles.index(visibles.filter('li.selected')) || 0;
|
||||
that.highlight(selected + 1);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case 13: // Enter
|
||||
if (that.es.$list.is(':visible')) {
|
||||
that.es.select(that.es.$list.find('li.selected'));
|
||||
e.preventDefault();
|
||||
}
|
||||
case 9: // Tab
|
||||
case 27: // Esc
|
||||
that.es.hide();
|
||||
break;
|
||||
default:
|
||||
that.es.filter();
|
||||
that.highlight(0);
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
EditableSelectUtility.prototype.highlight = function(index) {
|
||||
var that = this;
|
||||
that.es.show();
|
||||
|
||||
setTimeout(function() {
|
||||
var visibles = that.es.$list.find('li.es-visible');
|
||||
var oldSelected = that.es.$list.find('li.selected').removeClass('selected');
|
||||
var oldSelectedIndex = visibles.index(oldSelected);
|
||||
|
||||
if (visibles.length > 0) {
|
||||
var selectedIndex = (visibles.length + index) % visibles.length;
|
||||
var selected = visibles.eq(selectedIndex);
|
||||
var top = selected.position().top;
|
||||
|
||||
selected.addClass('selected');
|
||||
if(selectedIndex < oldSelectedIndex && top < 0)
|
||||
that.es.$list.scrollTop(that.es.$list.scrollTop() + top);
|
||||
if(selectedIndex > oldSelectedIndex && top + selected.outerHeight() > that.es.$list.outerHeight())
|
||||
that.es.$list.scrollTop(that.es.$list.scrollTop() + selected.outerHeight() + 2 * (top - that.es.$list.outerHeight()));
|
||||
}
|
||||
});
|
||||
};
|
||||
EditableSelectUtility.prototype.setAttributes = function ($element, attrs, data) {
|
||||
if(attrs && attrs instanceof Object) $.each({}, function (i, attr) { $element.attr(attr.name, attr.value); });
|
||||
if(data && data instanceof Object) $element.data(data);
|
||||
};
|
||||
EditableSelectUtility.prototype.trigger = function (event) {
|
||||
var params = Array.prototype.slice.call(arguments, 1);
|
||||
var args = [event + '.editable-select'];
|
||||
args.push(params);
|
||||
if(this.es.$select) this.es.$select.trigger.apply(this.es.$select, args);
|
||||
this.es.$input.trigger.apply(this.es.$input, args);
|
||||
};
|
||||
|
||||
// Plugin
|
||||
Plugin = function (option) {
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data('editable-select');
|
||||
var options = $.extend({}, EditableSelect.DEFAULTS, $this.data(), typeof option == 'object' && option);
|
||||
|
||||
if(!data) data = new EditableSelect(this, options);
|
||||
if(typeof option == 'string') data[option].apply(data, args);
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.editableSelect = Plugin;
|
||||
$.fn.editableSelect.Constructor = EditableSelect;
|
||||
|
||||
})(jQuery);
|
||||
1532
public/admin/js/jquery.validate.js
vendored
1532
public/admin/js/jquery.validate.js
vendored
File diff suppressed because it is too large
Load Diff
4
public/admin/js/jquery.validate.min.js
vendored
4
public/admin/js/jquery.validate.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,364 +0,0 @@
|
||||
//Requires JQuery, and the JQuery History plugin.//
|
||||
|
||||
function FadeManager() {
|
||||
}
|
||||
FadeManager.prototype.constructor = FadeManager;
|
||||
FadeManager.prototype.fadeIns = null;
|
||||
FadeManager.prototype.fadeOuts = null;
|
||||
//
|
||||
// Fades the element IN.
|
||||
// @param elements The jquery object, or jquery selector(s) ('#ID', '.class', 'tag', object) of the elements to become visible.
|
||||
//
|
||||
FadeManager.prototype.fadeIn = function(elements) {
|
||||
if(elements) {
|
||||
elements = $(elements);
|
||||
|
||||
if(this.fadeIns) {
|
||||
this.fadeIns = this.fadeIns.add(elements);
|
||||
}
|
||||
else {
|
||||
this.fadeIns = elements;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// Fades the element OUT.
|
||||
// @param elements The jquery object, or jquery selector(s) ('#ID', '.class', 'tag', object) of the elements to become visible.
|
||||
//
|
||||
FadeManager.prototype.fadeOut = function(elements) {
|
||||
if(elements) {
|
||||
elements = $(elements);
|
||||
|
||||
if(this.fadeOuts) {
|
||||
this.fadeOuts = this.fadeOuts.add(elements);
|
||||
}
|
||||
else {
|
||||
this.fadeOuts = elements;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function LayoutManager(viewName) {
|
||||
//PRIVATE MEMBERS
|
||||
var _this = this;
|
||||
var view = $('[bs-view="' + viewName + '"]');
|
||||
var lastUrl = null;
|
||||
var oldContainer = null;
|
||||
var container = null;
|
||||
|
||||
//PUBLIC MEMBERS
|
||||
this.hashPrefix = '!'; //Should be empty or null if no html5 search engine framework is not being used.
|
||||
this.isLoading = false;
|
||||
this.postLoadHandler = null;
|
||||
//
|
||||
// Applications should alter this value. Use #!/xxx if using HTML5's search engine protocols.
|
||||
//
|
||||
this.defaultUrl = '#/landing';
|
||||
//
|
||||
// These page classes can be modified by the website to include any style class that might be applied to a page section viewed through the layout manager.
|
||||
//
|
||||
this.pageClassFades = [{cls: 'topPage', fadeIn: '#menuBar,#titleBar', fadeOut: null}, {cls: 'halfPage', fadeIn: '#menuBar,#lowerRightLogo', fadeOut: null}, {cls: 'fullPage', fadeIn: '#bottomCenterLogo', fadeOut: null}];
|
||||
//
|
||||
// A map of view name to metadata objects.
|
||||
// If no metadata is provide for a view, or for any property of a view, then the defaults will be used (url is derrived from the view name by adding .html, the rest are null).
|
||||
// Example:
|
||||
// layoutManager.viewMetadata = {
|
||||
// home: {
|
||||
// url: 'home.html',
|
||||
// classes: ['fullPage'],
|
||||
// load: 'alert("starting loading home");',
|
||||
// loaded: 'alert("loaded home");',
|
||||
// unload: 'alert("starting unloading home");',
|
||||
// unloaded: 'alert("unloaded home");',
|
||||
// fadeIn: 'menuBar, leftNav',
|
||||
// fadeOut: 'bottomBar'
|
||||
// },
|
||||
// anotherViewName: {...}
|
||||
// }
|
||||
//
|
||||
this.viewMetadata = {};
|
||||
//
|
||||
// The defaults to be used for the view metadata if any values are not provided for a view. Any value may be empty. Url is not utilized (url's default to the view name + ".html").
|
||||
// Example:
|
||||
// layoutManager.viewMetadataDefaults = {
|
||||
// classes: ['halfPage'];
|
||||
// }
|
||||
//
|
||||
this.viewMetadataDefaults = {};
|
||||
|
||||
//CONSTRUCTOR
|
||||
|
||||
//Ensure the view is properly found.
|
||||
if(view && view.length == 1) {
|
||||
view.data('layout-manager', this);
|
||||
}
|
||||
else {
|
||||
view = null;
|
||||
throw "view with name: '" + viewName + "' not found";
|
||||
}
|
||||
|
||||
//PRIVILEGED METHODS (public with private access)
|
||||
|
||||
//
|
||||
// Sets the handler to be run immediately or after the display currently being shown is completed.
|
||||
// @param fn The function to be run. This allows the code to change the display, even if the display is in the middle of changing.
|
||||
//
|
||||
this.setPostLoadHandler = function(fn) {
|
||||
if(_this.isLoading) {
|
||||
_this.postLoadHandler = fn;
|
||||
}
|
||||
else {
|
||||
fn();
|
||||
}
|
||||
}
|
||||
//
|
||||
// Displays the new URL and hides the lastUrl.
|
||||
// Passed elements can define "load", "loaded", "unload", and "unloaded" functions (as attributes OR as jquery 'data') that will be called. The present tense functions will be called prior to the fades and are passed the jquery element object, along with a LayoutManager instance allowing alterations of what becomes visible and invisible. The past tense functions are called after the fades and are passed only the jquery elements involved.
|
||||
// Passed elements may also have attributes OR jquery 'data' named: 'fadeIn' and 'fadeOut' that each contain a jquery object, or a comma delimited list of jquery selectors to fade IN and OUT upon loading (these lists fade type are inverted when unloading).
|
||||
// Example: <div id='showableDiv' fadeIn="showMeElement,showMe2" fadeOut="hideMeElement,hideMe2" load="function(element, fadeManager) {/*do something*/}" loaded='function(element) {/*do something*/} unload="function(element, fadeManager) {/*do something*/} unloaded='function(element) {/*do something*/}"/>
|
||||
// @param url The url to be shown.
|
||||
// @param lastUrl The url last shown (to be hidden).
|
||||
// @return The URL, usually as passed to the show, otherwise what the show call redirected to.
|
||||
//
|
||||
this.show = function(url) {
|
||||
if(url.indexOf('#') == 0) url = url.substring(1);
|
||||
_this.isLoading = true;
|
||||
var lastUrl = _this.lastUrl;
|
||||
var initialize;
|
||||
var menuId;
|
||||
var urlParts = url.replace('%7C', '|').split('|');
|
||||
var oldUrlParts = lastUrl ? lastUrl.replace('%7C', '|').split('|') : [""];
|
||||
var isIE = navigator.userAgent.match("MSIE");
|
||||
var prefix = _this.hashPrefix + "/";
|
||||
|
||||
//Check for the prefix and strip it.
|
||||
if(urlParts[0].indexOf(prefix) == 0) {
|
||||
urlParts[0] = urlParts[0].substring(prefix.length);
|
||||
oldUrlParts[0] = oldUrlParts[0].substring(prefix.length);
|
||||
|
||||
//Determine whether the new element being shown is different from the old element.
|
||||
//Ignore sub-elements that may be part of the hash URI (sub elements are divided by a '|' character or the %7C equivalent).
|
||||
if(oldUrlParts[0] != urlParts[0]) {
|
||||
//Cleanup just in case.
|
||||
if(oldContainer) {
|
||||
oldContainer.remove();
|
||||
}
|
||||
|
||||
//Set the current container as the old container.
|
||||
oldContainer = container;
|
||||
container = $('<div/>');
|
||||
container.appendTo(view);
|
||||
|
||||
|
||||
var fadeManager = new FadeManager();
|
||||
var viewMetadata = _this.viewMetadata[urlParts[0]];
|
||||
var hasOldUrl = oldUrlParts[0].length > 0;
|
||||
var oldViewMetadata = hasOldUrl ? _this.viewMetadata[oldUrlParts[0]] : null;
|
||||
|
||||
//Clone the view metadata and old view metadata and set defaults where necessary.
|
||||
viewMetadata = viewMetadata ? $.extend(true, {}, _this.viewMetadataDefaults, viewMetadata) : $.extend(true, {}, _this.viewMetadataDefaults);
|
||||
oldViewMetadata = hasOldUrl ? oldViewMetadata ? $.extend(true, {}, _this.viewMetadataDefaults, oldViewMetadata) : $.extend(true, {}, _this.viewMetadataDefaults) : null;
|
||||
viewMetadata.url = viewMetadata.url ? viewMetadata.url : urlParts[0] + ".html";
|
||||
if(oldViewMetadata) oldViewMetadata.url = oldViewMetadata.url ? oldViewMetadata.url : oldUrlParts[0] + ".html";
|
||||
viewMetadata.classes = viewMetadata.classes && $.isArray(viewMetadata.classes) ? viewMetadata.classes : viewMetadata.classes ? [viewMetadata.classes] : [];
|
||||
if(oldViewMetadata) oldViewMetadata.classes = oldViewMetadata.classes && $.isArray(oldViewMetadata.classes) ? oldViewMetadata.classes : oldViewMetadata.classes ? [oldViewMetadata.classes] : [];
|
||||
|
||||
var loadFunction = viewMetadata.load;
|
||||
var loadedFunction = viewMetadata.loaded;
|
||||
var unloadFunction = hasOldUrl ? oldViewMetadata.unload : null;
|
||||
var unloadedFunction = hasOldUrl ? oldViewMetadata.unloaded : null;
|
||||
var urlObjectFadeIns = viewMetadata.fadeIn;
|
||||
var urlObjectFadeOuts = viewMetadata.fadeOut;
|
||||
var oldUrlObjectFadeIns = hasOldUrl ? oldViewMetadata.fadeOut : null;
|
||||
var oldUrlObjectFadeOuts = hasOldUrl ? oldViewMetadata.fadeIn : null;
|
||||
|
||||
//Add the elements being faded in/out in the fade manager.//
|
||||
fadeManager.fadeIn(container);
|
||||
if(hasOldUrl) fadeManager.fadeOut(oldContainer);
|
||||
if(urlObjectFadeIns) fadeManager.fadeIn(urlObjectFadeIns)
|
||||
if(urlObjectFadeOuts) fadeManager.fadeOut(urlObjectFadeIns);
|
||||
if(oldUrlObjectFadeIns) fadeManager.fadeIn(oldUrlObjectFadeIns)
|
||||
if(oldUrlObjectFadeOuts) fadeManager.fadeOut(oldUrlObjectFadeOuts);
|
||||
|
||||
//If the element being shown is set to load upon showing, do the load of the contents now.//
|
||||
brainstormFramework.load(container[0], viewMetadata.url);
|
||||
|
||||
//Some presets via the element's class, to fade things in and out based on the element's style.//
|
||||
for(var index = 0; index < _this.pageClassFades.length; index++) {
|
||||
for(var classIndex = 0; classIndex < viewMetadata.classes.length; classIndex++) {
|
||||
if(_this.pageClassFades[index] && _this.pageClassFades[index].cls && _this.pageClassFades[index].cls == viewMetadata.classes[classIndex]) {
|
||||
fadeManager.fadeIn(_this.pageClassFades[index].fadeIn);
|
||||
fadeManager.fadeOut(_this.pageClassFades[index].fadeOut);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(hasOldUrl) {
|
||||
for(var index = 0; index < _this.pageClassFades.length; index++) {
|
||||
for(var classIndex = 0; classIndex < oldViewMetadata.classes.length; classIndex++) {
|
||||
if(_this.pageClassFades[index] && _this.pageClassFades[index].cls && _this.pageClassFades[index].cls == oldViewMetadata.classes[classIndex]) {
|
||||
fadeManager.fadeOut(_this.pageClassFades[index].fadeIn);
|
||||
fadeManager.fadeIn(_this.pageClassFades[index].fadeOut);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//If there is a load function then call it now passing the element being displayed, and the fadeManager reference.//
|
||||
if(unloadFunction) {
|
||||
if(typeof unloadFunction == 'string') {
|
||||
if(unloadFunction.length > 0) {
|
||||
var element = oldContainer;
|
||||
|
||||
//Call the unload function passing the jquery object for the element being unloaded and hidden, and the fade manager so that additional fade in/out's can be specified.//
|
||||
eval(unloadFunction);
|
||||
}
|
||||
}
|
||||
else {
|
||||
//Call the unload function passing the jquery object for the element being unloaded and hidden, and the fade manager so that additional fade in/out's can be specified.//
|
||||
unloadFunction(oldContainer, fadeManager);
|
||||
}
|
||||
}
|
||||
|
||||
if(loadFunction) {
|
||||
if(typeof loadFunction == 'string') {
|
||||
if(loadFunction.length > 0) {
|
||||
var element = container;
|
||||
|
||||
//Call the load function passing the jquery object for the element being unloaded and hidden, and the fade manager so that additional fade in/out's can be specified.//
|
||||
eval(loadFunction);
|
||||
}
|
||||
}
|
||||
else {
|
||||
//Call the load function passing the jquery object for the element being loaded and displayed, and the fade manager so that additional fade in/out's can be specified.//
|
||||
loadFunction(container, fadeManager);
|
||||
}
|
||||
}
|
||||
|
||||
//Remove fade elements that match. No reason to fade things out and in at the same time.//
|
||||
if(fadeManager.fadeOuts && fadeManager.fadeIns) {
|
||||
for(var outIndex = fadeManager.fadeOuts.length - 1; outIndex >= 0; outIndex--) {
|
||||
var match = false;
|
||||
|
||||
for(var inIndex = fadeManager.fadeIns.length - 1; !match && inIndex >= 0; inIndex--) {
|
||||
if(fadeManager.fadeOuts[outIndex] == fadeManager.fadeIns[inIndex]) {
|
||||
fadeManager.fadeOuts.splice(outIndex, 1);
|
||||
fadeManager.fadeIns.splice(inIndex, 1);
|
||||
match = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
//Fade in the elements marked for it.//
|
||||
if(fadeManager.fadeIns && fadeManager.fadeIns.length > 0) {
|
||||
var all = fadeManager.fadeIns;
|
||||
var block = all.filter(':not(.inline)');
|
||||
var inline = all.filter('.inline');
|
||||
|
||||
if(isIE) {
|
||||
block.show();
|
||||
inline.css('visibility', 'visible');
|
||||
}
|
||||
else {
|
||||
var fade = all.filter(':not(.nofade)');
|
||||
|
||||
//Ensure they are completely faded out and displayed.//
|
||||
fade.fadeTo(0, 0);
|
||||
block.show();
|
||||
inline.css('visibility', 'visible');
|
||||
|
||||
//Fade over 1 second to fully visible.//
|
||||
fade.fadeTo(!oldContainer ? 0 : 1000, 1, function() {
|
||||
if(unloadedFunction) {
|
||||
if(typeof unloadedFunction == 'string') {
|
||||
if(unloadedFunction.length > 0) {
|
||||
var element = oldContainer;
|
||||
|
||||
//Call the unloaded function passing the jquery object for the element being unloaded and hidden.//
|
||||
eval(unloadedFunction);
|
||||
}
|
||||
}
|
||||
else {
|
||||
//Call the unloaded function passing the jquery object for the element being unloaded and hidden.//
|
||||
unloadedFunction(oldContainer, fadeManager);
|
||||
}
|
||||
}
|
||||
|
||||
if(loadedFunction) {
|
||||
if(typeof loadedFunction == 'string') {
|
||||
if(loadedFunction.length > 0) {
|
||||
var element = container;
|
||||
|
||||
//Call the loaded function passing the jquery object for the element being loaded and displayed.//
|
||||
eval(loadedFunction);
|
||||
}
|
||||
}
|
||||
else {
|
||||
//Call the loaded function passing the jquery object for the element being loaded and displayed.//
|
||||
loadedFunction(container, fadeManager);
|
||||
}
|
||||
}
|
||||
|
||||
//Clean up after the old container now that the fades are done.//
|
||||
if(hasOldUrl && oldContainer) {
|
||||
oldContainer.remove();
|
||||
oldContainer = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//Fade out the elements marked for it.//
|
||||
if(fadeManager.fadeOuts && fadeManager.fadeOuts.length > 0) {
|
||||
var all = fadeManager.fadeOuts;
|
||||
var block = all.filter(':not(.inline)');
|
||||
var inline = all.filter('.inline');
|
||||
|
||||
if(isIE) {
|
||||
block.hide();
|
||||
inline.css('visibility', 'hidden');
|
||||
}
|
||||
else {
|
||||
var blockNoFade = block.filter('.nofade');
|
||||
var blockFade = block.filter(':not(.nofade)');
|
||||
var inlineNoFade = inline.filter('.nofade');
|
||||
var inlineFade = inline.filter(':not(.nofade)');
|
||||
var fade = all.filter(':not(.nofade)');
|
||||
|
||||
blockNoFade.hide();
|
||||
inlineNoFade.css('visibility', 'hidden');
|
||||
fade.fadeTo(!oldContainer ? 500 : 0, 0, function() {blockFade.hide(); inlineFade.css('visibility', 'hidden');});
|
||||
}
|
||||
}
|
||||
}
|
||||
catch(err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
|
||||
_this.lastUrl = url;
|
||||
_this.isLoading = false;
|
||||
|
||||
if(_this.postLoadHandler) {
|
||||
var fn = _this.postLoadHandler;
|
||||
|
||||
_this.postLoadHandler = null;
|
||||
fn();
|
||||
}
|
||||
}
|
||||
else if(url == _this.defaultUrl) {
|
||||
//Fail! Bad default URL.
|
||||
throw "Bad Default URL";
|
||||
}
|
||||
else {
|
||||
//Missing prefix: malformed url
|
||||
window.location.replace(_this.defaultUrl);
|
||||
_this.show(_this.defaultUrl); //Note: This could create a stack overflow if the defaultUrl is malformed!
|
||||
}
|
||||
|
||||
//$('#log').prepend("Showing: " + url + "<br/>");
|
||||
|
||||
}
|
||||
}
|
||||
@@ -28,6 +28,8 @@ var LinkedTable;
|
||||
//Notify the handler of the new selection, and the selection's model.
|
||||
_this.options.selectionChanged(_this.$selectedRow, _this.$selectedRow ? _this.$selectedRow.data(_this.options.modelPropName) : null);
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
//Takes a callback function with three parameters:
|
||||
@@ -143,6 +145,7 @@ var LinkedTable;
|
||||
this.updateCell($cell, attribute, model, supportingData);
|
||||
//Add the cell to the row.
|
||||
$cell.appendTo(row);
|
||||
$cell.disableSelection();
|
||||
}
|
||||
|
||||
if(this.options.postAddRowHandler) {
|
||||
@@ -193,6 +196,9 @@ var LinkedTable;
|
||||
selectionCSS: 'selected',
|
||||
selection: 'row', //Currently only row is supported.
|
||||
selectionChanged: undefined, //An optional handler called when the selection changes, and passed the selected element (jquery wrapper for the table row 'tr' HTML element currently selected), and the model associated with the row.
|
||||
selectionOpened: undefined, //An optional handler called when the user double clicks a row.
|
||||
keyDownHandler: undefined, //An optional handler called when a key is pressed on a row.
|
||||
keyUpHandler: undefined, //An optional handler called when a key is pressed on a row.
|
||||
supportingData: [], //An array of objects, one for each collection of supporting data. Each object must have a 'name', 'url', and optional 'parameters'. The url and parameters are used the same as for the primary query. The name is used to store the results for use in rendering the data. Optional 'postProcess' attribute can be a function that takes the data and returns a modified set of data.
|
||||
cellDataHandlers: {}, //An object containing a function for each attribute, where the attribute is the table header object key, and the function is called to convert the primary data object into a cell value. The function will be passed the jquery table data wrapper object for the cell, the primary data object for the row, and the object containing the supporting data returned from running the supporting data queries.
|
||||
postAddRowHandler: null, //Optional function that is passed the jquery table row and the data object sent by the server for that row. Allows post processing of the row prior to display.
|
||||
|
||||
@@ -6,30 +6,105 @@ var scrollerTransitionTime = 1000;
|
||||
|
||||
window.status="";
|
||||
|
||||
var layoutManager;
|
||||
|
||||
//Handle the document ready event which is where any initialization code goes.
|
||||
$(document).ready(function($) {
|
||||
var layoutManager = new LayoutManager("main-view");
|
||||
// layoutManager = new LayoutManager("main-view");
|
||||
//
|
||||
// layoutManager.defaultUrl = '#!/Home';
|
||||
// layoutManager.pageClassFades = [
|
||||
// {cls: 'full', fadeIn: "#menu", fadeOut: null},
|
||||
// {cls: 'dialog', fadeIn: null, fadeOut: "#menu"}
|
||||
// ];
|
||||
// layoutManager.viewMetadataDefaults = {classes: 'full'};
|
||||
// layoutManager.viewMetadata = {
|
||||
// // weddings: {
|
||||
// // load: "element.data('scroller', new ItemScroller($('div.scrollViewport'), 142, scrollerScrollTime, scrollerInitialDelay, scrollerTransitionTime, false));",
|
||||
// // unload:"element.data('scroller').release(); element.data('scroller', undefined);"
|
||||
// // },
|
||||
// };
|
||||
|
||||
layoutManager.defaultUrl = '#!/Home';
|
||||
layoutManager.pageClassFades = [
|
||||
{cls: 'full', fadeIn: null, fadeOut: null}
|
||||
];
|
||||
layoutManager.viewMetadataDefaults = {classes: 'full'};
|
||||
layoutManager.viewMetadata = {
|
||||
weddings: {
|
||||
load: "element.data('scroller', new ItemScroller($('div.scrollViewport'), 142, scrollerScrollTime, scrollerInitialDelay, scrollerTransitionTime, false));",
|
||||
unload:"element.data('scroller').release(); element.data('scroller', undefined);"
|
||||
},
|
||||
};
|
||||
var lastHash;
|
||||
var delimiter = '-';
|
||||
var $viewContainer = $('#contentContainer');
|
||||
|
||||
//Associate a function with the history jquery addon that will load the url content after the history is updated.
|
||||
$.history.init(function(url) {
|
||||
if(!url || url.length == 0) {
|
||||
url = layoutManager.defaultUrl;
|
||||
$.history.init(function(hash) {
|
||||
//Remove any prefix characters.
|
||||
if(hash) {
|
||||
if(hash.startsWith('!/')) hash = hash.substring(2);
|
||||
else if(hash.startsWith('/')) hash = hash.substring(1);
|
||||
}
|
||||
|
||||
//Default the hash if not provided.
|
||||
if(!hash || hash.length == 0) {
|
||||
hash = 'menu';
|
||||
}
|
||||
|
||||
//Shouldn't happen - but in case it does then ignore the case.
|
||||
if(lastHash != hash) {
|
||||
var lastHashPageName = getPageName(lastHash);
|
||||
var hashPageName = getPageName(hash);
|
||||
var hashPageData = getPageData(hash);
|
||||
|
||||
lastHash = hash;
|
||||
|
||||
//If the page has changed then load the new page and transition, otherwise transition to the new view within the page.
|
||||
if(!lastHashPageName || lastHashPageName != hashPageName) {
|
||||
$.ajax({url: hashPageName + ".html", dataType: 'html', async: true}).done(function(data) {
|
||||
$viewContainer.fadeOut(250, function() {
|
||||
$viewContainer.empty();
|
||||
$viewContainer.html(data);
|
||||
//TODO: First ensure the view is setup correctly? Use the hash to run the correct handler attached to the view's first element?
|
||||
setupPage($viewContainer.children().first(), hashPageData, false);
|
||||
|
||||
$viewContainer.fadeIn(500, function() {
|
||||
//TODO: Done?
|
||||
});
|
||||
});
|
||||
}).fail(function(error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
else {
|
||||
setupPage($viewContainer.children().first(), hashPageData, true);
|
||||
}
|
||||
}
|
||||
|
||||
layoutManager.show(url);
|
||||
});
|
||||
|
||||
function setupPage($view, data, internal) {
|
||||
var handler = $view.data('display-handler');
|
||||
|
||||
if(handler) {
|
||||
handler(data, internal);
|
||||
}
|
||||
}
|
||||
function getPageName(hash) {
|
||||
if(hash) {
|
||||
var index = hash.indexOf(delimiter);
|
||||
|
||||
if(index > 0) { //Should never be zero.
|
||||
return hash.substring(0, index);
|
||||
}
|
||||
else {
|
||||
return hash;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
function getPageData(hash) {
|
||||
if(hash) {
|
||||
var index = hash.indexOf(delimiter);
|
||||
|
||||
if(index > 0) { //Should never be zero.
|
||||
return hash.substring(index + 1);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
/*
|
||||
var websocket = new WebSocket('ws://petitteton.com/');
|
||||
|
||||
@@ -47,24 +122,24 @@ $(document).ready(function($) {
|
||||
|
||||
|
||||
//Override the jQuery.html(html) function to strip any <runonce>..</runonce> scripts and execute them.
|
||||
(function(){
|
||||
var htmlOriginal = jQuery.fn.html;
|
||||
jQuery.fn.html = function(html) {
|
||||
if(html != undefined) {
|
||||
var data = brainstormFramework.extractViewData(html);
|
||||
|
||||
htmlOriginal.apply(this, [data.view]);
|
||||
|
||||
if(data.script && data.script.length > 0) {
|
||||
try {
|
||||
eval(data.script);
|
||||
} catch(err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
htmlOriginal.apply(this, html);
|
||||
}
|
||||
}
|
||||
})();
|
||||
// (function(){
|
||||
// var htmlOriginal = jQuery.fn.html;
|
||||
// jQuery.fn.html = function(html) {
|
||||
// if(html != undefined) {
|
||||
// var data = brainstormFramework.extractViewData(html);
|
||||
//
|
||||
// htmlOriginal.apply(this, [data.view]);
|
||||
//
|
||||
// if(data.script && data.script.length > 0) {
|
||||
// try {
|
||||
// eval(data.script);
|
||||
// } catch(err) {
|
||||
// alert(err);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// else {
|
||||
// htmlOriginal.apply(this, html);
|
||||
// }
|
||||
// }
|
||||
// })();
|
||||
File diff suppressed because it is too large
Load Diff
8
public/admin/legal.html
Normal file
8
public/admin/legal.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div style="margin: 0 auto;">
|
||||
<div id="legalContent" class="col-xs-12">
|
||||
<div id="copyright">© 2015 Petit Teton LLC | Farm Email <a href="mailto:farmer@petitteton.com">farmer@petitteton.com</a></div>
|
||||
<div id="designedBy" style="">
|
||||
Web Site By: <a href="http://de22.com" style="font-weight: normal" target="_blank">Declarative Engineering LLC</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
55
public/admin/legal.styl
Normal file
55
public/admin/legal.styl
Normal file
@@ -0,0 +1,55 @@
|
||||
|
||||
/* Footer Lines */
|
||||
#footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 200;
|
||||
margin: 0 auto;
|
||||
max-width: 950px;
|
||||
width: 100%;
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
margin-top: 60px;
|
||||
color: black;
|
||||
font-family: verdana, arial, helvetica, sans-serif;
|
||||
font-size: 2em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#copyright a {
|
||||
color: #669;
|
||||
font-family: verdana, arial, helvetica, sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#copyright a:hover {
|
||||
color: #00a55d;
|
||||
}
|
||||
|
||||
#designedBy {
|
||||
margin-top: 26px;
|
||||
font-family: verdana, arial, helvetica, sans-serif;
|
||||
font-size: 1.5em;
|
||||
line-height: .525em;
|
||||
color: #777;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#designedBy a {
|
||||
color: #777;
|
||||
font: Arial, san-serif;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#designedBy a:hover {
|
||||
text-decoration: underline;
|
||||
color: #000;
|
||||
}
|
||||
@@ -1,483 +1,283 @@
|
||||
|
||||
@import url('http://fonts.googleapis.com/css?family=PT+Sans|Grand+Hotel|Open+Sans:400,600');
|
||||
|
||||
html {
|
||||
scrollbar-face-color: #808080;
|
||||
scrollbar-highlight-color: #808080;
|
||||
scrollbar-3dlight-color: #707070;
|
||||
scrollbar-darkshadow-color: #808080;
|
||||
scrollbar-shadow-color: #7e7e7e;
|
||||
scrollbar-arrow-color: #ffffff;
|
||||
scrollbar-track-color: #505050;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body, #archives ul, #overall-footer, #content ul {
|
||||
margin: 0 0 0 0;
|
||||
padding: 0 0 0 0;
|
||||
html, body {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: red;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #F6F6F6;
|
||||
font-family: verdana, arial, helvetica, sans-serif;
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
/* These three styles are to allow for the produce table which spans three columns. */
|
||||
.produceTable .list {
|
||||
list-style-type: none;
|
||||
background: none;
|
||||
text-indent: 0px;
|
||||
}
|
||||
.produceTable .listHeading {
|
||||
font-weight: bold;
|
||||
background: none;
|
||||
text-indent: 0px;
|
||||
}
|
||||
.produceTable .listItem {
|
||||
font-weight: normal;
|
||||
background: none;
|
||||
text-indent: 15px;
|
||||
}
|
||||
|
||||
/* Container Formats */
|
||||
|
||||
#overall {
|
||||
position: relative;
|
||||
#everything {
|
||||
max-width: 950px;
|
||||
min-width: 250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#page {
|
||||
/*background: url('images/GrassBackground_v1.jpg') repeat;
|
||||
background: #F6F6F6;*/
|
||||
background: #FDFDFD;
|
||||
}
|
||||
|
||||
#menu {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Small Devices (phones) */
|
||||
@media(max-width: 549px) {
|
||||
#head {
|
||||
margin: 0 auto;
|
||||
/*background: url(images/Header_v1.jpg) no-repeat top center;
|
||||
height: 171px;*/
|
||||
height: 0px;
|
||||
}
|
||||
.page {
|
||||
margin: 0px auto;
|
||||
padding: 6px 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#menuBackground {
|
||||
height: 20px;
|
||||
max-width: 950px;
|
||||
background: #FFF;
|
||||
}
|
||||
#menu {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
z-index: 200;
|
||||
font-family: "Open Sans", Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: .7em;
|
||||
}
|
||||
#menu a {
|
||||
margin: 0 0 0 9px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid transparent;
|
||||
/* Force the browser to include padding and border as part of the size of the block. */
|
||||
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
|
||||
-moz-box-sizing: border-box; /* Firefox, other Gecko */
|
||||
box-sizing: border-box; /* Opera/IE 8+ */
|
||||
}
|
||||
#menu a:hover {
|
||||
opacity: .7;
|
||||
color: black;
|
||||
border-bottom: 1px solid red;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large(r) Devices (tablets and full computers) */
|
||||
@media(min-width: 550px) {
|
||||
#head {
|
||||
margin: 0 auto;
|
||||
background: url(images/Header_v1.jpg) no-repeat top center;
|
||||
max-width: 950px;
|
||||
height: 171px;
|
||||
}
|
||||
.page {
|
||||
margin: 0px auto;
|
||||
padding: 30px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#menuBackground {
|
||||
height: 31px;
|
||||
max-width: 950px;
|
||||
background: #FFF;
|
||||
}
|
||||
#menu {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
height: 30px;
|
||||
margin-bottom: 1px;
|
||||
z-index: 200;
|
||||
font-family: "Open Sans", Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1em;
|
||||
}
|
||||
#menu a {
|
||||
margin: 0 0 0 16px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
line-height: 30px;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
border-bottom: 3px solid transparent;
|
||||
/* Force the browser to include padding and border as part of the size of the block. */
|
||||
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
|
||||
-moz-box-sizing: border-box; /* Firefox, other Gecko */
|
||||
box-sizing: border-box; /* Opera/IE 8+ */
|
||||
}
|
||||
#menu a.holidayMenuItem {
|
||||
font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 1.3em;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: top;
|
||||
}
|
||||
#menu a.shippingMenuItem {
|
||||
font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 1.3em;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: top;
|
||||
}
|
||||
#menu a:hover {
|
||||
opacity: 1;
|
||||
color: black;
|
||||
background: transparent;
|
||||
border-bottom: 3px solid #a20010;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#title-shadow {
|
||||
position: absolute;
|
||||
top: 227px;
|
||||
left: 106px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: #cacaca;
|
||||
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
font-size: 3.6em;
|
||||
font-weight: bold;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
#title {
|
||||
position: absolute;
|
||||
top: 225px;
|
||||
left: 104px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: #77b145;
|
||||
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
font-size: 3.6em;
|
||||
font-weight: bold;
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
#content {
|
||||
min-height: 700px;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
h1 {
|
||||
white-space: nowrap;
|
||||
color: black;
|
||||
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
font-size: 1.6em;
|
||||
font-weight: 800;
|
||||
padding-left: 0px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h1:after {
|
||||
border-bottom: 2px solid #222;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: inline;
|
||||
color: #333;
|
||||
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
font-size: 1.125em;
|
||||
font-weight: 800;
|
||||
padding-left: 0px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: inline;
|
||||
color: #333;
|
||||
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
font-size: 1em;
|
||||
font-weight: 800;
|
||||
padding-left: 0px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h5 {
|
||||
display: block;
|
||||
color: #333;
|
||||
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
font-size: .875em;
|
||||
font-weight: 400;
|
||||
font-style: oblique;
|
||||
padding-left: 0px;
|
||||
text-transform: uppercase;
|
||||
margin: 60px 0 0px 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
sup, sub {
|
||||
line-height: 0.1em;
|
||||
}
|
||||
|
||||
.submenu {
|
||||
h2:after {
|
||||
border-bottom: 1px solid gray;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media(max-width: 499px) {
|
||||
.columnContainer {
|
||||
width: 250px;
|
||||
}
|
||||
.columned {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
@media(min-width: 500px) and (max-width: 749px) {
|
||||
.columnContainer {
|
||||
width: 500px;
|
||||
}
|
||||
.columned {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
@media(min-width: 750px) {
|
||||
.columnContainer {
|
||||
width: 750px;
|
||||
}
|
||||
.columned {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
.columnContainer {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.columned {
|
||||
-webkit-columns: 250px auto;
|
||||
-moz-columns: 250px auto;
|
||||
columns: 250px auto;
|
||||
-webkit-column-gap: 0px;
|
||||
-moz-column-gap: 0px;
|
||||
column-gap: 0px;
|
||||
}
|
||||
.columnContent {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 4px 15px 4px 15px;
|
||||
width: 220px;
|
||||
display: inline-block;
|
||||
}
|
||||
.columnContent:hover {
|
||||
background: #EEE;
|
||||
}
|
||||
.columnContent {
|
||||
h2 {
|
||||
font-size: 1.1em;
|
||||
font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: oblique;
|
||||
text-transform: uppercase;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
img {
|
||||
width: 220px;
|
||||
}
|
||||
a:hover {
|
||||
background: transparent;
|
||||
color: gray;
|
||||
}
|
||||
img {
|
||||
float: none;
|
||||
display: block;
|
||||
}
|
||||
p {
|
||||
text-align: left;
|
||||
/*font-family: Georgia, serif;*/
|
||||
font-family: 'PT Sans', sans-serif;
|
||||
font-size: .8em;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
p:hover {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Scrolls all five pictures one at a time from right to left. */
|
||||
.scrollViewport {
|
||||
margin: 0;
|
||||
/*
|
||||
width: 805px;
|
||||
height: 145px;
|
||||
*/
|
||||
width: 568px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.scrollPage {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.scrollPage img {
|
||||
width: 130px;
|
||||
height: 90px;
|
||||
border: 0;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
.scrollPage a {
|
||||
/*width: 161px;
|
||||
height: 145px;*/
|
||||
width: 142px;
|
||||
height: 100px;
|
||||
border: 0;
|
||||
background: url('images/shadow_130_90.png') no-repeat scroll 0px 0px;
|
||||
}
|
||||
.scrollPage a:hover {
|
||||
background-color: white;
|
||||
color: white;
|
||||
}
|
||||
.scrollPage div { /* In case it isn't clickable (substitute for <a>)/ */
|
||||
/*width: 161px;
|
||||
height: 145px;*/
|
||||
width: 142px;
|
||||
height: 100px;
|
||||
border: 0;
|
||||
float: left;
|
||||
background: url('images/shadow_130_90.png') no-repeat scroll 0px 0px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
.inlineBlock {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
background: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #ffe184 !important;
|
||||
#contentContainer {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Footer Lines */
|
||||
|
||||
#footer {
|
||||
margin-top: 6px;
|
||||
color: #666;
|
||||
font-family: verdana, arial, helvetica, sans-serif;
|
||||
font-size: 0.7em;
|
||||
text-align: left;
|
||||
#rightBar {
|
||||
position: relative;
|
||||
float: right;
|
||||
width: 75px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: #666;
|
||||
font-family: verdana, arial, helvetica, sans-serif;
|
||||
text-decoration: none;
|
||||
#listView {
|
||||
/*height: 100%;*/
|
||||
flex-flow: column nowrap;
|
||||
/*justify-content: space-around;*/
|
||||
/*align-items: flex-start;*/
|
||||
/*align-content: center;*/
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#footer a:hover {
|
||||
color: #00a55d;
|
||||
.buttonContainer {
|
||||
flex:none;
|
||||
background-color:black;
|
||||
color:white;
|
||||
|
||||
}
|
||||
#dataTable {
|
||||
overflow-y: scroll;
|
||||
flex: auto;
|
||||
align-self: stretch;
|
||||
height: 10%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#designedBy {
|
||||
margin-top: 6px;
|
||||
font: Arial, san-serif;
|
||||
font-size: .5em;
|
||||
line-height: .525em;
|
||||
color: #777;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@require "test2"
|
||||
|
||||
#designedBy a {
|
||||
color: #777;
|
||||
font: Arial, san-serif;
|
||||
font-size: .5em;
|
||||
line-height: .525em;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#designedBy a:hover {
|
||||
text-decoration: underline;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@require "bootstrap"
|
||||
@require "home"
|
||||
@require "editor"
|
||||
@require "users"
|
||||
@require "venues"
|
||||
@require "measures"
|
||||
@require "categories"
|
||||
@require "subcategories"
|
||||
@require "items"
|
||||
@require "sales"
|
||||
//
|
||||
////@import url('//fonts.googleapis.com/css?family=PT+Sans|Grand+Hotel|Open+Sans:400,600');
|
||||
//
|
||||
//* {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
//}
|
||||
//
|
||||
//html {
|
||||
// scrollbar-face-color: #808080;
|
||||
// scrollbar-highlight-color: #808080;
|
||||
// scrollbar-3dlight-color: #707070;
|
||||
// scrollbar-darkshadow-color: #808080;
|
||||
// scrollbar-shadow-color: #7e7e7e;
|
||||
// scrollbar-arrow-color: #ffffff;
|
||||
// scrollbar-track-color: #505050;
|
||||
//}
|
||||
//
|
||||
//body {
|
||||
// background: #F6F6F6;
|
||||
// font-family: verdana, arial, helvetica, sans-serif;
|
||||
// font-size: 1.0em;
|
||||
//}
|
||||
//
|
||||
//html, body {
|
||||
// height: 100%;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// background: red;
|
||||
// margin: 0;
|
||||
//}
|
||||
//
|
||||
//#everything {
|
||||
// max-width: 950px;
|
||||
// min-width: 250px;
|
||||
// margin: 0 auto;
|
||||
// background: white;
|
||||
// width: 100%;
|
||||
//}
|
||||
//
|
||||
//#rightBar {
|
||||
// position: relative;
|
||||
// float: right;
|
||||
// width: 75px;
|
||||
// height: 100%;
|
||||
//}
|
||||
//
|
||||
//#contentContainer {
|
||||
// position: relative;
|
||||
// display: -webkit-box;
|
||||
// display: -moz-box;
|
||||
// display: -ms-flexbox;
|
||||
// display: -moz-flex;
|
||||
// display: -webkit-flex;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// height: 100%;
|
||||
//}
|
||||
//
|
||||
////@media (max-width: 1100px) {
|
||||
//// #contentContainer {
|
||||
//// margin: 0 75px 0 0;
|
||||
//// }
|
||||
////}
|
||||
//
|
||||
//#menuButton, #legalButton, #logoutButton {
|
||||
// color: black;
|
||||
// width: 1em;
|
||||
// height: 1em;
|
||||
//}
|
||||
//
|
||||
//#menuButton:hover, #legalButton:hover, #logoutButton:hover {
|
||||
// text-decoration: none;
|
||||
// color: black;
|
||||
//}
|
||||
//
|
||||
//#menuButton:active, #legalButton:active, #logoutButton:active {
|
||||
// text-decoration: none;
|
||||
// color: black;
|
||||
//}
|
||||
//
|
||||
//#menuButton {
|
||||
// //position: absolute;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// margin: 14px 7px 0 0;
|
||||
// font-size: 5em;
|
||||
//}
|
||||
//
|
||||
//#logoutButton {
|
||||
// //position: absolute;
|
||||
// top: 120px;
|
||||
// right: 0;
|
||||
// margin-right: 14px;
|
||||
// font-size: 3em;
|
||||
//}
|
||||
//
|
||||
//#legalButton {
|
||||
// //position: absolute;
|
||||
// bottom: 0;
|
||||
// right: 0;
|
||||
// margin-right: 14px;
|
||||
// margin-bottom: 14px;
|
||||
// font-size: 3em;
|
||||
//}
|
||||
////
|
||||
////.view:after {
|
||||
//// content: "";
|
||||
//// display: table;
|
||||
//// clear: both;
|
||||
////}
|
||||
//
|
||||
//
|
||||
//p {
|
||||
// text-align: justify;
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
// text-rendering: optimizeLegibility;
|
||||
//}
|
||||
//
|
||||
//h1 {
|
||||
// white-space: nowrap;
|
||||
// color: black;
|
||||
// font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
// font-size: 1.6em;
|
||||
// font-weight: 800;
|
||||
// padding-left: 0px;
|
||||
// text-transform: uppercase;
|
||||
//}
|
||||
//h1:after {
|
||||
// border-bottom: 2px solid #222;
|
||||
// width: 100%;
|
||||
// margin-bottom: 10px;
|
||||
// content: "";
|
||||
// display: block;
|
||||
//}
|
||||
//
|
||||
//h2 {
|
||||
// display: inline;
|
||||
// color: #333;
|
||||
// font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
// font-size: 1.125em;
|
||||
// font-weight: 800;
|
||||
// padding-left: 0px;
|
||||
// text-transform: uppercase;
|
||||
//}
|
||||
//
|
||||
//h3 {
|
||||
// display: inline;
|
||||
// color: #333;
|
||||
// font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
// font-size: 1em;
|
||||
// font-weight: 800;
|
||||
// padding-left: 0px;
|
||||
// text-transform: uppercase;
|
||||
//}
|
||||
//
|
||||
//h5 {
|
||||
// display: block;
|
||||
// color: #333;
|
||||
// font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
|
||||
// font-size: .875em;
|
||||
// font-weight: 400;
|
||||
// font-style: oblique;
|
||||
// padding-left: 0px;
|
||||
// text-transform: uppercase;
|
||||
// margin: 60px 0 0px 0;
|
||||
//}
|
||||
//
|
||||
//li {
|
||||
// list-style-type: none;
|
||||
//}
|
||||
//
|
||||
//sup, sub {
|
||||
// line-height: 0.1em;
|
||||
//}
|
||||
//
|
||||
//.hidden {
|
||||
// display: none;
|
||||
// visibility: hidden;
|
||||
//}
|
||||
//
|
||||
//.clickable {
|
||||
// cursor: pointer;
|
||||
// cursor: hand;
|
||||
//}
|
||||
//
|
||||
//.inlineBlock {
|
||||
// display: inline-block;
|
||||
//}
|
||||
//
|
||||
//.modal-dialog {
|
||||
// background: white;
|
||||
//}
|
||||
//
|
||||
//.selected {
|
||||
// background-color: #ffe184 !important;
|
||||
//}
|
||||
//
|
||||
//@require "bootstrap"
|
||||
//@require "editableSelect"
|
||||
//@require "menu"
|
||||
//@require "configMenu"
|
||||
//@require "legal"
|
||||
//@require "editor"
|
||||
//@require "users"
|
||||
//@require "venues"
|
||||
//@require "measures"
|
||||
//@require "categories"
|
||||
//@require "subcategories"
|
||||
//@require "items"
|
||||
//@require "sales"
|
||||
@@ -1,10 +1,8 @@
|
||||
<div id="measures" class="page">
|
||||
<div class="col-sm-12 col-sm-offset-0">
|
||||
<div id="listView" class="view">
|
||||
<div class="buttonContainer">
|
||||
<h1><span class="fa fa-users"></span> Manage Measures</h1>
|
||||
|
||||
<!-- Main Page Content -->
|
||||
<h1><span class="fa fa-users"></span> Manage Measures</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>
|
||||
@@ -25,244 +23,251 @@
|
||||
</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">×</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>
|
||||
<!-- 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">×</button>
|
||||
<h4 class="modal-title"></h4>
|
||||
</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>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the measure <span id="deleteName"></span>?
|
||||
<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="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">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">×</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>
|
||||
|
||||
<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) {
|
||||
$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/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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//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 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 Measure");
|
||||
//Reset fields to default values.
|
||||
$editorDialog.find("#DFName").val("");
|
||||
$editorDialog.find("#DFPostfix").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 Measure");
|
||||
//Reset fields to selected values.
|
||||
$editorDialog.find('#DFName').val(dataTable.getSelectedRow().data("model").name);
|
||||
$editorDialog.find('#DFPostfix').val(dataTable.getSelectedRow().data("model").postfix);
|
||||
//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/Measure/create", type: "POST", dataType: "json", data: encodeData({
|
||||
name: $editorForm.find("#DFName").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) {
|
||||
$.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) $editorDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$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) {
|
||||
$.ajax({url: "data/Measure/delete", type: "POST", dataType: "json", data: encodeData({where: {id: dataTable.getSelectedRow().data("model").id}})}).done(function(data) {
|
||||
$deleteDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
$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>
|
||||
</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>
|
||||
@@ -1,2 +1,30 @@
|
||||
#measures {
|
||||
height: 100%;
|
||||
|
||||
#listView {
|
||||
height: 100%;
|
||||
//Flex container options.
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: flex-start; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: center; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
.buttonContainer {
|
||||
//Flex element options.
|
||||
flex: 0 0; //Grow, Shrink, Basis
|
||||
}
|
||||
|
||||
#dataTable {
|
||||
overflow: auto;
|
||||
//Flex element options.
|
||||
flex: 1 1 120px; //Grow, Shrink, Basis
|
||||
align-self: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
14
public/admin/menu.html
Normal file
14
public/admin/menu.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div id="menu" class="page">
|
||||
<a class="option" href="#!/sales">
|
||||
<i class="fa fa-usd"></i>
|
||||
<p>Sales</p>
|
||||
</a>
|
||||
<a class="option" href="#!/items">
|
||||
<i class="fa fa-sitemap"></i>
|
||||
<p>Items</p>
|
||||
</a>
|
||||
<a class="option" href="#!/configMenu">
|
||||
<i class="fa fa-cog"></i>
|
||||
<p>Settings</p>
|
||||
</a>
|
||||
</div>
|
||||
56
public/admin/menu.styl
Normal file
56
public/admin/menu.styl
Normal file
@@ -0,0 +1,56 @@
|
||||
#menu {
|
||||
flex: 0 0 100%;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: flex-start; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: flex-start; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
width: 100%;
|
||||
|
||||
.option {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
background: grey;
|
||||
margin: 20px;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
//Flex element options.
|
||||
flex: 0 0 120px; //Grow, Shrink, Basis
|
||||
//Flex container options.
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: center; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: center; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
|
||||
i {
|
||||
flex: 0 0;
|
||||
font-size: 8em;
|
||||
}
|
||||
p {
|
||||
flex: 0 0;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.option:hover {
|
||||
-moz-box-shadow: inset 0 0 20px #7a5a7a;
|
||||
-webkit-box-shadow: inset 0 0 20px #7a5a7a;
|
||||
box-shadow: inset 0 0 20px #7a5a7a;
|
||||
}
|
||||
.option:active {
|
||||
background: #CCC;
|
||||
}
|
||||
}
|
||||
@@ -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">×</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">×</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">×</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>
|
||||
@@ -1,3 +1,34 @@
|
||||
#sales {
|
||||
height: 100%;
|
||||
|
||||
#listView {
|
||||
height: 100%;
|
||||
//Flex container options.
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: flex-start; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: center; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
.buttonContainer {
|
||||
//Flex element options.
|
||||
flex: 0 0; //Grow, Shrink, Basis
|
||||
}
|
||||
|
||||
#dataTable {
|
||||
min-height: 200px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
//Flex element options.
|
||||
flex: 1 1 120px; //Grow, Shrink, Basis
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,12 @@
|
||||
<div id="subcategories" class="page">
|
||||
<div class="col-sm-12 col-sm-offset-0">
|
||||
<div id="listView" class="view">
|
||||
<div class="buttonContainer">
|
||||
<!-- Main Page Content -->
|
||||
<h1><span class="fa fa-users"></span> Manage Subcategories</h1>
|
||||
|
||||
<!-- Main Page Content -->
|
||||
<h1><span class="fa fa-users"></span> Manage Subcategories</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="#!/subcategories-create"><span>New</span></a>
|
||||
<a id="editButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="#!/subcategories-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>
|
||||
<a id="restoreButton" class="btn btn-default buttons-selected buttons-restore" tabindex="0" href="javaScript:void(0);"><span>Restore</span></a>
|
||||
</div>
|
||||
@@ -25,282 +24,276 @@
|
||||
</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="DFName">Name</label>
|
||||
<div class="form-group">
|
||||
<input name="name" id="DFName" type="text" class="form-control" tabindex="0" placeholder="Jam" required>
|
||||
</div>
|
||||
<label for="DFCategory">Category</label>
|
||||
<div class="form-group">
|
||||
<select name="category" id="DFCategory" 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>
|
||||
<!-- 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>
|
||||
</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>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the subcategory <span id="deleteName"></span>?
|
||||
<label for="DFName">Name</label>
|
||||
<div class="form-group">
|
||||
<input name="name" id="DFName" type="text" class="form-control" tabindex="0" placeholder="Jam" required/>
|
||||
</div>
|
||||
<label for="DFCategory">Category</label>
|
||||
<div class="form-group">
|
||||
<input name="categoryId" id="DFCategoryId" type="hidden"/>
|
||||
<input name="category" id="DFCategory" class="form-control" tabindex="0" required/>
|
||||
</div>
|
||||
</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='#!/subcategories'">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">×</button>
|
||||
<h4 class="modal-title">Delete Item</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the subcategory <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>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">//# sourceURL=subcategories.html
|
||||
$(function() {
|
||||
var $page = $('#subcategories');
|
||||
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/Subcategory/readAll",
|
||||
attr: "data-key-name",
|
||||
selection: "row",
|
||||
parameters: function() {
|
||||
return {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
|
||||
},
|
||||
selectionChanged: selectionChanged,
|
||||
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;
|
||||
}, {});
|
||||
|
||||
return byId;
|
||||
}}],
|
||||
cellDataHandlers: {category: function($cell, subcategory, supportingData) {
|
||||
try {
|
||||
var category = supportingData.categories[subcategory.categoryId];
|
||||
|
||||
$cell.html(category.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();
|
||||
});
|
||||
|
||||
//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/Subcategory/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", {request: JSON.stringify({order: ['name', ['name']]})})];
|
||||
|
||||
//Update the dialog drop downs when the queries finish.
|
||||
$.when.apply($, queries).then(function(query1) {
|
||||
var categories = query1;
|
||||
var categoriesData = [];
|
||||
|
||||
//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];
|
||||
|
||||
categoriesData.push({id: '' + nextCategory.id, text: nextCategory.name});
|
||||
}
|
||||
|
||||
//Initialize the data for the dropdown.
|
||||
$editorForm.find("#DFCategory").select2({data: categoriesData}).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 Subcategory");
|
||||
//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 Subcategory");
|
||||
//Reset fields to selected values.
|
||||
$editorDialog.find('#DFName').val(dataTable.getSelectedRow().data("model").name);
|
||||
$editorDialog.find('#DFCategory').val(dataTable.getSelectedRow().data("model").categoryId).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/Subcategory/create", type: "POST", dataType: "json", data: encodeData({
|
||||
name: $editorForm.find("#DFName").val(),
|
||||
categoryId: parseInt($editorForm.find("#DFCategory").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) {
|
||||
$.ajax({url: "data/Subcategory/edit", type: "POST", dataType: "json", data: encodeData({
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
name: $editorForm.find("#DFName").val(),
|
||||
categoryId: parseInt($editorForm.find("#DFCategory").val())
|
||||
})}).done(function(data) {
|
||||
if(close) $editorDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$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) {
|
||||
$.ajax({url: "data/Subcategory/delete", type: "POST", dataType: "json", data: encodeData({where: {id: dataTable.getSelectedRow().data("model").id}})}).done(function(data) {
|
||||
$deleteDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
$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>
|
||||
</div>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">//# sourceURL=subcategories.html
|
||||
$(function() {
|
||||
var $page = $('#subcategories');
|
||||
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/Subcategory/readAll",
|
||||
attr: "data-key-name",
|
||||
selection: "row",
|
||||
parameters: function() {
|
||||
return {paranoid: !$page.find('#includeDeletedToggle').is(":checked")};
|
||||
},
|
||||
selectionChanged: selectionChanged,
|
||||
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;
|
||||
}, {});
|
||||
|
||||
return byId;
|
||||
}}],
|
||||
cellDataHandlers: {category: function($cell, subcategory, supportingData) {
|
||||
try {
|
||||
var category = supportingData.categories[subcategory.categoryId];
|
||||
|
||||
$cell.html(category.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);
|
||||
}
|
||||
}
|
||||
});
|
||||
$page.find('#dataTable').on('dblclick', 'tr', function(event) {
|
||||
if(dataTable.getSelectedRow()) {
|
||||
location.hash = "#!/subcategories-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/Subcategory/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.");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var $listView = $page.find('#listView');
|
||||
var $editorView = $page.find('#editorView');
|
||||
var $deleteView = $page.find('#deleteView');
|
||||
|
||||
//+++++++++++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++++ Create/Edit Views ++++++++++++
|
||||
|
||||
var $editorForm = $editorView.find('form');
|
||||
var queries = [$.get("data/Category/readAll", {request: JSON.stringify({order: ['name', ['name']]})})];
|
||||
|
||||
//Update the dialog drop downs when the queries finish.
|
||||
$.when.apply($, queries).then(function(query1) {
|
||||
//Initialize the drop down menu.
|
||||
$editorForm.find("#DFCategory").buildEditableSelect(query1, {textAttr: 'name', listClass: 'comboList'});
|
||||
//Initialize the validator
|
||||
$editorForm.validator();
|
||||
});
|
||||
|
||||
//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.
|
||||
$editorView.find("#DFCreate, #DFCreatePlus").show();
|
||||
$editorView.find("#DFSave").hide();
|
||||
$editorView.find(".modal-title").text("Create Subcategory");
|
||||
//Reset fields to default values.
|
||||
$editorView.find("#DFName").val("");
|
||||
showView($editorView, $editorView.find("#DFName"), internal);
|
||||
break;
|
||||
case 'edit':
|
||||
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 Subcategory");
|
||||
//Reset fields to selected values.
|
||||
$editorView.find('#DFName').val(dataTable.getSelectedRow().data("model").name);
|
||||
$editorView.find('#DFCategoryId').val(dataTable.getSelectedRow().data("model").categoryId).trigger("change");
|
||||
showView($editorView, $editorView.find("#DFName"), internal);
|
||||
}
|
||||
else {
|
||||
//Change the hash without adding to the history.
|
||||
history.replaceState(undefined, undefined, "#!/sales")
|
||||
}
|
||||
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/Subcategory/create", type: "POST", dataType: "json", data: encodeData({
|
||||
name: $editorForm.find("#DFName").val(),
|
||||
categoryId: parseInt($editorForm.find("#DFCategoryId").val())
|
||||
})}).done(function(data) {
|
||||
if(close) window.location.hash = "#!/subcategories";
|
||||
}).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/Subcategory/edit", type: "POST", dataType: "json", data: encodeData({
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
name: $editorForm.find("#DFName").val(),
|
||||
categoryId: parseInt($editorForm.find("#DFCategory").val())
|
||||
})}).done(function(data) {
|
||||
if(close) window.location.hash = "#!/subcategories";
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//++++++++++++++++++++++++++++++++++++++
|
||||
// ++++++++++ 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) {
|
||||
$.ajax({url: "data/Subcategory/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>
|
||||
@@ -1,4 +1,33 @@
|
||||
#subcategories {
|
||||
height: 100%;
|
||||
|
||||
#listView {
|
||||
height: 100%;
|
||||
//Flex container options.
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: flex-start; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: center; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
.buttonContainer {
|
||||
//Flex element options.
|
||||
flex: 0 0; //Grow, Shrink, Basis
|
||||
}
|
||||
|
||||
#dataTable {
|
||||
overflow: auto;
|
||||
//Flex element options.
|
||||
flex: 1 1 120px; //Grow, Shrink, Basis
|
||||
align-self: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownSelection {
|
||||
background-color: #cad0ff;
|
||||
}
|
||||
|
||||
@@ -1,290 +1,287 @@
|
||||
<div id="users" class="page">
|
||||
<div class="col-sm-12 col-sm-offset-0">
|
||||
|
||||
<div class="buttonContainer">
|
||||
<!-- Main Page Content -->
|
||||
<h1><span class="fa fa-users"></span> Manage Users</h1>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<div class="dt-buttons btn-group">
|
||||
<a id="createButton" class="btn btn-default buttons-create" tabindex="0" href="javaScript:void(0);"><span>New</span></a>
|
||||
<a id="changeLoginButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="javaScript:void(0);"><span>Change Login</span></a>
|
||||
<a id="resetPasswordButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="javaScript:void(0);"><span>Reset Password</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 class="dt-buttons btn-group">
|
||||
<a id="createButton" class="btn btn-default buttons-create" tabindex="0" href="javaScript:void(0);"><span>New</span></a>
|
||||
<a id="changeLoginButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="javaScript:void(0);"><span>Change Login</span></a>
|
||||
<a id="resetPasswordButton" class="btn btn-default buttons-selected buttons-edit" tabindex="0" href="javaScript:void(0);"><span>Reset Password</span></a>
|
||||
<a id="deleteButton" class="btn btn-default buttons-selected buttons-remove" tabindex="0" href="javaScript:void(0);"><span>Delete</span></a>
|
||||
</div>
|
||||
<table id="dataTable" class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-key-name="login">Name</th>
|
||||
<th data-key-name="admin">Admin</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<!-- Create Dialog -->
|
||||
<div id="createUserDialog" 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 User</h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Login</label>
|
||||
<input name="login" id="DFLogin" type="text" class="form-control" tabindex="0" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input name="password" id="DFPassword" type="password" class="form-control" tabindex="0" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFCreateSave" type="button" class="btn btn-default btn-primary btn-md" tabindex="0">Create</button>
|
||||
<button id="DFCreateSavePlus" type="button" class="btn btn-primary btn-md" tabindex="0">Create++</button>
|
||||
<button id="DFCreateCancel" type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reset Password Dialog -->
|
||||
<div id="resetPasswordDialog" 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">Reset Password</h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input name="password" id="DFResetPassword" type="password" class="form-control" tabindex="0" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFResetPasswordSave" type="button" class="btn btn-default btn-warning btn-md" tabindex="0">Save</button>
|
||||
<button id="DFResetPasswordCancel" type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Login Dialog -->
|
||||
<div id="changeLoginDialog" class="modal fade" role="dialog">
|
||||
<div id="changeLoginDialogInner" class="modal-dialog">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Change Login</h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Login</label>
|
||||
<input name="login" id="DFChangeLogin" type="text" class="form-control" tabindex="0" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFChangeLoginSave" type="button" class="btn btn-default btn-warning btn-md" tabindex="0">Save</button>
|
||||
<button id="DFChangeLoginCancel" type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Dialog -->
|
||||
<div id="deleteUserDialog" 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 User</h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the user <span id="deleteUserDialogUserName"></span>?
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFDelete" type="button" class="btn btn-default btn-warning btn-md" tabindex="0">Delete</button>
|
||||
<button id="DFDeleteCancel" type="button" class="btn" data-dismiss="modal" tabindex="1">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">//# sourceURL=users.html
|
||||
$(function() {
|
||||
var $page = $('#users');
|
||||
var $btnCreate = $page.find("#createButton");
|
||||
var $btnChangeLogin = $page.find("#changeLoginButton");
|
||||
var $btnResetPassword = $page.find("#resetPasswordButton");
|
||||
var $btnDelete = $page.find("#deleteButton");
|
||||
var $createUserDialog = $page.find('#createUserDialog');
|
||||
var $resetPasswordDialog = $page.find('#resetPasswordDialog');
|
||||
var $changeLoginDialog = $page.find('#changeLoginDialog');
|
||||
var $deleteUserDialog = $page.find('#deleteUserDialog');
|
||||
|
||||
var $createUserForm = $createUserDialog.find('form');
|
||||
var $resetPasswordForm = $resetPasswordDialog.find('form');
|
||||
var $changeLoginForm = $changeLoginDialog.find('form');
|
||||
|
||||
$btnChangeLogin.disable(true);
|
||||
$btnDelete.disable(true);
|
||||
$btnResetPassword.disable(true);
|
||||
|
||||
var selectionChanged = function($tr, model) {
|
||||
if($tr && model) {
|
||||
$btnChangeLogin.disable(false);
|
||||
$btnResetPassword.disable(false);
|
||||
$btnDelete.disable(false);
|
||||
}
|
||||
else {
|
||||
$btnChangeLogin.disable(true);
|
||||
$btnResetPassword.disable(true);
|
||||
$btnDelete.disable(true);
|
||||
}
|
||||
};
|
||||
|
||||
var dataTable = new LinkedTable($page.find('#dataTable'), {
|
||||
url: "data/User/readAll",
|
||||
attr: "data-key-name",
|
||||
selection: "row",
|
||||
selectionChanged: selectionChanged
|
||||
});
|
||||
|
||||
//Call the refresh user table function once initially.
|
||||
dataTable.build();
|
||||
|
||||
//----------------------------
|
||||
//---- Create User Dialog ----
|
||||
|
||||
//Initialize the validator
|
||||
$createUserForm.validator();
|
||||
|
||||
$btnCreate.on("click", function(event) {
|
||||
$createUserDialog.modal();
|
||||
});
|
||||
$createUserDialog.find("#DFCreateSave").on("click", function(event) {
|
||||
$createUserForm.data('bs.validator').validate(function(isValid) {
|
||||
if(isValid) {
|
||||
$.ajax({
|
||||
url: "data/User/create", type: "POST", dataType: "json", data: encodeData({
|
||||
login: $createUserDialog.find("#DFLogin").val(),
|
||||
password: $createUserDialog.find("#DFPassword").val()
|
||||
})
|
||||
}).done(function(data) {
|
||||
$createUserDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$createUserDialog.find("#DFCreateSave").on("click", function(event) {
|
||||
$createUserDialog.modal('hide');
|
||||
});
|
||||
$createUserDialog.on('shown.bs.modal', function() {
|
||||
$createUserDialog.find('#DFLogin').focus();
|
||||
});
|
||||
|
||||
//------------------------------
|
||||
//----- Change Login Dialog ----
|
||||
|
||||
//Initialize the validator
|
||||
$changeLoginForm.validator();
|
||||
|
||||
$btnChangeLogin.on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$changeLoginDialog.find('#changeLoginDialogLogin').val(dataTable.getSelectedRow().data("model").login);
|
||||
$changeLoginDialog.modal();
|
||||
}
|
||||
});
|
||||
$changeLoginDialog.find("#DFChangeLoginSave").on("click", function(event) {
|
||||
$changeLoginForm.data('bs.validator').validate(function(isValid) {
|
||||
if(isValid) {
|
||||
$.ajax({
|
||||
url: "data/User/update", type: "POST", dataType: "json", data: encodeData({
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
login: $changeLoginDialog("#DFChangeLogin").val()
|
||||
})
|
||||
}).done(function(data) {
|
||||
$changeLoginDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$changeLoginDialog.find("#DFChangeLoginCancel").on("click", function(event) {
|
||||
$changeLoginDialog.modal('hide');
|
||||
});
|
||||
$changeLoginDialog.on('shown.bs.modal', function() {
|
||||
$changeLoginDialog.find('#DFChangeLogin').focus().select();
|
||||
});
|
||||
|
||||
//-------------------------------
|
||||
//---- Reset Password Dialog ----
|
||||
|
||||
//Initialize the validator
|
||||
$resetPasswordForm.validator();
|
||||
|
||||
$btnResetPassword.on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$resetPasswordDialog.modal();
|
||||
}
|
||||
});
|
||||
$resetPasswordDialog.find("#DFResetPasswordSave").on("click", function(event) {
|
||||
$resetPasswordForm.data('bs.validator').validate(function(isValid) {
|
||||
if(isValid) {
|
||||
$.ajax({
|
||||
url: "data/User/update", type: "POST", dataType: "json", data: encodeData({
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
password: $resetPasswordDialog.find("#DFResetPassword").val()
|
||||
})
|
||||
}).done(function(data) {
|
||||
$resetPasswordDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$resetPasswordDialog.find("#DFResetPasswordCancel").on("click", function(event) {
|
||||
$resetPasswordDialog.modal('hide');
|
||||
});
|
||||
$resetPasswordDialog.on('shown.bs.modal', function() {
|
||||
$resetPasswordDialog.find('#DFResetPassword').focus();
|
||||
});
|
||||
|
||||
//----------------------------
|
||||
//---- Delete User Dialog ----
|
||||
|
||||
$btnDelete.on("click", function(event) {
|
||||
//debugger;
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
//Note: This assumes that the first column is the user login (name).
|
||||
//$("#users #deleteUserDialogUserName").html($("td", userTable.getSelectedRow())[0].innerHTML);
|
||||
$deleteUserDialog.find("#deleteUserDialogUserName").html(dataTable.getSelectedRow().data("model").login);
|
||||
$deleteUserDialog.modal();
|
||||
}
|
||||
});
|
||||
$deleteUserDialog.find("#DFDelete").on("click", function(event) {
|
||||
$.ajax({url: "data/User/delete", type: "POST", dataType: "json", data: encodeData({where: {id: dataTable.getSelectedRow().data("model").id}})}).done(function(data) {
|
||||
$deleteUserDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
});
|
||||
$deleteUserDialog.find("#DFDeleteCancel").on("click", function(event) {
|
||||
$deleteUserDialog.modal('hide');
|
||||
});
|
||||
$deleteUserDialog.on('shown.bs.modal', function() {
|
||||
$deleteUserDialog.find('#DFDeleteCancel').focus();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<table id="dataTable" class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-key-name="login">Name</th>
|
||||
<th data-key-name="admin">Admin</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<!-- Create Dialog -->
|
||||
<div id="createUserDialog" 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 User</h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Login</label>
|
||||
<input name="login" id="DFLogin" type="text" class="form-control" tabindex="0" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input name="password" id="DFPassword" type="password" class="form-control" tabindex="0" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFCreateSave" type="button" class="btn btn-default btn-primary btn-md" tabindex="0">Create</button>
|
||||
<button id="DFCreateSavePlus" type="button" class="btn btn-primary btn-md" tabindex="0">Create++</button>
|
||||
<button id="DFCreateCancel" type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reset Password Dialog -->
|
||||
<div id="resetPasswordDialog" 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">Reset Password</h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input name="password" id="DFResetPassword" type="password" class="form-control" tabindex="0" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFResetPasswordSave" type="button" class="btn btn-default btn-warning btn-md" tabindex="0">Save</button>
|
||||
<button id="DFResetPasswordCancel" type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Login Dialog -->
|
||||
<div id="changeLoginDialog" class="modal fade" role="dialog">
|
||||
<div id="changeLoginDialogInner" class="modal-dialog">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Change Login</h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label>Login</label>
|
||||
<input name="login" id="DFChangeLogin" type="text" class="form-control" tabindex="0" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFChangeLoginSave" type="button" class="btn btn-default btn-warning btn-md" tabindex="0">Save</button>
|
||||
<button id="DFChangeLoginCancel" type="button" class="btn" data-dismiss="modal" tabindex="0">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Dialog -->
|
||||
<div id="deleteUserDialog" 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 User</h4>
|
||||
</div>
|
||||
<form role="form" autocomplete="off">
|
||||
<div class="modal-body">
|
||||
Are you certain you wish to delete the user <span id="deleteUserDialogUserName"></span>?
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="DFDelete" type="button" class="btn btn-default btn-warning btn-md" tabindex="0">Delete</button>
|
||||
<button id="DFDeleteCancel" type="button" class="btn" data-dismiss="modal" tabindex="1">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script language="JavaScript" type="text/javascript">//# sourceURL=users.html
|
||||
$(function() {
|
||||
var $page = $('#users');
|
||||
var $btnCreate = $page.find("#createButton");
|
||||
var $btnChangeLogin = $page.find("#changeLoginButton");
|
||||
var $btnResetPassword = $page.find("#resetPasswordButton");
|
||||
var $btnDelete = $page.find("#deleteButton");
|
||||
var $createUserDialog = $page.find('#createUserDialog');
|
||||
var $resetPasswordDialog = $page.find('#resetPasswordDialog');
|
||||
var $changeLoginDialog = $page.find('#changeLoginDialog');
|
||||
var $deleteUserDialog = $page.find('#deleteUserDialog');
|
||||
|
||||
var $createUserForm = $createUserDialog.find('form');
|
||||
var $resetPasswordForm = $resetPasswordDialog.find('form');
|
||||
var $changeLoginForm = $changeLoginDialog.find('form');
|
||||
|
||||
$btnChangeLogin.disable(true);
|
||||
$btnDelete.disable(true);
|
||||
$btnResetPassword.disable(true);
|
||||
|
||||
var selectionChanged = function($tr, model) {
|
||||
if($tr && model) {
|
||||
$btnChangeLogin.disable(false);
|
||||
$btnResetPassword.disable(false);
|
||||
$btnDelete.disable(false);
|
||||
}
|
||||
else {
|
||||
$btnChangeLogin.disable(true);
|
||||
$btnResetPassword.disable(true);
|
||||
$btnDelete.disable(true);
|
||||
}
|
||||
};
|
||||
|
||||
var dataTable = new LinkedTable($page.find('#dataTable'), {
|
||||
url: "data/User/readAll",
|
||||
attr: "data-key-name",
|
||||
selection: "row",
|
||||
selectionChanged: selectionChanged
|
||||
});
|
||||
|
||||
//Call the refresh user table function once initially.
|
||||
dataTable.build();
|
||||
|
||||
//----------------------------
|
||||
//---- Create User Dialog ----
|
||||
|
||||
//Initialize the validator
|
||||
$createUserForm.validator();
|
||||
|
||||
$btnCreate.on("click", function(event) {
|
||||
$createUserDialog.modal();
|
||||
});
|
||||
$createUserDialog.find("#DFCreateSave").on("click", function(event) {
|
||||
$createUserForm.data('bs.validator').validate(function(isValid) {
|
||||
if(isValid) {
|
||||
$.ajax({
|
||||
url: "data/User/create", type: "POST", dataType: "json", data: encodeData({
|
||||
login: $createUserDialog.find("#DFLogin").val(),
|
||||
password: $createUserDialog.find("#DFPassword").val()
|
||||
})
|
||||
}).done(function(data) {
|
||||
$createUserDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$createUserDialog.find("#DFCreateSave").on("click", function(event) {
|
||||
$createUserDialog.modal('hide');
|
||||
});
|
||||
$createUserDialog.on('shown.bs.modal', function() {
|
||||
$createUserDialog.find('#DFLogin').focus();
|
||||
});
|
||||
|
||||
//------------------------------
|
||||
//----- Change Login Dialog ----
|
||||
|
||||
//Initialize the validator
|
||||
$changeLoginForm.validator();
|
||||
|
||||
$btnChangeLogin.on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$changeLoginDialog.find('#changeLoginDialogLogin').val(dataTable.getSelectedRow().data("model").login);
|
||||
$changeLoginDialog.modal();
|
||||
}
|
||||
});
|
||||
$changeLoginDialog.find("#DFChangeLoginSave").on("click", function(event) {
|
||||
$changeLoginForm.data('bs.validator').validate(function(isValid) {
|
||||
if(isValid) {
|
||||
$.ajax({
|
||||
url: "data/User/update", type: "POST", dataType: "json", data: encodeData({
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
login: $changeLoginDialog("#DFChangeLogin").val()
|
||||
})
|
||||
}).done(function(data) {
|
||||
$changeLoginDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$changeLoginDialog.find("#DFChangeLoginCancel").on("click", function(event) {
|
||||
$changeLoginDialog.modal('hide');
|
||||
});
|
||||
$changeLoginDialog.on('shown.bs.modal', function() {
|
||||
$changeLoginDialog.find('#DFChangeLogin').focus().select();
|
||||
});
|
||||
|
||||
//-------------------------------
|
||||
//---- Reset Password Dialog ----
|
||||
|
||||
//Initialize the validator
|
||||
$resetPasswordForm.validator();
|
||||
|
||||
$btnResetPassword.on("click", function(event) {
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
$resetPasswordDialog.modal();
|
||||
}
|
||||
});
|
||||
$resetPasswordDialog.find("#DFResetPasswordSave").on("click", function(event) {
|
||||
$resetPasswordForm.data('bs.validator').validate(function(isValid) {
|
||||
if(isValid) {
|
||||
$.ajax({
|
||||
url: "data/User/update", type: "POST", dataType: "json", data: encodeData({
|
||||
id: dataTable.getSelectedRow().data("model").id,
|
||||
password: $resetPasswordDialog.find("#DFResetPassword").val()
|
||||
})
|
||||
}).done(function(data) {
|
||||
$resetPasswordDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
$resetPasswordDialog.find("#DFResetPasswordCancel").on("click", function(event) {
|
||||
$resetPasswordDialog.modal('hide');
|
||||
});
|
||||
$resetPasswordDialog.on('shown.bs.modal', function() {
|
||||
$resetPasswordDialog.find('#DFResetPassword').focus();
|
||||
});
|
||||
|
||||
//----------------------------
|
||||
//---- Delete User Dialog ----
|
||||
|
||||
$btnDelete.on("click", function(event) {
|
||||
//debugger;
|
||||
if(dataTable.getSelectedRow() != null) {
|
||||
//Note: This assumes that the first column is the user login (name).
|
||||
//$("#users #deleteUserDialogUserName").html($("td", userTable.getSelectedRow())[0].innerHTML);
|
||||
$deleteUserDialog.find("#deleteUserDialogUserName").html(dataTable.getSelectedRow().data("model").login);
|
||||
$deleteUserDialog.modal();
|
||||
}
|
||||
});
|
||||
$deleteUserDialog.find("#DFDelete").on("click", function(event) {
|
||||
$.ajax({url: "data/User/delete", type: "POST", dataType: "json", data: encodeData({where: {id: dataTable.getSelectedRow().data("model").id}})}).done(function(data) {
|
||||
$deleteUserDialog.modal("hide");
|
||||
dataTable.refresh();
|
||||
}).fail(function(data) {
|
||||
alert("Server call failed.");
|
||||
});
|
||||
});
|
||||
$deleteUserDialog.find("#DFDeleteCancel").on("click", function(event) {
|
||||
$deleteUserDialog.modal('hide');
|
||||
});
|
||||
$deleteUserDialog.on('shown.bs.modal', function() {
|
||||
$deleteUserDialog.find('#DFDeleteCancel').focus();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -1,4 +1,33 @@
|
||||
#users {
|
||||
height: 100%;
|
||||
|
||||
#listView {
|
||||
height: 100%;
|
||||
//Flex container options.
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: flex-start; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: center; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
.buttonContainer {
|
||||
//Flex element options.
|
||||
flex: 0 0; //Grow, Shrink, Basis
|
||||
}
|
||||
|
||||
#dataTable {
|
||||
overflow: auto;
|
||||
//Flex element options.
|
||||
flex: 1 1 120px; //Grow, Shrink, Basis
|
||||
align-self: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #ffe184 !important;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,30 @@
|
||||
#venues {
|
||||
height: 100%;
|
||||
|
||||
#listView {
|
||||
height: 100%;
|
||||
//Flex container options.
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-around; //Spacing between items along the primary axis. (vertical spacing for a column layout)
|
||||
align-items: flex-start; //Align the items within a line along the primary axis. (horizontal alignment for a column layout)
|
||||
align-content: center; //Spacing between lines along the secondary axis. (spacing between columns for a column layout)
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -moz-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
.buttonContainer {
|
||||
//Flex element options.
|
||||
flex: 0 0; //Grow, Shrink, Basis
|
||||
}
|
||||
|
||||
#dataTable {
|
||||
overflow: auto;
|
||||
//Flex element options.
|
||||
flex: 1 1 120px; //Grow, Shrink, Basis
|
||||
align-self: stretch;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -67,7 +67,7 @@ function LayoutManager(view) {
|
||||
// Example:
|
||||
// layoutManager.viewMetadata = {
|
||||
// home: {
|
||||
// url: 'home.html',
|
||||
// url: 'menu.html',
|
||||
// classes: ['fullPage'],
|
||||
// load: 'alert("starting loading home");',
|
||||
// loaded: 'alert("loaded home");',
|
||||
|
||||
Reference in New Issue
Block a user