2 files changed, 127 insertions, 5 deletions

diff --git a/views/resources/statsviewcontroller.js b/views/resources/statsviewcontroller.js
new file mode 100644
index 000000000..090e112e7
--- /dev/null
+++ b/views/resources/statsviewcontroller.js
@@ -0,0 +1,114 @@
+/**
+ * statsviewcontroller.js stores the JavaScript functions to update the stats page
+ * when the websocket updates. 
+ */
+
+const BUSY_SERVER_BOUND = 2;
+const VERY_BUSY_SERVER_BOUND = 3;
+
+const MEDIUM_USE_BOUND = 100; //operations per 10 seconds
+const HIGH_USE_BOUND = 300;
+
+const serverTrafficMessages = {
+    0 : "Not Busy",
+    1 : "Busy",
+    2: "Very Busy"
+};
+
+/**
+ * userDataComparator sorts the users based on the rate
+ * 
+ * @param {*} user1 the first user to compare
+ * @param {*} user2 the second user to comapre
+ * @returns an integer indiciating which user should come first
+ */
+function userDataComparator(user1, user2) {
+    if(user1.rate < user2.rate) {
+        return 1;
+    } else if(user1.rate > user2.rate) {
+        return -1;
+    } else {
+        return 0;
+    }
+}
+
+/**
+ * calculateServerTraffic() returns an integer corresponding
+ * to the current traffic that can be used to get the message
+ * from "serverTrafficMessages"
+ * 
+ * @param {*} data the incoming data from the backend
+ * @returns an integer where 0 is not busy, 1 is busy, and 2 is very busy. 
+ */
+function calculateServerTraffic(data) {
+    let currentTraffic = data.connectedUsers.length;
+
+    let serverTraffic = 0;
+    if(currentTraffic < BUSY_SERVER_BOUND) {
+        serverTraffic = 0;
+    } else if(currentTraffic >= BUSY_SERVER_BOUND && currentTraffic < VERY_BUSY_SERVER_BOUND) {
+        serverTraffic = 1;
+    } else {
+        serverTraffic = 2;
+    }
+
+    return serverTraffic;
+}
+
+/**
+ * getUserRateColor determines what color the user's rate should
+ * be on the front end
+ * @param {*} rate the operations per time interval for a specific user
+ * @returns a string representing the color to make the user rate
+ */
+function getUserRateColor(rate) {
+    if(rate < MEDIUM_USE_BOUND) {
+        return "black";
+    } else if(rate >= MEDIUM_USE_BOUND && rate < HIGH_USE_BOUND) {
+        return "orange";
+    } else if(rate >= HIGH_USE_BOUND){
+        return "red";
+    } else {
+        return "black";
+    }
+}
+
+/**
+ * handleStatsUpdats() is called when new data is received from the backend
+ * from a websocket event. The method updates the HTML site to reflect the
+ * updated data
+ * 
+ * @param {*} data the data coming from the backend. 
+ */
+function handleStatsUpdate(data) {
+    let userListInnerHTML = "";
+    data.connectedUsers.sort(userDataComparator);
+    data.connectedUsers.map((userData, index) => {
+        let userRateColor = getUserRateColor(userData.rate);
+        let userEntry = `<p>${userData.time}</p>
+            <p>${userData.username}</p>
+            <p>Operations: ${userData.operations}</p>
+            <p style="color:${userRateColor}">Rate: ${userData.rate} operations per last 10 seconds</p>
+            `; // user data comes as last 10 seconds but it can be adjusted in DastStats.ts and websocket.ts
+        userListInnerHTML += "<li class=\"none\">" + userEntry + "</li>";
+    })
+
+    document.getElementById("connection-count").innerHTML = `Current Connections: ${data.connectedUsers.length}`
+    document.getElementById("connected-user-list").innerHTML = userListInnerHTML;
+
+    let serverTraffic = calculateServerTraffic(data);
+    let serverTrafficMessage = "Not Busy";
+    switch(serverTraffic) {
+        case 0:
+            serverTrafficMessage = "Not Busy";
+            break;
+        case 1:
+            serverTrafficMessage = "Busy";
+            break;
+        case 2:
+            serverTrafficMessage = "Very Busy";
+            break;
+    }
+    document.getElementById("stats-traffic-message").className="stats-server-status-item stats-server-status-" + serverTraffic;
+    document.getElementById("stats-traffic-message").innerHTML = `<p>${serverTrafficMessage}</p>`;
+}
\ No newline at end of file
diff --git a/views/stats.pug b/views/stats.pug
index 54c017e70..16c28087e 100644
--- a/views/stats.pug
+++ b/views/stats.pug
@@ -1,22 +1,30 @@
 extends ./layout
 
+//- stats.pug is the frontend for the stats page
 block content
     style
         include ./stylesheets/authentication.css
         include ./stylesheets/statsview.css
+    script(src=`http://localhost:4321/socket.io/socket.io.js`)
+    script
+        include ./resources/statsviewcontroller.js
+    script.
+        var socket = io.connect("http://localhost:4321");
+        socket.on("connect", () => console.log("connected to socket"));
+
+        socket.on("a2cf757f-abd7-537b-953e-ef2f4f798f7e", (data) => handleStatsUpdate(data));
     .outermost
         .stats-container
             h1 Dash Stats
-            p(class="stats-content") Current Connections: #{numConnections}
+
+            p(class="stats-content" id="connection-count") Current Connections: #{numConnections}
             div(class="stats-content stats-server-status-container")
                 p Server Status: 
-                div(class="stats-server-status-item stats-server-status-" + serverTraffic)
+                div(id="stats-traffic-message" class="stats-server-status-item stats-server-status-" + serverTraffic)
                     p #{serverTrafficMessage}
             div(class="stats-content stats-connected-users")
                 p Connected Users: 
-                ul
-                    each username in connectedUsers
-                        li(class="none")= username
+                ul(id="connected-user-list")
                         
 
     
\ No newline at end of file