Added Programs to Dashboard
This commit is contained in:
+117
-20
@@ -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">
|
||||
|
||||
+191
-97
@@ -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"
|
||||
})
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user