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

Added updating posts

Browse Source
This commit is contained in:
Kenneth Jao 2018-04-19 16:10:18 -04:00
parent d1492e05df
commit 1a1c2cced2
3 changed files with 153 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
SmearcarDB/static/index.css
View File

@ -170,6 +170,10 @@ a {
opacity: 1;
}
#home > div {
margin-bottom: 2vh;
}
.card {
display: grid;
border-radius: 2px;
@ -359,7 +363,7 @@ a {
background-color: rgba(0, 0, 0, 0.05);
}
#newLanguage, #editLanguage, #login, #addUser {
#newLanguage, #editLanguage, #login, #addUser, #writePost {
position: absolute;
width: 100%;
height: 100%;
@ -368,7 +372,7 @@ a {
background-color: rgba(0,0,0,0.4);
}
#newLanguage > div, #editLanguage > div, #login > div, #addUser > div {
#newLanguage > div, #editLanguage > div, #login > div, #addUser > div, #writePost > div {
position: absolute;
width: 20%;
height: 60%;
@ -388,11 +392,19 @@ a {
grid-template-rows: 6vh 1fr 1fr 1fr 1fr;
}
#loginUsername, #loginPassword, #addUserUsername, #addUserPassword {
#writePost > div {
margin-left: 30%;
margin-right: 30%;
width: 40%;
height: 60%;
grid-template-rows: 6vh 1fr 1fr 8fr 2fr;
}
#loginUsername, #loginPassword, #addUserUsername, #addUserPassword, #writePostText, #writePostAuthor, #writePostTitle {
margin-left: 5%;
}
#login input, #addUser input {
#login input, #addUser input, #writePost textarea, #writePost input {
border: 0;
background-color: rgba(0,0,0,0.1);
font-family: 'Saira Condensed', sans-serif;
@ -400,9 +412,20 @@ a {
font-weight: 300;
padding: 2%;
width: 90%;
outline: none;
}
#newLanguageName, #editLanguageName, #loginUsername, #addUserUsername {
#writePost input {
padding: 1%;
font-size: 100%;
}
#writePost textarea {
height: 80%;
resize: none;
}
#newLanguageName, #editLanguageName, #loginUsername, #addUserUsername, #writePostTitle {
grid-row: 2;
}
@ -418,7 +441,7 @@ a {
grid-row: 1;
}
#newLanguagePhonemes, #editLanguagePhonemes, #loginPassword, #addUserAuthority {
#newLanguagePhonemes, #editLanguagePhonemes, #loginPassword, #addUserAuthority, #writePostAuthor {
grid-row: 3;
}
@ -427,7 +450,7 @@ a {
width: 90%;
}
#addUserPassword {
#addUserPassword, #writePostText {
grid-row: 4;
}
@ -444,16 +467,16 @@ a {
font-size: 1.5vh;
}
#newLanguageSubmit, #editLanguageSubmit, #loginSubmit, #addUserSubmit {
#newLanguageSubmit, #editLanguageSubmit, #loginSubmit {
display: grid;
grid-row: 4;
}
#addUserSubmit {
#addUserSubmit, #addUserSubmit, #writePostSubmit {
grid-row: 5;
}
#newLanguageSubmit p, #editLanguageSubmit p, #loginSubmit p, #addUserSubmit p {
#newLanguageSubmit p, #editLanguageSubmit p, #loginSubmit p, #addUserSubmit p, #writePostSubmit p {
display: block;
font-size: 3vh;
margin: auto 10% auto;
@ -464,28 +487,32 @@ a {
#header2 {
display:grid;
grid-template-columns: 90% 10%;
grid-template-columns: 80% 10% 10%;
grid-template-rows: 100%;
}
#signIn, #addUserButton {
#signIn, #addUserButton, #addUpdateButton {
display: grid;
grid-template-columns: 70% 20%;
grid-template-rows: 100%;
grid-column: 2;
grid-column: 3;
grid-row: 1;
cursor: pointer;
}
#signIn:hover, #addUserButton:hover {
#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 {
#signIn p, #signIn i, #addUserButton p, #addUserButton i, #addUpdateButton p, #addUpdateButton i {
margin: auto;
font-size: 180%;
}
#addData, #editData, #addUserButton {
#addData, #editData, #addUserButton, #addUpdateButton {
display: none;
}

69
SmearcarDB/static/index.js
View File

@ -324,8 +324,10 @@ 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'
@ -333,8 +335,7 @@ function homeCards() {
.then(
function success(incoming) {
var postList = incoming;
var home = document.getElementById("home");
for(var i = 0; i < postList.length; i++) {
for(var i = postList.length - 1; i >= 0 ; i--) {
var div = document.createElement("div");
div.className = "card";
var h2 = document.createElement("h2");
@ -463,6 +464,7 @@ document.getElementById("editData").onclick = function() { // Open edit language
document.getElementById("signIn").onclick = function() { modal("login", true); };
document.getElementById("addUserButton").onclick = function() { modal("addUser", true); };
document.getElementById("addUpdateButton").onclick = function() { modal("writePost", true); };
document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // Function for adding a language.
if(!submittable) return;
@ -744,6 +746,7 @@ 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 = "";
@ -782,7 +785,6 @@ document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
type: 'POST',
dataType: "json",
contentType: 'application/json;charset=UTF-8',
context: {counter: i},
data: JSON.stringify({
username: info[0].value,
authority: info[2],
@ -810,7 +812,64 @@ document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
}
}
);
};
document.querySelectorAll("#writePostSubmit p")[0].onclick = function() {
if(!submittable) return;
submittable = false;
var info = [
document.querySelectorAll("#writePostTitle input")[0],
document.querySelectorAll("#writePostAuthor input")[0],
document.querySelectorAll("#writePostText 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;
}
this.innerText = "Processing...";
this.style.backgroundColor = "rgba(0,0,0,0.2)";
var p = this;
$.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);
}
);
};
/*function getTrelloCards() {
Trello.authorize();

24
SmearcarDB/templates/index.html
View File

@ -20,6 +20,10 @@
<h1>/'smi:ɹ̠ka:ɹ̠/</h1>
</div>
<div id="header2">
<div id="addUpdateButton" class="transition">
<p>Write Post</p>
<i class="fa fa-edit"></i>
</div>
<div id="signIn" class="transition">
<p>Login</p>
<i class="fa fa-sign-in"></i>
@ -170,6 +174,26 @@
</div>
</div>
</div>
<div id="writePost" class="transition">
<div class="card transition">
<h2>Write New Update</h2>
<div id="writePostTitle">
<p>Title:</p>
<input>
</div>
<div id="writePostAuthor">
<p>Author:</p>
<input>
</div>
<div id="writePostText">
<p>Message:</p>
<textarea></textarea>
</div>
<div id="writePostSubmit">
<p class="card">Submit!</p>
</div>
</div>
</div>
</body>
<script src="{{ url_for('static', filename='index.js') }}"></script>