From 2bdc96b86a772a5b9b9db7adca564860f33137e6 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Mon, 28 Jun 2021 22:18:58 -0400
Subject: [PATCH] Added Programs to Dashboard

---
 dashboard/index.html | 137 +++++++++++++++++---
 dashboard/script.js  | 288 ++++++++++++++++++++++++++++---------------
 dashboard/style.css  |  18 +++
 3 files changed, 326 insertions(+), 117 deletions(-)

diff --git a/dashboard/index.html b/dashboard/index.html
index b5f0004..ff7566f 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -73,7 +73,7 @@
     <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
       <header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
         <div class="mdl-layout__header-row">
-          <span class="mdl-layout-title">Dashboard</span>
+          <span class="mdl-layout-title" id="page_title">Dashboard</span>
           <div class="mdl-layout-spacer"></div>
         </div>
       </header>
@@ -100,7 +100,7 @@
               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
               class="mdl-color-text--blue-grey-400 material-icons" role="presentation">rss_feed</i>Blog Posts</a>
-          <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i
+          <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>
           <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i
               class="mdl-color-text--blue-grey-400 material-icons"
@@ -113,6 +113,102 @@
         </nav>
       </div>
       <main class="mdl-layout__content mdl-color--grey-100">
+        <div id="program_tab" style="display: none;">
+          <div class="square-left" id="program">
+
+          </div>
+          <div class="square-right">
+            <div id="edit-program-box" style="display: none;">
+              <h2 id="edit-program-title">Title</h2>
+              <form action="#">
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                  <input class="mdl-textfield__input" type="text" id="edit-program-author">
+                  <label class="mdl-textfield__label" for="edit-program-author">Author </label>
+                </div>
+              </form>
+              <form action="#">
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                  <input class="mdl-textfield__input" type="text" id="edit-program-link">
+                  <label class="mdl-textfield__label" for="edit-program-link">URL </label>
+                </div>
+              </form>
+              <form action="#">
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                  <input class="mdl-textfield__input" type="text" id="edit-program-image">
+                  <label class="mdl-textfield__label" for="edit-program-image">Image Link </label>
+                </div>
+              </form>
+              <form action="#">
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                  <input class="mdl-textfield__input" type="text" id="edit-program-type">
+                  <label class="mdl-textfield__label" for="edit-program-image">Program Type</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-program-description"
+                    style="width: 75%;"></textarea>
+                  <label class="mdl-textfield__label" for="edit-program-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="saveProgram()">
+                Save
+              </button>
+            </div>
+            <div id="new-program-box" style="display: none;">
+              <h4>New Program</h4>
+              <div class="mdl-textfield mdl-js-textfield">
+                <input class="mdl-textfield__input" type="text" id="new-program-title">
+                <label class="mdl-textfield__label" for="new-program-title">Title</label>
+              </div>
+              <form action="#">
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                  <input class="mdl-textfield__input" type="text" id="new-program-author">
+                  <label class="mdl-textfield__label" for="new-program-author">Author </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-program-link">
+                  <label class="mdl-textfield__label" for="new-program-link">URL </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-program-image">
+                  <label class="mdl-textfield__label" for="new-program-image">Image Link </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-program-type">
+                  <label class="mdl-textfield__label" for="new-program-image">Program Type</label>
+                </div>
+              </form>
+              <!-- Floating Multiline Textfield -->
+              <h4>Description</h4>
+              <div class="mdl-textfield mdl-js-textfield" id="textfield_input">
+                <textarea class="mdl-textfield__input" type="text" rows="2" id="new-program-description"
+                  style="width: 75%;"></textarea>
+                <label class="mdl-textfield__label" for="new-program-description" style="width: 75%;"></label>
+              </div>
+              <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="new_button"
+                onclick="newProgram()">
+                Create
+              </button>
+            </div>
+          </div>
+          <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="new_button_program"
+            onclick='openNewProgram()'>
+            <i class="material-icons">add</i>
+          </button>
+          <div class="mdl-tooltip mdl-tooltip--top " for="new_button_program">
+            New Program
+          </div>
+        </div>
         <div id="projects_tab" style="display: none;">
           <div class="square-left" id="projects">
 
@@ -121,9 +217,9 @@
             <div id="edit-project-box" style="display: none;">
               <h1 id="edit-project-title">Title</h1>
               <form action="#">
