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

Editor

Browse Source
This commit is contained in:
SowinskiBraeden committed 2020-12-04 09:57:57 -08:00
1 parent 867770e14e
commit 0ef4daa019
369 files changed
+45861 -209
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

views/edit.ejs
+67
View File
@@ -0,0 +1,67 @@
<div class="row mt-5">
<div class="col-md-6 m-auto">
<div class="card card-body">
<h1 class="text-center mb-3">
<i class="fas fa-user-plus"></i> Edit Account
</h1>
<% include ./partials/messages %>
<form action="/users/edit" method="POST" enctype="multipart/form-data">
<!-- Catching _id -->
<script>
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
document.getElementById('_id').value = data.name;
}
</script>
<input id='_id' type='text' name='_id' value='' style='display: none'></input>
<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' type="file" id="image" name="image" value="">
</div>
<div class="form-group">
<label for="password2">New Password</label>
<input
type="password"
id="newPassword"
name="newPassword"
class="form-control"
placeholder="New Password"
value="<%= typeof password2 != 'undefined' ? password2 : '' %>"
/>
</div>
<div class="form-group">
<label for="password2">Confirm New Password</label>
<input
type="password"
id="newPassword2"
name="newPassword2"
class="form-control"
placeholder="Confirm New Password"
value="<%= typeof password2 != 'undefined' ? password2 : '' %>"
/>
</div>
<button type="submit" class="btn btn-primary btn-block">
Save Changes
</button>
</form>
</div>
</div>
</div>
views/register.ejs
+5 -1
View File
@@ -5,7 +5,7 @@
<i class="fas fa-user-plus"></i> Register
</h1>
<% include ./partials/messages %>
<form action="/users/register" method="POST">
<form action="/users/register" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Name</label>
<input
@@ -17,6 +17,10 @@
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
views/studentDashboard.ejs
+49 -13
View File
@@ -1,34 +1,68 @@
<!-- Simple Syling for layout -->
<style>
#myProgress {
width: 100%;
position: relative;
height: 150px;
width: 150px;
background-color: #ddd;
border-style: solid;
border-color: rgba(0, 0, 0, .5);
}
#myBar {
width: 1%;
height: 30px;
position: absolute;
bottom: 0px;
left: 0px;
width: 145px;
height: 1%;
background-color: #46c7f2;
}
#pro-pic {
position: absolute;
margin: 27px;
width: 90px;
height: 90px;
display: block;
border-radius: 50px;
}
</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>
<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>
</div>
<div>
<p stlye='text-align: right;' id='percent'></p>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<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>
function passData() {
let url = '/users/edit?name=' + encodeURIComponent('<%= user._id %>');
document.location.href = url;
}
</script>
<!-- Calculate Rank Data Script -->
<script>
let xp = <%= user.xp %>;
let currRank;
@@ -74,7 +108,7 @@
let progress = xp - currRankXP;
let percent = (progress/total)*100;
let elem = document.getElementById("myBar");
elem.style.width = percent + '%';
elem.style.height = percent + '%';
document.getElementById('percent').innerHTML = progress + '|' + total;
}
}
@@ -83,12 +117,14 @@
}
}
} else {
// Display data for max level
document.getElementById('percent').innerHTML = '800|800';
currRank = "Master Digital Crafter";
remain = 0;
rankUp = 'No higher Rank, Good Job!';
}
//Show Data
// Display Data
document.getElementById('userRank').innerHTML = currRank;
document.getElementById('XP-Till').innerHTML = remain + 'XP till your next Rank: ' + rankUp;
views/teacherDashboard.ejs
+69 -16
View File
@@ -1,53 +1,98 @@
<!-- Simple Styling for layout -->
<style>
.members {
width: 230px;
display: inline-block;
}
.head {
margin-bottom: 100px;
}
#teacher-container {
position: relative;
}
#pro-pic {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
display: block;
border-radius: 50px;
border: 1px solid black;
margin:5px;
}
#user-pro-pic {
position: absolute;
top: 0px;
left: 150px;
width: 50px;
height: 50px;
display: block;
border-radius: 50px;
border: 1px solid black;
margin:5px;
}
#logout-btn {
position: absolute;
top: 0px;
right: 0px;
}
#welcome {
position: absolute;
left: 115px;
top: 60px;
}
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>
<!-- Welcome Message & Profile Picture -->
<h1 class="mt-4">Teacher Dashboard</h1>
<p class="lead mb-3">Welcome <%= user.name %></p>
<br>
<a href="/users/logout" class="btn btn-secondary">Logout</a>
<div class='head'>
<div id='teacher-container'>
<div>
<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>
</div>
</div>
<br>
<!-- Sets Variables for calculating users data -->
<div>
<script>
let xp;
@@ -68,16 +113,24 @@
{"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 Shouldnt be here");
</script>
<!-- List of all site students (not teachers) -->
<h2>Site Members</h2>
<div class='members'>
<ul>
<!-- Loops through all members -->
<% members.forEach(function (member) { %>
<!-- Identifies students -->
<% if (member.role == "Student") { %>
<!-- Creates User Button link -->
<li><button class='btn btn-link mt-2' onclick='openProfile("<%= member.id %>")'><%= member.name %></button></li>
<div style='display: none;' data-role='page' id='<%= member._id %>'>
<p class="lead mb-3"><%= member.name %></p>
<!-- 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>
<br>
<div>
@@ -86,9 +139,9 @@
<p><%= member.role %></p>
</div>
<br>
<!-- Calculates user specific Rank -->
<script>
xp = <%= member.xp %>;
// Get current rank
if (xp == 0) {
currRank = 'Digital Noob';
@@ -110,10 +163,8 @@
}
}
}
//Show Data
// Display Rank
document.getElementById('userRank-<%= member.id %>').innerHTML = currRank;
</script>
</div>
<% } %>
@@ -121,6 +172,8 @@
</ul>
</div>
</div>
<!-- Script for show/hide user profile data -->
<script>
function openProfile(id) {
let state = document.getElementById(id).style.display;