NeilBrommer/SnippetManager
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Simplify client code

Browse source
This commit is contained in:
Neil Brommer 2017-12-17 16:56:43 -08:00
parent 87d50cde3b
commit a0e0afa3ce
2 changed files with 42 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
index.html
View file

@ -42,7 +42,7 @@
</li> </li>
</ul> </ul>
<form class="form-inline mt-2 mt-md-0"> <form class="form-inline mt-2 mt-md-0">
<button class="btn btn-primary ml-sm-2" type="button" data-toggle="modal" data-target="#addModal">Add</button> <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#addModal">Add</button>
</form> </form>
</div> </div>
</nav> </nav>
@ -82,7 +82,7 @@
<form id="formAddLang"> <form id="formAddLang">
<div class="form-group"> <div class="form-group">
<label for="txtLangName">Name</label> <label for="txtLangName">Name</label>
<input id="txtLangName" type="text" class="form-control addField" required> <input id="txtLangName" type="text" class="form-control addField addLangField" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="selectLangLangs">Languages</label> <label for="selectLangLangs">Languages</label>
@ -92,7 +92,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="txtLangDesc">Description</label> <label for="txtLangDesc">Description</label>
<textarea id="txtLangDesc" class="form-control addField"></textarea> <textarea id="txtLangDesc" class="form-control addField addLangField"></textarea>
</div> </div>
</form> </form>
</div> </div>
@ -100,7 +100,7 @@
<form id="formAddSnippet"> <form id="formAddSnippet">
<div class="form-group"> <div class="form-group">
<label for="txtSnippetName">Name</label> <label for="txtSnippetName">Name</label>
<input id="txtSnippetName" type="text" class="form-control addField" required> <input id="txtSnippetName" type="text" class="form-control addField addSnippetField" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="selectSnippetLangs">Languages</label> <label for="selectSnippetLangs">Languages</label>
@ -110,11 +110,11 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="txtSnippetDesc">Description</label> <label for="txtSnippetDesc">Description</label>
<textarea id="txtSnippetDesc" class="form-control addField"></textarea> <textarea id="txtSnippetDesc" class="form-control addField addSnippetField"></textarea>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="txtSnippetBody">Snippet</label> <label for="txtSnippetBody">Snippet</label>
<textarea id="txtSnippetBody" class="form-control addField snippetBody" rows="10" wrap="off"></textarea> <textarea id="txtSnippetBody" class="form-control addField addSnippetField snippetBody" rows="10" wrap="off"></textarea>
</div> </div>
</form> </form>
</div> </div>
@ -122,7 +122,7 @@
<form id="formAddResource"> <form id="formAddResource">
<div class="form-group"> <div class="form-group">
<label for="txtResourceName">Name</label> <label for="txtResourceName">Name</label>
<input id="txtResourceName" type="text" class="form-control addField" required> <input id="txtResourceName" type="text" class="form-control addField addResourceField" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="selectResourceLangs">Languages</label> <label for="selectResourceLangs">Languages</label>
@ -132,11 +132,11 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="txtResourceDesc">Description</label> <label for="txtResourceDesc">Description</label>
<textarea id="txtResourceDesc" class="form-control addField"></textarea> <textarea id="txtResourceDesc" class="form-control addField addResourceField"></textarea>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="txtResourceLink">Link</label> <label for="txtResourceLink">Link</label>
<input id="txtResourceLink" type="url" class="form-control addField"> <input id="txtResourceLink" type="url" class="form-control addField addResourceField">
</div> </div>
</form> </form>
</div> </div>

138
js/main.js
View file

