hypothetical/resources/assets/js/dashboard.js

928 lines
29 KiB
JavaScript
Raw Normal View History

const $loadingModal = $("#loading-modal"),
fadeTime = 250;
// show the loading modal
function showLoadingModal() {
$loadingModal.css({
visibility: "visible",
opacity: 1
});
}
// hide the loading modal
function hideLoadingModal() {
$loadingModal.css({ opacity: 0 });
setTimeout(function() {
$loadingModal.css({ visibility: "hidden" });
}, fadeTime);
}
// declare a reverse function for jquery
jQuery.fn.reverse = [].reverse;
// show the confirmation modal and run the supplied command if confirm is pressed
function askConfirmation(message, command, cancelCommand) {
const $confirmationModal = $("#confirmation-modal"),
$heading = $confirmationModal.find(".card-header"),
$cancelButton = $confirmationModal.find(".btn.cancel-button"),
$confirmButton = $confirmationModal.find(".btn.confirm-button");
// close the confirmation modal and unbind its events
const closeConfirmationModal = function() {
// unbind events
$(document).off("keydown", escapeModal);
$cancelButton.off("click", closeConfirmationModal);
$confirmButton.off("click", confirmModal);
// clear the heading
$heading.empty();
// hide the modal
$confirmationModal.css({ opacity: 0 });
setTimeout(function() {
$confirmationModal.css({ visibility: "hidden" });
}, fadeTime);
};
// close the modal if the escape button is pressed
const escapeModal = function(e) {
if (e.keyCode === 27) {
closeConfirmationModal();
} else {
e.preventDefault();
}
};
// functionality to run when clicking the confirm button
const confirmModal = function() {
command();
closeConfirmationModal();
};
// functionality to run when clicking the cancel button
const cancelModal = function() {
if (cancelCommand !== undefined) {
cancelCommand();
}
closeConfirmationModal();
};
// hide the modal when the cancel button is pressed
$cancelButton.on("click", cancelModal);
// hide the modal when the escape key is pressed
$(document).on("keydown", escapeModal);
// run the command and hide the modal when the confirm button is pressed
$confirmButton.on("click", confirmModal);
// set the heading with the supplied message
$heading.text(message);
// show the confirmation modal
$confirmationModal.css({
visibility: "visible",
opacity: 1
});
}
// show the alert modal and display the provided message until accept is pressed
function showAlert(message, command) {
const $alertModal = $("#alert-modal"),
$message = $alertModal.find(".message"),
$acceptButton = $alertModal.find(".btn.accept-button");
// close the alert modal and unbind its events
const closeAlertModal = function() {
// unbind events
$(document).off("keydown", escapeModal);
$acceptButton.off("click", closeAlertModal);
// clear the message
$message.empty();
// hide the modal
$alertModal.css({ opacity: 0 });
setTimeout(function() {
$alertModal.css({ visibility: "hidden" });
}, fadeTime);
// if a command was passed run it now
if (command !== undefined) {
command();
}
};
// close the modal if the escape button is pressed
const escapeModal = function(e) {
if (e.keyCode === 27) {
closeAlertModal();
} else {
e.preventDefault();
}
};
// hide the modal when the escape key is pressed
$(document).on("keydown", escapeModal);
// hide the modal when the accept button is pressed
$acceptButton.on("click", closeAlertModal);
// set the message with the supplied message
$message.text(message);
// show the alert modal
$alertModal.css({
visibility: "visible",
opacity: 1
});
}
// initialize edit list functionality
function editListInit() {
const editList = document.getElementById("edit-list"),
$editList = $(editList),
$token = $("#token"),
model = $editList.data("model");
// initialize new button functionality
const newButtonInit = function() {
const $newButton = $(".btn.new-button");
$newButton.on("click", function() {
window.location.href = "/dashboard/edit/" + model + "/new";
});
};
// initialize edit button functionality
const editButtonInit = function() {
const $editButtons = $(".btn.edit-button");
$editButtons.on("click", function() {
const $this = $(this),
$listItem = $this.closest(".list-group-item"),
itemId = $listItem.data("id");
// go to the edit page
window.location.href = "/dashboard/edit/" + model + "/" + itemId;
});
};
// initialize delete button functionality
const deleteButtonInit = function() {
const $deleteButtons = $(".btn.delete-button");
$deleteButtons.on("click", function() {
const $this = $(this),
$listItem = $this.closest(".list-group-item"),
itemId = $listItem.data("id");
askConfirmation("Are you sure you want to delete this?", function() {
$.ajax({
type: "DELETE",
url: "/dashboard/delete",
data: {
model: model,
id: itemId,
_token: $token.val()
}
}).always(function(response) {
if (response === "success") {
$listItem.slideUp(150, function() { $listItem.remove(); });
} else {
showAlert("Failed to delete record");
}
});
});
});
};
// initialize action button functionality
const actionButtonInit = function() {
const $actionButtons = $(".btn.action-button");
$actionButtons.on("click", function() {
const $this = $(this),
$listItem = $this.closest(".list-group-item"),
itemId = $listItem.data("id"),
confirmationMessage = $this.data("confirmation"),
successMessage = $this.data("success"),
errorMessage = $this.data("error"),
postUrl = $this.data("url");
askConfirmation(confirmationMessage, function() {
$.ajax({
type: "POST",
url: postUrl,
data: {
id: itemId,
_token: $token.val()
}
}).always(function(response) {
if (response === "success") {
showAlert(successMessage);
} else {
showAlert("ERROR: " + errorMessage);
}
});
});
});
};
// initialize sort functionality if data-sort is set
const sortRowInit = function() {
let sortOrder = {}, sortCol, sortable;
if ($editList.attr("data-sort")) {
sortCol = $editList.data("sort");
sortable = Sortable.create(editList, {
handle: ".sort-icon",
onUpdate: function() {
// update the sortOrder object based on the updated order
$editList.find(".list-group-item").reverse().each(function(index) {
sortOrder[$(this).data("id")] = index;
});
$.ajax({
type: "POST",
url: "/dashboard/reorder",
data: {
model: model,
order: sortOrder,
column: sortCol,
_token: $token.val()
}
}).always(function(response) {
if (response !== "success") {
showAlert("Sorting failed", function() {
document.location.reload(true);
});
}
});
}
});
}
};
// initialize filter functionality if the filter-input element exists
const filterInputInit = function() {
const $filter = $("#filter-input");
if ($filter.length) {
// empty the filter
$filter.val("");
// initialize the filter list functionality
const filterList = new List("edit-list-wrapper", {
2018-01-12 23:58:43 -05:00
valueNames: [ "title-column" ]
});
// add/remove a filtered class to identify when the list is filtered
$filter.on("input", function() {
if ($filter.val() === "") {
$editList.removeClass("filtered");
} else {
$editList.addClass("filtered");
}
});
}
};
newButtonInit();
editButtonInit();
deleteButtonInit();
actionButtonInit();
sortRowInit();
filterInputInit();
}
function editItemInit() {
const $editItem = $("#edit-item"),
$submit = $("#submit"),
$backButton = $("#back"),
$textInputs = $(".text-input"),
$datePickers = $(".date-picker"),
$mkdEditors = $(".mkd-editor"),
$fileUploads = $(".file-upload"),
$imgUploads = $(".image-upload"),
$token = $("#token"),
model = $editItem.data("model"),
id = $editItem.data("id"),
operation = id === "new" ? "create" : "update";
let allowTimes = [],
simplemde = [],
formData = {},
submitting = false,
hours,
minutes,
changes = false;
// fill the formData object with data from all the form fields
const getFormData = function() {
// function to add a column and value to the formData object
const addFormData = function(column, value) {
// add the value to a key with the column name
formData[column] = value;
// add the column to the array of columns
formData.columns.push(column);
};
// reset the formData object
formData = {};
// add the database model row id and _token
formData.model = model;
formData.id = id;
formData._token = $token.val();
// create an empty array to contain the list of columns
formData.columns = [];
// add values from the contents of text-input class elements
$textInputs.each(function() {
const $this = $(this),
column = $this.attr("id"),
value = $this.val();
addFormData(column, value);
});
// add values from the contents of date-picker class elements
$datePickers.each(function() {
const $this = $(this),
column = $this.attr("id"),
value = $this.val() + ":00";
addFormData(column, value);
});
// add values from the contents of the markdown editor for mkd-editor class elements
$mkdEditors.each(function() {
const $this = $(this),
column = $this.attr("id"),
value = simplemde[column].value();
addFormData(column, value);
});
};
const uploadFile = function(row_id, currentFile) {
let file, fileUpload;
// functionality to run on success
const returnSuccess = function() {
hideLoadingModal();
window.location.href = `/dashboard/edit/${model}/${row_id}`;
};
// add the file from the file upload box for file-upload class elements
if ($fileUploads.length >= currentFile + 1) {
fileUpload = $fileUploads[currentFile];
if ($(fileUpload).val() !== "") {
file = new FormData();
// add the file, id and model to the formData variable
file.append("file", fileUpload.files[0]);
file.append("name", $(fileUpload).attr("name"));
file.append("id", row_id);
file.append("model", model);
file.append("ext", $(fileUpload).data("ext"));
$.ajax({
type: "POST",
url: "/dashboard/file-upload",
data: file,
processData: false,
contentType: false,
beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRF-TOKEN", $token.val()); }
}).always(function(response) {
if (response === "success") {
uploadFile(row_id, currentFile + 1);
} else {
hideLoadingModal();
showAlert("Failed to upload file", function() {
submitting = false;
});
}
});
} else {
uploadFile(row_id, currentFile + 1);
}
} else {
returnSuccess();
}
};
const uploadImage = function(row_id, currentImage) {
let file, imgUpload;
// functionality to run on success
const returnSuccess = function() {
uploadFile(row_id, 0);
};
// add the image from the image upload box for image-upload class elements
if ($imgUploads.length >= currentImage + 1) {
imgUpload = $imgUploads[currentImage];
if ($(imgUpload).val() !== "") {
file = new FormData();
// add the file, id and model to the formData variable
file.append("file", imgUpload.files[0]);
file.append("name", $(imgUpload).attr("name"));
file.append("id", row_id);
file.append("model", model);
$.ajax({
type: "POST",
url: "/dashboard/image-upload",
data: file,
processData: false,
contentType: false,
beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRF-TOKEN", $token.val()); }
}).always(function(response) {
if (response === "success") {
uploadImage(row_id, currentImage + 1);
} else {
hideLoadingModal();
showAlert("Failed to upload image", function() {
submitting = false;
});
}
});
} else {
uploadImage(row_id, currentImage + 1);
}
} else {
returnSuccess();
}
};
const contentChanged = function() {
changes = true;
$submit.removeClass("no-input");
};
$(".edit-button.delete.image").on("click", function(e) {
const $this = $(this),
name = $this.data("name");
if (!submitting) {
submitting = true;
askConfirmation("Are you sure you want to delete this image?", function() {
// delete the image
$.ajax({
type: "DELETE",
url: "/dashboard/image-delete",
data: {
id: id,
model: model,
name: name,
_token: $token.val()
}
}).always(function(response) {
if (response === "success") {
$(`#current-image-${name}`).slideUp(200);
submitting = false;
} else {
showAlert("Failed to delete image: " + response, function() {
submitting = false;
});
}
});
}, function() {
submitting = false;
});
}
});
$(".edit-button.delete.file").on("click", function(e) {
const $this = $(this),
name = $this.data("name"),
ext = $this.data("ext");
if (!submitting) {
submitting = true;
askConfirmation("Are you sure you want to delete this file?", function() {
// delete the file
$.ajax({
type: "DELETE",
url: "/dashboard/file-delete",
data: {
id: id,
model: model,
name: name,
ext: ext,
_token: $token.val()
}
}).always(function(response) {
if (response === "success") {
$(`#current-file-${name}`).slideUp(200);
submitting = false;
} else {
showAlert("Failed to delete file: " + response, function() {
submitting = false;
});
}
});
}, function() {
submitting = false;
});
}
});
// allow start time selection to start on the hour and every 15 minutes after
for (hours = 0; hours <= 23; hours++) {
for (minutes = 0; minutes <= 3; minutes++) {
allowTimes.push(hours + ":" + (minutes === 0 ? "00" : minutes * 15));
}
}
// enable the datepicker for each element with the date-picker class
$datePickers.each(function() {
$(this).pickadate({
format: "yyyy-mm-dd",
formatSubmit: "yyyy-mm-dd",
clear: false,
selectYears: true,
selectMonths: true
});
});
// enable the markdown editor for each element with the mkd-editor class
$mkdEditors.each(function() {
const $this = $(this),
column = $this.attr("id");
simplemde[column] = new SimpleMDE({
element: this,
toolbar: [
"bold",
"italic",
"|",
"heading-1",
"heading-2",
"heading-3",
"|",
"quote",
"unordered-list",
"ordered-list",
"link"
],
blockStyles: { italic: "_" },
autoDownloadFontAwesome: false,
tabSize: 4,
spellChecker: false
});
setTimeout(function() {
// load the initial value into the editor
simplemde[column].value($this.attr("value"));
simplemde[column].codemirror.refresh();
// watch for changes to simplemde editor contents
simplemde[column].codemirror.on("change", contentChanged);
}, 500);
});
// watch for changes to input and select element contents
$editItem.find("input, select").on("input change", contentChanged);
// initialize back button
$backButton.on("click", function() {
if (!submitting) {
if (changes) {
askConfirmation("Cancel changes and return to the list?", function() {
window.location.href = "/dashboard/edit/" + model;
});
} else {
window.location.href = "/dashboard/edit/" + model;
}
}
});
// initialize submit button
$submit.on("click", function() {
if (!submitting && changes) {
submitting = true;
// show the loading modal
showLoadingModal();
// populate the formData object
getFormData();
// submit the update
$.ajax({
type: "POST",
url: "/dashboard/update",
data: formData
}).always(function(response) {
if (/^id:[0-9][0-9]*$/.test(response)) {
uploadImage(response.replace(/^id:/, ""), 0);
} else {
hideLoadingModal();
showAlert("Failed to " + operation + " record", function() {
submitting = false;
});
}
});
}
});
}
function userProfileImageInit() {
const $form = $("#user-profile-image"),
$upload = $("#profile-image-upload"),
$delete = $("#profile-image-delete"),
$token = $("#token"),
$display = $form.find(".image-display").first(),
defaultImage = $display.data("default");
let file,
submitting = false;
$upload.on("change", function() {
if ($upload.val() !== "" && !submitting) {
submitting = true;
askConfirmation("Update your user profile image?", function() {
// show the loading modal
showLoadingModal();
// add the image to the form data
file = new FormData();
file.append("file", $upload[0].files[0]);
// submit the form data
$.ajax({
type: "POST",
url: "/dashboard/user/profile-image-upload",
data: file,
processData: false,
contentType: false,
beforeSend: function(xhr) { xhr.setRequestHeader("X-CSRF-TOKEN", $token.val()); }
}).always(function(response) {
hideLoadingModal();
if (/\.png\?version=/.test(response)) {
$display.css({ backgroundImage: `url(${response})` });
$delete.removeClass("inactive");
submitting = false;
} else {
showAlert("Failed to upload image", function() {
submitting = false;
});
}
});
}, function() {
$upload.val("");
submitting = false;
});
}
});
$delete.on("click", function() {
if (!submitting) {
submitting = true;
askConfirmation("Delete your profile image?", function() {
// delete the profile image
$.ajax({
type: "DELETE",
url: "/dashboard/user/profile-image-delete",
data: {
_token: $token.val()
}
}).always(function(response) {
if (response === "success") {
$display.css({ backgroundImage: `url(${defaultImage})` });
$delete.addClass("inactive");
submitting = false;
} else {
showAlert("Failed to delete profile image", function() {
submitting = false;
});
}
});
}, function() {
submitting = false;
});
}
});
}
function userProfileUpdateInit() {
const $form = $("#user-profile-update"),
$submit = $form.find(".submit-button"),
$inputs = $form.find("input"),
$name = $("#name"),
$website = $("#website"),
$facebook = $("#facebook"),
$soundcloud = $("#soundcloud"),
$instagram = $("#instagram"),
$twitter = $("#twitter"),
$token = $("#token");
let formData = {},
submitting = false;
const getFormData = function() {
formData = {
name: $name.val(),
website: $website.val(),
facebook: $facebook.val(),
soundcloud: $soundcloud.val(),
instagram: $instagram.val(),
twitter: $twitter.val(),
_token: $token.val()
};
};
// remove the error class from an input and enable submit when its value changes
$inputs.on("input change", function() {
$submit.removeClass("no-input");
$(this).removeClass("error");
});
// initialize submit button
$submit.on("click", function() {
if (!submitting) {
submitting = true;
// remove the error class from inputs
$inputs.removeClass("error");
// show the loading modal
showLoadingModal();
// populate the formData object
getFormData();
// submit the update
$.ajax({
type: "POST",
url: "/dashboard/user/profile-update",
data: formData
}).always(function(response) {
hideLoadingModal();
if (response === "success") {
$submit.addClass("no-input");
showAlert("User profile updated successfully", function() {
submitting = false;
});
} else {
// add the error class to fields that haven't been filled correctly
for (let errorName in response.responseJSON.errors) {
if ($form.find(`[name='${errorName}']`).length) {
$form.find(`[name='${errorName}']`).addClass("error");
}
}
showAlert("Error updating user profile", function() {
submitting = false;
});
}
});
}
});
}
function userPasswordUpdateInit() {
const $form = $("#user-password-update"),
$submit = $form.find(".submit-button"),
$inputs = $form.find("input"),
$oldpass = $("#oldpass"),
$newpass = $("#newpass"),
$newpassConfirmation = $("#newpass_confirmation"),
$token = $("#token");
let formData = {},
submitting = false;
const getFormData = function() {
formData = {
oldpass: $oldpass.val(),
newpass: $newpass.val(),
newpass_confirmation: $newpassConfirmation.val(),
_token: $token.val()
};
};
// remove the error class from inputs and enable submit if all inputs have data when changes are made
$inputs.on("input change", function() {
let enableSubmit = true;
for (let i = 0; i < $inputs.length; i++) {
if ($inputs[i].value === "") {
enableSubmit = false;
break;
}
}
if (enableSubmit) {
$submit.removeClass("no-input");
} else {
$submit.addClass("no-input");
}
$inputs.removeClass("error");
});
// initialize submit button
$submit.on("click", function() {
if (!submitting) {
submitting = true;
// remove the error class from inputs
$inputs.removeClass("error");
// show the loading modal
showLoadingModal();
// populate the formData object
getFormData();
if (formData.newpass !== formData.newpass_confirmation) {
// fail with an error if the newpass and newpass_confirmation don't match
$newpassConfirmation.val("");
$newpass.addClass("error");
$newpassConfirmation.addClass("error");
showAlert("New passwords do not match", function() {
submitting = false;
});
} else {
// submit the update
$.ajax({
type: "POST",
url: "/dashboard/user/password-update",
data: formData
}).always(function(response) {
hideLoadingModal();
if (response === "success") {
$inputs.val("").trigger("change");
showAlert("Password updated successfully", function() {
submitting = false;
});
} else if (response === "old-password-fail") {
$oldpass.addClass("error");
showAlert("Old password is not correct", function() {
submitting = false;
});
} else {
$newpass.addClass("error");
$newpassConfirmation.val("");
showAlert("New password must be at least 6 characters", function() {
submitting = false;
});
}
});
}
}
});
}
// run once the document is ready
$(document).ready(function() {
if ($("#edit-list").length) {
editListInit();
}
if ($("#edit-item").length) {
editItemInit();
}
if ($("#user-profile-image").length) {
userProfileImageInit();
}
if ($("#user-profile-update").length) {
userProfileUpdateInit();
}
if ($("#user-password-update").length) {
userPasswordUpdateInit();
}
});