-                <div class="mdl-textfield mdl-js-textfield">
+                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                   <input class="mdl-textfield__input" type="text" id="edit-project-link">
-                  <label class="mdl-textfield__label" for="sample1">Link </label>
+                  <label class="mdl-textfield__label" for="edit-project-link">Link </label>
                 </div>
               </form>
               <div
@@ -154,14 +250,14 @@
             </div>
             <div id="new-project-box" style="display: none;">
               <h2>New Project</h2>
-                <div class="mdl-textfield mdl-js-textfield">
-                  <input class="mdl-textfield__input" type="text" id="new-project-title">
-                  <label class="mdl-textfield__label" for="new-project-title">Title</label>
-                </div><br>
-                <div class="mdl-textfield mdl-js-textfield">
-                  <input class="mdl-textfield__input" type="text" id="new-project-link">
-                  <label class="mdl-textfield__label" for="sample1">Link </label>
-                </div><br>
+              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                <input class="mdl-textfield__input" type="text" id="new-project-title">
+                <label class="mdl-textfield__label" for="new-project-title">Title</label>
+              </div><br>
+              <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                <input class="mdl-textfield__input" type="text" id="new-project-link">
+                <label class="mdl-textfield__label" for="new-project-link">Link </label>
+              </div><br>
               <div
                 class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
                 <input type="text" value="" class="mdl-textfield__input" id="new-project-status" readonly>
@@ -176,26 +272,27 @@
               </div>
               <!-- Floating Multiline Textfield -->
               <h4>Description</h4>
-                <div class="mdl-textfield mdl-js-textfield" id="textfield_input">
-                  <textarea class="mdl-textfield__input" type="text" rows="5" id="new-project-description"
-                    style="width: 75%;"></textarea>
-                  <label class="mdl-textfield__label" for="new-project-description" style="width: 75%;"></label>
-                </div>
+              <div class="mdl-textfield mdl-js-textfield" id="textfield_input">
+                <textarea class="mdl-textfield__input" type="text" rows="5" id="new-project-description"
+                  style="width: 75%;"></textarea>
+                <label class="mdl-textfield__label" for="new-project-description" style="width: 75%;"></label>
+              </div>
               <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="new_button"
                 onclick="newProject()">
                 Create
               </button>
             </div>
           </div>
-          <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="new_button_projects"  onclick='openNewProject()'>
+          <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect" id="new_button_projects"
+            onclick='openNewProject()'>
             <i class="material-icons">add</i>
           </button>
           <div class="mdl-tooltip mdl-tooltip--top " for="new_button_projects">
             New Project
+          </div>
         </div>
+      </main>
     </div>
-    </main>
-  </div>
   </div>
   <div id="login_container" style="display: none;">
     <div class="login-card mdl-card mdl-shadow--2dp">
