npease/lax18.github.io
1
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Added Dashboard

Browse Source
This commit is contained in:
Nicholas Pease
2021-06-26 00:10:08 -04:00
parent 8b28471080
commit 085185364a
10 changed files with 391 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/images/android-desktop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

dashboard/images/dog.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

dashboard/images/favicon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 404 B

dashboard/images/ios-desktop.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 701 B

dashboard/images/user.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

dashboard/index.html
+100
View File
@@ -0,0 +1,100 @@
<!doctype html>
<!--
Material Design Lite
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Material Design Lite</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="style.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body onload="onLoad();">
<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">Project Explorer</span>
<div class="mdl-layout-spacer"></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
</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>
</nav>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<div id="projects"></div>
</main>
</div>
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="script.js"></script>
</body>
</html>
dashboard/script.js
+65
View File
@@ -0,0 +1,65 @@
function onLoad() {
startFirebase()
displayProjects("all")
}
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")
if (data1["link"] == "") {
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>'
//a.innerHTML = "<tr><td><div id='titles'>" + data1["title"].replace(/,/g, ".") + "</h4><div class='" + data1["status"] + "'>" + data1["status"] + "</div></td></tr><tr class='spacing'><td>" + data1["description"] + "</td></tr><tr class='separator'></tr>"
} else {
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="' + data1["link"] + '" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> See More </a> </div> </div>'
// a.innerHTML = "<tr><td><div id='titles'><a href='" + data1["link"] + "'>" + data1["title"].replace(/,/g, ".") + "</a></h4><div class='" + data1["status"] + "'>" + data1["status"] + "</div></td></tr><tr class='spacing'><td>" + data1["description"] + "</td></tr><tr class='separator'></tr>"
}
if (status === "all") {
document.getElementById("projects").appendChild(a)
} else if (data1["status"] === status) {
document.getElementById("projects").appendChild(a)
}
})
})
});
}
// 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 Interaction Scripts
function readData(ref, callback) {
var nextformation = firebase.database().ref(ref);
nextformation.on("value", function (data) {
var array = data.val();
callback(array)
});
}
// global read data and place on page function
function setData(ref, element, read1) {
var array = readData(ref, function (array) {
document.getElementById(element).innerHTML = array[read1]
});
}
// Firebase Interaction Scripts
function sendData(ref, data) {
var database = firebase.database();
firebase.database().ref(ref).set(data);
}
dashboard/style.css
+10
View File
@@ -0,0 +1,10 @@
.project-card {
width: 98.5%;
margin: 10px;
}
.active {color: green;}
.inactive {color: orange;}
.canceled {color: red;}
.depracated {color: yellow;}
.hidden {display: none;}
dashboard/styles.css
+215
View File
@@ -0,0 +1,215 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
html, body {
font-family: 'Roboto', 'Helvetica', sans-serif;
}
.demo-avatar {
width: 48px;
height: 48px;
border-radius: 24px;
}
.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
color: rgba(0, 0, 0, 0.54);
}
.mdl-layout__drawer .avatar {
margin-bottom: 16px;
}
.demo-drawer {
border: none;
}
/* iOS Safari specific workaround */
.demo-drawer .mdl-menu__container {
z-index: -1;
}
.demo-drawer .demo-navigation {
z-index: -2;
}
/* END iOS Safari specific workaround */
.demo-drawer .mdl-menu .mdl-menu__item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.demo-drawer-header {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 16px;
height: 151px;
}
.demo-avatar-dropdown {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.demo-navigation {
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.demo-layout .demo-navigation .mdl-navigation__link {
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: rgba(255, 255, 255, 0.56);
font-weight: 500;
}
.demo-layout .demo-navigation .mdl-navigation__link:hover {
background-color: #00BCD4;
color: #37474F;
}
.demo-navigation .mdl-navigation__link .material-icons {
font-size: 24px;
color: rgba(255, 255, 255, 0.56);
margin-right: 32px;
}
.demo-content {
max-width: 1080px;
}
.demo-charts {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.demo-chart:nth-child(1) {
color: #ACEC00;
}
.demo-chart:nth-child(2) {
color: #00BBD6;
}
.demo-chart:nth-child(3) {
color: #BA65C9;
}
.demo-chart:nth-child(4) {
color: #EF3C79;
}
.demo-graphs {
padding: 16px 32px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
/* TODO: Find a proper solution to have the graphs
* not float around outside their container in IE10/11.
* Using a browserhacks.com solution for now.
*/
_:-ms-input-placeholder, :root .demo-graphs {
min-height: 664px;
}
_:-ms-input-placeholder, :root .demo-graph {
max-height: 300px;
}
/* TODO end */
.demo-graph:nth-child(1) {
color: #00b9d8;
}
.demo-graph:nth-child(2) {
color: #d9006e;
}
.demo-cards {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.demo-cards .demo-separator {
height: 32px;
}
.demo-cards .mdl-card__title.mdl-card__title {
color: white;
font-size: 24px;
font-weight: 400;
}
.demo-cards ul {
padding: 0;
}
.demo-cards h3 {
font-size: 1em;
}
.demo-updates .mdl-card__title {
min-height: 200px;
background-image: url('images/dog.png');
background-position: 90% 100%;
background-repeat: no-repeat;
}
.demo-cards .mdl-card__actions a {
color: #00BCD4;
text-decoration: none;
}
.demo-options h3 {
margin: 0;
}
.demo-options .mdl-checkbox__box-outline {
border-color: rgba(255, 255, 255, 0.89);
}
.demo-options ul {
margin: 0;
list-style-type: none;
}
.demo-options li {
margin: 4px 0;
}
.demo-options .material-icons {
color: rgba(255, 255, 255, 0.89);
}
.demo-options .mdl-card__actions {
height: 64px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
project_explorer/script.js
+1 -1
View File
@@ -1,5 +1,5 @@
function onLoad() {
startFirebase("active")
startFirebase()
displayProjects("all")
}