diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css
index a695080..b5f6954 100644
--- a/SmearcarDB/static/index.css
+++ b/SmearcarDB/static/index.css
@@ -239,27 +239,27 @@ a {
height: 20%;
}
-#dataValues1 #dataTable, #dataValues2 .row {
+#dataValues1 #dataTable, #dataValues2 #dataTable2 {
height: 42%;
}
-#dataTable {
+#dataTable, #dataTable2 {
grid-template-columns: 90fr 10fr;
}
-#langSelect {
+#langSelect, #phonemeSelect {
grid-column: 1;
grid-row: 1
}
-#langSelect .dropdown {
+#langSelect .dropdown, #phonemeSelect .dropdown {
height: 50%;
width: 85%;
margin: auto 0 auto 5%;
}
-#flipMode {
+#flipMode1, #flipMode2 {
grid-column: 4;
grid-row: 1;
cursor: pointer;
@@ -270,11 +270,11 @@ a {
background-color: rgba(0, 0, 0, 0);
}
-#flipMode:hover {
+#flipMode1:hover, #flipMode2:hover {
background-color: rgba(0, 0, 0, 0.05);
}
-#flipMode p {
+#flipMode1 p, #flipMode2 p {
font-size: 2vh;
margin: auto 0 auto auto;
vertical-align: middle;
@@ -284,27 +284,27 @@ a {
pointer-events: none;
}
-#flipMode .fa {
- margin: auto;
+#flipMode1 .fa, #flipMode2 .fa {
+ margin: auto auto auto 30%;
font-size: 3vh;
grid-column: 2;
grid-row: 1;
pointer-events: none;
}
-#dataInfo {
+#dataInfo, #dataInfo2 {
grid-column: 2;
grid-row: 1;
}
-#langInfoCont {
+#langInfoCont, #phonemeInfoCont {
display: grid;
font-weight: 300;
font-size: 2.5vh;
margin: auto 0 auto 4vh;
}
-#dataTableCont {
+#dataTableCont, #dataTableCont2 {
display: grid;
font-weight: 300;
grid-template-columns: repeat(4, 1fr);
@@ -313,18 +313,18 @@ a {
padding: 2vh;
}
-#dataTableCont div {
+#dataTableCont div, #dataTableCont2 div {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(8, 1fr);
}
-#dataTableCont div p {
+#dataTableCont div p, #dataTableCont2 div p {
font-size: 2.2vh;
padding: 0 5% 0 5%;
}
-#dataTableCont input {
+#dataTableCont input, #dataTableCont2 input {
border: 1px solid rgba(0, 0, 0, 0.3);
font-size: 2vh;
width: 60%;
@@ -333,11 +333,11 @@ a {
font-weight: 300;
}
-#langGraph {
+#langGraph, #phonemeGraph {
display: block;
}
-#langGraph canvas {
+#langGraph canvas, #phonemeGraph canvas {
grid-column: 1;
grid-row: 1;
}
diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js
index 4095950..842d443 100644
--- a/SmearcarDB/static/index.js
+++ b/SmearcarDB/static/index.js
@@ -5,6 +5,7 @@ var data;
var languageChart;
var dataOpen = false;
var submittable = true;
+var flipMode = "dataValues1";
var dropOp = {};
var dropOpStore = {};
var loginInfo = {};
@@ -263,9 +264,28 @@ function phoneme(p) {
});
}
-document.getElementById("flipMode").onclick = function() {
- dropOpStore["flipMode"] = (dropOpStore["flipMode"] === "language") ? "phoneme" : "language";
+document.getElementById("flipMode1").onclick = function() {
+ document.getElementById(flipMode).style.opacity = "0";
+ setTimeout(function() {
+ document.getElementById(flipMode).style.display = "none";
+ flipMode = (flipMode === "dataValues1") ? "dataValues2" : "dataValues1";
+ document.getElementById(flipMode).style.display = "block";
+ setTimeout(function() {
+ document.getElementById(flipMode).style.opacity = "1";
+ }, 30);
+ }, 300);
+};
+document.getElementById("flipMode2").onclick = function() {
+ document.getElementById(flipMode).style.opacity = "0";
+ setTimeout(function() {
+ document.getElementById(flipMode).style.display = "none";
+ flipMode = (flipMode === "dataValues1") ? "dataValues2" : "dataValues1";
+ document.getElementById(flipMode).style.display = "block";
+ setTimeout(function() {
+ document.getElementById(flipMode).style.opacity = "1";
+ }, 30);
+ }, 300);
}
function generateDropOp() { // For options that change based on data.
@@ -289,7 +309,6 @@ function generateDropOp() { // For options that change based on data.
info.appendChild(a);
// Generate data box material.
-
var phonemes = Object.keys(langInfo.phonemes).sort(Intl.Collator().compare);
while (dataBox.firstChild) {
@@ -343,9 +362,78 @@ function generateDropOp() { // For options that change based on data.
}, 300);
}].concat(["Select language..."].concat(data.values.map(a=>a.id)));
- dropOp["authority"] = [function() {
+ dropOp["phonemeSelect"] = [function() { // Function that occurs when change language.
+ // Generate info box material.
+ var langInfo = phoneme(dropOpStore["phonemeSelect"]);
+ var info = document.getElementById("phonemeInfoCont");
+ var dataBox = document.getElementById("dataTableCont2");
+ var graph = document.querySelectorAll("#phonemeGraph > canvas")[0];
+ info.style.opacity = "0";
+ dataBox.style.opacity = "0";
+ graph.style.opacity = "0";
+ setTimeout(function() {
+ while (info.firstChild) {
+ info.removeChild(info.firstChild);
+ }
+ var a = document.createElement("a");
+ a.appendChild(document.createTextNode("Sound"));
+ a.href = "https://en.wikipedia.org"; // replace with wikipedia
+ a.setAttribute("target", "_blank");
+ info.appendChild(a);
+
+ // Generate data box material.
+
+ while (dataBox.firstChild) {
+ dataBox.removeChild(dataBox.firstChild);
+ }
+ dataBox.style.gridTemplateColumns = "repeat("+Math.ceil(langInfo.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 < langInfo.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("Language"));
+ pT2.appendChild(document.createTextNode("Percent"));
+ dataBox.children[tableNum].appendChild(pT1);
+ dataBox.children[tableNum].appendChild(pT2);
+ }
+ p1.appendChild(document.createTextNode(Object.keys(langInfo[i])));
+ p2.appendChild(document.createTextNode(Rnd(langInfo[i][Object.keys(langInfo[i])], 2)));
+ dataBox.children[tableNum].appendChild(p1);
+ dataBox.children[tableNum].appendChild(p2);
+ }
+ var graphData = langInfo.map(function(a) { return Object.entries(a)[0]; }).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 phoneme..."].concat(data.phonemes.sort()));
- }].concat(["Select authority..."].concat(Object.keys(authorityLabels)));
}
function createDrop() {
@@ -390,7 +478,7 @@ function createDrop() {
}, 300);
};
if(op === "langSelect") p2.appendChild(document.createTextNode(language(dropOp[op][j]).name));
- if(op === "authority") p2.appendChild(document.createTextNode(authorityLabels[dropOp[op][j]]))
+ if(op === "phonemeSelect") p2.appendChild(document.createTextNode(dropOp[op][j]));
div2.appendChild(p2);
}
@@ -418,7 +506,6 @@ function dropOpUpdate(op) {
var dropdown = document.querySelectorAll(".dropdown[option=" + op + "] .button p")[0];
if(op === "langSelect") dropdown.textContent = language(dropOpStore[op]).name;
if(op === "authority") dropdown.textContent = authorityLabels[dropOpStore[op]];
- console.log(op);
(dropOp[op][0])();
}
diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html
index f62c174..d589fab 100644
--- a/SmearcarDB/templates/index.html
+++ b/SmearcarDB/templates/index.html
@@ -43,7 +43,7 @@