diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css
index 954cefb..47d62b7 100644
--- a/SmearcarDB/static/index.css
+++ b/SmearcarDB/static/index.css
@@ -338,7 +338,7 @@ a {
grid-row: 1;
}
-#addData {
+#editData {
display: grid;
grid-template-columns: 70% 30%;
grid-template-rows: 100%;
@@ -349,17 +349,17 @@ a {
font-size: 2vh;
}
-#addData p, #addData i {
+#editData p, #editData i {
display: inline-block;
margin: auto;
grid-row: 1;
}
-#addData:hover {
+#editData:hover {
background-color: rgba(0, 0, 0, 0.05);
}
-#newLanguage {
+#newLanguage, #editLanguage {
position: absolute;
width: 100%;
height: 100%;
@@ -368,7 +368,7 @@ a {
background-color: rgba(0,0,0,0.4);
}
-#newLanguage > div {
+#newLanguage > div, #editLanguage > div {
position: absolute;
width: 20%;
height: 60%;
@@ -378,31 +378,31 @@ a {
grid-template-rows: 6vh 5% 70% auto;
}
-#newLanguageName {
+#newLanguageName, #editLanguageName {
grid-row: 2;
}
-#newLanguageName p {
+#newLanguageName p, #editLanguageName p {
display: inline;
margin-left: 5%;
grid-row: 1;
}
-#newLanguageName input {
+#newLanguageName input, #editLanguageName input {
margin: auto 0 auto 0;
width: 50%;
grid-row: 1;
}
-#newLanguagePhonemes {
+#newLanguagePhonemes, #editLanguagePhonemes {
grid-row: 3;
}
-#newLanguagePhonemes p {
+#newLanguagePhonemes p, #editLanguagePhonemes p {
margin-left: 5%;
}
-#newLanguagePhonemes textarea {
+#newLanguagePhonemes textarea, #editLanguagePhonemes textarea {
width: 90%;
margin-left: 5%;
height: 90%;
@@ -411,12 +411,12 @@ a {
font-size: 1.5vh;
}
-#newLanguageSubmit {
+#newLanguageSubmit, #editLanguageSubmit {
display: grid;
grid-row: 4;
}
-#newLanguageSubmit p {
+#newLanguageSubmit p, #editLanguageSubmit p {
display: block;
font-size: 3vh;
margin: auto 10% auto;
diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js
index b08b274..3342f48 100644
--- a/SmearcarDB/static/index.js
+++ b/SmearcarDB/static/index.js
@@ -93,7 +93,7 @@ function updateNav(op) { // Updates the sidebar navigation.
newNav.style.color = "#F47922";
}
-function getData() {
+function getData(updatePage) {
$.ajax({
url: serverURL + '/server',
type: 'GET'
@@ -103,6 +103,8 @@ function getData() {
data = incoming;
generateDropOp();
createDrop();
+ if(updatePage) dropOpUpdate("langSelect");
+
},
function error(e) {
console.log(e);
@@ -196,19 +198,6 @@ function generateDropOp() { // For options that change based on data.
}
p1.appendChild(document.createTextNode(phonemes[i]));
p2.appendChild(document.createTextNode(langInfo.phonemes[phonemes[i]]));
- /*p2.className = "dataEdit"; Editing individual data
- p2.onclick = function(event) {
- if(this === event.target) return;
- closeEditInput();
- dataOpen = true;
- var input = document.createElement("input");
- var value = this.childNodes[0].nodeValue;
- this.removeChild(this.childNodes[0]);
- this.appendChild(input);
- input.value = value;
- input.id = "dataOpen";
- input.focus();
- }*/
dataBox.children[tableNum].appendChild(p1);
dataBox.children[tableNum].appendChild(p2);
}
@@ -230,104 +219,7 @@ function generateDropOp() { // For options that change based on data.
dataBox.style.opacity = "1";
graph.style.opacity = "1";
}, 300);
- }].concat(["Select language..."].concat(data.languages));
-
- /* dropOp["phonemeSelect"] = [function() {
- // Generate info box material.
- var langInfo = language(dropOpStore["langSelect"]);
- var info = document.getElementById("langInfoCont");
- var dataBox = document.getElementById("dataTableCont");
- var graph = document.querySelectorAll("#langGraph > canvas")[0];
- info.style.opacity = "0";
- dataBox.style.opacity = "0";
- graph.style.opacity = "0";
- setTimeout(function() {
- while (info.firstChild) {
- info.removeChild(info.firstChild);
- }
- var p = document.createElement("p");
- var p2 = document.createElement("p");
- var a = document.createElement("a");
- p.appendChild(document.createTextNode("Type: " + (langInfo.type || "N/A")));
- p2.appendChild(document.createTextNode("Source: "));
- if(langInfo.source === null) {
- p2.appendChild(document.createTextNode("N/A"));
- } else if(langInfo.source.length > 0) {
- a.href = langInfo.source;
- srcText = (langInfo.source.length > 60) ? langInfo.source.substring(0, 57) + "..." : langInfo.source;
- a.appendChild(document.createTextNode(srcText));
- p2.appendChild(a);
- }
- info.appendChild(p);
- info.appendChild(p2);
-
- // Generate data box material.
-
- var phonemes = Object.keys(langInfo.phonemes);
-
- while (dataBox.firstChild) {
- dataBox.removeChild(dataBox.firstChild);
- }
- dataBox.style.gridTemplateColumns = "repeat("+Math.ceil(phonemes.length/6).toString() + ", 1fr)";
- for(var i = 0; i < 9; i++) dataBox.appendChild(document.createElement("div")); // Extra divs will be filled if necessary.
- for(i = 0; i < phonemes.length; i++) {
- var tableNum = Math.floor(i/6);
- var row = i+2-tableNum*7;
- var p1 = document.createElement("p");
- var p2 = document.createElement("p");
- p1.style.textAlign = "right";
- p2.style.textAlign = "left";
- p1.style.borderRight = "1px solid #D5D5D5";
- if(i%6 === 0) {
- var pT1 = document.createElement("p");
- var pT2 = document.createElement("p");
- pT1.style.textAlign = "right";
- pT2.style.textAlign = "left";
- pT1.style.borderRight = "1px solid #D5D5D5";
- pT1.style.borderBottom = "1px solid #D5D5D5";
- pT2.style.borderBottom = "1px solid #D5D5D5";
- pT1.appendChild(document.createTextNode("Phoneme"));
- pT2.appendChild(document.createTextNode("Percent"));
- dataBox.children[tableNum].appendChild(pT1);
- dataBox.children[tableNum].appendChild(pT2);
- }
- p1.appendChild(document.createTextNode(phonemes[i]));
- p2.appendChild(document.createTextNode(langInfo.phonemes[phonemes[i]]));
- p2.className = "dataEdit";
- p2.onclick = function(event) {
- if(this === event.target) return;
- closeEditInput();
- dataOpen = true;
- var input = document.createElement("input");
- var value = this.childNodes[0].nodeValue;
- this.removeChild(this.childNodes[0]);
- this.appendChild(input);
- input.value = value;
- input.id = "dataOpen";
- input.focus();
- }
- dataBox.children[tableNum].appendChild(p1);
- dataBox.children[tableNum].appendChild(p2);
- }
- var graphData = Object.entries(langInfo.phonemes).sort(function(a,b) {
- return b[1] - a[1];
- });
- graphData = [graphData.map(function(a,b) {
- return a[0];
- }), graphData.map(function(a,b) {
- return a[1];
- })];
- // Generate graphs.
- var ctx = graph.getContext("2d");
- try {
- languageChart.destroy();
- } catch(err) {}
- languageChart = new Chart(ctx, chartOptions(graphData));
- info.style.opacity = "1";
- dataBox.style.opacity = "1";
- graph.style.opacity = "1";
- }, 300);
- }]*/
+ }].concat(["Select language..."].concat(data.languages))
}
function closeEditInput() {
@@ -362,12 +254,6 @@ function closeEditInput() {
} catch(err) {}
}
-document.addEventListener("click", function(event) {
- if(event.target.className !== "dataEdit") {
- closeEditInput();
- }
-});
-
function createDrop() {
var dropButtons = document.getElementsByClassName("dropdown");
for(var i = 0; i < dropButtons.length; i++) {
@@ -386,6 +272,18 @@ function createDrop() {
div.appendChild(ic);
var div2 = document.createElement("div");
div2.className = "opCont transition";
+
+ var p3 = document.createElement("p");
+ p3.className = "transition";
+ p3.onclick = function() { // Open add language.
+ document.getElementById("newLanguage").style.display = "block";
+ setTimeout(function() {
+ document.getElementById("newLanguage").style.opacity = "1";
+ }, 10);
+ }
+ p3.appendChild(document.createTextNode("Add language..."));
+ div2.appendChild(p3);
+
for (var j = 2; j < dropOp[op].length; j++) {
var p2 = document.createElement("p");
p2.className = "transition";
@@ -402,6 +300,7 @@ function createDrop() {
p2.appendChild(document.createTextNode(dropOp[op][j]));
div2.appendChild(p2);
}
+
div.onclick = function(e) {
e.stopPropagation();
let opCont = this.nextElementSibling;
@@ -531,35 +430,50 @@ function chartOptions(graphData) {
};
}
-document.getElementById("addData").onclick = function() { // Open add language.
- document.getElementById("newLanguage").style.display = "block";
- setTimeout(function() {
- document.getElementById("newLanguage").style.opacity = "1";
- }, 10);
-}
-
document.getElementById("newLanguage").onclick = function(event) { // Close add language.
document.getElementById("newLanguage").style.opacity = "0";
setTimeout(function() {
document.getElementById("newLanguage").style.display = "none";
}, 300);
+ document.getElementById("editLanguage").style.opacity = "0";
+ setTimeout(function() {
+ document.getElementById("editLanguage").style.display = "none";
+ }, 300);
}
document.querySelectorAll("#newLanguage > div")[0].onclick = function(event) {
event.stopPropagation();
}
+document.getElementById("editData").onclick = function() { // Open edit language.
+ var langInfo = language(dropOpStore["langSelect"]);
+ document.querySelectorAll("#editLanguageName input")[0].value = langInfo.name;
+ var k = Object.keys(langInfo.phonemes);
+ var v = Object.values(langInfo.phonemes);
+ var str = "";
+ for(var i = 0; i < k.length; i++) {
+ str += k[i] + " " + v[i] + ((i === k.length-1) ? "" : "\n");
+ }
+ document.querySelectorAll("#editLanguagePhonemes textarea")[0].value = str;
+ document.getElementById("editLanguage").style.display = "block";
+ setTimeout(function() {
+ document.getElementById("editLanguage").style.opacity = "1";
+ }, 10);
+}
+
document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() {
if(!submittable) return;
submittable = false;
var name = document.querySelectorAll("#newLanguageName input")[0].value;
if(name === "") {
alert("Please enter in the name for language!");
+ submittable = true;
return;
}
var info = document.querySelectorAll("#newLanguagePhonemes textarea")[0].value;
if(info === "") {
alert("Please enter in the values for phonemes!");
+ submittable = true;
return;
}
info = info.split("\n");
@@ -569,6 +483,7 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() {
var num = parseFloat(info[i][1]);
if(isNaN(num)) {
alert("Value for " + info[i][0] + " is not a number or does not exist!");
+ submittable = true;
return;
}
phonemes[info[i][0]] = num;
@@ -578,7 +493,7 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() {
source: null,
phonemes: phonemes
};
- console.log(newLanguage);
+
this.innerText = "Processing...";
this.style.backgroundColor = "rgba(0,0,0,0.2)";
var p = this;
@@ -600,14 +515,198 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() {
document.querySelectorAll("#newLanguageName input")[0].value = "";
document.querySelectorAll("#newLanguagePhonemes textarea")[0].value = "";
}, 300);
- getData();
+ getData(true);
},
function error(e) {
- alert("There was an error adding a language");
+ alert("There was an error adding a language.");
console.log(e);
}
);
}
+
+document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() {
+ if(!submittable) return;
+ var langInfo = language(dropOpStore["langSelect"]);
+ submittable = false;
+ var name = document.querySelectorAll("#editLanguageName input")[0].value;
+ if(name === "") {
+ alert("Please enter in the name for language!");
+ submittable = true;
+ return;
+ }
+ var info = document.querySelectorAll("#editLanguagePhonemes textarea")[0].value;
+ if(info === "") {
+ alert("Please enter in the values for phonemes!");
+ submittable = true;
+ return;
+ }
+ info = info.split("\n");
+ var newPhonemes = {};
+ for(var i = 0; i < info.length; i++) {
+ info[i] = info[i].split(/[ ,]+/);
+ var num = parseFloat(info[i][1]);
+ if(isNaN(num)) {
+ alert("Value for " + info[i][0] + " is not a number or does not exist!");
+ submittable = true;
+ return;
+ }
+ newPhonemes[info[i][0]] = num;
+ }
+
+ this.innerText = "Processing...";
+ this.style.backgroundColor = "rgba(0,0,0,0.2)";
+ var p = this;
+
+ var diffChange = [];
+ var diffRemove = [];
+ var phoKeys = Object.keys(langInfo.phonemes);
+ for(var i = 0; i < phoKeys.length; i++) {
+ if(newPhonemes[phoKeys[i]] === undefined) {
+ diffRemove.push(phoKeys[i]);
+ } else if(langInfo.phonemes[phoKeys[i]] !== newPhonemes[phoKeys[i]]) {
+ diffChange.push(phoKeys[i]);
+ } else {
+ continue;
+ }
+ }
+
+ var todo = {
+ name: newLanguage.name !== langInfo.name,
+ add: diffChange.length > 0,
+ remove: diffRemove.length > 0
+ }
+
+ var error = false;
+
+ if(todo.name) { // Ajax requests for changing name.
+ $.ajax({
+ url: serverURL + '/server',
+ type: 'PATCH',
+ dataType: "json",
+ contentType: 'application/json;charset=UTF-8',
+ data: JSON.stringify({
+ action: "language_name_edit",
+ data: {
+ language_id: langInfo.id,
+ language_name: name
+ }
+ })
+ })
+ .then(
+ function success(incoming) {
+ if(todo.name && !todo.add && !todo.remove) {
+ document.getElementById("editLanguage").style.opacity = "0";
+ setTimeout(function() {
+ document.getElementById("editLanguage").style.display = "none";
+ submittable = true;
+ p.innerText = "Submit!";
+ p.style.backgroundColor = "#FEFEFE";
+ document.querySelectorAll("#editLanguageName input")[0].value = "";
+ document.querySelectorAll("#editLanguagePhonemes textarea")[0].value = "";
+ }, 300);
+ getData(true);
+ }
+ },
+ function error(e) {
+ error = true;
+ alert("There was an error change the language name.");
+ console.log(e);
+ }
+ );
+ }
+
+ if(error) return;
+
+ for(var i = 0; i < diffChange.length; i++) { // Ajax requests for adding or editing phonemes.
+ $.ajax({
+ url: serverURL + '/server',
+ type: 'PATCH',
+ dataType: "json",
+ contentType: 'application/json;charset=UTF-8',
+ context: {counter: i},
+ data: JSON.stringify({
+ action: "phoneme_add",
+ data: {
+ language_id: langInfo.id,
+ phoneme: diffChange[i],
+ value: newPhonemes[diffChange[i]]
+ }
+ })
+ })
+ .then(
+ function success(incoming) {
+ if(todo.add && !todo.remove && this.counter === diffChange.length-1) {
+ document.getElementById("editLanguage").style.opacity = "0";
+ setTimeout(function() {
+ document.getElementById("editLanguage").style.display = "none";
+ submittable = true;
+ p.innerText = "Submit!";
+ p.style.backgroundColor = "#FEFEFE";
+ document.querySelectorAll("#editLanguageName input")[0].value = "";
+ document.querySelectorAll("#editLanguagePhonemes textarea")[0].value = "";
+ }, 300);
+ getData(true);
+ }
+
+ },
+ function error(e) {
+ error = true;
+ alert("There was an error change the phoneme values.");
+ console.log(e);
+ }
+ );
+ }
+
+ if(error) return;
+
+ console.log({
+ action: "phoneme_remove",
+ data: {
+ language_id: langInfo.id,
+ phoneme_id: diffRemove[i]
+ }
+ })
+
+ for(var i = 0; i < diffRemove.length; i++) { // Ajax requests for removing phoneme values.
+ $.ajax({
+ url: serverURL + '/server',
+ type: 'PATCH',
+ dataType: "json",
+ contentType: 'application/json;charset=UTF-8',
+ context: {counter: i},
+ data: JSON.stringify({
+ action: "phoneme_remove",
+ data: {
+ language_id: langInfo.id,
+ phoneme_id: diffRemove[i]
+ }
+ })
+ })
+ .then(
+ function success(incoming) {
+ if(this.counter === diffRemove.length-1) {
+ document.getElementById("editLanguage").style.opacity = "0";
+ setTimeout(function() {
+ document.getElementById("editLanguage").style.display = "none";
+ submittable = true;
+ p.innerText = "Submit!";
+ p.style.backgroundColor = "#FEFEFE";
+ document.querySelectorAll("#editLanguageName input")[0].value = "";
+ document.querySelectorAll("#editLanguagePhonemes textarea")[0].value = "";
+ }, 300);
+ getData(true);
+ }
+
+ },
+ function error(e) {
+ error = true;
+ alert("There was an error removing phoneme values.");
+ console.log(e);
+ }
+ );
+ }
+}
+
/*function getTrelloCards() {
Trello.authorize();
var cardArr, listArr, lists;
diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html
index 1c37085..5c80d7b 100644
--- a/SmearcarDB/templates/index.html
+++ b/SmearcarDB/templates/index.html
@@ -17,7 +17,7 @@
@@ -45,9 +45,9 @@
Data
-
-
Add Language
-
+
@@ -109,6 +109,22 @@
+