Merge branch 'leaderboards' of...

Merge branch 'leaderboards' of https://gitlab.stud.idi.ntnu.no/tmwang/tdt4242-base into leaderboards

frontend/www/exercise.html

@@ -45,7 +45,15 @@
 
             </div>
         </form>
+        <div class="row">
+            <div class="col-lg">
+                <h3 class="mt-3">Leaderboards</h3>
+            </div>
         </div>
+            <table id="leaderboardstable" class="table table-striped">
+                <tr><th class="th-dark">#<th>Name<th>Value
+            </table>
+          </div>
         <script src="scripts/defaults.js"></script>
         <script src="scripts/scripts.js"></script>
         <script src="scripts/exercise.js"></script>

frontend/www/scripts/exercise.js

@@ -122,6 +122,49 @@ async function updateExercise(id) {
     }
 }
 
+async function fetchLeaderBoards() {
+    //let response = await sendRequest("GET", `${HOST}/api/leaderboards/${id}`);
+    //Placeholder response and status:
+    let response = [{"name": "Mark", "value": 301, "rank": 1},
+    {"name": "Anton", "value": 245, "rank": 2},
+    {"name": "John", "value": 112, "rank": 3},
+    {"name": "Joe", "value": 84, "rank": 4},
+    {"name": "Larry", "value": 80, "rank": 5},
+    {"name": "Glaum", "value": 1, "rank": 85}];
+    response.ok = true;
+
+    if (response.ok) {
+
+        let table = document.getElementById("leaderboardstable");
+        let row, cell;
+
+        //The users own score will always be placed last in the JSON response
+        let userIndex = response.length - 1;
+
+        for (let i = 0; i < response.length-1; i++) {
+            row = table.insertRow();
+            cell = row.insertCell();
+            cell.textContent = response[i].rank;
+            cell = row.insertCell();
+            cell.textContent = response[i].name;
+            cell = row.insertCell();
+            cell.textContent = response[i].value;
+          }
+        //If the user is not in top 5, the users score will also be rendered
+        if(response[userIndex].rank > 5){
+            row = table.insertRow();
+            cell = row.insertCell();
+            cell.textContent = response[userIndex].rank;
+            cell = row.insertCell();
+            cell.textContent = response[userIndex].name;
+            cell = row.insertCell();
+            cell.textContent = response[userIndex].value;
+        }
+    }
+
+    return response;
+}
+
 window.addEventListener("DOMContentLoaded", async () => {
     cancelButton = document.querySelector("#btn-cancel-exercise");
     okButton = document.querySelector("#btn-ok-exercise");
@@ -151,4 +194,6 @@ window.addEventListener("DOMContentLoaded", async () => {
         okButton.addEventListener("click", async () => await createExercise());
         cancelButton.addEventListener("click", handleCancelButtonDuringCreate);
     }
+
+    await fetchLeaderBoards();
 });
\ No newline at end of file