Added Programs with Firebase (v.2)

This commit is contained in:
2019-02-13 01:00:28 +00:00
parent 92562a9c3f
commit aa627bc242
3 changed files with 245 additions and 121 deletions
+149 -66
View File
@@ -1,67 +1,150 @@
<html>
<head>
<title>LAX18's Homepage | Admin Dashboard</title>
<script src="js/script.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/png" href="https://i.imgur.com/A385G44.png">
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119545665-1"></script>
<script src="js/script.js"></script>
<style>
td {vertical-align: bottom;text-align: center;}
</style>
</head>
<body onload="onLoad();verify();projectList();">
<div id="entirenav">
<div id="navbarlogo">
<img src="img/LAX18.jpeg" width=64><span id="logofont" style="font-size: 68pt;">LAX18's Homepage</span>
</div>
<div id="nav">
<ul class="nav-bar" id="nav-bar">
<li class="nav-bar-li"><a href="index.html">Home</a></li>
<li class="nav-bar-li"><a href="programs.html">Programs</a></li>
<li class="nav-bar-li"><a href="projects.html">Projects</li>
<li class="nav-bar-li"><a href="contact.html">Contact</a></li>
<li class="nav-bar-li"><a href="libraries/index.html">Libraries</a></li>
<li class="nav-bar-li" style="float: right;" id="logoutbutton"><a href='javascript:logOut();'>Log Out</a></li>
<li class="nav-bar-li" style="float: right;" id="loginbutton"><a href="javascript:logIn();">Log In</a></li>
</ul>
</div>
</div>
<h2 id="titles" style="text-align: center; font-size: 26pt;">Admin Dashboard</h2>
Add Project:<br>
Title:<br>
<input id="new-project-title" type="text"><br>
Link:<br>
<input id="new-project-link" type="text"><br>
Status:<br>
<select id="new-project-status">
<option value="active">Active</option>
<option value="inactive">Idle</option>
<option value="canceled">Canceled</option>
</select><br>
Description:<br>
<textarea id="new-project-description">
</textarea><br>
<input type="button" onclick="submitProject();" value="Submit">
<br><br>
Select Project to Edit:<br>
<select id="project-list" onchange="projectOnChange();" onclick="projectOnChange();">
</select><br>
Link:<br>
<input id="edit-project-link" type="text"><br>
Status:<br>
<select id="edit-project-status">
<option value="active">Active</option>
<option value="inactive">Idle</option>
<option value="canceled">Canceled</option>
</select><br>
Description:<br>
<textarea id="edit-project-description">
</textarea><br>
<input type="button" onclick="editProject();" value="Submit">
</body>
</html>
<head>
<title>LAX18's Homepage | Admin Dashboard</title>
<script src="js/script.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/png" href="https://i.imgur.com/A385G44.png">
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119545665-1"></script>
<script src="js/script.js"></script>
<style>
td {text-align: center;}
.tdregular {border-style: solid;border-color: black;}
</style>
</head>
<body onload="onLoad();verify();projectList();programList();">
<div id="entirenav">
<div id="navbarlogo">
<img src="img/LAX18.jpeg" width=64><span id="logofont" style="font-size: 68pt;">LAX18's Homepage</span>
</div>
<div id="nav">
<ul class="nav-bar" id="nav-bar">
<li class="nav-bar-li"><a href="index.html">Home</a></li>
<li class="nav-bar-li"><a href="programs.html">Programs</a></li>
<li class="nav-bar-li">
<a href="projects.html">
Projects
</li>
<li class="nav-bar-li"><a href="contact.html">Contact</a></li>
<li class="nav-bar-li"><a href="libraries/index.html">Libraries</a></li>
<li class="nav-bar-li" style="float: right;" id="logoutbutton"><a href='javascript:logOut();'>Log Out</a></li>
<li class="nav-bar-li" style="float: right;" id="loginbutton"><a href="javascript:logIn();">Log In</a></li>
</ul>
</div>
</div>
<h2 id="titles" style="text-align: center; font-size: 26pt;">Admin Dashboard</h2>
<table width="100%">
<tr>
<td width="25%" style="border-right-style: solid;border-left-style: solid;border-top-style: solid;border-color: black;">
Projects
</td>
<td style="border-bottom-style: solid;border-color: black">
</td>
</tr>
</table>
<br>
<table width="100%" >
<tbody>
<tr>
<td class="tdregular">
Add Project:<br><br>
Title:<br>
<input id="new-project-title" type="text"><br>
Link:<br>
<input id="new-project-link" type="text"><br>
Status:<br>
<select id="new-project-status">
<option value="active">Active</option>
<option value="inactive">Idle</option>
<option value="canceled">Canceled</option>
<option value="depracated">Depracated</option>
</select>
<br>
Description:<br>
<textarea id="new-project-description">
</textarea>
<br>
<input type="button" onclick="submitProject();" value="Submit">
<br><br>
</td>
<td class="tdregular">
Select Project to Edit:<br>
<select id="project-list" onchange="projectOnChange();" onclick="projectOnChange();">
</select><br>
Link:<br>
<input id="edit-project-link" type="text"><br>
Status:<br>
<select id="edit-project-status">
<option value="active">Active</option>
<option value="inactive">Idle</option>
<option value="canceled">Canceled</option>
<option value="depracated">Depracated</option>
</select>
<br>
Description:<br>
<textarea id="edit-project-description">
</textarea>
<br>
<input type="button" onclick="editProject();" value="Submit">
</td>
</tr>
</tbody>
</table>
<br><br><br>
<table width="100%">
<tr>
<td width="25%" style="border-right-style: solid;border-left-style: solid;border-top-style: solid;border-color: black;">
Programs
</td>
<td style="border-bottom-style: solid;border-color: black">
</td>
</tr>
</table>
<br>
<table width="100%" >
<tbody>
<tr>
<td class="tdregular">
Add Program:<br><br>
Title:<br>
<input id="new-program-title" type="text"><br>
Link:<br>
<input id="new-program-link" type="text"><br>
Image Link:<br>
<input id="new-program-imglink" type="text"><br>
Author<br>
<input id="new-program-author" type="text"><br>
Type<br>
<input id="new-program-type" type="text"><br>
Description:<br>
<textarea id="new-program-description">
</textarea>
<br>
<input type="button" onclick="submitProgram();" value="Submit">
<br><br>
</td>
<td class="tdregular">
Select Program to Edit:<br>
<select id="program-list" onchange="programOnChange();" onclick="programOnChange();">
</select><br>
Link:<br>
<input id="edit-program-link" type="text"><br>
Image Link:<br>
<input id="edit-program-imglink" type="text"><br>
Author<br>
<input id="edit-program-author" type="text"><br>
Type<br>
<input id="edit-program-type" type="text"><br>
Description:<br>
<textarea id="edit-program-description">
</textarea>
<br>
<input type="button" onclick="editProgram();" value="Submit">
</td>
</tr>
</tbody>
</table>
</body>
</html>
+92 -9
View File
@@ -1,3 +1,86 @@
// Display List of Programs in form
function programList() {
database = firebase.database().ref("programs");
database.once('value', function(snapshot) {
snapshot.forEach(function(child) {
var a = document.createElement("option")
a.setAttribute("value",child["key"].replace(/,/g,"."))
a.innerHTML = child["key"].replace(/,/g,".")
document.getElementById("program-list").appendChild(a)
})
});
programOnChange();
}
// Add New Program
function submitProgram() {
var data = {
title: document.getElementById("new-program-title").value.replace(".",","),
link: document.getElementById("new-program-link").value,
imglink: document.getElementById("new-program-imglink").value,
author: document.getElementById("new-program-author").value,
description: document.getElementById("new-program-description").value,
programtype: document.getElementById("new-program-type").value
}
firebase.database().ref("programs/"+document.getElementById("new-program-title").value.replace(".",",")).set(data)
document.getElementById("new-program-title").value = '';
document.getElementById("new-program-link").value = '';
document.getElementById("new-program-imglink").value = '';
document.getElementById("new-program-description").value = '';
document.getElementById("new-program-author").value = "";
document.getElementById("new-program-type").value = "";
}
// onChange Page Update
function programOnChange() {
var title = document.getElementById("program-list").value
var database = firebase.database().ref("programs/"+title.replace(/,/g,"."));
database.on('value', function(data) {
var data1 = data.val()
document.getElementById("edit-program-link").value = data1["link"]
document.getElementById("edit-program-imglink").value = data1["imglink"]
document.getElementById("edit-program-description").value = data1["description"]
document.getElementById("edit-program-author").value = data1["author"]
document.getElementById("edit-program-type").value = data1["programtype"]
})
}
// Display all programs
function displayPrograms() {
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("tr")
a.innerHTML = "<td style='border-right-style: solid;' width='5%'><img src='"+data1["imglink"]+"' width='200'></td><td><a href='"+data1["link"]+" style='text-decoration: underline;'>"+data1["title"]+"</a><br> By "+data1["author"]+"<br>"+data1["programtype"]+"<br>"+data1["description"]+"</td>"
document.getElementById("programs").appendChild(a)
}
)})
});
}
// Edit Program Entry
function editProgram() {
var data = {
title: document.getElementById("program-list").value.replace(".",","),
link: document.getElementById("edit-program-link").value,
imglink: document.getElementById("edit-program-imglink").value,
author: document.getElementById("edit-program-author").value,
description: document.getElementById("edit-program-description").value,
programtype: document.getElementById("edit-program-type").value
}
firebase.database().ref("programs/"+document.getElementById("program-list").value.replace(".",",")).set(data)
document.getElementById("program-list").value = '';
document.getElementById("edit-program-link").value = '';
document.getElementById("edit-program-author").value = '';
document.getElementById("edit-program-description").value = '';
document.getElementById("edit-program-type").value = "";
document.getElementById("edit-program-imglink").value = "";
}
// Display all projects
function displayProjects() {
database = firebase.database().ref("projects");
@@ -7,9 +90,9 @@ function displayProjects() {
var data1 = data.val();
var a = document.createElement("table")
if (data1["link"] == "") {
a.innerHTML = "<tr><td><div id='titles'>"+data1["title"]+"</h4><div class='"+data1["status"]+"'>"+data1["status"]+"</div></td></tr><tr class='spacing'><td>"+data1["description"]+"</td></tr><tr class='separator'></tr>"
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 = "<tr><td><div id='titles'><a href='"+data1["link"]+"'>"+data1["title"]+"</a></h4><div class='"+data1["status"]+"'>"+data1["status"]+"</div></td></tr><tr class='spacing'><td>"+data1["description"]+"</td></tr><tr class='separator'></tr>"
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>"
}
document.getElementById("projects").appendChild(a)
}
@@ -20,12 +103,12 @@ function displayProjects() {
// Edit Selected Project
function editProject() {
var data = {
title: document.getElementById("project-list").value,
title: document.getElementById("project-list").value.replace(".",","),
link: document.getElementById("edit-project-link").value,
status: document.getElementById("edit-project-status").value,
description: document.getElementById("edit-project-description").value
}
firebase.database().ref("projects/"+document.getElementById("project-list").value).set(data)
firebase.database().ref("projects/"+document.getElementById("project-list").value.replace(".",",")).set(data)
document.getElementById("project-list").value = '';
document.getElementById("edit-project-link").value = '';
document.getElementById("edit-project-status").value = 'active';
@@ -35,7 +118,7 @@ function editProject() {
// onChange page update
function projectOnChange() {
var title = document.getElementById("project-list").value
var database = firebase.database().ref("projects/"+title);
var database = firebase.database().ref("projects/"+title.replace(/,/g,"."));
database.on('value', function(data) {
var data1 = data.val()
document.getElementById("edit-project-link").value = data1["link"]
@@ -47,12 +130,12 @@ function projectOnChange() {
// Project Submit
function submitProject() {
var data = {
title: document.getElementById("new-project-title").value,
title: document.getElementById("new-project-title").value.replace(".",","),
link: document.getElementById("new-project-link").value,
status: document.getElementById("new-project-status").value,
description: document.getElementById("new-project-description").value
}
firebase.database().ref("projects/"+document.getElementById("new-project-title").value).set(data)
firebase.database().ref("projects/"+document.getElementById("new-project-title").value.replace(".",",")).set(data)
document.getElementById("new-project-title").value = '';
document.getElementById("new-project-link").value = '';
document.getElementById("new-project-status").value = 'active';
@@ -65,8 +148,8 @@ function projectList() {
database.once('value', function(snapshot) {
snapshot.forEach(function(child) {
var a = document.createElement("option")
a.setAttribute("value",child["key"])
a.innerHTML = child["key"]
a.setAttribute("value",child["key"].replace(/,/g,"."))
a.innerHTML = child["key"].replace(/,/g,".")
document.getElementById("project-list").appendChild(a)
})
});
+4 -46
View File
@@ -7,11 +7,11 @@
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-119545665-1"></script>
<style>
td {border-bottom-style: solid;}
tr {margin-bottom: 10px;}
td {border-bottom-style: solid;}
</style>
</head>
<body onload="onLoad()">
<body onload="onLoad();displayPrograms()">
<div id="entirenav">
<div id="navbarlogo">
<img src="img/LAX18.jpeg" width=64><span id="logofont" style="font-size: 68pt;">LAX18's Homepage</span>
@@ -29,50 +29,8 @@ tr {margin-bottom: 10px;}
</div>
</div>
<h2 id="titles">Programs:</h2>
<table style="border-style: solid;border-color: black;">
<tr>
<td style="border-right-style: solid;"><img src="https://www.cemetech.net/img/ss/004048.gif" width=200/></td>
<td>
<a href="https://www.cemetech.net/programs/index.php?mode=file&path=/83plus/basic/math/fakecalcv.1.zip" style="text-decoration: underline;">Fake Calc</a><br>
By LAX18<br>
TI83+ / TI84+ / CE BASIC<br>
This is a program that makes the calculator display incorrect results for calculations inputted. Use this to prank your friends. I do not take responsibility for those who abuse this and mess up others tests.
</td>
</tr>
<tr>
<td style="border-right-style: solid;"><img src="https://www.cemetech.net/img/ss/003810.gif" width=200/></td>
<td>
<a href="https://www.cemetech.net/programs/index.php?mode=file&path=/84pce/asm/games/StockSimv.1.zip" style="text-decoration: underline;">StockSim v.1</a><br>
by LAX18<br>
TI84+CE Assembly (ICE)<br>
StockSim is a simulation game based on the American stock market. Players can buy and sell stocks while monitoring several charts. Players have to determine the best times to sell, whilst monitoring best times to buy other stocks. Players can select from EASY and HARD modes and can save/continue their games.
</td>
</tr>
<tr>
<td style="border-right-style: solid;"><img src="https://www.cemetech.net/img/ss/003605.gif" width=200/></td>
<td>
<a href="https://www.cemetech.net/programs/index.php?mode=file&path=/84pce/basic/math/taxfind17.zip" style="text-decoration: underline;">TaxFind2017</a><br>
by LAX18<br>
TI84+CE BASIC<br>
This program calculates a user-selectable applied tax on the input amount. VERY HELPFUL!!! UPDATE: Now allows you to set a custom tax percentage and store it locally, idea provided by KermPhd NOTE: You need to set a local percentage BEFORE using the custom percentage tool! Redo this on RAM resets.</td>
</tr>
<tr>
<td style="border-right-style: solid;"><img src="https://www.cemetech.net/img/ss/003606.gif" width=200/></td>
<td>
<a href="https://www.cemetech.net/programs/index.php?mode=file&path=/84pce/asm/games/asteroid3ice.zip" style="text-decoration: underline;">Asteroids 3 ICE</a><br>
by LAX18<br>
TI84+CE Assembly (ICE)<br>
This game places you as the pilot of a spacecraft tasked with the task of destroying incomming asteroids. For every asteroid that you hit you gain a point, for every asteroid that you miss, you lose a point. UPDATE: - FASTER KEYPRESSES - Cesium ICON AND DESCRIPTION THIS GAME IS VERY SIMILAR TO ASTEROIDS 3 CE v.1.8 TIBASIC</td>
</tr>
<tr>
<td style="border-right-style: solid;"><img src="https://www.cemetech.net/img/ss/003596.gif" width=200/></td>
<td>
<a href="https://www.cemetech.net/programs/index.php?mode=file&path=/84pce/basic/games/asteroids3.zip" style="text-decoration: underline;">Asteroids 3 CE</a><br>
By LAX18<br>
TI84+CE BASIC<br>
This game places you as the operator of a space craft as you attempt to shoot down ALL of the asteroids hurtling towards you. If you miss one, you lose a point. If you hit one, you gain a point. Controls: [<] Moves spacecraft left [>] Moves spacecraft right [Up] or [2nd] Fires up [Enter] or [Alpha] Pause [Mode] Quit
</td>
</tr>
<table id="programs" style="border-style: solid;border-bottom-style: none;border-color: black;" width="100%">
</table>
</body>
</html>