diff --git a/dashboard/script.js b/dashboard/script.js
index 9fa430c..307fc0d 100644
--- a/dashboard/script.js
+++ b/dashboard/script.js
@@ -1,109 +1,16 @@
-
-
 function onLoad() {
     startFirebase()
     document.getElementById("main_content").style.display = "none";
     document.getElementById("unauthorized").style.display = "none";
     checkLogin()
     displayProjects("all")
-    setInterval(function() {
+    displayProgram()
+    setInterval(function () {
         checkLogin();
     }, 1000);
+    openProgram();
 }
-
-// Starts Firebase
-function startFirebase() {
-    // Initialize Firebase
-    var config = {
-        apiKey: "AIzaSyBG5-wv3bpeiUjR6BH5GXamqPlH1arXt8Y",
-        authDomain: "homepage-projects-3d870.firebaseapp.com",
-        databaseURL: "https://homepage-projects-3d870.firebaseio.com",
-        projectId: "homepage-projects-3d870",
-        storageBucket: "homepage-projects-3d870.appspot.com",
-        messagingSenderId: "487531629040"
-    };
-    firebase.initializeApp(config);
-}
-
-function displayProjects(status) {
-    document.getElementById("projects").innerHTML = ""
-    database = firebase.database().ref("projects");
-    database.once('value', function (snapshot) {
-        snapshot.forEach(function (child) {
-            firebase.database().ref("projects/" + child["key"]).on('value', function (data) {
-                var data1 = data.val();
-                var a = document.createElement("div")
-                var title =  data1["title"]
-                a.innerHTML = "<div class='project-card mdl-card mdl-shadow--2dp'> <div class='mdl-card__title mdl-card--expand'> <h2 class='mdl-card__title-text'>" + data1['title'].replace(/,/g, '.') + "<br>" + data1['status'] + "</h2> </div> <div class='mdl-card__supporting-text'>" + data1['description'] + " </div> <div class='mdl-card__actions mdl-card--border'> <a href=\"javascript:editProject(\'" + title.replace(/'/g, "`") + "\')\" class='mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect'> Edit </a> </div> </div>"
-
-                if (status === "all") {
-                    document.getElementById("projects").appendChild(a)
-                } else if (data1["status"] === status) {
-                    document.getElementById("projects").appendChild(a)
-                }
-            })
-        })
-    });
-}
-
-function openProjects() {
-    document.getElementById("projects_tab").style.display = "block"
-}
-
-function newProject() {
-    var data = {
-        title: document.getElementById("new-project-title").value.replace(/\./g, ","),
-        link: document.getElementById("new-project-link").value,
-        status: document.getElementById("new-project-status-value").value,
-        description: document.getElementById("new-project-description").value
-    }
-    firebase.database().ref("projects/" + document.getElementById("new-project-title").value.replace(/\./g, ",")).set(data)
-    document.getElementById("new-project-title").value = '';
-    document.getElementById("new-project-link").value = '';
-    document.getElementById("new-project-status-value").value = 'active';
-    document.getElementById("new-project-description").value = '';
-    document.getElementById("new-project-box").style.display = "none"
-    displayProjects("all")
-}
-
-function openNewProject() {
-    document.getElementById("new-project-box").style.display = "block"
-    document.getElementById("edit-project-box").style.display = "none"
-}
-
-// Edit Selected Project
-function saveProject() {
-    var title = document.getElementById("edit-project-title").innerHTML.replace(/\./g,",")
-    var data = {
-        title: title,
-        link: document.getElementById("edit-project-link").value,
-        status: document.getElementById("edit-project-status-value").value,
-        description: document.getElementById("edit-project-description").value
-    }
-    firebase.database().ref("projects/" + title).set(data)
-    document.getElementById("edit-project-title").innerHTML = '';
-    document.getElementById("edit-project-link").value = '';
-   // document.getElementById("edit-project-status").value = 'active';
-    document.getElementById("edit-project-description").value = '';
-    document.getElementById("edit-project-box").style.display = "none"
-    displayProjects("all")
-}
-
-
-function editProject(name) {
-    var title = name.replace(/`/g, "'")
-    var database = firebase.database().ref("projects/" + title);
-    database.on('value', function(data) {
-        var data1 = data.val()
-        document.getElementById("edit-project-title").innerText = title.replace(/,/g, ".")
-        document.getElementById("edit-project-link").value = data1["link"]
-        document.getElementById("edit-project-status-value").value = data1["status"]
-        document.getElementById("edit-project-description").value = data1["description"]
-        document.getElementById("edit-project-box").style.display = "block"
-        document.getElementById("new-project-box").style.display = "none"
-    })
-}
-
+// START FIREBASE STUFF
 
 // Firebase Check Log In Status
 function checkLogin() {
@@ -134,6 +41,20 @@ function checkLogin() {
     })
 }
 
+// Starts Firebase
+function startFirebase() {
+    // Initialize Firebase
+    var config = {
+        apiKey: "AIzaSyBG5-wv3bpeiUjR6BH5GXamqPlH1arXt8Y",
+        authDomain: "homepage-projects-3d870.firebaseapp.com",
+        databaseURL: "https://homepage-projects-3d870.firebaseio.com",
+        projectId: "homepage-projects-3d870",
+        storageBucket: "homepage-projects-3d870.appspot.com",
+        messagingSenderId: "487531629040"
+    };
+    firebase.initializeApp(config);
+}
+
 // Firebase Log In
 function logIn() {
     firebase.auth().setPersistence("local")
@@ -191,4 +112,177 @@ function setData(ref, element, read1) {
 function sendData(ref, data) {
     var database = firebase.database();
     firebase.database().ref(ref).set(data);
+}
+//END FIREBASE STUFF
+
+// START PROJECTS STUFF
+
+function displayProjects(status) {
+    document.getElementById("projects").innerHTML = ""
+    database = firebase.database().ref("projects");
+    database.once('value', function (snapshot) {
+        snapshot.forEach(function (child) {
+            firebase.database().ref("projects/" + child["key"]).on('value', function (data) {
+                var data1 = data.val();
+                var a = document.createElement("div")
+                var title = data1["title"]
+                a.innerHTML = "<div class='project-card mdl-card mdl-shadow--2dp'> <div class='mdl-card__title mdl-card--expand'> <h2 class='mdl-card__title-text'>" + data1['title'].replace(/,/g, '.') + "<br>" + data1['status'] + "</h2> </div> <div class='mdl-card__supporting-text'>" + data1['description'] + " </div> <div class='mdl-card__actions mdl-card--border'> <a href=\"javascript:editProject(\'" + title.replace(/'/g, "`") + "\')\" class='mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect'> Edit </a> </div> </div>"
+
+                if (status === "all") {
+                    document.getElementById("projects").appendChild(a)
+                } else if (data1["status"] === status) {
+                    document.getElementById("projects").appendChild(a)
+                }
+            })
+        })
+    });
+}
+
+function openProjects() {
+    document.getElementById("projects_tab").style.display = "block"
+    document.getElementById("program_tab").style.display = "none"
+    document.getElementById("page_title").innerHTML = "Dashboard - Projects"
+}
+
+function newProject() {
+    var data = {
+        title: document.getElementById("new-project-title").value.replace(/\./g, ","),
+        link: document.getElementById("new-project-link").value,
+        status: document.getElementById("new-project-status-value").value,
+        description: document.getElementById("new-project-description").value
+    }
+    firebase.database().ref("projects/" + document.getElementById("new-project-title").value.replace(/\./g, ",")).set(data)
+    document.getElementById("new-project-title").value = '';
+    document.getElementById("new-project-link").value = '';
+    document.getElementById("new-project-status-value").value = 'active';
+    document.getElementById("new-project-description").value = '';
+    document.getElementById("new-project-box").style.display = "none"
+    displayProjects("all")
+}
+
+function openNewProject() {
+    document.getElementById("new-project-box").style.display = "block"
+    document.getElementById("edit-project-box").style.display = "none"
+}
+
+// Edit Selected Project
+function saveProject() {
+    var title = document.getElementById("edit-project-title").innerHTML.replace(/\./g, ",")
+    var data = {
+        title: title,
+        link: document.getElementById("edit-project-link").value,
+        status: document.getElementById("edit-project-status-value").value,
+        description: document.getElementById("edit-project-description").value
+    }
+    firebase.database().ref("projects/" + title).set(data)
+    document.getElementById("edit-project-title").innerHTML = '';
+    document.getElementById("edit-project-link").value = '';
+    // document.getElementById("edit-project-status").value = 'active';
+    document.getElementById("edit-project-description").value = '';
+    document.getElementById("edit-project-box").style.display = "none"
+    displayProjects("all")
+}
+
+
+function editProject(name) {
+    var title = name.replace(/`/g, "'")
+    var database = firebase.database().ref("projects/" + title);
+    database.on('value', function (data) {
+        var data1 = data.val()
+        document.getElementById("edit-project-title").innerText = title.replace(/,/g, ".")
+        document.getElementById("edit-project-link").value = data1["link"]
+        document.getElementById("edit-project-status-value").value = data1["status"]
+        document.getElementById("edit-project-description").value = data1["description"]
+        document.getElementById("edit-project-box").style.display = "block"
+        document.getElementById("new-project-box").style.display = "none"
+    })
+}
+// END PROJECTS STUFF
+
+// START PROGRAM STUFF
+
+function displayProgram() {
+    document.getElementById("program").innerHTML = ""
+    database = firebase.database().ref("programs");
+    database.once('value', function (snapshot) {
+        snapshot.forEach(function (child) {
+            firebase.database().ref("programs/" + child["key"]).on('value', function (data) {
+                var data1 = data.val();
+                var a = document.createElement("div")
+                var title = data1["title"]
+                //a.innerHTML = "<div class='program-card mdl-card mdl-shadow--2dp' style='background: url(\""+data1['imglink']+"\") center / cover'> <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' style='background: rgba(0, 0, 0, 0.5);'>" + data1['description'] + " </div> <div class='mdl-card__actions mdl-card--border' style='background: rgba(0, 0, 0, 0.5);'> <a href=\"javascript:editProgram(\'" + title.replace(/'/g, "`") + "\')\" class='mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect'> Edit </a> </div> </div>"
+                a.innerHTML = "<div class='program-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:editProgram(\'" + title.replace(/'/g, "`") + "\')\" class='mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect'> Edit </a> </div> </div>"
+                document.getElementById("program").appendChild(a)
+            })
+        })
+    });
+}
+
+function openProgram() {
+    document.getElementById("program_tab").style.display = "block"
+    document.getElementById("projects_tab").style.display = "none"
+    document.getElementById("page_title").innerHTML = "Dashboard - Software"
+}
+
+
+function newProgram() {
+    var data = {
+        title: document.getElementById("new-program-title").value.replace(/\./g, ","),
+        imglink: document.getElementById("new-program-image").value,
+        description: document.getElementById("new-program-description").value,
+        author: document.getElementById("new-program-author").value,
+        programtype: document.getElementById("new-program-type").value,
+        link: document.getElementById("new-program-link").value
+    }
+    firebase.database().ref("programs/" + document.getElementById("new-program-title").value.replace(/\./g, ",")).set(data)
+    document.getElementById("new-program-title").value = '';
+    document.getElementById("new-program-link").value = '';
+    document.getElementById("new-program-image").value = '';
+    document.getElementById("new-program-type").value = '';
+    document.getElementById("new-program-author").value = '';
+    document.getElementById("new-program-description").value = '';
+    document.getElementById("new-program-box").style.display = "none"
+    displayProgram()
+}
+
+function openNewProgram() {
+    document.getElementById("new-program-box").style.display = "block"
+    document.getElementById("edit-program-box").style.display = "none"
+}
+
+// Edit Selected Program
+function saveProgram() {
+    var title = document.getElementById("edit-program-title").innerHTML.replace(/\./g, ",")
+    var data = {
+        title: title,
+        imglink: document.getElementById("edit-program-link").value,
+        description: document.getElementById("edit-program-description").value,
+        author: document.getElementById("edit-program-author").value,
+        programtype: document.getElementById("edit-program-type").value,
+        link: document.getElementById("edit-program-link").value
+    }
+    firebase.database().ref("programs/" + title).set(data)
+    document.getElementById("edit-program-title").innerHTML = '';
+    document.getElementById("edit-program-link").value = '';
+    // document.getElementById("edit-program-status").value = 'active';
+    document.getElementById("edit-program-description").value = '';
+    document.getElementById("edit-program-box").style.display = "none"
+    displayProgram()
+}
+
+
+function editProgram(name) {
+    var title = name.replace(/`/g, "'")
+    var database = firebase.database().ref("programs/" + title);
+    database.on('value', function (data) {
+        var data1 = data.val()
+        document.getElementById("edit-program-title").innerText = title.replace(/,/g, ".")
+        document.getElementById("edit-program-link").value = data1["link"]
+        document.getElementById("edit-program-image").value = data1["imglink"]
+        document.getElementById("edit-program-author").value = data1["author"]
+        document.getElementById("edit-program-type").value = data1["programtype"]
+        document.getElementById("edit-program-description").value = data1["description"]
+        document.getElementById("edit-program-box").style.display = "block"
+        document.getElementById("new-program-box").style.display = "none"
+    })
 }
\ No newline at end of file
diff --git a/dashboard/style.css b/dashboard/style.css
index 010acd6..3bef143 100644
--- a/dashboard/style.css
+++ b/dashboard/style.css
@@ -121,6 +121,24 @@
       margin: 10px;
   }
 
+  #new_button_program {
+    position: absolute;
+    right: 3%;
+    bottom: 3.5%;
+    z-index: 1;
+}  
+
+  #program_tab {
+      width: 100%;
+      height: 100%;
+      ;
+  }
+
+  .program-card {
+      width: 90%;
+      margin: 10px;
+  }
+
   .login-card {
       position: absolute;
       top: 0;