diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css index 4a27ecd..ae09500 100644 --- a/SmearcarDB/static/index.css +++ b/SmearcarDB/static/index.css @@ -359,7 +359,7 @@ a { background-color: rgba(0, 0, 0, 0.05); } -#newLanguage, #editLanguage, #login { +#newLanguage, #editLanguage, #login, #addUser { position: absolute; width: 100%; height: 100%; @@ -368,7 +368,7 @@ a { background-color: rgba(0,0,0,0.4); } -#newLanguage > div, #editLanguage > div, #login > div { +#newLanguage > div, #editLanguage > div, #login > div, #addUser > div { position: absolute; width: 20%; height: 60%; @@ -383,11 +383,16 @@ a { grid-template-rows: 6vh 1fr 1fr 1fr; } -#loginUsername, #loginPassword { +#addUser > div { + height: 40%; + grid-template-rows: 6vh 1fr 1fr 1fr 1fr; +} + +#loginUsername, #loginPassword, #addUserUsername, #addUserPassword { margin-left: 5%; } -#login input { +#login input, #addUser input { border: 0; background-color: rgba(0,0,0,0.1); font-family: 'Saira Condensed', sans-serif; @@ -397,7 +402,7 @@ a { width: 90%; } -#newLanguageName, #editLanguageName, #loginUsername { +#newLanguageName, #editLanguageName, #loginUsername, #addUserUsername { grid-row: 2; } @@ -413,10 +418,19 @@ a { grid-row: 1; } -#newLanguagePhonemes, #editLanguagePhonemes, #loginPassword { +#newLanguagePhonemes, #editLanguagePhonemes, #loginPassword, #addUserAuthority { grid-row: 3; } +#addUserAuthority { + margin-left: 5%; + width: 90%; +} + +#addUserPassword { + grid-row: 4; +} + #newLanguagePhonemes p, #editLanguagePhonemes p { margin-left: 5%; } @@ -430,12 +444,16 @@ a { font-size: 1.5vh; } -#newLanguageSubmit, #editLanguageSubmit, #loginSubmit { +#newLanguageSubmit, #editLanguageSubmit, #loginSubmit, #addUserSubmit { display: grid; grid-row: 4; } -#newLanguageSubmit p, #editLanguageSubmit p, #loginSubmit p { +#addUserSubmit { + grid-row: 5; +} + +#newLanguageSubmit p, #editLanguageSubmit p, #loginSubmit p, #addUserSubmit p { display: block; font-size: 3vh; margin: auto 10% auto; @@ -450,7 +468,7 @@ a { grid-template-rows: 100%; } -#signIn { +#signIn, #addUserButton { display: grid; grid-template-columns: 70% 20%; grid-template-rows: 100%; @@ -459,15 +477,15 @@ a { cursor: pointer; } -#signIn:hover { +#signIn:hover, #addUserButton:hover { background-color: rgba(255,255,255,0.1); } -#signIn p, #signIn i { +#signIn p, #signIn i, #addUserButton p, #addUserButton i { margin: auto; font-size: 180%; } -#addData, #editData { +#addData, #editData, #addUserButton { display: none; } \ No newline at end of file diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js index 6854c5f..4e09a87 100644 --- a/SmearcarDB/static/index.js +++ b/SmearcarDB/static/index.js @@ -21,6 +21,13 @@ var members = [ "Kenneth Jao", "Yaman Qalieh", "Enrico Colon" ]; +var authorityLabels = { + 0: "#0: Full access", + 1: "#1: Create updates", + 2: "#2: Edit values and add files", + 3: "#3: No access" +}; + var dropOp = { //Insert correct }; @@ -105,10 +112,10 @@ function getData(updatePage) { createDrop(); if(updatePage === "add") { dropOpUpdate("langSelect"); - document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[langid='"+(data.languages.length)+"']")[0].click(); + document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[dropoption='"+(data.languages.length)+"']")[0].click(); } else if(updatePage === "edit") { dropOpUpdate("langSelect"); - document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[langid='"+(dropOpStore["langSelect"])+"']")[0].click(); + document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[dropoption='"+(dropOpStore["langSelect"])+"']")[0].click(); } }, function error(e) { @@ -225,6 +232,10 @@ function generateDropOp() { // For options that change based on data. graph.style.opacity = "1"; }, 300); }].concat(["Select language..."].concat(data.values.map(a=>a.id))); + + dropOp["authority"] = [function() { + + }].concat(["Select authority..."].concat(Object.keys(authorityLabels))); } function createDrop() { @@ -236,7 +247,7 @@ function createDrop() { var div = document.createElement("div"); div.className = "button"; var p = document.createElement("p"); - var op = dropButtons[i].getAttribute("option"); + let op = dropButtons[i].getAttribute("option"); p.appendChild(document.createTextNode(dropOp[op][1])); var ic = document.createElement("i"); ic.className = "fa fa-angle-down"; @@ -246,22 +257,24 @@ function createDrop() { var div2 = document.createElement("div"); div2.className = "opCont transition"; - 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); - + if(op === "langSelect") { + 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); + } + for (var j = 2; j < dropOp[op].length; j++) { var p2 = document.createElement("p"); - p2.setAttribute("langId", dropOp[op][j]); + p2.setAttribute("dropoption", dropOp[op][j]); p2.className = "transition"; p2.onclick = function(e) { e.stopPropagation(); - dropOpStore[op] = this.getAttribute("langId"); + dropOpStore[op] = this.getAttribute("dropoption"); dropOpUpdate(op); let opCont = this.parentNode; opCont.style.opacity = "0"; @@ -269,7 +282,8 @@ function createDrop() { opCont.style.display = "none"; }, 300); }; - p2.appendChild(document.createTextNode(language(dropOp[op][j]).name)); + if(op === "langSelect") p2.appendChild(document.createTextNode(language(dropOp[op][j]).name)); + if(op === "authority") p2.appendChild(document.createTextNode(authorityLabels[dropOp[op][j]])) div2.appendChild(p2); } @@ -295,7 +309,9 @@ function createDrop() { function dropOpUpdate(op) { var dropdown = document.querySelectorAll(".dropdown[option=" + op + "] .button p")[0]; - dropdown.textContent = language(dropOpStore[op]).name; + if(op === "langSelect") dropdown.textContent = language(dropOpStore[op]).name; + if(op === "authority") dropdown.textContent = authorityLabels[dropOpStore[op]]; + console.log(op); (dropOp[op][0])(); } @@ -309,6 +325,7 @@ document.onclick = function(event) { } }; + function homeCards() { // GET posts from server var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; @@ -416,13 +433,24 @@ function modal(id, open) { } } -var modals = ["newLanguage", "editLanguage", "login"]; +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); }; document.querySelectorAll("#"+modals[i]+" > div")[0].onclick = function(event) { event.stopPropagation(); }; } +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]; + opCont.style.opacity = "0"; + setTimeout(function() { + opCont.style.display = "none"; + }, 300); + } +} + document.getElementById("editData").onclick = function() { // Open edit language. var langInfo = language(dropOpStore["langSelect"]); document.querySelectorAll("#editLanguageName input")[0].value = langInfo.name; @@ -436,9 +464,8 @@ document.getElementById("editData").onclick = function() { // Open edit language modal("editLanguage", true); }; -document.getElementById("signIn").onclick = function() { - modal("login", 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. if(!submittable) return; @@ -703,7 +730,10 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { // }; document.querySelectorAll("#loginSubmit p")[0].onclick = function() { - var info = [document.querySelectorAll("#loginUsername input")[0], document.querySelectorAll("#loginPassword input")[0]]; + var info = [ + document.querySelectorAll("#loginUsername input")[0], + document.querySelectorAll("#loginPassword input")[0] + ]; if(info[0].value === "") { alert("Please enter in a username!"); return; @@ -716,10 +746,70 @@ document.querySelectorAll("#loginSubmit p")[0].onclick = function() { modal("login", false); document.getElementById("addData").style.display = "block"; document.getElementById("editData").style.display = "grid"; + document.getElementById("addUserButton").style.display = "grid"; + document.getElementById("signIn").style.display = "none"; setTimeout(function() { info[0].value = ""; info[1].value = ""; }, 300) +}; + +document.querySelectorAll("#addUserSubmit p")[0].onclick = function() { + var info = [ + document.querySelectorAll("#addUserUsername input")[0], + document.querySelectorAll("#addUserPassword input")[0], + dropOpStore["authority"] + ]; + if(info[0].value === "") { + alert("Please enter in a username!"); + return; + } else if(info[1].value === "") { + alert("Please enter in a password!"); + return; + } else if(info[2] === "") { + alert("Please enter in an authority level!"); + return; + } + + console.log({ + username: info[0].value, + authority: info[2], + password: info[1].value, + editor: loginInfo + }); + + this.innerText = "Processing..."; + this.style.backgroundColor = "rgba(0,0,0,0.2)"; + + $.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], + password: info[1].value, + editor: loginInfo + }) + }) + .then( + function success(incoming) { + modal("addUser", false); + setTimeout(function() { + info[0].value = ""; + info[1].value = ""; + dropOpStore["authority"] = ""; + document.querySelectorAll(".dropdown[option=authority] .button p")[0].textContent = dropOp["authority"][1]; + }, 300); + }, + function error(e) { + alert("There was an error adding a user."); + console.log(e); + } + ); + } /*function getTrelloCards() { diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html index d13a7a8..8e5a3a3 100644 --- a/SmearcarDB/templates/index.html +++ b/SmearcarDB/templates/index.html @@ -23,7 +23,11 @@

Login

-
+ +
+

Add User

+ +
@@ -145,6 +149,27 @@ +
+
+

Add New User

+
+

Username:

+ +
+
+

Authority:

+ +
+
+

Password:

+ +
+
+

Submit!

+
+
+