From 1a1c2cced27863c37929ff90a49fe044040d0d54 Mon Sep 17 00:00:00 2001
From: Kenneth Jao <ksjdragon@gmail.com>
Date: Thu, 19 Apr 2018 16:10:18 -0400
Subject: [PATCH] Added updating posts

---
 SmearcarDB/static/index.css     |  59 ++++++++++++-----
 SmearcarDB/static/index.js      | 113 ++++++++++++++++++++++++--------
 SmearcarDB/templates/index.html |  24 +++++++
 3 files changed, 153 insertions(+), 43 deletions(-)

diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css
index ae09500..182390e 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,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;
 }
+ 
+#addUpdateButton {
+	grid-column: 2;
+}
 
-#signIn:hover, #addUserButton:hover {
+#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;
 }
\ No newline at end of file
diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js
index 80a39db..60368a1 100644
--- a/SmearcarDB/static/index.js
+++ b/SmearcarDB/static/index.js
@@ -324,35 +324,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].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);
+        }
+    );
 
 }
 
@@ -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 = "";
@@ -777,12 +780,11 @@ document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
     this.style.backgroundColor = "rgba(0,0,0,0.2)";
     var p = this;
 
-     $.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],
@@ -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();
diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html
index 8e5a3a3..6eb4795 100644
--- a/SmearcarDB/templates/index.html
+++ b/SmearcarDB/templates/index.html
@@ -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>