feat(front): cleaned hanling of whiteboard info

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

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>