SnippetManager/js/main.js
2017-12-16 14:25:50 -08:00

740 lines
20 KiB
JavaScript

var selectList = [];
$(document).ready(function () {
loadLangs();
$("#langLink").click(function (evt) {
evt.preventDefault();
loadLangs();
});
$("#snippetLink").click(function (evt) {
evt.preventDefault();
loadSnippets();
});
$("#resourceLink").click(function (evt) {
evt.preventDefault();
loadResources();
});
$("#addModal").on("show.bs.modal", function (e) {
$("#addLangTab").tab("show");
$(".addField").val("");
buildLangSelect();
});
$("#editLangModal").on("shown.bs.modal", function (e) { $(".langSelect").val(selectList); });
$("#editSnippetModal").on("shown.bs.modal", function (e) { $(".langSelect").val(selectList); });
$("#editResourceModal").on("shown.bs.modal", function (e) { $(".langSelect").val(selectList); });
$("#addModal").on("shown.bs.modal", function (e) { $("#txtLangName").focus(); });
$("#addLangTab").on("shown.bs.tab", function (e) { $("#txtLangName").focus(); });
$("#addSnippetTab").on("shown.bs.tab", function (e) { $("#txtSnippetName").focus(); });
$("#addResourceTab").on("shown.bs.tab", function (e) { $("#txtResourceName").focus(); });
$("#btnAddItem").click(addNewItem);
$("#btnSaveLang").click(saveLang);
$("#btnSaveSnippet").click(saveSnippet);
$("#btnSaveResource").click(saveResource);
$(".clearLangSelect").click(function () { $(".langSelect").val([]); });
$(".editChk").change(checkBoxChange);
});
function buildLangSelect() {
$.ajax({
url: "lang.php",
type: "GET",
success: addSelectLangs,
error: displayError
});
}
function addSelectLangs(langList) {
var selectors = $(".langSelect");
selectors.empty();
for (var i = 0; i < langList.length; i++) {
var cur = langList[i];
$("<option>").val(cur.langID).text(cur.langName).appendTo(selectors);
}
}
function checkBoxChange() {
var me = $(this);
$(me.data("for")).attr("disabled", !me.prop("checked"));
}
function addNewItem() {
if ($("#addLangTab").hasClass("active")) {
if ($("#formAddLang")[0].checkValidity()) {
var data = {};
data['langName'] = $("#txtLangName").val().trim();
if ($("#txtLangDesc").val().trim() != "") {
data['langDescription'] = $("#txtLangDesc").val().trim();
}
var langs = $("#selectLangLangs").val();
$.ajax({
url: "lang.php",
type: "POST",
data: data,
success: function (res) { addLangLangs(res, data['langName'], langs); },
error: displayError
});
}
} else if ($("#addSnippetTab").hasClass("active")) {
if ($("#formAddSnippet")[0].checkValidity()) {
var data = {};
data['snippetName'] = $("#txtSnippetName").val().trim();
if ($("#txtSnippetDesc").val().trim() != "") {
data['snippetDescription'] = $("#txtSnippetDesc").val().trim();
}
if ($("#txtSnippetBody").val().trim() != "") {
data['snippet'] = $("#txtSnippetBody").val().trim();
}
var langs = $("#selectSnippetLangs").val();
$.ajax({
url: "snippet.php",
type: "POST",
data: data,
success: function (res) { addSnippetLangs(res, data['snippetName'], langs) },
error: displayError
});
}
} else {
if ($("#formAddResource")[0].checkValidity()) {
var data = {};
data['resourceName'] = $("#txtResourceName").val().trim();
if ($("#txtResourceDesc").val().trim() != "") {
data['resourceDescription'] = $("#txtResourceDesc").val().trim();
}
if ($("#txtResourceLink").val().trim() != "") {
data['resourceLink'] = $("#txtResourceLink").val().trim();
}
var langs = $("#selectResourceLangs").val();
$.ajax({
url: "resource.php",
type: "POST",
data: data,
success: function (res) { addResourceLangs(res, data['resourceName'], langs); },
error: displayError
});
}
}
}
function addLangLangs(langID, langName, langIDList) {
if (langIDList != null) {
for (var i = 0; i < langIDList.length; i++) {
$.ajax({
url: "lang.php",
type: "PUT",
data: {langID: langID, associatedLang: langIDList[i]},
error: displayError
});
}
}
successAlert("Successfully Added language: " + langName, "lang");
}
function addSnippetLangs(snippetID, snippetName, langIDList) {
if (langIDList != null) {
for (var i = 0; i < langIDList.length; i++) {
$.ajax({
url: "snippet.php",
type: "PUT",
data: {snippetID: snippetID, langID: langIDList[i]},
error: displayError
});
}
}
successAlert("Successfully Added snippet: " + snippetName, "snippet");
}
function addResourceLangs(resourceID, resourceName, langIDList) {
if (langIDList != null) {
for (var i = 0; i < langIDList.length; i++) {
$.ajax({
url: "resource.php",
type: "PUT",
data: {resourceID: resourceID, langID: langIDList[i]},
error: displayError
});
}
}
successAlert("Successfully Added resource: " + resourceName, "resource");
}
function successAlert(text, type) {
var alert = $("#successAlert");
if (alert.attr("display") == "none") {
alert.slideUp();
}
alert.text(text).slideDown().delay(5000).slideUp();
if (type.toLowerCase() == "lang")
loadLangs();
else if (type.toLowerCase() == "snippet")
loadSnippets();
else if (type.toLowerCase() == "resource")
loadResources();
$(".modal").modal('hide');
}
function loadResources() {
$("#langLink").removeClass("active");
$("#snippetLink").removeClass("active");
$("#resourceLink").addClass("active");
$("#mainList").empty();
$.ajax({
url: "resource.php",
type: "GET",
success: addResourceList,
error: displayError
});
}
function addResourceList(resourceList) {
var mainList = $("#mainList");
for (var i = 0; i < resourceList.length; i++) {
$("<div>").attr({ "id": "resource-" + resourceList[i].resourceID }).appendTo(mainList);
$.ajax({
url: "resource.php?resourceID=" + resourceList[i].resourceID,
type: "GET",
success: addResource,
error: displayError
});
}
}
function addResource(resource) {
var link = $('<a>').attr({
"id": "resource-" + resource.resourceID + "-link",
"href": resource.resourceLink,
"target": "_blank"
}).text(resource.resourceLink);
buildCard("resource", resource.resourceID, resource.resourceName, resource.languages, resource.resourceDescription, link);
}
function showResource(resourceID) {
deselectNav();
$("#mainList").empty();
$("<div>").attr("id", "resource-" + resourceID).appendTo($("#mainList"));
$.ajax({
url: "resource.php?resourceID=" + resourceID,
type: "GET",
success: function (result) { addResource(result); },
error: function (result) { displayError(result); }
});
}
function loadSnippets() {
$("#langLink").removeClass("active");
$("#snippetLink").addClass("active");
$("#resourceLink").removeClass("active");
$("#mainList").empty();
$.ajax({
url: "snippet.php",
type: "GET",
success: function (result) { addSnippets(result) },
error: function (result) { displayError(result) }
});
}
function addSnippets(snippetList) {
var mainList = $("#mainList");
for (var i = 0; i < snippetList.length; i++) {
// add thesse so that everything is loaded in order regardless of async
$("<div>").attr({ "id": "snippet-" + snippetList[i].snippetID }).appendTo(mainList);
$.ajax({
url: "snippet.php?snippetID=" + snippetList[i].snippetID,
type: "GET",
success: function (result) { addSnippet(result) },
error: function (result) { displayError(result) }
});
}
}
function addSnippet(snippet) {
var code = $('<pre><code>').attr("id", "snippet-" + snippet.snippetID + "-body").text(snippet.snippet);
buildCard("snippet", snippet.snippetID, snippet.snippetName, snippet.languages, snippet.snippetDescription, code);
}
function showSnippet(snippetID) {
deselectNav();
$("#mainList").empty();
$("<div>").attr("id", "snippet-" + snippetID).appendTo($("#mainList"));
$.ajax({
url: "snippet.php?snippetID=" + snippetID,
type: "GET",
success: function (result) { addSnippet(result); },
error: function (result) { displayError(result); }
});
}
function showLang(langID) {
deselectNav();
$("#mainList").empty();
$("<div>").attr("id", "lang-" + langID).appendTo($("#mainList"));
$.ajax({
url: "lang.php?langID=" + langID,
type: "GET",
success: function (result) { addLang(result) },
error: function (result) { displayError(result) }
});
}
function loadLangs() {
$("#langLink").addClass("active");
$("#snippetLink").removeClass("active");
$("#resourceLink").removeClass("active");
$("#mainList").empty();
$.ajax({
url: "lang.php",
type: "GET",
success: function (result) { addLangs(result) },
error: function (result) { displayError(result) }
});
}
function addLangs(langList) {
var mainList = $("#mainList");
for (var i = 0; i < langList.length; i++) {
$("<div>").attr({ "id": "lang-" + langList[i].langID }).appendTo(mainList);
$.ajax({
url: "lang.php?langID=" + langList[i].langID,
type: "GET",
success: function (result) { addLang(result) },
error: function (result) { displayError(result) }
});
}
}
function addLang(lang) {
var body = $('<div>');
// build list of snippet links
if (lang.snippets.length != 0) {
$('<hr>').appendTo(body);
$('<span>').addClass("card-text text-muted mr-3").text("Snippets:").appendTo(body);
var snippets = lang.snippets;
for (var i = 0; i < snippets.length; i++) {
var cur = snippets[i];
var snippetID = cur.snippetID;
$("<a>").attr({
"id": "snippet-" + snippetID,
"class": "card-link",
"href": "#",
"data-snippetID": snippetID,
"onClick": "handleSnippetClicked(event, " + snippetID + ")"
}).text(cur.snippetName).appendTo(body);
}
}
//build list of resource links
if (lang.resources.length != 0) {
$('<hr>').appendTo(body);
$('<span>').addClass("card-text text-muted mr-3").text("Resources:").appendTo(body);
var resources = lang.resources;
for (var i = 0; i < resources.length; i++) {
var cur = resources[i];
var resourceID = cur.resourceID;
$("<a>").attr({
"id": "resource-" + resourceID,
"class": "card-link",
"href": "#",
"data-resourceID": resourceID,
"onclick": "handleResourceClicked(event, " + resourceID + ")"
}).text(cur.resourceName).appendTo(body);
}
}
buildCard("lang", lang.langID, lang.langName, lang.languages, lang.langDescription, body);
}
function buildCard(type, id, name, languageList, DescriptionText, body) {
var card = $('<div>').addClass("card mb-3").attr("id", type + "-" + id + "-card");
var header = $('<div>').addClass("card-header").appendTo(card);
$('<h3>').attr("id", type + "-" + id + "-name").addClass("d-inline").text(name).appendTo(header);
$('<span>').attr("id", type + "-" + id + "-id").addClass("text-muted ml-3").text("#" + id).appendTo(header);
$("<button>").attr({
"type": "button",
"class": "btn btn-danger float-right",
"data-id": id,
"data-type": type
}).text("Delete").click(deleteClicked).appendTo(header);
$("<button>").attr({
"type": "button",
"class": "btn btn-info float-right mr-2",
"data-id": id,
"data-type": type
}).text("Edit").click(editClicked).appendTo(header);
var cardBody = $('<div>').addClass("card-body").appendTo(card);
var langList = $("<div>").addClass("langList").appendTo(cardBody);
var langString = [];
if (languageList != null && languageList.length > 0) {
for (var i = 0; i < languageList.length; i++) {
var cur = languageList[i];
langString[i] = cur.langID;
$("<a>").attr({
"class": "card-link",
"href": "#",
"onClick": "handleLangClicked(event, " + cur.langID + ")"
}).text(cur.langName).appendTo(langList);
}
card.attr("data-langs", JSON.stringify(langString));
} else {
card.attr("data-langs", "[]");
}
$('<p>').attr("id", type + "-" + id + "-description").addClass("card-text").text(DescriptionText).appendTo(cardBody);
cardBody.append(body);
card.append(cardBody);
card.appendTo($("#" + type + "-" + id));
}
function editClicked() {
var button = $(this);
var type = button.data("type");
var id = button.data("id");
$(".editChk").prop("checked", false);
$(".editField").prop("disabled", true);
if (type == "lang")
initEditLang(id);
else if (type == "snippet")
initEditSnippet(id);
else
initEditResource(id);
}
function initEditLang(langID) {
$("#editLangID").val(langID);
$("#txtEditLangName").val($("#lang-" + langID + "-name").text());
$("#txtEditLangDesc").val($("#lang-" + langID + "-description").text());
buildLangSelect();
selectList = $("#lang-" + langID + "-card").data("langs");
$("#editLangModal").modal('show');
}
function initEditSnippet(snippetID) {
$("#editSnippetID").val(snippetID);
$("#txtEditSnippetName").val($("#snippet-" + snippetID + "-name").text());
$("#txtEditSnippetDesc").val($("#snippet-" + snippetID + "-description").text());
$("#txtEditSnippetBody").val($("#snippet-" + snippetID + "-body").text());
buildLangSelect();
selectList = $("#snippet-" + snippetID + "-card").data("langs");
$("#editSnippetModal").modal('show');
}
function initEditResource(resourceID) {
$("#editResourceID").val(resourceID);
$("#txtEditResourceName").val($("#resource-" + resourceID + "-name").text());
$("#txtEditResourceDesc").val($("#resource-" + resourceID + "-description").text());
$("#txtEditResourceLink").val($("#resource-" + resourceID + "-link").text());
buildLangSelect();
selectList = $("#resource-" + resourceID + "-card").data("langs");
$("#editResourceModal").modal('show');
}
function saveLang() {
var changeName = $("#editLangNameChk").prop("checked");
var changeLang = $("#editLangLangsChk").prop("checked");
var changeDesc = $("#editLangDescChk").prop("checked");
if (!changeName && !changeDesc && !changeLang)
return;
var langID = $("#editLangID").val();
var langName = $("#txtEditLangName").val().trim();
var data = {};
data['langID'] = langID;
if (changeName && langName == "") {
displayError({responseText: "Name cannot be empty"});
return;
}
if (changeName && langName != "")
data['langName'] = langName;
if (changeDesc)
data['langDescription'] = $("#txtEditLangDesc").val();
if (changeName || changeDesc) {
$.ajax({
url: "lang.php",
type: "PUT",
data: data,
success: function () { successAlert("Successfully saved language: " + langName, "lang") },
error: displayError
});
}
if (changeLang) {
var curLangsList = $("#lang-" + langID + "-card").data("langs");
var newLangsList = $("#selectEditLangLangs").val().map(function (item) {
return parseInt(item, 10);
});
var langsToAdd = inANotInB(newLangsList, curLangsList);
var langsToDelete = inANotInB(curLangsList, newLangsList);
addLangsLang(langID, langName, langsToAdd, langsToDelete != 0);
deleteLangsLang(langID, langName, langsToDelete);
}
}
function addLangsLang(langID, langName, langList, forceUpdate) {
for (var i = 0; i < langList.length; i++) {
$.ajax({
url: "lang.php",
type: "PUT",
data: {langID: langID, associatedLang: langList[i]},
error: displayError
});
}
if (forceUpdate || langList.length != 0)
successAlert("Successfully saved language: " + langName, "lang")
}
function deleteLangsLang(langID, langName, langList) {
for (var i = 0; i < langList.length; i++) {
$.ajax({
url: "lang.php",
type: "DELETE",
data: {langID: langID, associatedLang: langList[i]},
error: displayError
});
}
}
function saveSnippet() {
var changeName = $("#editSnippetNameChk").prop("checked");
var changeLang = $("#editSnippetLangsChk").prop("checked");
var changeDesc = $("#editSnippetDescChk").prop("checked");
var changeBody = $("#editSnippetBodyChk").prop("checked");
if (!changeName && !changeLang && !changeDesc && !changeBody)
return;
var snippetID = $("#editSnippetID").val();
var snippetName = $("#txtEditSnippetName").val().trim();
var data = {};
data['snippetID'] = snippetID;
if (changeName && snippetName == "") {
displayError({responseText: "Name cannot be empty"});
return;
}
if (changeName)
data['snippetName'] = snippetName;
if (changeDesc)
data['snippetDescription'] = $("#txtEditSnippetDesc").val().trim();
if (changeBody)
data['snippet'] = $("#txtEditSnippetBody").val().trim();
$.ajax({
url: "snippet.php",
type: "PUT",
data: data,
success: function () { successAlert("Successfully saved snippet: " + snippetName, "snippet"); },
error: displayError
});
if (changeLang) {
var curLangsList = $("#snippet-" + snippetID + "-card").data("langs");
var newLangsList = $("#selectEditSnippetLangs").val().map(function (item) {
return parseInt(item, 10);
});
var langsToAdd = inANotInB(newLangsList, curLangsList);
addLangsSnippet(snippetID, langsToAdd);
var langsToDelete = inANotInB(curLangsList, newLangsList);
deleteLangsSnippet(snippetID, langsToDelete);
}
}
function addLangsSnippet(snippetID, langList) {
for (var i = 0; i < langList.length; i++) {
$.ajax({
url: "snippet.php",
type: "PUT",
data: {snippetID: snippetID, langID: langList[i]},
error: displayError
});
}
}
function deleteLangsSnippet(snippetID, langList) {
for (var i = 0; i < langList.length; i++) {
$.ajax({
url: "snippet.php",
type: "DELETE",
data: {snippetID: snippetID, langID: langList[i]},
error: displayError
});
}
}
function saveResource() {
var changeName = $("#editResourceNameChk").prop("checked");
var changeLang = $("#editResourceLangsChk").prop("checked");
var changeDesc = $("#editResourceDescChk").prop("checked");
var changeLink = $("#editResourceLinkChk").prop("checked");
if (!changeName && !changeLang && !changeDesc && !changeLink)
return;
var resourceID = $("#editResourceID").val();
var resourceName = $("#txtEditResourceName").val().trim();
var data = {};
data['resourceID'] = resourceID;
if (changeName && resourceName == "") {
displayError({responseText: "Name cannot be empty"});
return;
}
if (changeName)
data['resourceName'] = resourceName;
if (changeDesc)
data['resourceDescription'] = $("#txtEditResourceDesc").val().trim();
if (changeLink)
data['resourceLink'] = $("#txtEditResourceLink").val().trim();
$.ajax({
url: "resource.php",
type: "PUT",
data: data,
success: function () { successAlert("Successfully saved resource: " + resourceName, "resource"); },
error: displayError
});
if (changeLang) {
var curLangsList = $("#resource-" + resourceID + "-card").data("langs");
var newLangsList = $("#selectEditResourceLangs").val().map(function (item) {
return parseInt(item, 10);
});
var langsToAdd = inANotInB(newLangsList, curLangsList);
addLangsResource(resourceID, langsToAdd);
var langsToDelete = inANotInB(curLangsList, newLangsList);
deleteLangsResource(resourceID, langsToDelete);
}
}
function addLangsResource(resourceID, langList) {
for (var i = 0; i < langList.length; i++) {
$.ajax({
url: "resource.php",
type: "PUT",
data: {resourceID: resourceID, langID: langList[i]},
error: displayError
});
}
}
function deleteLangsResource(resourceID, langList) {
for (var i = 0; i < langList.length; i++) {
$.ajax({
url: "resource.php",
type: "DELETE",
data: {resourceID: resourceID, langID: langList[i]},
error: displayError
});
}
}
function deleteClicked() {
var button = $(this);
var type = button.data("type");
var id = button.data("id");
$("#btnConfirmDelete").off('click').click(function () { deleteItem(type, id); });
$("#confirmDeleteModal").modal('show');
}
function deleteItem(type, id) {
var data = {};
data[type + "ID"] = id;
$.ajax({
url: type + ".php",
type: "DELETE",
data: data,
success: function (res) { successAlert("Item successfully deleted", type); },
error: displayError
});
}
function handleSnippetClicked(evt, snippetID) {
evt.preventDefault();
showSnippet(snippetID);
}
function handleResourceClicked(evt, resourceID) {
evt.preventDefault();
showResource(resourceID);
}
function handleLangClicked(evt, langID) {
// TODO: show related snippets and resources
evt.preventDefault();
showLang(langID);
}
function deselectNav() {
$("#langLink").removeClass("active");
$("#snippetLink").removeClass("active");
$("#resourceLink").removeClass("active");
}
function displayError(error, str) {
console.log(error);
$("#errorText").text(error.responseText);
$("#errorModal").modal('show');
}
function inANotInB(a, b) {
var list = [];
for (var i = 0; i < a.length; i++) {
if (b.indexOf(a[i]) == -1)
list.push(a[i]);
}
return list;
}