diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css index ae09500..58f7baf 100644 --- a/SmearcarDB/static/index.css +++ b/SmearcarDB/static/index.css @@ -170,6 +170,10 @@ a { opacity: 1; } +#home > div { + margin-bottom: 2vh; +} + .card { display: grid; border-radius: 2px; @@ -359,7 +363,39 @@ a { background-color: rgba(0, 0, 0, 0.05); } -#newLanguage, #editLanguage, #login, #addUser { +#header2 { + display:grid; + grid-template-columns: 80% 10% 10%; + grid-template-rows: 100%; +} + +#signIn, #addUserButton, #addUpdateButton { + display: grid; + grid-template-columns: 70% 20%; + grid-template-rows: 100%; + grid-column: 3; + grid-row: 1; + cursor: pointer; +} + +#addUpdateButton { + grid-column: 2; +} + +#signIn:hover, #addUserButton:hover, #addUpdateButton:hover, #writePostButton:hover { + background-color: rgba(255,255,255,0.1); +} + +#signIn p, #signIn i, #addUserButton p, #addUserButton i, #addUpdateButton p, #addUpdateButton i { + margin: auto; + font-size: 180%; +} + +#addData, #editData, #addUserButton, #addUpdateButton { + display: none; +} + +.modal { position: absolute; width: 100%; height: 100%; @@ -368,124 +404,25 @@ a { background-color: rgba(0,0,0,0.4); } -#newLanguage > div, #editLanguage > div, #login > div, #addUser > 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; -} - -#login > div { - height: 30%; - grid-template-rows: 6vh 1fr 1fr 1fr; -} - -#addUser > div { - height: 40%; - grid-template-rows: 6vh 1fr 1fr 1fr 1fr; -} - -#loginUsername, #loginPassword, #addUserUsername, #addUserPassword { - margin-left: 5%; -} - -#login input, #addUser input { - border: 0; - background-color: rgba(0,0,0,0.1); - font-family: 'Saira Condensed', sans-serif; - font-size: 120%; - font-weight: 300; - padding: 2%; - width: 90%; -} - -#newLanguageName, #editLanguageName, #loginUsername, #addUserUsername { - grid-row: 2; -} - -#newLanguageName p, #editLanguageName p { - display: inline; - margin-left: 5%; - grid-row: 1; -} - -#newLanguageName input, #editLanguageName input { - margin: auto 0 auto 0; - width: 50%; - grid-row: 1; -} - -#newLanguagePhonemes, #editLanguagePhonemes, #loginPassword, #addUserAuthority { - grid-row: 3; -} - -#addUserAuthority { - margin-left: 5%; - width: 90%; -} - -#addUserPassword { - grid-row: 4; -} - -#newLanguagePhonemes p, #editLanguagePhonemes p { - margin-left: 5%; -} - -#newLanguagePhonemes textarea, #editLanguagePhonemes textarea { - width: 90%; - margin-left: 5%; - height: 90%; - resize: none; - font-family: 'Saira Condensed', sans-serif; - font-size: 1.5vh; -} - -#newLanguageSubmit, #editLanguageSubmit, #loginSubmit, #addUserSubmit { - display: grid; - grid-row: 4; -} - -#addUserSubmit { - grid-row: 5; -} - -#newLanguageSubmit p, #editLanguageSubmit p, #loginSubmit p, #addUserSubmit p { +.modalSubmit { display: block; + width: 70%; font-size: 3vh; - margin: auto 10% auto; + margin: auto; padding: 1%; text-align: center; cursor: pointer; } -#header2 { - display:grid; - grid-template-columns: 90% 10%; - grid-template-rows: 100%; -} - -#signIn, #addUserButton { - display: grid; - grid-template-columns: 70% 20%; - grid-template-rows: 100%; - grid-column: 2; - grid-row: 1; - cursor: pointer; -} - -#signIn:hover, #addUserButton:hover { - background-color: rgba(255,255,255,0.1); -} - -#signIn p, #signIn i, #addUserButton p, #addUserButton i { - margin: auto; - font-size: 180%; -} - -#addData, #editData, #addUserButton { - display: none; +.modal input, .modal textarea { + margin: 0 auto 0 auto; + border: 0; + background-color: rgba(0,0,0,0.1); + font-family: 'Saira Condensed', sans-serif; + font-size: 100%; + font-weight: 300; + padding: 1vh; + width: 90%; + outline: none; + resize: none; } \ No newline at end of file diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js index 80a39db..a63103d 100644 --- a/SmearcarDB/static/index.js +++ b/SmearcarDB/static/index.js @@ -5,11 +5,10 @@ var data; var languageChart; var dataOpen = false; var submittable = true; +var dropOp = {}; +var dropOpStore = {}; var loginInfo = {}; -// 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", "dataValues1"], @@ -17,10 +16,6 @@ var navi = [ // Array containing navigation items in form [Font-Awesome class na ["info", "About", "about"] ]; -var members = [ - "Kenneth Jao", "Yaman Qalieh", "Enrico Colon" -]; - var authorityLabels = { 0: "#0: Full access", 1: "#1: Create updates", @@ -28,11 +23,137 @@ var authorityLabels = { 3: "#3: No access" }; -var dropOp = { - //Insert correct -}; -var dropOpStore = {}; +var modals = [ + { + name: "Add Language", + modal: "newLanguage", + button: "addData", + structure: { + width: "20%", + form: [ + { + name: "Name", + formType: "input" + }, + { + name: "Source", + formType: "input", + inputType: "file" + }, + { + name: "Phonemes", + formType: "textarea", + height: "25vh" + } + ] + } + }, + { + name: "Edit Language", + modal: "editLanguage", + button: "editData", + buttonClick: function() { + 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; + //modal("editLanguage", true); + }, + structure: { + width: "20%", + form: [ + { + name: "Name", + formType: "input" + }, + { + name: "Source", + formType: "input", + inputType: "file" + }, + { + name: "Phonemes", + formType: "textarea", + height: "25vh" + } + ] + } + }, + { + name: "Login", + modal: "login", + button: "signIn", + structure: { + width: "20%", + form: [ + { + name: "Username", + formType: "input" + }, + { + name: "Password", + formType: "input", + inputType: "password" + }, + ] + } + }, + { + name: "Add User", + modal: "addUser", + button: "addUserButton", + structure: { + width: "20%", + form: [ + { + name: "Username", + formType: "input" + }, + { + name: "Authority", + formType: "input", + inputType: "number" + }, + { + name: "Password", + formType: "input", + inputType: "password" + } + ] + } + }, + { + name: "Write Update", + modal: "writePost", + button: "addUpdateButton", + structure: { + width: "40%", + form: [ + { + name: "Title", + formType: "input", + }, + { + name: "Author", + formType: "input", + }, + { + name: "Message", + formType: "textarea", + height: "18vh" + } + ] + } + }, +]; + + function Rnd(item,fig) { if(varType(item) === "Array") { @@ -117,6 +238,7 @@ function getData(updatePage) { dropOpUpdate("langSelect"); document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[dropoption='"+(dropOpStore["langSelect"])+"']")[0].click(); } + generateModals(); }, function error(e) { console.log(e); @@ -258,9 +380,6 @@ function createDrop() { var p3 = document.createElement("p"); p3.className = "transition"; p3.id = "addData"; - p3.onclick = function() { // Open add language. - modal("newLanguage", true); - }; p3.appendChild(document.createTextNode("Add language...")); div2.appendChild(p3); } @@ -324,35 +443,36 @@ document.onclick = function(event) { function homeCards() { - // TODO GET posts from server - + var home = document.getElementById("home"); + while (home.firstChild) { + home.removeChild(home.firstChild); + } $.ajax({ url: serverURL + '/updates', type: 'GET' }) - .then( - function success(incoming) { - var postList = incoming; - var home = document.getElementById("home"); - for(var i = 0; i < postList.length; i++) { - var div = document.createElement("div"); - div.className = "card"; - var h2 = document.createElement("h2"); - h2.textContent = postList[i].title; - div.appendChild(h2); - var h3 = document.createElement("h3"); - h3.textContent = postList[i].date; - div.appendChild(h3); - var p = document.createElement("p"); - p.innerHTML = postList[i].content; - div.appendChild(p); - home.appendChild(div); - } - }, - function error(e) { - console.log(e); + .then( + function success(incoming) { + var postList = incoming; + for(var i = postList.length - 1; i >= 0 ; i--) { + var div = document.createElement("div"); + div.className = "card"; + var h2 = document.createElement("h2"); + h2.textContent = postList[i].title; + div.appendChild(h2); + var h3 = document.createElement("h3"); + h3.textContent = postList[i].author + " - " + postList[i].date; + div.appendChild(h3); + var p = document.createElement("p"); + p.innerHTML = postList[i].content; + div.appendChild(p); + home.appendChild(div); } - ); + }, + function error(e) { + console.log(e); + } + ); } @@ -425,19 +545,7 @@ function modal(id, open) { } } -var modals = ["newLanguage", "editLanguage", "login", "addUser"]; -for(var i = 0; i < modals.length; i++) { - let id = modals[i]; - document.getElementById(modals[i]).onclick = function(event) { - modal(id, false); - for(var j = 0; j < document.getElementsByTagName("input"); j++) document.getElementsByTagName("input")[j].value = ""; - dropOpStore["authority"] = ""; - document.querySelectorAll(".dropdown[option=authority] .button p")[0].textContent = dropOp["authority"][1]; - }; - document.querySelectorAll("#"+modals[i]+" > div")[0].onclick = function(event) { event.stopPropagation(); }; -} - -document.querySelectorAll("#addUser > div")[0].onclick = function(event) { +/*document.querySelectorAll("#addUser > div")[0].onclick = function(event) { event.stopPropagation(); for (var i = 0; i < document.getElementsByClassName("dropdown").length; i++) { var opCont = document.querySelectorAll(".dropdown .opCont")[i]; @@ -446,25 +554,84 @@ document.querySelectorAll("#addUser > div")[0].onclick = function(event) { opCont.style.display = "none"; }, 300); } +}*/ + + +function generateModals() { + while(document.getElementsByClassName("modal").length > 0) { + document.getElementsByTagName("body")[0].removeChild(document.getElementsByClassName("modal")[0]); + } + for(var i = 0; i < modals.length; i++) { + let eachModal = modals[i]; + var overlay = document.createElement("div"); + overlay.id = modals[i].modal; + overlay.className = "transition modal"; + + var modalCont = document.createElement("div"); + modalCont.className = "card transition"; + modalCont.style.position = "absolute"; + modalCont.style.paddingBottom = "1vh"; + modalCont.style.width = modals[i].structure.width; + var marg = 50-parseInt(modals[i].structure.width.replace("%",""))/2; + modalCont.style.margin = "5% " + marg + "% 0 " + marg+"%"; + var h2 = document.createElement("h2"); + h2.appendChild(document.createTextNode(modals[i].name)); + h2.style.gridRow = "1"; + modalCont.appendChild(h2); + + var gridTemplate = "6vh "; + var form = modals[i].structure.form; + for(var j = 0; j < form.length; j++) { + gridTemplate += (form[j].formType === "input") ? "7vh " : "auto "; + var div = document.createElement("div"); + div.id = modals[i].modal + form[j].name; + div.style.marginLeft = "5%"; + div.style.gridRow = j+2; + var p = document.createElement("p"); + p.appendChild(document.createTextNode(form[j].name + ":")); + var input = document.createElement(form[j].formType); + if(form[j].inputType) input.type = form[j].inputType; + if(form[j].height) input.style.height = form[j].height; + + + div.appendChild(p); + div.appendChild(input); + modalCont.appendChild(div); + } + gridTemplate += "7vh"; + modalCont.style.gridTemplateRows = gridTemplate; + modalCont.style.gridTemplateColumns = "100%"; + + var submit = document.createElement("div"); + submit.id = modals[i].modal + "Submit"; + submit.style.gridRow = form.length+2; + submit.style.display = "grid"; + submit.onclick = function() { + (eachModal.submitClick)(); + } + var p2 = document.createElement("p"); + p2.className = "card modalSubmit"; // Refer to modalSubmit CSS to edit. + p2.appendChild(document.createTextNode("Submit!")); + submit.appendChild(p2); + modalCont.appendChild(submit); + + overlay.appendChild(modalCont); + document.getElementsByTagName("body")[0].appendChild(overlay); + console.log(modals[i].button); + document.getElementById(modals[i].button).onclick = function() { + if(eachModal.buttonClick) (eachModal.buttonClick)(); + modal(eachModal.modal, true); + } + + overlay.onclick = function(event) { + if(this !== event.target) return; + for(var i = 0; i < document.getElementsByTagName("input").length; i++) document.getElementsByTagName("input")[i].value = ""; + modal(eachModal.modal, false); + } + } } -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; - modal("editLanguage", true); -}; - -document.getElementById("signIn").onclick = function() { modal("login", true); }; -document.getElementById("addUserButton").onclick = function() { modal("addUser", true); }; - -document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // Function for adding a language. +modals[0].submitClick = function() { // submitClick for newLanguage. if(!submittable) return; submittable = false; var name = document.querySelectorAll("#newLanguageName input")[0].value; @@ -491,16 +658,30 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // F } phonemes[info[i][0]] = num; } + + var formData = new FormData(); + var source = document.querySelectorAll("#newLanguageSource input")[0].files; + if(source.length === 0 || source[0].type) { + alert("Please give a source!"); + submittable = true; + return; + } + formData.append("source", source[0]); + formData.append("name", name); + formData.append("phonemes", phonemes); + formData.append("editor", loginInfo); + var newLanguage = { name: name, - source: null, + source: sourceData, phonemes: phonemes, editor: loginInfo }; - this.innerText = "Processing..."; - this.style.backgroundColor = "rgba(0,0,0,0.2)"; - var p = this; + var p = document.querySelectorAll("#newLanguageSubmit p ")[0] + p.innerText = "Processing..."; + p.style.backgroundColor = "rgba(0,0,0,0.2)"; + $.ajax({ url: serverURL + '/server', type: 'POST', @@ -528,7 +709,7 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // F ); }; -document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { // Function for submitting edits to language. +modals[1].submitClick= function() { // submitClick for editLanguage. if(!submittable) return; var langInfo = language(dropOpStore["langSelect"]); submittable = false; @@ -559,9 +740,9 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { // } console.log(newPhonemes); - this.innerText = "Processing..."; - this.style.backgroundColor = "rgba(0,0,0,0.2)"; - var p = this; + var p = document.querySelectorAll("#editLanguageSubmit p")[0] + p.innerText = "Processing..."; + p.style.backgroundColor = "rgba(0,0,0,0.2)"; var oldPhoneset = new Set(Object.keys(langInfo.phonemes)); var newPhoneset = new Set(Object.keys(newPhonemes)); @@ -726,7 +907,7 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { // } }; -document.querySelectorAll("#loginSubmit p")[0].onclick = function() { +modals[2].submitClick = function() { // submitClick for login. var info = [ document.querySelectorAll("#loginUsername input")[0], document.querySelectorAll("#loginPassword input")[0] @@ -744,20 +925,21 @@ document.querySelectorAll("#loginSubmit p")[0].onclick = function() { document.getElementById("addData").style.display = "block"; document.getElementById("editData").style.display = "grid"; document.getElementById("addUserButton").style.display = "grid"; + document.getElementById("addUpdateButton").style.display = "grid"; document.getElementById("signIn").style.display = "none"; setTimeout(function() { info[0].value = ""; info[1].value = ""; - }, 300) + }, 300); }; -document.querySelectorAll("#addUserSubmit p")[0].onclick = function() { +modals[3].submitClick = function() { if(!submittable) return; submittable = false; var info = [ document.querySelectorAll("#addUserUsername input")[0], document.querySelectorAll("#addUserPassword input")[0], - parseInt(dropOpStore["authority"]) + document.querySelectorAll("#addUserAuthority input")[0] ]; if(info[0].value === "") { alert("Please enter in a username!"); @@ -773,19 +955,18 @@ document.querySelectorAll("#addUserSubmit p")[0].onclick = function() { return; } - this.innerText = "Processing..."; - this.style.backgroundColor = "rgba(0,0,0,0.2)"; - var p = this; + var p = document.querySelectorAll("#addUserSubmit p")[0] + p.innerText = "Processing..."; + p.style.backgroundColor = "rgba(0,0,0,0.2)"; - $.ajax({ + $.ajax({ url: serverURL + '/editors', type: 'POST', dataType: "json", contentType: 'application/json;charset=UTF-8', - context: {counter: i}, data: JSON.stringify({ username: info[0].value, - authority: info[2], + authority: parseInt(info[2]), password: info[1].value, editor: loginInfo }) @@ -810,37 +991,67 @@ document.querySelectorAll("#addUserSubmit p")[0].onclick = function() { } } ); -} +}; -/*function getTrelloCards() { - Trello.authorize(); - var cardArr, listArr, lists; - var cards = window.Trello.rest( - "GET", "boards/vm2c2IZd/cards", - function success() { - cardArr = JSON.parse(cards.responseText); - lists = window.Trello.rest( - "GET", "boards/vm2c2IZd/lists", - function success() { - listArr = JSON.parse(lists.responseText); - for(var i = 0; i < listArr.length; i++) { - var arr = cardArr.filter(function(obj) { - return obj.idList === listArr[i].id; - }).map(a => a.name); - trelloInfo[listArr[i].name] = arr; - } - }, - function error(e) { - console.log(e); - }); +modals[4].submitClick = function() { + if(!submittable) return; + submittable = false; + var info = [ + document.querySelectorAll("#writePostTitle input")[0], + document.querySelectorAll("#writePostAuthor input")[0], + document.querySelectorAll("#writePostMessage textarea")[0] + ]; + if(info[0].value === "") { + alert("Please enter in a title!"); + submittable = true; + return; + } else if(info[1].value === "") { + alert("Please enter in an author!"); + submittable = true; + return; + } else if(info[2].value === "") { + alert("Please enter in a message!"); + submittable = true; + return; + } + + var p = document.querySelectorAll("#writePostSubmit p")[0] + p.innerText = "Processing..."; + p.style.backgroundColor = "rgba(0,0,0,0.2)"; + + $.ajax({ + url: serverURL + '/updates', + type: 'POST', + dataType: "json", + contentType: 'application/json;charset=UTF-8', + data: JSON.stringify({ + title: info[0].value, + author: info[1].value, + content: info[2].value, + editor: loginInfo + }) + }) + .then( + function success(incoming) { + modal("writePost", false); + homeCards(); + setTimeout(function() { + info[0].value = ""; + info[1].value = ""; + info[2].value = ""; + submittable = true; + p.innerText = "Submit!"; + p.style.backgroundColor = "#FEFEFE"; + }, 300); }, function error(e) { + alert("There was an error adding a post."); console.log(e); - }); -}*/ + } + ); +}; getData(); homeCards(); createNav(); -updateNav(navSelect); - +updateNav(navSelect); \ No newline at end of file diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html index 8e5a3a3..e9a1db9 100644 --- a/SmearcarDB/templates/index.html +++ b/SmearcarDB/templates/index.html @@ -20,6 +20,10 @@

/'smi:ɹ̠ka:ɹ̠/

+
+

Update

+ +

Login

@@ -64,7 +68,7 @@
-
+

Currently in progress!

@@ -101,75 +105,6 @@
-
-
-

Add Language

-
-

Name:

- -
-
-

Phonemes:

- -
-
-

Submit!

-
-
-
-
-
-

Edit Language

-
-

Name:

- -
-
-

Phonemes:

- -
-
-

Submit!

-
-
-
-
-
-

Login

-
-

Username:

- -
-
-

Password:

- -
-
-

Submit!

-
-
-
-
-
-

Add New User

-
-

Username:

- -
-
-

Authority:

- -
-
-

Password:

- -
-
-

Submit!

-
-
-