Added Blogs to Dashboard
This commit is contained in:
+65
-1
@@ -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>
|
||||
|
||||
+87
-2
@@ -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"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user