From e388864082ed69ab156a77ebc53d2b04d7e1f003 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Tue, 29 Jun 2021 21:10:32 -0400
Subject: [PATCH] Added Blogs to Dashboard

---
 dashboard/index.html | 66 +++++++++++++++++++++++++++++++-
 dashboard/script.js  | 89 +++++++++++++++++++++++++++++++++++++++++++-
 dashboard/style.css  | 12 ++++++
 3 files changed, 164 insertions(+), 3 deletions(-)

diff --git a/dashboard/index.html b/dashboard/index.html
index ff7566f..5923131 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -98,7 +98,7 @@
               class="mdl-color-text--blue-grey-400 material-icons" role="presentation">home</i>Home</a>
           <a class="mdl-navigation__link" href="javascript:openProjects()"><i
               class="mdl-color-text--blue-grey-400 material-icons" role="presentation">grid_view</i>Projects</a>
-          <a class="mdl-navigation__link" href="javascript:displayProjects('inactive')"><i
+          <a class="mdl-navigation__link" href="javascript:openBlog()"><i
               class="mdl-color-text--blue-grey-400 material-icons" role="presentation">rss_feed</i>Blog Posts</a>
           <a class="mdl-navigation__link" href="javascript:openProgram()"><i
               class="mdl-color-text--blue-grey-400 material-icons" role="presentation">developer_board</i>Software</a>
@@ -291,6 +291,70 @@
             New Project
           </div>
         </div>
+        <div id="blogs_tab" style="display: none;">
+          <div class="square-left" id="blog">
+      
+          </div>
+          <div class="square-right">
+            <div id="edit-blog-box" style="display: none;">
+              <h1 id="edit-blog-title">Title</h1>
+              <form action="#">
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                  <input class="mdl-textfield__input" type="text" id="edit-blog-author">
+                  <label class="mdl-textfield__label" for="edit-blog-link">Author </label>
+                </div>
+              </form>
+              <!-- Floating Multiline Textfield -->
+              <h4>Description</h4>
+              <form action="#">
+                <div class="mdl-textfield mdl-js-textfield" id="textfield_input">
+                  <textarea class="mdl-textfield__input" type="text" rows="5" id="edit-blog-description"
+                    style="width: 75%;"></textarea>
+                  <label class="mdl-textfield__label" for="edit-blog-description" style="width: 75%;"></label>
+                </div>
+              </form>
+              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="save_button"
+                onclick="saveBlog()">
+                Save
+              </button>
+            </div>
+            <div id="new-blog-box" style="display: none;">
+              <h2>New Blog Post</h2>
+              <form action="#">
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                  <input class="mdl-textfield__input" type="text" id="new-blog-title">
+                  <label class="mdl-textfield__label" for="new-blog-title">Title </label>
+                </div>
+              </form>
+              <form action="#">
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                  <input class="mdl-textfield__input" type="text" id="new-blog-author">
+                  <label class="mdl-textfield__label" for="edit-blog-link">Author </label>
+                </div>
+              </form>
+              <!-- Floating Multiline Textfield -->
+              <h4>Description</h4>
+              <form action="#">
+                <div class="mdl-textfield mdl-js-textfield" id="textfield_input">
+                  <textarea class="mdl-textfield__input" type="text" rows="5" id="new-blog-description"
+                    style="width: 75%;"></textarea>
+                  <label class="mdl-textfield__label" for="new-blog-description" style="width: 75%;"></label>
+                </div>
+              </form>
+              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="save_button"
+                onclick="newBlog()">
+                Create
+              </button>
+            </div>
+          </div>
+          <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="new_button_blogs"
+            onclick='openNewBlog()'>
+            <i class="material-icons">add</i>
+          </button>
+          <div class="mdl-tooltip mdl-tooltip--top " for="new_button_blogs">
+            New Blog
+          </div>
+        </div>
       </main>
     </div>
   </div>
diff --git a/dashboard/script.js b/dashboard/script.js
index 307fc0d..d6c9221 100644
--- a/dashboard/script.js
+++ b/dashboard/script.js
@@ -5,10 +5,10 @@ function onLoad() {
     checkLogin()
     displayProjects("all")
     displayProgram()
+    displayBlog();
     setInterval(function () {
         checkLogin();
     }, 1000);
-    openProgram();
 }
 // START FIREBASE STUFF
 
