First Commit

views/teacherDashboard.ejs

@@ -0,0 +1,119 @@
+<style>
+  .members {
+    width: 230px;
+  }
+
+  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>
+<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>
+<br>
+<h2>Site Members</h2>
+<div class='members'>
+  <ul>
+    <% members.forEach(function (member) { %>
+      <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>
+        <p class='lead mb-3'><%= member.email %></p>
+        <br>
+        <div>
+          <p id='userRank'></p>
+          <p>XP: <%= member.xp %></p>
+          <p><%= member.role %></p>
+        </div>
+        <br>
+        <script>
+          let xp = <%= member.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
+          ]
+
+          // Get current rank
+          let indexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 12]
+          if (xp < 800) {
+            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 {
+            currRank = "Master Digital Crafter";
+          }
+
+          //Show Data
+          document.getElementById('userRank').innerHTML = currRank;
+
+        </script>
+      </div>
+    <% }) %>
+  </ul>
+</div>
+<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>