feat(front): cleaned hanling of whiteboard info

* Created an InfoService to centralized the logic
* Added an info icon

src/css/main.css

@@ -1,3 +1,7 @@
+:root {
+    --selected-icon-bg-color: #dfdfdf;
+}
+
 body {
     position: relative;
     margin: 0px;
@@ -78,7 +82,7 @@ button {
 }
 
 .whiteboard-tool.active:not(:disabled) {
-    background: #dfdfdf;
+    background: var(--selected-icon-bg-color);
 }
 
 #whiteboardThicknessSlider {
@@ -114,3 +118,17 @@ button {
     min-width: 50px;
     cursor: pointer;
 }
+
+#displayWhiteboardInfoBtn.active {
+    background: var(--selected-icon-bg-color);
+}
+
+#whiteboardInfoContainer {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+}
+
+.displayNone {
+    display: none;
+}

src/index.html

@@ -224,6 +224,10 @@
                 <button id="shareWhiteboardBtn" title="share whiteboard" type="button">
                     <i class="fas fa-share-square"></i>
                 </button>
+
+                <button id="displayWhiteboardInfoBtn" title="Show whiteboard info" type="button">
+                    <i class="fas fa-info-circle"></i>
+                </button>
             </div>
 
             <div class="btn-group minGroup">
@@ -247,7 +251,8 @@
             </div>
         </div>
 
-        <div style="position: absolute; bottom: 10px; right: 10px; display: none;">
+        <div id="whiteboardInfoContainer">
+            <p><b>Whiteboard information:</b></p>
             <p># msg. sent to server: <i id="messageSentCount">0</i></p>
             <p># msg. received from server: <i id="messageReceivedCount">0</i></p>
         </div>

src/js/const.js

@@ -1,2 +1,3 @@
 export const POINTER_EVENT_THRESHOLD_MIN_DIST_DELTA = 1; // 1px
 export const POINTER_EVENT_THRESHOLD_MIN_TIME_DELTA = 10; // 1ms
+export const REFRESH_INFO_FREQUENCY = 5; // 5 times per second

src/js/icons.js

@@ -18,6 +18,7 @@ import {
     faExpandArrowsAlt,
     faLock,
     faLockOpen,
+    faInfoCircle,
 } from "@fortawesome/free-solid-svg-icons";
 import {
     faSquare,
@@ -50,7 +51,8 @@ library.add(
     faFileAlt,
     faPlusSquare,
     faLock,
-    faLockOpen
+    faLockOpen,
+    faInfoCircle
 );
 
 dom.i2svg();

src/js/main.js

@@ -7,6 +7,7 @@ import { dom } from "@fortawesome/fontawesome-svg-core";
 import pdfjsLib from "pdfjs-dist/webpack";
 import shortcutFunctions from "./shortcutFunctions";
 import ReadOnlyService from "./services/ReadOnlyService";
+import InfoService from "./services/InfoService";
 
 function main() {
     var whiteboardId = getQueryVariable("whiteboardid");
@@ -48,10 +49,9 @@ function main() {
     signaling_socket.on("connect", function () {
         console.log("Websocket connected!");
 
-        let messageReceivedCount = 0;
         signaling_socket.on("drawToWhiteboard", function (content) {
             whiteboard.handleEventsAndData(content, true);
-            $("#messageReceivedCount")[0].innerText = String(messageReceivedCount++);
+            InfoService.incrementNbMessagesReceived();
         });
 
         signaling_socket.on("refreshUserBadges", function () {
@@ -84,7 +84,6 @@ function main() {
             $("#uploadWebDavBtn").show();
         }
 
-        let messageSentCount = 0;
         whiteboard.loadWhiteboard("#whiteboardContainer", {
             //Load the whiteboard
             whiteboardId: whiteboardId,
@@ -97,7 +96,7 @@ function main() {
                 // }
                 content["at"] = accessToken;
                 signaling_socket.emit("drawToWhiteboard", content);
-                $("#messageSentCount")[0].innerText = String(messageSentCount++);
+                InfoService.incrementNbMessagesSent();
             },
         });
 
@@ -382,6 +381,10 @@ function main() {
             showBasicAlert("Copied Whiteboard-URL to clipboard.", { hideAfter: 2 });
         });
 
+        $("#displayWhiteboardInfoBtn").click(() => {
+            InfoService.toggleDisplayInfo();
+        });
+
         var btnsMini = false;
         $("#minMaxBtn").click(function () {
             if (!btnsMini) {
@@ -597,8 +600,10 @@ function main() {
 
         if (process.env.NODE_ENV === "production") {
             ReadOnlyService.activateReadOnlyMode();
+            InfoService.hideInfo();
         } else {
             ReadOnlyService.deactivateReadOnlyMode();
+            InfoService.displayInfo();
         }
     });
 

src/js/services/InfoService.js

@@ -0,0 +1,79 @@
+import { REFRESH_INFO_FREQUENCY } from "../const";
+
+const REFRESH_INTERVAL = 1000 / REFRESH_INFO_FREQUENCY;
+
+/**
+ * Class the handle the information about the whiteboard
+ */
+class InfoService {
+    /**
+     * @type {boolean}
+     * @private
+     */
+    _infoAreDisplayed = false;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    _nbMessagesSent = 0;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    _nbMessagesReceived = 0;
+
+    /**
+     * Holds the interval Id
+     * @type {number}
+     * @private
+     */
+    _refreshInfoIntervalId = undefined;
+
+    incrementNbMessagesReceived() {
+        this._nbMessagesReceived++;
+    }
+
+    incrementNbMessagesSent() {
+        this._nbMessagesSent++;
+    }
+
+    refreshDisplayedInfo() {
+        $("#messageReceivedCount")[0].innerText = String(this._nbMessagesReceived);
+        $("#messageSentCount")[0].innerText = String(this._nbMessagesSent);
+    }
+
+    displayInfo() {
+        $("#whiteboardInfoContainer").toggleClass("displayNone", false);
+        $("#displayWhiteboardInfoBtn").toggleClass("active", true);
+        this._infoAreDisplayed = true;
+
+        this.refreshDisplayedInfo();
+        this._refreshInfoIntervalId = setInterval(() => {
+            // refresh only on a specific interval to reduce
+            // refreshing cost
+            this.refreshDisplayedInfo();
+        }, REFRESH_INTERVAL);
+    }
+
+    hideInfo() {
+        $("#whiteboardInfoContainer").toggleClass("displayNone", true);
+        $("#displayWhiteboardInfoBtn").toggleClass("active", false);
+        this._infoAreDisplayed = false;
+        if (this._refreshInfoIntervalId) {
+            clearInterval(this._refreshInfoIntervalId);
+            this._refreshInfoIntervalId = undefined;
+        }
+    }
+
+    toggleDisplayInfo() {
+        if (this._infoAreDisplayed) {
+            this.hideInfo();
+        } else {
+            this.displayInfo();
+        }
+    }
+}
+
+export default new InfoService();