diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css index a4d205d..8cf83bd 100644 --- a/SmearcarDB/static/index.css +++ b/SmearcarDB/static/index.css @@ -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); - - grid-gap: 2vh; + 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 { @@ -341,4 +333,91 @@ a { #langGraph canvas { 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; } \ No newline at end of file diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js index 7791890..785a4e4 100644 --- a/SmearcarDB/static/index.js +++ b/SmearcarDB/static/index.js @@ -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); + diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html index 3d2cd56..1c37085 100644 --- a/SmearcarDB/templates/index.html +++ b/SmearcarDB/templates/index.html @@ -26,10 +26,44 @@
-
+

Language

+
+

Phoneme

+ +
+
+
+
+
+

Info

+
+
+
+
+
+

Data

+
+

Add Language

+ +
+
+
+
+
+ +
+
+
+
+
+

Language

+
+

Phoneme

+ +
@@ -59,6 +93,22 @@
+
+
+

Add Language

+
+

Name:

+ +
+
+

Phonemes:

+ +
+
+

Submit!

+
+
+