@@ -141,6 +141,7 @@ function displayProjects(status) {
 function openProjects() {
     document.getElementById("projects_tab").style.display = "block"
     document.getElementById("program_tab").style.display = "none"
+    document.getElementById("blogs_tab").style.display = "none"
     document.getElementById("page_title").innerHTML = "Dashboard - Projects"
 }
 
@@ -221,6 +222,7 @@ function displayProgram() {
 function openProgram() {
     document.getElementById("program_tab").style.display = "block"
     document.getElementById("projects_tab").style.display = "none"
+    document.getElementById("blogs_tab").style.display = "none"
     document.getElementById("page_title").innerHTML = "Dashboard - Software"
 }
 
@@ -285,4 +287,87 @@ function editProgram(name) {
         document.getElementById("edit-program-box").style.display = "block"
         document.getElementById("new-program-box").style.display = "none"
     })
-}
\ No newline at end of file
+}
+
+// END PROGRAM STUFF
+
+// START BLOG POSTS
+// START PROGRAM STUFF
+
+function displayBlog() {
+    document.getElementById("blog").innerHTML = ""
+    database = firebase.database().ref("blogs");
+    database.once('value', function (snapshot) {
+        snapshot.forEach(function (child) {
+            firebase.database().ref("blogs/" + child["key"]).on('value', function (data) {
+                var data1 = data.val();
+                var a = document.createElement("div")
+                var title = data1["title"]
+                a.innerHTML = "<div class='blog-card mdl-card mdl-shadow--2dp'> <div class='mdl-card__title mdl-card--expand'> <h2 class='mdl-card__title-text'>" + data1['title'].replace(/,/g, '.') + "</h2> </div> <div class='mdl-card__supporting-text'>" + data1['post'] + " </div> <div class='mdl-card__actions mdl-card--border'> <a href=\"javascript:editBlog(\'" + title.replace(/'/g, "`") + "\')\" class='mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect'> Edit </a> </div> </div>"
+                //a.innerHTML = "<div class='blog-card mdl-card mdl-shadow--2dp' style='background: url(\"" + data1['imglink'] + "\") center / cover'> <div class='mdl-card__title mdl-card--expand'></div> <div class='mdl-card__supporting-text' style='background: rgba(0, 0, 0, 0.6);color: white;'><h3>" + data1['title'] + "</h3></div> <div class='mdl-card__actions mdl-card--border' style='background: rgba(0, 0, 0, 0.6);'> <a href=\"javascript:editBlog(\'" + title.replace(/'/g, "`") + "\')\" class='mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect'> Edit </a> </div> </div>"
+                document.getElementById("blog").appendChild(a)
+            })
+        })
+    });
+}
+
+function openBlog() {
+    document.getElementById("blogs_tab").style.display = "block"
+    document.getElementById("projects_tab").style.display = "none"
+    document.getElementById("program_tab").style.display = "none"
+    document.getElementById("page_title").innerHTML = "Dashboard - Blog"
+}
+
+
+function newBlog() {
+    var date = new Date();
+    var data = {
+        title: document.getElementById("new-blog-title").value.replace(/\./g, ","),
+        post: document.getElementById("new-blog-description").value,
+        author: document.getElementById("new-blog-author").value,
+        date: date.toString(0)
+    }
+    firebase.database().ref("blogs/" + document.getElementById("new-blog-title").value.replace(/\./g, ",")).set(data)
+    document.getElementById("new-blog-title").value = '';
+    document.getElementById("new-blog-author").value = '';
+    document.getElementById("new-blog-description").value = '';
+    document.getElementById("new-blog-box").style.display = "none"
+    displayBlog()
+}
+
+function openNewBlog() {
+    document.getElementById("new-blog-box").style.display = "block"
+    document.getElementById("edit-blog-box").style.display = "none"
+}
+
+// Edit Selected Blog
+function saveBlog() {
+    var title = document.getElementById("edit-blog-title").innerHTML.replace(/\./g, ",")
+    var data = {
+        title: title,
+        post: document.getElementById("edit-blog-description").value,
+        author: document.getElementById("edit-blog-author").value
+    }
+    firebase.database().ref("blogs/" + title).set(data)
+    document.getElementById("edit-blog-title").innerHTML = '';
+    document.getElementById("edit-blog-author").innerHTML = '';
+    document.getElementById("edit-blog-description").value = '';
+    document.getElementById("edit-blog-box").style.display = "none"
+    displayBlog()
+}
+
+
+function editBlog(name) {
+    var title = name.replace(/`/g, "'")
+    var database = firebase.database().ref("blogs/" + title);
+    database.on('value', function (data) {
+        var data1 = data.val()
+        document.getElementById("edit-blog-title").innerText = title.replace(/,/g, ".")
+        document.getElementById("edit-blog-author").value = data1["author"]
+        document.getElementById("edit-blog-description").value = data1["post"]
+        document.getElementById("edit-blog-box").style.display = "block"
+        document.getElementById("new-blog-box").style.display = "none"
+    })
+}
+
+// END PROGRAM STUFF
\ No newline at end of file
diff --git a/dashboard/style.css b/dashboard/style.css
index 3bef143..3a62295 100644
--- a/dashboard/style.css
+++ b/dashboard/style.css
@@ -128,6 +128,13 @@
     z-index: 1;
 }  
 
+#new_button_blogs {
+    position: absolute;
+    right: 3%;
+    bottom: 3.5%;
+    z-index: 1;
+}  
+
   #program_tab {
       width: 100%;
       height: 100%;
@@ -139,6 +146,11 @@
       margin: 10px;
   }
 
+  .blog-card {
+    width: 90%;
+    margin: 10px;
+}
+
   .login-card {
       position: absolute;
       top: 0;