Added Some Changes to Dashboard and project pages

dashboard/index.html

@@ -102,9 +102,6 @@
               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>
-          <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i
-              class="mdl-color-text--blue-grey-400 material-icons"
-              role="presentation">settings_input_antenna</i>Satellite Images</a>
           <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i
               class="mdl-color-text--blue-grey-400 material-icons" role="presentation">link</i>Link Explorer</a>
           <a href="https://nicholaspease.com" class="mdl-navigation__link"

dashboard/script.js

@@ -303,7 +303,7 @@ function displayBlog() {
                 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'> <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-b</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)
             })

project_explorer/index.html

@@ -71,25 +71,40 @@
       <div class="mdl-layout__header-row">
         <span class="mdl-layout-title">Project Explorer</span>
         <div class="mdl-layout-spacer"></div>
+        <div id="project_buttons">
+          <button type="button" class="mdl-chip" onclick="displayProjects('all')">
+            <span class="mdl-chip__text">All Projects</span>
+          </button>
+          <button type="button" class="mdl-chip" onclick="displayProjects('active')">
+            <span class="mdl-chip__text">Active Projects</span>
+          </button>
+          <button type="button" class="mdl-chip" onclick="displayProjects('inactive')">
+            <span class="mdl-chip__text">Inactive Projects</span>
+          </button>
+          <button type="button" class="mdl-chip" onclick="displayProjects('canceled')">
+            <span class="mdl-chip__text">Canceled Projects</span>
+          </button>
+        </div>
       </div>
     </header>
     <div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
       <header class="demo-drawer-header">
-        Menu
+        Project / Program Explorer<br>Nicholas Pease<br><a href="http://nicholaspease.com"
+          style="color: white;text-decoration: none;font-weight: bold;">nicholaspease.com</a>
       </header>
       <nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
-        <a class="mdl-navigation__link" href="javascript:displayProjects('all')"><i class="mdl-color-text--blue-grey-400 material-icons"
-          role="presentation">home</i>All Projects</a>
-        <a class="mdl-navigation__link" href="javascript:displayProjects('active')"><i class="mdl-color-text--blue-grey-400 material-icons"
-            role="presentation">home</i>Active Projects</a>
-        <a class="mdl-navigation__link" href="javascript:displayProjects('inactive')"><i class="mdl-color-text--blue-grey-400 material-icons"
-            role="presentation">inbox</i>Inactive Projects</a>
-        <a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i class="mdl-color-text--blue-grey-400 material-icons"
-            role="presentation">delete</i>Canceled Projects</a>
+        <a class="mdl-navigation__link" href="javascript:projects()"><i
+          class="mdl-color-text--blue-grey-400 material-icons" role="presentation">assignment</i>Projects</a>
+        <a class="mdl-navigation__link" href="javascript:blogs()"><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:programs()"><i
+            class="mdl-color-text--blue-grey-400 material-icons" role="presentation">wysiwyg</i>Programs</a>
       </nav>
     </div>
     <main class="mdl-layout__content mdl-color--grey-100">
       <div id="projects"></div>
+      <div id="programs" style="display: none"></div>
+      <div id="blogs" style="display: none"></div>
     </main>
   </div>
   <script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>

project_explorer/script.js

@@ -1,8 +1,30 @@
 function onLoad() {
     startFirebase()
+    displayBlog()
     displayProjects("all")
 }
 
+function blogs() {
+    document.getElementById("projects").style.display = "none"
+    document.getElementById("blogs").style.display = "block"
+    document.getElementById("programs").style.display = "none"
+    document.getElementById("project_buttons").style.display = "none"
+}
+
+function programs() {
+    document.getElementById("projects").style.display = "none"
+    document.getElementById("blogs").style.display = "none"
+    document.getElementById("programs").style.display = "block"
+    document.getElementById("project_buttons").style.display = "none"
+}
+
+function projects() {
+    document.getElementById("projects").style.display = "block"
+    document.getElementById("blogs").style.display = "none"
+    document.getElementById("programs").style.display = "none"
+    document.getElementById("project_buttons").style.display = "block"
+}
+
 function displayProjects(status) {
     document.getElementById("projects").innerHTML = ""
     database = firebase.database().ref("projects");
@@ -29,6 +51,23 @@ function displayProjects(status) {
     });
 }
 
+function displayBlog() {
+    document.getElementById("blogs").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>"
+                //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("blogs").appendChild(a)
+            })
+        })
+    });
+}
+
 // Starts Firebase
 function startFirebase() {
     // Initialize Firebase

project_explorer/style.css

@@ -3,6 +3,15 @@
     margin: 10px;
 }
 
+.blog-card {
+    width: 98.5%;
+    margin: 10px;;
+}
+
+.mdl-chip {
+    margin: 10px;
+}
+
 .active {color: green;}
 .inactive {color: orange;}
 .canceled {color: red;}