kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added login functionality

Browse Source
This commit is contained in:
Kenneth Jao 2018-04-16 21:03:44 -04:00
parent 6a0281b00d
commit dc03c58247
3 changed files with 150 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
SmearcarDB/static/index.css
View File

@ -359,7 +359,7 @@ a {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
} }
#newLanguage, #editLanguage { #newLanguage, #editLanguage, #login {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -368,7 +368,7 @@ a {
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
} }
#newLanguage > div, #editLanguage > div { #newLanguage > div, #editLanguage > div, #login > div {
position: absolute; position: absolute;
width: 20%; width: 20%;
height: 60%; height: 60%;
@ -378,7 +378,26 @@ a {
grid-template-rows: 6vh 5% 70% auto; grid-template-rows: 6vh 5% 70% auto;
} }
#newLanguageName, #editLanguageName { #login > div {
height: 30%;
grid-template-rows: 6vh 1fr 1fr 1fr;
}
#loginUsername, #loginPassword {
margin-left: 5%;
}
#login 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 {
grid-row: 2; grid-row: 2;
} }
@ -394,7 +413,7 @@ a {
grid-row: 1; grid-row: 1;
} }
#newLanguagePhonemes, #editLanguagePhonemes { #newLanguagePhonemes, #editLanguagePhonemes, #loginPassword {
grid-row: 3; grid-row: 3;
} }
@ -411,12 +430,12 @@ a {
font-size: 1.5vh; font-size: 1.5vh;
} }
#newLanguageSubmit, #editLanguageSubmit { #newLanguageSubmit, #editLanguageSubmit, #loginSubmit {
display: grid; display: grid;
grid-row: 4; grid-row: 4;
} }
#newLanguageSubmit p, #editLanguageSubmit p { #newLanguageSubmit p, #editLanguageSubmit p, #loginSubmit p {
display: block; display: block;
font-size: 3vh; font-size: 3vh;
margin: auto 10% auto; margin: auto 10% auto;
@ -424,3 +443,31 @@ a {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
#header2 {
display:grid;
grid-template-columns: 90% 10%;
grid-template-rows: 100%;
}
#signIn {
display: grid;
grid-template-columns: 70% 20%;
grid-template-rows: 100%;
grid-column: 2;
grid-row: 1;
cursor: pointer;
}
#signIn:hover {
background-color: rgba(255,255,255,0.1);
}
#signIn p, #signIn i {
margin: auto;
font-size: 180%;
}
#addData, #editData {
display: none;
}

166
SmearcarDB/static/index.js
View File

