From 039bd81b52e6e1ac92077aa1e38f46619a0357fe Mon Sep 17 00:00:00 2001
From: Haakon Gunleiksrud <haakogun@stud.ntnu.no>
Date: Fri, 19 Feb 2021 14:00:51 +0100
Subject: [PATCH] add hard coded leaderboards to exercise.html
---
frontend/www/exercise.html | 8 ++++++
frontend/www/scripts/exercise.js | 45 ++++++++++++++++++++++++++++++++
2 files changed, 53 insertions(+)
diff --git a/frontend/www/exercise.html b/frontend/www/exercise.html
index 741bca0..5572007 100644
--- a/frontend/www/exercise.html
+++ b/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>
diff --git a/frontend/www/scripts/exercise.js b/frontend/www/scripts/exercise.js
index aa99f0e..0e9dba4 100644
--- a/frontend/www/scripts/exercise.js
+++ b/frontend/www/scripts/exercise.js
@@ -122,6 +122,49 @@ async function updateExercise(id) {
}
}
+async function fetchLeaderBoards() {
+ //let response = await sendRequest("GET", `${HOST}/api/exercises/${id}/getLeaderBoards`);
+ //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
--
GitLab