From 6475fdd5db00166983b55af5fb26b73feb228bd2 Mon Sep 17 00:00:00 2001 From: Florent Chehab Date: Sun, 10 May 2020 14:16:12 +0200 Subject: [PATCH] feat(front): cleaned hanling of whiteboard info * Created an InfoService to centralized the logic * Added an info icon --- src/css/main.css | 20 ++++++++- src/index.html | 7 ++- src/js/const.js | 1 + src/js/icons.js | 4 +- src/js/main.js | 13 ++++-- src/js/services/InfoService.js | 79 ++++++++++++++++++++++++++++++++++ 6 files changed, 117 insertions(+), 7 deletions(-) create mode 100644 src/js/services/InfoService.js diff --git a/src/css/main.css b/src/css/main.css index a2d36f1..2b03121 100644 --- a/src/css/main.css +++ b/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; +} diff --git a/src/index.html b/src/index.html index f34965d..335fdf4 100644 --- a/src/index.html +++ b/src/index.html @@ -224,6 +224,10 @@ + +
@@ -247,7 +251,8 @@
-
+
+

Whiteboard information:

# msg. sent to server: 0

# msg. received from server: 0

diff --git a/src/js/const.js b/src/js/const.js index 9645fb8..b8db9ec 100644 --- a/src/js/const.js +++ b/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 diff --git a/src/js/icons.js b/src/js/icons.js index c6bbf98..6c39955 100644 --- a/src/js/icons.js +++ b/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(); diff --git a/src/js/main.js b/src/js/main.js index 221ecfd..c16dace 100644 --- a/src/js/main.js +++ b/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(); } }); diff --git a/src/js/services/InfoService.js b/src/js/services/InfoService.js new file mode 100644 index 0000000..ed67fe6 --- /dev/null +++ b/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();