Continued Dashboard Additions
This commit is contained in:
+67
-41
@@ -66,51 +66,77 @@
|
||||
</head>
|
||||
|
||||
<body onload="onLoad();">
|
||||
<div id="main_content">
|
||||
<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>
|
||||
<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">
|
||||
<img src="" id="firebase_photo" class="demo-avatar">
|
||||
<span id="firebase_name"></span>
|
||||
<div class="demo-avatar-dropdown">
|
||||
<span id="firebase_email"></span>
|
||||
<img src="loading.gif" id="loading">
|
||||
<div id="main_content" style="display: none;">
|
||||
<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>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
|
||||
<i class="material-icons" role="presentation">arrow_drop_down</i>
|
||||
<span class="visuallyhidden">Options</span>
|
||||
</button>
|
||||
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
|
||||
<li class="mdl-menu__item" onclick="logOut()">Log Out</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>Home</a>
|
||||
<a class="mdl-navigation__link" href="javascript:displayProjects('active')"><i class="mdl-color-text--blue-grey-400 material-icons"
|
||||
role="presentation">home</i>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>Blog Posts</a>
|
||||
<a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i class="mdl-color-text--blue-grey-400 material-icons"
|
||||
role="presentation">delete</i>Software Programs</a>
|
||||
<a class="mdl-navigation__link" href="javascript:displayProjects('canceled')"><i class="mdl-color-text--blue-grey-400 material-icons"
|
||||
role="presentation">delete</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">delete</i>Link Explorer</a>
|
||||
</nav>
|
||||
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
|
||||
<header class="demo-drawer-header">
|
||||
<img src="" id="firebase_photo" class="demo-avatar">
|
||||
<span id="firebase_name"></span>
|
||||
<div class="demo-avatar-dropdown">
|
||||
<span id="firebase_email"></span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
|
||||
<i class="material-icons" role="presentation">arrow_drop_down</i>
|
||||
<span class="visuallyhidden">Options</span>
|
||||
</button>
|
||||
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
|
||||
<li class="mdl-menu__item" onclick="logOut()">Log Out</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>Home</a>
|
||||
<a class="mdl-navigation__link" href="javascript:displayProjects('active')"><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
|
||||
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
|
||||
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"
|
||||
href="javascript:displayProjects('canceled')"><i class="mdl-color-text--blue-grey-400 material-icons"
|
||||
role="presentation">keyboard_return</i>Return to Website</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content mdl-color--grey-100">
|
||||
<div id="projects_tab">
|
||||
<div class="square-left" id="projects">
|
||||
|
||||
</div>
|
||||
<div class="square-right">
|
||||
<h1>Title</h1>
|
||||
<form action="#">
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<input class="mdl-textfield__input" type="text" id="sample1">
|
||||
<label class="mdl-textfield__label" for="sample1">Link </label>
|
||||
|
||||
<!-- Floating Multiline Textfield -->
|
||||
<form action="#">
|
||||
<div class="mdl-textfield mdl-js-textfield">
|
||||
<textarea class="mdl-textfield__input" type="text" rows="3" id="sample5"></textarea>
|
||||
<label class="mdl-textfield__label" for="sample5">Description</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main class="mdl-layout__content mdl-color--grey-100">
|
||||
<div id="projects"></div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<div id="login_container">
|
||||
<div id="login_container" style="display: none;">
|
||||
<div class="login-card mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h2 class="mdl-card__title-text">Admin Dashboard - Login</h2>
|
||||
@@ -125,7 +151,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="unauthorized">
|
||||
<div id="unauthorized" style="display: none;">
|
||||
<div class="unauthorized-card mdl-card mdl-shadow--2dp">
|
||||
<div class="mdl-card__title mdl-card--expand">
|
||||
<h2 class="mdl-card__title-text">Unauthorized Login</h2>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
@@ -5,6 +5,7 @@ function onLoad() {
|
||||
document.getElementById("main_content").style.display = "none";
|
||||
document.getElementById("unauthorized").style.display = "none";
|
||||
checkLogin()
|
||||
displayProjects("all")
|
||||
setInterval(function() {
|
||||
checkLogin();
|
||||
}, 1000);
|
||||
@@ -24,6 +25,27 @@ function startFirebase() {
|
||||
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 + ')" 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)
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// Make completly sure user is authenticated.
|
||||
function verify() {
|
||||
firebase.auth().onAuthStateChanged(function (user) {
|
||||
@@ -47,6 +69,7 @@ function checkLogin() {
|
||||
if (user) {
|
||||
readData("users", function (array) {
|
||||
if (array[firebase.auth().currentUser.uid]) {
|
||||
document.getElementById("loading").style.display = "none";
|
||||
document.getElementById("firebase_name").innerText = firebase.auth().currentUser.displayName
|
||||
document.getElementById("firebase_email").innerText = firebase.auth().currentUser.email
|
||||
document.getElementById("firebase_photo").setAttribute("src", firebase.auth().currentUser.photoURL)
|
||||
@@ -54,12 +77,14 @@ function checkLogin() {
|
||||
document.getElementById("login_container").style.display = "none";
|
||||
document.getElementById("unauthorized").style.display = "none";
|
||||
} else {
|
||||
document.getElementById("loading").style.display = "none";
|
||||
document.getElementById("main_content").innerHTML = ""
|
||||
document.getElementById("login_container").innerHTML = ""
|
||||
document.getElementById("unauthorized").style.display = "block";
|
||||
}
|
||||
})
|
||||
} else {
|
||||
document.getElementById("loading").style.display = "none";
|
||||
document.getElementById("main_content").style.display = "none";
|
||||
document.getElementById("login_container").style.display = "block";
|
||||
document.getElementById("unauthorized").style.display = "none";
|
||||
|
||||
@@ -1,3 +1,34 @@
|
||||
.square-left {
|
||||
position: absolute;
|
||||
left: 2%;
|
||||
width: 40%;
|
||||
top: 2%;
|
||||
height: 96%;
|
||||
background-color: white;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.square-right {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
width: 54%;
|
||||
top: 2%;
|
||||
height: 96%;
|
||||
background-color: white;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
#projects_tab {
|
||||
width: 100%;
|
||||
height: 100%;;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
width: 90%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
@@ -22,6 +53,13 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#loading {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.active {color: green;}
|
||||
.inactive {color: orange;}
|
||||
.canceled {color: red;}
|
||||
|
||||
Reference in New Issue
Block a user