SowinskiBraeden/XP-System
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
SowinskiBraeden committed 2020-12-17 10:18:33 -08:00
1 parent 4f15788983
commit eaabb7cc65
36 files changed
+2116 -80
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

views/admin.ejs
+323
View File
@@ -0,0 +1,323 @@
<!-- Simple Styling for layout -->
<style>
.members {
width: 230px;
display: inline-block;
}
.buttons-container {
position: absolute;
width: 174px;
height: 500px;
top: 25px;
right: 25px;
border: solid #5b94f0 2px;
border-style: solid;
border-radius: 10px;
background-color: rgba(112, 196, 255, .3);
}
#newTeacher-btn {
margin-left: 25px;
margin-top: 10px;
}
#logout-btn {
margin-left: 50px;
margin-top: 10px;
}
#user-pro-pic {
position: absolute;
top: 0px;
left: 150px;
width: 50px;
height: 50px;
display: block;
border-radius: 50px;
border: 1px solid black;
margin:5px;
}
h2 {
font: 350 35px/1.5 Helvetica, Verdana, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}
li:last-child {
border: none;
}
li a {
text-decoration: none;
color: #000;
display: block;
width: 200px;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
}
li a:hover {
font-size: 30px;
background: #f6f6f6;
}
</style>
<!-- Header -->
<h1 class="mt-4">Site Admin</h1>
<div class='head'>
<div id='teacher-container'>
<div>
<p id='welcome' class="lead mb-3">Welcome Admin</p>
</div>
<br>
<div class="buttons-container">
<!-- Action Buttons -->
<a id='logout-btn' href="/users/logout" class="btn btn-secondary">Logout</a>
<!-- Button trigger modal -->
<button id="newTeacher-btn" onClick='openModal()' type="button" class="btn btn-outline-info btn-sm">
Create New Teacher
</button>
</div>
</div>
</div>
<script>
function openModal() {
$("#exampleModal").modal()
}
// Creates unique ID
function makeid(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
// Create Div
function createDiv(type, message) {
let id = makeid(8);
if (type == 'error') {
document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none;" class="alert alert-warning alert-dismissible fade show" role="alert">';
}
if (type == 'message') {
document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none;" class="alert alert-info alert-dismissible fade show" role="alert">';
}
document.getElementById('new-div-'+id).innerHTML += '<div id="message'+id+'">'+message+'</div>';
document.getElementById('new-div-'+id).innerHTML += '<button id="close-btn-'+id+'" class="close" data-dismiss="alert" aria-label="Close"></button>';
document.getElementById('close-btn-'+id).innerHTML += '<span aria-hidden="true">&times;</span>';
document.getElementById('new-div-'+id).style.display = "block";
}
</script>
<!-- Catching url Parameters -->
<script>
window.onload = function () {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const isSuccess = urlParams.get('createTeacher')
if(isSuccess == 'success') {
createDiv('message', 'Successfully Created Teacher')
}
}
</script>
<!-- Sets Variables for calculating users data -->
<div>
<script>
let xp;
let currRank;
let ranks = [
{"Digital Noob": 0}, // index 0
{"Digital Novice": 48}, // index 1
{"Digital Novice II": 100}, // index 2
{"Digital Amature": 148}, // index 3
{"Digital Amature II": 200}, // index 4
{"Digital Apprentice": 248}, // index 5
{"Digital Apprentice II": 300}, // index 6
{"Digital Journeyman": 396}, // index 7
{"Digital Journeyman II": 476}, // index 8
{"Digital Journeyman III": 532}, // index 9
{"Digital Crafter": 580}, // index 10
{"Expert Digital Crafter": 648}, // index 11
{"Master Digital Crafter": 800} // index 12
]
let indexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 12]
// Students should't be on this page sooooo...
console.log("Students Also Shouldnt be here");
</script>
<!-- Alert container -->
<div id='div-container'></div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create New Teacher</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<% include ./partials/messages %>
<form action="/users/registerTeacher" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Name</label>
<input
type="name"
id="name"
name="name"
class="form-control"
placeholder="Enter Name"
value="<%= typeof name != 'undefined' ? name : '' %>"
/>
</div>
<div class="form-group">
<label for='image'>Upload Profile Picture</label>
<input class="form-control-file" type="file" id="image" name="image" value="">
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
class="form-control"
placeholder="Enter Email"
value="<%= typeof email != 'undefined' ? email : '' %>"
/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
name="password"
class="form-control"
placeholder="Create Password"
value="<%= typeof password != 'undefined' ? password : '' %>"
/>
</div>
<div class="form-group">
<label for="password2">Confirm Password</label>
<input
type="password"
id="password2"
name="password2"
class="form-control"
placeholder="Confirm Password"
value="<%= typeof password2 != 'undefined' ? password2 : '' %>"
/>
</div>
<button type="submit" class="btn btn-primary btn-block">
Register Teacher
</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- List of all site students and teachers -->
<div class='members'>
<h2>All Site Members</h2>
<ul>
<!-- Loops through all members -->
<% members.forEach(function (member) { %>
<% if (member.role == "Student") { %>
<!-- Creates User Button link -->
<li><button class='btn btn-link mt-2' onclick='openProfile("<%= member.id %>")'><%= member.name %></button></li>
<!-- Creates hidden Div with user specific Data -->
<div style='display: none; position: relative;' data-role='page' id='<%= member._id %>'>
<img id='user-pro-pic' src='data:image/<%=member.image.contentType%>;base64,<%=member.image.data.toString('base64')%>'>
<p id='memberName' class='lead mb-3'><%= member.name %></p>
<p class='lead mb-3'><%= member.email %></p>
<div>
<p id='userRank-<%= member.id %>'></p>
<p>XP: <%= member.xp %></p>
<p><%= member.role %></p>
</div>
<br>
<!-- Calculates user specific Rank -->
<script>
xp = <%= member.xp %>;
// Get current rank
if (xp == 0) {
currRank = 'Digital Noob';
} else {
if (xp < 800 && xp > 0) {
for(var i = 0; i < ranks.length; i++) {
for (let rank in ranks[i]) {
let nextIndex = indexes[i];
for (let nextRank in ranks[nextIndex]) {
if (xp >= ranks[i][rank] && xp < ranks[nextIndex][nextRank]) {
currRank = rank;
}
}
}
}
} else {
if (xp == 800) {
currRank = "Master Digital Crafter";
}
}
}
// Display Rank
document.getElementById('userRank-<%= member.id %>').innerHTML = currRank;
</script>
</div>
<% } %>
<% if (member.role == "Teacher") { %>
<!-- Creates User Button link -->
<li><button class='btn btn-link mt-2' onclick='openProfile("<%= member.id %>")'><%= member.name %></button></li>
<!-- Creates hidden Div with user specific Data -->
<div style='display: none; position: relative;' data-role='page' id='<%= member._id %>'>
<img id='user-pro-pic' src='data:image/<%=member.image.contentType%>;base64,<%=member.image.data.toString('base64')%>'>
<p id='memberName' class='lead mb-3'><%= member.name %></p>
<p class='lead mb-3'><%= member.email %></p>
<div>
<p><%= member.role %></p>
</div>
<br>
</div>
<% } %>
<% }) %>
</ul>
</div>
</div>
<!-- Script for show/hide user profile data -->
<script>
function openProfile(id) {
let state = document.getElementById(id).style.display;
if (state == "block") {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
views/dashboard.ejs
+3
View File
@@ -1,4 +1,7 @@
<!-- Shows user specific Dashboard -->
<% if (user.role == "Admin") { %>
<% include admin %>
<% } %>
<% if (user.role == "Teacher") { %>
<% include teacherDashboard %>
<% } %>
views/edit.ejs
+1 -1
View File
@@ -34,7 +34,7 @@
</div>
<div class='form-group'>
<label for='image'>Upload Profile Picture</label>
<input class='form-control' type="file" id="image" name="image" value="">
<input class='form-control-file' type="file" id="image" name="image" value="">
</div>
<div class="form-group">
<label for="password2">New Password</label>
views/layout.ejs
+7 -5
View File
@@ -4,16 +4,18 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link
rel="stylesheet"
href="https://bootswatch.com/4/journal/bootstrap.min.css"
/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://bootswatch.com/4/journal/bootstrap.min.css"/>
<title>XP-System</title>
</head>
<body>
<div class="container"><%- body %></div>
<!-- Load Scripts for Modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
views/register.ejs
-4
View File
@@ -17,10 +17,6 @@
value="<%= typeof name != 'undefined' ? name : '' %>"
/>
</div>
<div class='form-group'>
<label for='image'>Upload Profile Picture</label>
<input class='form-control' type="file" id="image" name="image" value="" required>
</div>
<div class="form-group">
<label for='image'>Upload Profile Picture</label>
<input class="form-control-file" type="file" id="image" name="image" value="">
views/studentDashboard.ejs
+69 -31
View File
@@ -2,57 +2,92 @@
<style>
#myProgress {
position: relative;
height: 150px;
width: 150px;
height: 200px;
width: 200px;
background-color: #ddd;
border-style: solid;
border-color: rgba(0, 0, 0, .5);
border-color: rgba(0, 0, 0, .4);
border-radius: 12px;
overflow: hidden;
}
#myBar {
position: absolute;
bottom: 0px;
left: 0px;
width: 145px;
width: 100%;
height: 1%;
background-color: #46c7f2;
}
#pro-pic {
position: absolute;
margin: 27px;
width: 90px;
height: 90px;
top: 25px;
left: 23px;
width: 150px;
height: 150px;
display: block;
border-radius: 50px;
border-style: solid;
border-width: 5px;
border-radius: 100px;
border-color: rgba(0, 0, 0, .4);
}
.buttons-container {
width: 100px;
height: 80px;
}
.buttons-content {
margin: 5px;
margin-top: 5px;
}
.student-container {
position: absolute;
width: 400px;
height: 700px;
top: 25px;
left: 25px;
border: solid #5b94f0 2px;
border-style: solid;
border-radius: 10px;
background-color: rgba(112, 196, 255, .3);
}
.content {
margin-left: 25px;
}
</style>
<!-- Welcome message & Profile Picture/Progress bar -->
<h1 class="mt-4">Student Dashboard</h1>
<p class="lead mb-3">Welcome <%= user.name %></p>
<div>
<div id="myProgress">
<div id="myBar"></div>
<img id='pro-pic' src='data:image/<%=user.image.contentType%>;base64,
<%=user.image.data.toString('base64')%>'>
<div class="student-container">
<div class='content'>
<!-- Welcome message & Profile Picture/Progress bar -->
<h1 class="mt-4">Student Dashboard</h1>
<p class="lead mb-3">Welcome <%= user.name %></p>
<div>
<div id="myProgress">
<div id="myBar"></div>
<img id='pro-pic' src='data:image/<%=user.image.contentType%>;base64,
<%=user.image.data.toString('base64')%>'>
</div>
<p stlye='text-align: right;' id='percent'></p>
</div>
<br>
<!-- User Data -->
<div>
<h1 id='userRank'></h1>
<h1>XP: <%= user.xp %></h1>
<p id='XP-Till'></p>
</div>
<br>
<div class="buttons-container">
<div class="buttons-content">
<!-- Action Buttons -->
<a href="/users/logout" class="btn btn-secondary">Logout</a>
<button onClick='passData()' class='btn btn-secondary'>Edit</button>
</div>
</div>
</div>
<p stlye='text-align: right;' id='percent'></p>
</div>
<br>
<!-- User Data -->
<div>
<h1 id='userRank'></h1>
<h1>XP: <%= user.xp %></h1>
<p id='XP-Till'></p>
</div>
<br>
<br>
<!-- Action Buttons -->
<a href="/users/logout" class="btn btn-secondary">Logout</a>
<button onClick='passData()' class='btn btn-secondary'>Edit</button>
<!-- Passing user _id to edit page script -->
<script>
@@ -123,6 +158,9 @@
currRank = "Master Digital Crafter";
remain = 0;
rankUp = 'No higher Rank, Good Job!';
let elem = document.getElementById("myBar");
let percent = 100;
elem.style.height = percent + '%';
}
// Display Data
views/teacherDashboard.ejs
+158 -14
View File
@@ -7,8 +7,10 @@
.head {
margin-bottom: 100px;
}
#teacher-container {
position: relative;
.teacher-container {
position: absolute;
width: 300px;
left: 205px;
}
#pro-pic {
position: absolute;
@@ -31,15 +33,26 @@
border: 1px solid black;
margin:5px;
}
#logout-btn {
.buttons-container {
position: absolute;
top: 0px;
right: 0px;
width: 151px;
height: 500px;
top: 25px;
right: 25px;
border: solid #5b94f0 2px;
border-style: solid;
border-radius: 10px;
background-color: rgba(112, 196, 255, .3);
}
#edit-btn {
position: absolute;
top: 0px;
right: 85px;
width: 95px;
margin-left: 28px;
margin-top: 10px;
}
#logout-btn {
width: 95px;
margin-left: 28px;
margin-top: 10px;
}
#welcome {
position: absolute;
@@ -83,17 +96,19 @@
<!-- Welcome Message & Profile Picture -->
<h1 class="mt-4">Teacher Dashboard</h1>
<div class='head'>
<div id='teacher-container'>
<div>
<div>
<div class="teacher-container">
<p id='welcome' class="lead mb-3">Welcome <%= user.name %></p>
<img id='pro-pic' src='data:image/<%=user.image.contentType%>;base64,
<%=user.image.data.toString('base64')%>'>
</div>
<br>
<!-- Action Buttons -->
<a id='logout-btn' href="/users/logout" class="btn btn-secondary">Logout</a>
<button id='edit-btn' onClick='passData()' class='btn btn-secondary'>Edit</button>
<div class="buttons-container">
<!-- Action Buttons -->
<a id='logout-btn' href="/users/logout" class="btn btn-info">Logout</a>
<button id='edit-btn' onClick='passData()' class='btn btn-info'>Edit</button>
</div>
<!-- Passing user _id to edit page script -->
<script>
@@ -133,8 +148,131 @@
console.log("Students Shouldnt be here");
</script>
<!-- Alert container -->
<div id='div-container'></div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="/users/addXP" method="POST">
<div>
<input id='_id_add' type='text' name='_id_add' value='' style='display: none'></input>
<input id="current_xp" type="text" name="current_xp" value="" style="display: none"></input>
</div>
<div>
<p>Minimum: 1</p>
<p>Maximum: 50</p>
</div>
<div class="form-group">
<label for="amount">Amount</label>
<input
id="amount"
name="amount"
type="number"
min="1"
max="50"
value=""
class="form-control"
>
</div>
<button type="submit" class="btn btn-primary">
Add XP
</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
// Creates unique ID
function makeid(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
// Create Div
function createDiv(type, message) {
let id = makeid(8);
if (type == 'error') {
document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none;" class="alert alert-warning alert-dismissible fade show" role="alert">';
}
if (type == 'message') {
document.getElementById('div-container').innerHTML += '<div id="new-div-'+id+'" style="display: none;" class="alert alert-info alert-dismissible fade show" role="alert">';
}
document.getElementById('new-div-'+id).innerHTML += '<div id="message'+id+'">'+message+'</div>';
document.getElementById('new-div-'+id).innerHTML += '<button id="close-btn-'+id+'" class="close" data-dismiss="alert" aria-label="Close"></button>';
document.getElementById('close-btn-'+id).innerHTML += '<span aria-hidden="true">&times;</span>';
document.getElementById('new-div-'+id).style.display = "block";
}
// // Check amount
// function amountCheck(_id) {
// const amount = document.getElementById("amount").value;
// if (amount > 50) {
// createDiv('error', "Can't add more than 50 XP");
// }
// if (amount == 0 || amount < 0) {
// createDiv('error', "XP Must be more than 0");
// }
//
// if (amount > 0 && amount < 50) {
//
// createDiv('message', "Succesfully added XP");
// }
// }
// Pass name to Modal
function passName(name, xp, member_id) {
if (xp < 800) {
document.getElementById("exampleModalLabel").innerHTML = "Give " + name + " XP";
document.getElementById("_id_add").value = member_id;
document.getElementById("current_xp").value = xp;
$("#exampleModal").modal()
}
if (xp >= 800) {
// Construct and show Max XP Alert
message = name + ' has reached max XP!';
createDiv('message', message);
}
}
// Catching url Parameters
window.onload = function () {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const successRate = urlParams.get('successRate')
if(successRate == 'addXP > 50') {
createDiv('error', "Can't add more than 50 XP")
}
if(successRate == 'addXP <= 0') {
createDiv('error', "XP Must be Greater than 0");
}
if(parseInt(successRate) > 0 && parseInt(successRate) < 50 || parseInt(successRate) == 50) {
createDiv('message', "Gave " + successRate + "XP to a Student");
}
}
</script>
<!-- List of all site students (not teachers) -->
<h2>Site Members</h2>
<h2>Studen Members</h2>
<div class='members'>
<ul>
<!-- Loops through all members -->
@@ -153,6 +291,12 @@
<div>
<p id='userRank-<%= member.id %>'></p>
<p>XP: <%= member.xp %></p>
<!-- Button trigger modal -->
<button onClick='passName("<%= member.name %>", <%= member.xp %>, "<%= member._id %>")' type="button" class="btn btn-outline-info btn-sm">
Add XP
</button>
<p><%= member.role %></p>
</div>
<br>