@ -3,16 +3,16 @@ var selectList = [];
$(document).ready(function () { $(document).ready(function () {
loadLangs(); loadLangs();
$("#langLink").click(function (evt) { $("#langLink").click(function (e) {
evt.preventDefault(); e.preventDefault();
loadLangs(); loadLangs();
}); });
$("#snippetLink").click(function (evt) { $("#snippetLink").click(function (e) {
evt.preventDefault(); e.preventDefault();
loadSnippets(); loadSnippets();
}); });
$("#resourceLink").click(function (evt) { $("#resourceLink").click(function (e) {
evt.preventDefault(); e.preventDefault();
loadResources(); loadResources();
}); });
@ -50,8 +50,7 @@ function buildLangSelect() {
function addSelectLangs(langList) { function addSelectLangs(langList) {
var selectors = $(".langSelect"); var selectors = $(".langSelect");
selectors.empty(); selectors.empty();
for (var i = 0; i < langList.length; i++) { for (let cur of langList) {
var cur = langList[i];
$("<option>").val(cur.langID).text(cur.langName).appendTo(selectors); $("<option>").val(cur.langID).text(cur.langName).appendTo(selectors);
} }
} }
@ -205,15 +204,8 @@ function loadResources() {
} }
function addResourceList(resourceList) { function addResourceList(resourceList) {
var mainList = $("#mainList"); for (let resource of resourceList) {
for (var i = 0; i < resourceList.length; i++) { addResource(resource);
$("<div>").attr({ "id": "resource-" + resourceList[i].resourceID }).appendTo(mainList);
$.ajax({
url: "resource.php?resourceID=" + resourceList[i].resourceID,
type: "GET",
success: addResource,
error: displayError
});
} }
} }
@ -223,6 +215,7 @@ function addResource(resource) {
"href": resource.resourceLink, "href": resource.resourceLink,
"target": "_blank" "target": "_blank"
}).text(resource.resourceLink); }).text(resource.resourceLink);
$("<div>").attr("id", "resource-" + resource.resourceID).appendTo($("#mainList"));
buildCard("resource", resource.resourceID, resource.resourceName, resource.languages, resource.resourceDescription, link); buildCard("resource", resource.resourceID, resource.resourceName, resource.languages, resource.resourceDescription, link);
} }
@ -255,19 +248,13 @@ function loadSnippets() {
function addSnippets(snippetList) { function addSnippets(snippetList) {
var mainList = $("#mainList"); var mainList = $("#mainList");
for (var i = 0; i < snippetList.length; i++) { for (let snippet of snippetList) {
// add thesse so that everything is loaded in order regardless of async addSnippet(snippet);
$("<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) { function addSnippet(snippet) {
$("<div>").attr({ "id": "snippet-" + snippet.snippetID }).appendTo(mainList);
var code = $('<pre><code>').attr("id", "snippet-" + snippet.snippetID + "-body").text(snippet.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); buildCard("snippet", snippet.snippetID, snippet.snippetName, snippet.languages, snippet.snippetDescription, code);
} }
@ -476,8 +463,7 @@ function saveLang() {
var langID = $("#editLangID").val(); var langID = $("#editLangID").val();
var langName = $("#txtEditLangName").val().trim(); var langName = $("#txtEditLangName").val().trim();
var data = {}; var data = { langID: langID };
data['langID'] = langID;
if (changeName && langName == "") { if (changeName && langName == "") {
displayError({responseText: "Name cannot be empty"}); displayError({responseText: "Name cannot be empty"});
@ -506,35 +492,10 @@ function saveLang() {
}); });
var langsToAdd = inANotInB(newLangsList, curLangsList); var langsToAdd = inANotInB(newLangsList, curLangsList);
manageAssocLang("lang", "PUT", langID, langsToAdd);
var langsToDelete = inANotInB(curLangsList, newLangsList); var langsToDelete = inANotInB(curLangsList, newLangsList);
manageAssocLang("lang", "DELETE", langID, langsToDelete);
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
});
} }
} }
@ -549,8 +510,7 @@ function saveSnippet() {
var snippetID = $("#editSnippetID").val(); var snippetID = $("#editSnippetID").val();
var snippetName = $("#txtEditSnippetName").val().trim(); var snippetName = $("#txtEditSnippetName").val().trim();
var data = {}; var data = { snippetID: snippetID };
data['snippetID'] = snippetID;
if (changeName && snippetName == "") { if (changeName && snippetName == "") {
displayError({responseText: "Name cannot be empty"}); displayError({responseText: "Name cannot be empty"});
@ -580,32 +540,10 @@ function saveSnippet() {
}); });
var langsToAdd = inANotInB(newLangsList, curLangsList); var langsToAdd = inANotInB(newLangsList, curLangsList);
addLangsSnippet(snippetID, langsToAdd); manageAssocLang("snippet", "PUT", snippetID, langsToAdd);
var langsToDelete = inANotInB(curLangsList, newLangsList); var langsToDelete = inANotInB(curLangsList, newLangsList);
deleteLangsSnippet(snippetID, langsToDelete); manageAssocLang("snippet", "DELETE", 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
});
} }
} }
@ -620,8 +558,7 @@ function saveResource() {
var resourceID = $("#editResourceID").val(); var resourceID = $("#editResourceID").val();
var resourceName = $("#txtEditResourceName").val().trim(); var resourceName = $("#txtEditResourceName").val().trim();
var data = {}; var data = { resourceID: resourceID };
data['resourceID'] = resourceID;
if (changeName && resourceName == "") { if (changeName && resourceName == "") {
displayError({responseText: "Name cannot be empty"}); displayError({responseText: "Name cannot be empty"});
@ -650,30 +587,21 @@ function saveResource() {
}); });
var langsToAdd = inANotInB(newLangsList, curLangsList); var langsToAdd = inANotInB(newLangsList, curLangsList);
addLangsResource(resourceID, langsToAdd); manageAssocLang("resource", "PUT", resourceID, langsToAdd);
var langsToDelete = inANotInB(curLangsList, newLangsList); var langsToDelete = inANotInB(curLangsList, newLangsList);
deleteLangsResource(resourceID, langsToDelete); manageAssocLang("resource", "DELETE", resourceID, langsToDelete);
} }
} }
function addLangsResource(resourceID, langList) { function manageAssocLang(type, action, id, langList) {
for (var i = 0; i < langList.length; i++) { for (let item of langList) {
var data = { langID: item };
data[type + "ID"] = id;
$.ajax({ $.ajax({
url: "resource.php", url: type + ".php",
type: "PUT", type: action,
data: {resourceID: resourceID, langID: langList[i]}, data: data,
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 error: displayError
}); });
} }
@ -731,9 +659,9 @@ function displayError(error, str) {
function inANotInB(a, b) { function inANotInB(a, b) {
var list = []; var list = [];
for (var i = 0; i < a.length; i++) { for (let item of a) {
if (b.indexOf(a[i]) == -1) if (b.indexOf(item) == -1)
list.push(a[i]); list.push(item);
} }
return list; return list;
} }