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

added trello api, data table display

Browse Source
This commit is contained in:
Kenneth Jao 2018-01-21 21:05:48 -05:00
parent a4605b9483
commit 3c8505b143
3 changed files with 141 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
SmearcarDB/static/index.css
View File

@ -200,9 +200,12 @@ a {
transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
grid-gap: 2vh;
grid-gap: 2vh;
}
#home, #dataValues {
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 4fr 4fr;
grid-template-rows: 2fr 5fr 2fr;
}
.card {
@ -264,11 +267,33 @@ a {
}
#langInfoCont {
display: grid;
font-weight: 300;
font-size: 150%;
margin-left: 4vh;
margin: auto 0 auto 4vh;
}
#dataTable {
grid-column: 1 / 3;
grid-row: 2;
}
#dataTableCont {
display: grid;
font-weight: 300;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100%;
grid-gap: 2vh;
padding: 2vh;
}
#dataTableCont div {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(8, 1fr);
}
#dataTableCont div p {
font-size: 130%;
padding: 0 5% 0 5%;
}

120
SmearcarDB/static/index.js
View File

@ -1,6 +1,7 @@
var navSelect = "home";
var serverURL = window.location.href;
var serverURL = window.location.origin;
var data;
var trelloInfo = {};
var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
@ -10,6 +11,10 @@ var navi = [ // Array containing navigation items in form [Font-Awesome class na
["bell", "Updates and Progress", "updates"]
];
var members = [
"Kenneth Jao", "Yaman Qalieh", "Enrico Colon", "Arav Agarwal"
];
var dropOp = {
//Insert correct
};
@ -63,7 +68,7 @@ function updateNav(op) {
function getData() {
$.ajax({
url: serverURL + 'server',
url: serverURL + '/server',
type: 'GET'
})
.then(
@ -93,31 +98,75 @@ function phoneme(p) {
}
return undefined;
}).filter(function(a) {
if (a === undefined) {
return false;
}
return true;
return (a !== undefined);
});
}
function generateDropOp() { // For options that change based on data.
dropOp["langSelect"] = [function() {
var info = document.getElementById("langInfoCont");
while (info.firstChild) {
info.removeChild(info.firstChild);
}
var p = document.createElement("p");
var p2 = document.createElement("p2");
var a = document.createElement("a");
// Generate info box material.
var langInfo = language(dropOpStore["langSelect"]);
p.appendChild(document.createTextNode("Type: " + langInfo.type));
p2.appendChild(document.createTextNode("Source: "));
a.href = langInfo.source;
srcText = (langInfo.source.length > 60) ? langInfo.source.substring(0, langInfo.source.length - 3) + "..." : langInfo.source;
a.appendChild(document.createTextNode(srcText));
p2.appendChild(a);
info.appendChild(p);
info.appendChild(p2);
var info = document.getElementById("langInfoCont");
info.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.length > 0) {
a.href = langInfo.source;
srcText = (langInfo.source.length > 60) ? langInfo.source.substring(0, langInfo.source.length - 3) + "..." : langInfo.source;
a.appendChild(document.createTextNode(srcText));
p2.appendChild(a);
} else {
p2.appendChild(document.createTextNode("N/A"));
}
info.appendChild(p);
info.appendChild(p2);
info.style.opacity = "1";
}, 300);
// Generate data box material.
var dataBox = document.getElementById("dataTableCont");
var phonemes = Object.keys(langInfo.phonemes);
dataBox.style.opacity = "0";
setTimeout(function() {
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]]));
dataBox.children[tableNum].appendChild(p1);
dataBox.children[tableNum].appendChild(p2);
}
dataBox.style.opacity = "1";
}, 300);
}].concat(["Select language..."].concat(data.languages));
}
@ -175,7 +224,6 @@ function createDrop() {
function dropOpUpdate(op) {
var dropdown = document.querySelectorAll(".dropdown[option=" + op + "] .button p")[0];
dropdown.textContent = dropOpStore[op];
console.log("hi");
(dropOp[op][0])();
}
@ -189,6 +237,34 @@ document.onclick = function(event) {
}
}
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);
});
},
function error(e) {
console.log(e);
});
}
getData();
getTrelloCards();
createNav();
updateNav(navSelect);

34
SmearcarDB/templates/index.html
View File

@ -12,6 +12,7 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="{{ url_for('static', filename='velocity.min.js') }}"></script>
<script src="https://use.fontawesome.com/c8d5486cd8.js"></script>
<script src="https://trello.com/1/client.js?key=dd3d6b561fe1a0abcacdc80ad0c4fd9a"></script>
</head>
<body>
@ -24,6 +25,14 @@
</div>
<div id="mainContainer">
<div id="home" class="optionContainer">
<div id="roles" class="card">
</div>
<div id="about" class="card">
</div>
<div id="tasks">
</div>
</div>
<div id="dataValues" class="optionContainer">
<div id="langSelect" class="card">
<h2>Language</h2>
<div option="langSelect" class="dropdown transition">
@ -32,35 +41,22 @@
<div id="dataInfo" class="card">
<h2>Info</h2>
<div id="langInfoCont">
</div>
</div>
<div id="dataTable" class="card">
<h2>Data</h2>
</div>
</div>
<div id="dataValues" class="optionContainer">
<div id="langSelect" class="card">
</div>
<div id="dataInfo" class="card">
</div>
<div id="dataTable" class="card">
<div id="dataTableCont">
</div>
</div>
</div>
<div id="files" class="optionContainer">
<div id="langSelect" class="card">
</div>
<div id="dataInfo" class="card">
</div>
<div id="dataTable" class="card">
<div class="temp card">
<h2>Currently in progress!</h2>
</div>
</div>
<div id="updates" class="optionContainer">
<div id="langSelect" class="card">
</div>
<div id="dataInfo" class="card">
</div>
<div id="dataTable" class="card">
<div class="temp card">
<h2>Currently in progress!</h2>
</div>
</div>
</div>