@ -5,6 +5,7 @@ var data;
var languageChart; var languageChart;
var dataOpen = false; var dataOpen = false;
var submittable = true; var submittable = true;
var loginInfo = {};
// var trelloInfo = {}; // var trelloInfo = {};
@ -26,37 +27,25 @@ var dropOp = {
var dropOpStore = {}; var dropOpStore = {};
// Left This so that the post function can be reused function Rnd(item,fig) {
if(varType(item) === "Array") {
// function temporary(data) { var arr = [];
// for(var i = 0; i < data.length; i++) { for(var i = 0; i < item.length; i++) arr[i] = Rnd(item[i],fig);
// $.ajax({ return arr;
// url: serverURL + '/server', } else if(varType(item) === "Number") {
// type: 'POST', return Math.round(item*Math.pow(10,fig))/Math.pow(10,fig);
// data: JSON.stringify(data[i]), } else {
// dataType: "json", throw new TypeError("Expected Integers, got " + varType(item) + ".");
// contentType: 'application/json;charset=UTF-8'
// })
// .then(
// function success(data) {
// console.log(data);
// },
// function error(e) {
// console.log(e);
// }
// );
// }
// }
// This Function is property of https://stackoverflow.com/questions/10015027/javascript-tofixed-not-rounding/32605063#32605063
function roundTo(n, digits) {
if (digits === undefined) {
digits = 0;
} }
}
var multiplicator = Math.pow(10, digits); function varType(variable) {
n = parseFloat((n * multiplicator).toFixed(11)); var type = typeof variable;
return Math.round(n) / multiplicator; if(type === "object") {
return (variable.constructor === Array) ? "Array" : "Object";
} else {
return type[0].toUpperCase() + type.slice(1);
}
} }
@ -213,7 +202,7 @@ function generateDropOp() { // For options that change based on data.
dataBox.children[tableNum].appendChild(pT2); dataBox.children[tableNum].appendChild(pT2);
} }
p1.appendChild(document.createTextNode(phonemes[i])); p1.appendChild(document.createTextNode(phonemes[i]));
p2.appendChild(document.createTextNode(roundTo(langInfo.phonemes[phonemes[i]], 2))); p2.appendChild(document.createTextNode(Rnd(langInfo.phonemes[phonemes[i]], 2)));
dataBox.children[tableNum].appendChild(p1); dataBox.children[tableNum].appendChild(p1);
dataBox.children[tableNum].appendChild(p2); dataBox.children[tableNum].appendChild(p2);
} }
@ -238,38 +227,6 @@ function generateDropOp() { // For options that change based on data.
}].concat(["Select language..."].concat(data.values.map(a=>a.id))); }].concat(["Select language..."].concat(data.values.map(a=>a.id)));
} }
function closeEditInput() {
try {
var input = document.getElementById("dataOpen");
var p = input.parentNode;
var patchData = {
action: 'phoneme_add',
data: {
language_id: language(dropOpStore["langSelect"]).id,
phoneme: p.previousSibling.innerText,
value: input.value
}
};
$.ajax({
url: serverURL + '/server',
type: 'PATCH',
dataType: "json",
contentType: 'application/json;charset=UTF-8',
data: JSON.stringify(patchData)
})
.then(
function success(incoming) {
p.appendChild(document.createTextNode(input.value));
p.removeChild(input);
},
function error(e) {
console.log(e);
}
);
dataOpen = false;
} catch(err) {}
}
function createDrop() { function createDrop() {
var dropButtons = document.getElementsByClassName("dropdown"); var dropButtons = document.getElementsByClassName("dropdown");
for(var i = 0; i < dropButtons.length; i++) { for(var i = 0; i < dropButtons.length; i++) {
@ -291,11 +248,9 @@ function createDrop() {
var p3 = document.createElement("p"); var p3 = document.createElement("p");
p3.className = "transition"; p3.className = "transition";
p3.id = "addData";
p3.onclick = function() { // Open add language. p3.onclick = function() { // Open add language.
document.getElementById("newLanguage").style.display = "block"; modal("newLanguage", true);
setTimeout(function() {
document.getElementById("newLanguage").style.opacity = "1";
}, 10);
}; };
p3.appendChild(document.createTextNode("Add language...")); p3.appendChild(document.createTextNode("Add language..."));
div2.appendChild(p3); div2.appendChild(p3);
@ -447,23 +402,26 @@ function chartOptions(graphData) {
}; };
} }
document.getElementById("newLanguage").onclick = function(event) { // Close add language. function modal(id, open) {
document.getElementById("newLanguage").style.opacity = "0"; if(open) {
document.getElementById(id).style.display = "block";
setTimeout(function() { setTimeout(function() {
document.getElementById("newLanguage").style.display = "none"; document.getElementById(id).style.opacity = "1";
}, 300); }, 10);
}; } else {
document.getElementById(id).style.opacity = "0";
document.getElementById("editLanguage").onclick = function(event) { // Close add language.
document.getElementById("editLanguage").style.opacity = "0";
setTimeout(function() { setTimeout(function() {
document.getElementById("editLanguage").style.display = "none"; document.getElementById(id).style.display = "none";
}, 300); }, 300);
}; }
}
document.querySelectorAll("#newLanguage > div")[0].onclick = function(event) { var modals = ["newLanguage", "editLanguage", "login"];
event.stopPropagation(); 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.getElementById("editData").onclick = function() { // Open edit language. document.getElementById("editData").onclick = function() { // Open edit language.
var langInfo = language(dropOpStore["langSelect"]); var langInfo = language(dropOpStore["langSelect"]);
@ -475,13 +433,14 @@ document.getElementById("editData").onclick = function() { // Open edit language
str += k[i] + " " + v[i] + ((i === k.length-1) ? "" : "\n"); str += k[i] + " " + v[i] + ((i === k.length-1) ? "" : "\n");
} }
document.querySelectorAll("#editLanguagePhonemes textarea")[0].value = str; document.querySelectorAll("#editLanguagePhonemes textarea")[0].value = str;
document.getElementById("editLanguage").style.display = "block"; modal("editLanguage", true);
setTimeout(function() {
document.getElementById("editLanguage").style.opacity = "1";
}, 10);
}; };
document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { document.getElementById("signIn").onclick = function() {
modal("login", true);
}
document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // Function for adding a language.
if(!submittable) return; if(!submittable) return;
submittable = false; submittable = false;
var name = document.querySelectorAll("#newLanguageName input")[0].value; var name = document.querySelectorAll("#newLanguageName input")[0].value;
@ -511,7 +470,8 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() {
var newLanguage = { var newLanguage = {
name: name, name: name,
source: null, source: null,
phonemes: phonemes phonemes: phonemes,
editor: loginInfo
}; };
this.innerText = "Processing..."; this.innerText = "Processing...";
@ -544,7 +504,7 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() {
); );
}; };
document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { // Function for submitting edits to language.
if(!submittable) return; if(!submittable) return;
var langInfo = language(dropOpStore["langSelect"]); var langInfo = language(dropOpStore["langSelect"]);
submittable = false; submittable = false;
@ -604,10 +564,7 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() {
}; };
if(!todo.name && !todo.add && !todo.remove) { if(!todo.name && !todo.add && !todo.remove) {
document.getElementById("editLanguage").style.opacity = "0"; modal("editLanguage", false);
setTimeout(function() {
document.getElementById("editLanguage").style.display = "none";
}, 300);
return; return;
} }
@ -624,7 +581,8 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() {
data: { data: {
language_id: langInfo.id, language_id: langInfo.id,
language_name: name language_name: name
} },
editor: loginInfo
}) })
}) })
.then( .then(
@ -665,7 +623,8 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() {
language_id: langInfo.id, language_id: langInfo.id,
phoneme: diffChange[i], phoneme: diffChange[i],
value: newPhonemes[diffChange[i]] value: newPhonemes[diffChange[i]]
} },
editor: loginInfo
}) })
}) })
.then( .then(
@ -714,7 +673,8 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() {
data: { data: {
language_id: langInfo.id, language_id: langInfo.id,
phoneme: diffRemove[i] phoneme: diffRemove[i]
} },
editor: loginInfo
}) })
}) })
.then( .then(
@ -742,6 +702,26 @@ 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]];
if(info[0].value === "") {
alert("Please enter in a username!");
return;
} else if(info[1].value === "") {
alert("Please enter in a password!");
return;
}
loginInfo.username = info[0].value;
loginInfo.password = info[1].value;
modal("login", false);
document.getElementById("addData").style.display = "block";
document.getElementById("editData").style.display = "grid";
setTimeout(function() {
info[0].value = "";
info[1].value = "";
}, 300)
}
/*function getTrelloCards() { /*function getTrelloCards() {
Trello.authorize(); Trello.authorize();
var cardArr, listArr, lists; var cardArr, listArr, lists;

20
SmearcarDB/templates/index.html
View File

@ -20,6 +20,10 @@
<h1>/'smi:ɹ̠ka:ɹ̠/</h1> <h1>/'smi:ɹ̠ka:ɹ̠/</h1>
</div> </div>
<div id="header2"> <div id="header2">
<div id="signIn" class="transition">
<p>Login</p>
<i class="fa fa-sign-in"></i>
</div>
</div> </div>
<div id="sidebar"> <div id="sidebar">
</div> </div>
@ -125,6 +129,22 @@
</div> </div>
</div> </div>
</div> </div>
<div id="login" class="transition">
<div class="card transition">
<h2>Login</h2>
<div id="loginUsername">
<p>Username:</p>
<input>
</div>
<div id="loginPassword">
<p>Password:</p>
<input type="password">
</div>
<div id="loginSubmit">
<p class="card">Submit!</p>
</div>
</div>
</div>
</body> </body>
<script src="{{ url_for('static', filename='index.js') }}"></script> <script src="{{ url_for('static', filename='index.js') }}"></script>