ryanwong
372 lines
11 KiB
JavaScript
372 lines
11 KiB
JavaScript
/*Powered By: Manaknightdigital Inc. https://manaknightdigital.com/ Year: 2019*/
|
|
var mkd_events = (function () {
|
|
var topics = {};
|
|
var hOP = topics.hasOwnProperty;
|
|
|
|
return {
|
|
subscribe: function (topic, listener) {
|
|
// Create the topic's object if not yet created
|
|
if (!hOP.call(topics, topic)) topics[topic] = [];
|
|
|
|
// Add the listener to queue
|
|
var index = topics[topic].push(listener) - 1;
|
|
|
|
// Provide handle back for removal of topic
|
|
return {
|
|
remove: function () {
|
|
delete topics[topic][index];
|
|
},
|
|
};
|
|
},
|
|
publish: function (topic, info) {
|
|
// If the topic doesn't exist, or there's no listeners in queue, just leave
|
|
if (!hOP.call(topics, topic)) return;
|
|
|
|
// Cycle through topics queue, fire!
|
|
topics[topic].forEach(function (item) {
|
|
item(info != undefined ? info : {});
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
function mkd_is_number(evt, obj) {
|
|
var charCode = evt.which ? evt.which : event.keyCode;
|
|
var value = obj.value;
|
|
|
|
var minuscontains = value.indexOf("-") != -1;
|
|
if (minuscontains) {
|
|
if (charCode == 45) {
|
|
return false;
|
|
}
|
|
}
|
|
if (charCode == 45) {
|
|
return true;
|
|
}
|
|
|
|
var dotcontains = value.indexOf(".") != -1;
|
|
if (dotcontains) {
|
|
if (charCode == 46) {
|
|
return false;
|
|
}
|
|
}
|
|
if (charCode == 46) {
|
|
return true;
|
|
}
|
|
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function mkd_export_table(url) {
|
|
if (url.indexOf("?") > -1) {
|
|
url = url + "&format=csv";
|
|
} else {
|
|
url = url + "?format=csv";
|
|
}
|
|
window.location.href = url;
|
|
}
|
|
$(document).ready(function () {
|
|
$("#sidebarCollapse").on("click", function () {
|
|
$("#sidebar").toggleClass("active");
|
|
});
|
|
|
|
//import csv code
|
|
$("#btn-choose-csv").on("click", function (e) {
|
|
e.preventDefault();
|
|
$("#csv-file").trigger("click");
|
|
});
|
|
|
|
$("#csv-file").on("change", function () {
|
|
$("#import-csv").trigger("submit");
|
|
});
|
|
|
|
$("#import-csv").on("submit", function (e) {
|
|
e.preventDefault();
|
|
var formData = new FormData(this);
|
|
var url = $(this).attr("action");
|
|
|
|
$(this).addClass("d-none");
|
|
$.ajax({
|
|
url: url,
|
|
type: "POST",
|
|
data: formData,
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (res) {
|
|
var body_html = "";
|
|
var head_html = "";
|
|
if (res.preview == true) {
|
|
var data = res.data;
|
|
var header = data[0];
|
|
data.shift();
|
|
for (let headerItem of header) {
|
|
head_html += `<th>${headerItem}</th>`;
|
|
}
|
|
for (let row of data) {
|
|
body_html += "<tr>";
|
|
for (let item of row) {
|
|
body_html += `<td>${item} </td>`;
|
|
}
|
|
body_html += "</tr>";
|
|
}
|
|
|
|
$("#csv-table-head").html(head_html);
|
|
$("#csv-table-body").html(body_html);
|
|
$("#csv-table").removeClass("d-none");
|
|
$("#btn-save-csv").removeClass("d-none");
|
|
} else if (res.saved == true) {
|
|
alert("Imported Successfully");
|
|
location.reload();
|
|
}
|
|
},
|
|
});
|
|
});
|
|
|
|
$("#btn-save-csv").on("click", function (e) {
|
|
e.preventDefault();
|
|
var model = $("#btn-csv-upload-dialog").data("model");
|
|
console.log(model);
|
|
$("#import-csv").attr("action", "/v1/api/file/import/" + model);
|
|
$("#import-csv").trigger("submit");
|
|
});
|
|
|
|
$(".modal-image").on("click", function () {
|
|
var src = $(this).attr("src");
|
|
$("#modal-image-slot").attr("src", src);
|
|
$("#modal-image-show").modal("show");
|
|
});
|
|
});
|
|
|
|
const selectedRows = [];
|
|
// Buk Actions
|
|
const bulkSelectAll = document.getElementById("bulkSelectAll");
|
|
|
|
const deleteButton = document.getElementById("bulkDeleteButton");
|
|
const editButton = document.getElementById("bulkEditButton");
|
|
const originalDeleteHref = deleteButton?.href ?? "";
|
|
|
|
// Select All click
|
|
if (bulkSelectAll) {
|
|
bulkSelectAll.addEventListener("click", (event) => {
|
|
selectedRows.length = 0;
|
|
|
|
const bulkSelectRows = document.querySelectorAll(".bulkSelect");
|
|
|
|
const isSelectAll = event.target.checked;
|
|
bulkSelectRows.forEach((item) => {
|
|
item.checked = isSelectAll;
|
|
if (isSelectAll) {
|
|
selectedRows.push(item.dataset.id);
|
|
}
|
|
});
|
|
// Update delete link
|
|
if (isSelectAll) {
|
|
if (deleteButton) deleteButton.style.display = "inline-block";
|
|
if (deleteButton) deleteButton.href = originalDeleteHref + selectedRows.join("|");
|
|
if (editButton) editButton.style.display = "inline-block";
|
|
} else {
|
|
if (deleteButton) deleteButton.style.display = "none";
|
|
if (deleteButton) deleteButton.href = originalDeleteHref;
|
|
if (editButton) editButton.style.display = "none";
|
|
}
|
|
});
|
|
}
|
|
|
|
// Handle Individual Select
|
|
const handleBulkSelectChange = function (event) {
|
|
const id = event.dataset.id;
|
|
if (event.checked) {
|
|
selectedRows.push(id);
|
|
} else {
|
|
const findIndex = selectedRows.findIndex((item) => item === id);
|
|
if (findIndex > -1) {
|
|
selectedRows.splice(findIndex, 1);
|
|
}
|
|
}
|
|
deleteButton.href = originalDeleteHref + selectedRows.join("|");
|
|
|
|
deleteButton.style.display = selectedRows.length > 0 ? "inline-block" : "none";
|
|
editButton.style.display = selectedRows.length > 0 ? "inline-block" : "none";
|
|
};
|
|
const orderContainer = document.getElementById("order-container");
|
|
if (orderContainer) {
|
|
(async () => {
|
|
const quizzes = await fetch("/admin/api/quizzes?limit=0")
|
|
.then((res) => res.json())
|
|
.then((data) => data.data.items);
|
|
|
|
// Store listitems
|
|
const listItems = [];
|
|
|
|
let dragStartIndex;
|
|
let dragStartQuiz;
|
|
|
|
createList();
|
|
|
|
// Insert list items into DOM
|
|
function createList() {
|
|
quizzes.forEach((quiz) => {
|
|
const quizContainer = document.createElement("div");
|
|
const quizHeadTag = document.createElement("h2");
|
|
quizHeadTag.className = "font-weight-bold mb-3";
|
|
quizHeadTag.innerHTML = `Quiz: ${quiz.name}`;
|
|
quizContainer.id = `${quiz.name.replace(/ /g, "_")}_id`;
|
|
quizContainer.className = "quiz-container mb-5";
|
|
|
|
const draggable_list = document.createElement("ul");
|
|
draggable_list.id = `draggable-list-${quiz.id}`;
|
|
draggable_list.className = "draggable-list";
|
|
|
|
quizContainer.appendChild(quizHeadTag);
|
|
quizContainer.appendChild(draggable_list);
|
|
quiz.questions.forEach((questionObject, index) => {
|
|
const listItem = document.createElement("li");
|
|
|
|
listItem.setAttribute("data-index", index);
|
|
listItem.setAttribute("data-quiz", quiz.id);
|
|
|
|
listItem.innerHTML = `
|
|
<span class="number">${questionObject.order}</span>
|
|
<div class="draggable" draggable="true">
|
|
<p class="question-text" data-question-id="${questionObject.id}" data-question-new-order="${questionObject.order}">${questionObject.question}</p>
|
|
<i class="fas fa-grip-lines"></i>
|
|
</div>
|
|
`;
|
|
|
|
listItems.push(listItem);
|
|
|
|
draggable_list.appendChild(listItem);
|
|
});
|
|
orderContainer.appendChild(quizContainer);
|
|
});
|
|
addEventListeners();
|
|
}
|
|
|
|
function dragStart() {
|
|
dragStartIndex = +this.closest("li").getAttribute("data-index");
|
|
dragStartQuiz = +this.closest("li").getAttribute("data-quiz");
|
|
}
|
|
|
|
function dragEnter() {
|
|
this.classList.add("over");
|
|
}
|
|
|
|
function dragLeave() {
|
|
this.classList.remove("over");
|
|
}
|
|
|
|
function dragOver(e) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
function dragDrop() {
|
|
const dragEndIndex = +this.getAttribute("data-index");
|
|
const dragEndQuiz = +this.getAttribute("data-quiz");
|
|
swapItems(dragStartIndex, dragStartQuiz, dragEndIndex, dragEndQuiz);
|
|
|
|
this.classList.remove("over");
|
|
}
|
|
|
|
// Swap list items that are drag and drop
|
|
function swapItems(fromIndex, fromQuiz, toIndex, toQuiz) {
|
|
const itemOne = listItems.find((item) => {
|
|
return item.getAttribute("data-quiz") == fromQuiz && item.getAttribute("data-index") == fromIndex;
|
|
});
|
|
const itemTwo = listItems.find((item) => {
|
|
return item.getAttribute("data-quiz") == toQuiz && item.getAttribute("data-index") == toIndex;
|
|
});
|
|
|
|
const movableItemOne = itemOne.querySelector(".draggable");
|
|
const movableItemTwo = itemTwo.querySelector(".draggable");
|
|
|
|
itemOne.appendChild(movableItemTwo);
|
|
itemTwo.appendChild(movableItemOne);
|
|
|
|
const itemOneOrder = movableItemOne.querySelector(".question-text").getAttribute("data-question-new-order");
|
|
const itemTwoOrder = movableItemTwo.querySelector(".question-text").getAttribute("data-question-new-order");
|
|
|
|
movableItemOne.querySelector(".question-text").setAttribute("data-question-new-order", itemTwoOrder);
|
|
movableItemTwo.querySelector(".question-text").setAttribute("data-question-new-order", itemOneOrder);
|
|
}
|
|
|
|
function addEventListeners() {
|
|
const draggables = document.querySelectorAll(".draggable");
|
|
const dragListItems = document.querySelectorAll(".draggable-list li");
|
|
|
|
draggables.forEach((draggable) => {
|
|
draggable.addEventListener("dragstart", dragStart);
|
|
});
|
|
|
|
dragListItems.forEach((item) => {
|
|
item.addEventListener("dragover", dragOver);
|
|
item.addEventListener("drop", dragDrop);
|
|
item.addEventListener("dragenter", dragEnter);
|
|
item.addEventListener("dragleave", dragLeave);
|
|
});
|
|
}
|
|
})();
|
|
}
|
|
|
|
async function submitChanges(el, e) {
|
|
e.preventDefault();
|
|
el.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`;
|
|
const questions = document.querySelectorAll(".question-text");
|
|
const payload = [];
|
|
questions.forEach((question) => {
|
|
payload.push({
|
|
id: question.getAttribute("data-question-id"),
|
|
order: question.getAttribute("data-question-new-order"),
|
|
});
|
|
});
|
|
const response = await fetch("/questions/order/save", {
|
|
method: "POST",
|
|
headers: {
|
|
"content-type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
}).then((res) => res.json());
|
|
console.log(response);
|
|
el.innerHTML = `Submit changes`;
|
|
}
|
|
|
|
function weightScoreInputChange(el, event) {
|
|
if (el.value && el.value.trim()) {
|
|
if (!el.classList.contains("has-value")) el.classList.add("has-value");
|
|
} else {
|
|
el.classList.remove("has-value");
|
|
}
|
|
}
|
|
|
|
async function updateMainPicture(self, evt) {
|
|
evt.preventDefault();
|
|
const imageId = document.getElementById("file_image").value;
|
|
if (!imageId) {
|
|
return false;
|
|
}
|
|
self.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`;
|
|
const response = await fetch("/main-image/update", {
|
|
method: "POST",
|
|
headers: {
|
|
"content-type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
image_url: imageId,
|
|
}),
|
|
}).then((res) => res.json());
|
|
console.log(response);
|
|
self.innerHTML = `Update image`;
|
|
}
|
|
|
|
function printSpecific(divId) {
|
|
let divToPrint = document.getElementById(divId);
|
|
let printBtn = document.querySelector(".print-btn");
|
|
divToPrint.classList.add("print");
|
|
printBtn.classList.add("print");
|
|
window.print();
|
|
printBtn.classList.remove("print");
|
|
divToPrint.classList.remove("print");
|
|
}
|