Added language adding
This commit is contained in:
Kenneth Jao
parent
c45588b774
commit
937c29665c
@ -1,4 +1,3 @@
|
||||
/* Layout Elements and General Formatting */
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -6,20 +5,17 @@ html {
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
color: white;
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
|
||||
grid-template-columns: 15% auto;
|
||||
grid-template-rows: 8% auto;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,p {
|
||||
h1, h2, h3, h4, h5, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -29,20 +25,16 @@ a {
|
||||
}
|
||||
|
||||
.transition {
|
||||
-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
|
||||
-moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
-ms-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
-webkit-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
-moz-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
-ms-transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
}
|
||||
|
||||
#header1 {
|
||||
display: grid;
|
||||
|
||||
background-color: #F47922;
|
||||
|
||||
text-align: center;
|
||||
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
cursor: pointer;
|
||||
@ -50,7 +42,7 @@ a {
|
||||
|
||||
#header1 h1 {
|
||||
margin: auto 0 auto 0;
|
||||
|
||||
font-size: 4vh;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@ -60,88 +52,69 @@ a {
|
||||
|
||||
#header2 {
|
||||
background-color: #524948;
|
||||
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
background-color: #524948;
|
||||
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.navi {
|
||||
display: grid;
|
||||
|
||||
height: 6vh;
|
||||
width: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
grid-template-columns: 1fr 3fr 7fr;
|
||||
}
|
||||
|
||||
.navi:hover {
|
||||
background-color: rgba(255,255,255,0.1) !important;
|
||||
background-color: rgba(255, 255, 255, 0.1) !important
|
||||
}
|
||||
|
||||
.navi i {
|
||||
margin: auto 0 auto 0;
|
||||
|
||||
font-size: 130%;
|
||||
font-size: 2.1vh;
|
||||
text-align: center;
|
||||
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.navi p {
|
||||
margin: auto 0 auto 0;
|
||||
|
||||
font-size: 110%;
|
||||
|
||||
font-size: 2vh;
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
#mainContainer {
|
||||
overflow-y: auto;
|
||||
padding: 2vh;
|
||||
|
||||
background-color: #F8F3F0;
|
||||
|
||||
font-family: 'Saira Condensed', sans-serif;
|
||||
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
||||
border-left: 5px solid #F88A3C;
|
||||
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto 0%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
background-color: rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
.dropdown .button {
|
||||
display: grid;
|
||||
|
||||
padding-left: 2%;
|
||||
margin: auto 0 auto 0;
|
||||
|
||||
font-size: 170%;
|
||||
|
||||
font-size: 2.7vh;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
grid-template-columns: 14fr 1fr;
|
||||
@ -156,7 +129,6 @@ a {
|
||||
|
||||
.dropdown .button i {
|
||||
margin: auto 0 auto 0;
|
||||
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
@ -165,83 +137,70 @@ a {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
|
||||
background-color: #FEFEFE;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
|
||||
overflow-y: auto;
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
.dropdown .opCont p {
|
||||
padding: 2% 0 2% 4%;
|
||||
|
||||
font-size: 130%;
|
||||
font-size: 2.3vh;
|
||||
}
|
||||
|
||||
.dropdown .opCont p:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Main Body */
|
||||
|
||||
#home, #dataValues, #files, #about {
|
||||
#home, #dataValues1, #dataValues2, #files, #about {
|
||||
display: none;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
|
||||
transition: opacity 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
grid-gap: 2vh;
|
||||
}
|
||||
|
||||
#home {
|
||||
display: block;
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
|
||||
border-radius: 2px;
|
||||
|
||||
background-color: #FEFEFE;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
color: black;
|
||||
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
|
||||
grid-template-columns: 35% auto 20%;
|
||||
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
grid-template-columns: 35% auto 25% 15%;
|
||||
grid-template-rows: 6vh auto;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.card > h2 {
|
||||
margin: auto 0 auto 2vh;
|
||||
|
||||
font-size: 2.8vh;
|
||||
font-weight: 300;
|
||||
border-bottom: 1px solid #D5D5D5;
|
||||
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.card > h3 {
|
||||
grid-column: 3;
|
||||
margin: auto 10% auto 0;
|
||||
font-weight: 300;
|
||||
font-size: 1.8vh;
|
||||
grid-column: 3 / 5;
|
||||
grid-row: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.card > div {
|
||||
@ -251,17 +210,12 @@ a {
|
||||
|
||||
.card > p {
|
||||
margin: 2vh 0 2vh 4vh;
|
||||
font-size: 120%;
|
||||
font-size: 2.2vh;
|
||||
font-weight: 300;
|
||||
grid-column: 1 / 4;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.card > h3 {
|
||||
margin: auto;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@ -269,21 +223,26 @@ a {
|
||||
grid-gap: 2vh;
|
||||
}
|
||||
|
||||
#dataValues > div {
|
||||
#dataValues1 > div, #dataValues2 > div {
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
#dataValues .row {
|
||||
#dataValues1 .row, #dataValues2 .row {
|
||||
height: 20%;
|
||||
}
|
||||
|
||||
#dataValues #dataTable {
|
||||
#dataValues1 #dataTable, #dataValues2 .row {
|
||||
height: 42%;
|
||||
}
|
||||
|
||||
#dataTable {
|
||||
grid-template-columns: 90fr 10fr;
|
||||
}
|
||||
|
||||
|
||||
#langSelect {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
grid-row: 1
|
||||
}
|
||||
|
||||
#langSelect .dropdown {
|
||||
@ -292,6 +251,40 @@ a {
|
||||
margin: auto 0 auto 5%;
|
||||
}
|
||||
|
||||
#flipMode {
|
||||
grid-column: 4;
|
||||
grid-row: 1;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
display: grid;
|
||||
grid-template-columns: auto 40%;
|
||||
grid-template-rows: 1fr;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
#flipMode:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
#flipMode p {
|
||||
font-size: 2vh;
|
||||
margin: auto 0 auto auto;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
d
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#flipMode .fa {
|
||||
margin: auto;
|
||||
font-size: 3vh;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#dataInfo {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
@ -300,7 +293,7 @@ a {
|
||||
#langInfoCont {
|
||||
display: grid;
|
||||
font-weight: 300;
|
||||
font-size: 150%;
|
||||
font-size: 2.5vh;
|
||||
margin: auto 0 auto 4vh;
|
||||
}
|
||||
|
||||
@ -320,18 +313,17 @@ a {
|
||||
}
|
||||
|
||||
#dataTableCont div p {
|
||||
font-size: 130%;
|
||||
font-size: 2.2vh;
|
||||
padding: 0 5% 0 5%;
|
||||
}
|
||||
|
||||
#dataTableCont input {
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
font-size: 100%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
font-size: 2vh;
|
||||
width: 60%;
|
||||
padding: 0;
|
||||
font-family: 'Saira Condensed', sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
}
|
||||
|
||||
#langGraph {
|
||||
@ -342,3 +334,90 @@ a {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#addData {
|
||||
display: grid;
|
||||
grid-template-columns: 70% 30%;
|
||||
grid-template-rows: 100%;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
cursor: pointer;
|
||||
|
||||
font-size: 2vh;
|
||||
}
|
||||
|
||||
#addData p, #addData i {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#addData:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
#newLanguage {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
#newLanguage > div {
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
height: 60%;
|
||||
margin: 5% 40% 0 40%;
|
||||
background-color: #F8F3F0;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 6vh 5% 70% auto;
|
||||
}
|
||||
|
||||
#newLanguageName {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#newLanguageName p {
|
||||
display: inline;
|
||||
margin-left: 5%;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#newLanguageName input {
|
||||
margin: auto 0 auto 0;
|
||||
width: 50%;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#newLanguagePhonemes {
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
#newLanguagePhonemes p {
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
#newLanguagePhonemes textarea {
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
height: 90%;
|
||||
resize: none;
|
||||
font-family: 'Saira Condensed', sans-serif;
|
||||
font-size: 1.5vh;
|
||||
}
|
||||
|
||||
#newLanguageSubmit {
|
||||
display: grid;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
#newLanguageSubmit p {
|
||||
display: block;
|
||||
font-size: 3vh;
|
||||
margin: auto 10% auto;
|
||||
padding: 1%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1,15 +1,17 @@
|
||||
var navSelect = "home";
|
||||
var dataMode
|
||||
var serverURL = window.location.origin;
|
||||
var data;
|
||||
var languageChart;
|
||||
var dataOpen = false;
|
||||
var submittable = true;
|
||||
|
||||
// var trelloInfo = {};
|
||||
|
||||
|
||||
var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
|
||||
["home", "Home", "home"],
|
||||
["bar-chart", "Data Values", "dataValues"],
|
||||
["bar-chart", "Data Values", "dataValues1"],
|
||||
["database", "Database and Files", "files"],
|
||||
["info", "About", "about"]
|
||||
];
|
||||
@ -127,6 +129,11 @@ function phoneme(p) {
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("flipMode").onclick = function() {
|
||||
dropOpStore["flipMode"] = (dropOpStore["flipMode"] === "language") ? "phoneme" : "language";
|
||||
|
||||
}
|
||||
|
||||
function generateDropOp() { // For options that change based on data.
|
||||
dropOp["langSelect"] = [function() { // Function that occurs when change language.
|
||||
// Generate info box material.
|
||||
@ -161,6 +168,103 @@ function generateDropOp() { // For options that change based on data.
|
||||
|
||||
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"; 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);
|
||||
}
|
||||
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));
|
||||
|
||||
/* 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);
|
||||
}
|
||||
@ -218,64 +322,12 @@ function generateDropOp() { // For options that change based on data.
|
||||
try {
|
||||
languageChart.destroy();
|
||||
} catch(err) {}
|
||||
languageChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: graphData[0],
|
||||
datasets: [{
|
||||
label: "Phoneme Prevalence",
|
||||
data: graphData[1],
|
||||
backgroundColor: 'rgba(244, 121, 34, 0.7)',
|
||||
borderColor: 'rgba(246, 112, 18, 1)',
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontFamily: "'Open Sans Condensed', sans-serif",
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Phoneme (%)",
|
||||
fontFamily: "'Open Sans Condensed', sans-serif",
|
||||
fontSize: 20,
|
||||
padding: 4
|
||||
},
|
||||
ticks: {
|
||||
fontFamily: "'Open Sans Condensed', sans-serif",
|
||||
fontSize: 20,
|
||||
callback: function(value) {
|
||||
return value + "%";
|
||||
}
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Percent Prevalence",
|
||||
fontFamily: "'Open Sans Condensed', sans-serif",
|
||||
fontSize: 20,
|
||||
padding: 4
|
||||
},
|
||||
ticks: {
|
||||
fontFamily: "'Open Sans Condensed', sans-serif",
|
||||
fontSize: 20
|
||||
}
|
||||
}],
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
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() {
|
||||
@ -318,7 +370,10 @@ document.addEventListener("click", function(event) {
|
||||
|
||||
function createDrop() {
|
||||
var dropButtons = document.getElementsByClassName("dropdown");
|
||||
for (var i = 0; i < dropButtons.length; i++) {
|
||||
for(var i = 0; i < dropButtons.length; i++) {
|
||||
while(dropButtons[i].firstChild) dropButtons[i].removeChild(dropButtons[i].firstChild);
|
||||
}
|
||||
for (i = 0; i < dropButtons.length; i++) {
|
||||
var div = document.createElement("div");
|
||||
div.className = "button";
|
||||
var p = document.createElement("p");
|
||||
@ -421,6 +476,136 @@ function homeCards() {
|
||||
}
|
||||
}
|
||||
|
||||
function chartOptions(graphData) {
|
||||
return {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: graphData[0],
|
||||
datasets: [{
|
||||
label: "Phoneme Prevalence",
|
||||
data: graphData[1],
|
||||
backgroundColor: 'rgba(244, 121, 34, 0.7)',
|
||||
borderColor: 'rgba(246, 112, 18, 1)',
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontFamily: "'Open Sans Condensed', sans-serif",
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Phoneme (%)",
|
||||
fontFamily: "'Open Sans Condensed', sans-serif",
|
||||
fontSize: 20,
|
||||
padding: 4
|
||||
},
|
||||
ticks: {
|
||||
fontFamily: "'Open Sans Condensed', sans-serif",
|
||||
fontSize: 20,
|
||||
callback: function(value) {
|
||||
return value + "%";
|
||||
}
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Percent Prevalence",
|
||||
fontFamily: "'Open Sans Condensed', sans-serif",
|
||||
fontSize: 20,
|
||||
padding: 4
|
||||
},
|
||||
ticks: {
|
||||
fontFamily: "'Open Sans Condensed', sans-serif",
|
||||
fontSize: 20
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
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.querySelectorAll("#newLanguage > div")[0].onclick = function(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
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!");
|
||||
return;
|
||||
}
|
||||
var info = document.querySelectorAll("#newLanguagePhonemes textarea")[0].value;
|
||||
if(info === "") {
|
||||
alert("Please enter in the values for phonemes!");
|
||||
return;
|
||||
}
|
||||
info = info.split("\n");
|
||||
var phonemes = {};
|
||||
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!");
|
||||
return;
|
||||
}
|
||||
phonemes[info[i][0]] = num;
|
||||
}
|
||||
var newLanguage = {
|
||||
name: name,
|
||||
source: null,
|
||||
phonemes: phonemes
|
||||
};
|
||||
console.log(newLanguage);
|
||||
this.innerText = "Processing...";
|
||||
this.style.backgroundColor = "rgba(0,0,0,0.2)";
|
||||
var p = this;
|
||||
$.ajax({
|
||||
url: serverURL + '/server',
|
||||
type: 'POST',
|
||||
dataType: "json",
|
||||
contentType: 'application/json;charset=UTF-8',
|
||||
data: JSON.stringify(newLanguage)
|
||||
})
|
||||
.then(
|
||||
function success(incoming) {
|
||||
document.getElementById("newLanguage").style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
document.getElementById("newLanguage").style.display = "none";
|
||||
submittable = true;
|
||||
p.innerText = "Submit!";
|
||||
p.style.backgroundColor = "#FEFEFE";
|
||||
}, 300);
|
||||
getData();
|
||||
},
|
||||
function error(e) {
|
||||
alert("There was an error adding a language");
|
||||
console.log(e);
|
||||
}
|
||||
);
|
||||
}
|
||||
/*function getTrelloCards() {
|
||||
Trello.authorize();
|
||||
var cardArr, listArr, lists;
|
||||
@ -452,3 +637,4 @@ getData();
|
||||
homeCards();
|
||||
createNav();
|
||||
updateNav(navSelect);
|
||||
|
||||
|
||||
@ -26,10 +26,44 @@
|
||||
<div id="mainContainer">
|
||||
<div id="home" class="optionContainer">
|
||||
</div>
|
||||
<div id="dataValues" class="optionContainer">
|
||||
<div id="dataValues1" class="optionContainer">
|
||||
<div class="row">
|
||||
<div id="langSelect" class="card">
|
||||
<h2>Language</h2>
|
||||
<div id="flipMode" class="transition">
|
||||
<p>Phoneme</p>
|
||||
<i class="fa fa-angle-double-right"></i>
|
||||
</div>
|
||||
<div option="langSelect" class="dropdown transition">
|
||||
</div>
|
||||
</div>
|
||||
<div id="dataInfo" class="card">
|
||||
<h2>Info</h2>
|
||||
<div id="langInfoCont" class="transition">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dataTable" class="card">
|
||||
<h2>Data</h2>
|
||||
<div id="addData" class="transition">
|
||||
<p>Add Language</p>
|
||||
<i class="fa fa-plus"></i>
|
||||
</div>
|
||||
<div id="dataTableCont" class="transition">
|
||||
</div>
|
||||
</div>
|
||||
<div id="langGraph" class="card">
|
||||
<canvas class="transition"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dataValues2" class="optionContainer">
|
||||
<div class="row">
|
||||
<div id="langSelect" class="card">
|
||||
<h2>Language</h2>
|
||||
<div id="flipMode" class="transition">
|
||||
<p>Phoneme</p>
|
||||
<i class="fa fa-angle-double-right"></i>
|
||||
</div>
|
||||
<div option="langSelect" class="dropdown transition">
|
||||
</div>
|
||||
</div>
|
||||
@ -59,6 +93,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="newLanguage" class="transition">
|
||||
<div class="card transition">
|
||||
<h2>Add Language</h2>
|
||||
<div id="newLanguageName">
|
||||
<p>Name:</p>
|
||||
<input>
|
||||
</div>
|
||||
<div id="newLanguagePhonemes">
|
||||
<p>Phonemes:</p>
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
<div id="newLanguageSubmit">
|
||||
<p class="card">Submit!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="{{ url_for('static', filename='index.js') }}"></script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user