added mute notification button and ui bug fix

Author: Gourav Dwivedi

src/Index.html

@@ -44,6 +44,12 @@ <h1>SignalR Web Client</h1>
   <li class="mdl-menu__item">
     <a target="_blank" href="https://github.com/gourav-d/SignalR-Web-Client">Github</a>
   </li>
+  <li class="mdl-menu__item">
+    <span  class="">Mute</span>
+    <label  class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="chk-mute-notification">      
+      <input type="checkbox" id="chk-mute-notification" class="mdl-switch__input">      
+    </label>
+  </li>
 </ul>
 
             <!-- Add spacer, to align navigation to the right -->

src/js/components/logic/lib/app.signalr.js

@@ -107,7 +107,6 @@ class SignalRApp {
                 var jsonObj = JSON.parse(e);
 
                 if(jsonObj !== null && jsonObj.hasOwnProperty('target')) {
-                    debugger;
                     AppEvents.emit('ReceivedData', { "ClientMethod": jsonObj.target, "Data": jsonObj.arguments });
                 }
             });

src/js/components/srform.component.js

@@ -40,12 +40,13 @@ class SrFormComponent extends HTMLElement {
                                             <span class="error" aria-live="polite"><span>
                                         </div>
 
-                                        <div class="col-sm-1 checkbox-container float-left" id="logger-chk-container">                               
-                                            <label class="col-sm-1 col-form-label mdl-switch  mdl-js-switch mdl-js-ripple-effect" for="chk-loggerView">
+                                        <div class="form-group row col-sm-1 checkbox-container float-left" id="logger-chk-container">                               
+                                            <label  class="col-sm-2 col-form-label mdl-switch  mdl-js-switch mdl-js-ripple-effect" for="chk-loggerView">
                                                 <input type="checkbox" id="chk-loggerView" class="col-sm-1 col-form-label mdl-switch__input" value="Logger View">
-                                                <span class="mdl-switch__label"></span>
+                                                <!--<span  class="mdl-switch__label">Logging</span> -->                                                
                                             </label>
-                                            <div class="mdl-tooltip" for="logger-chk-container">Logging</div>
+                                            <!-- If we add tool tip, then extra border will appear on click
+                                            <div class="mdl-tooltip" data-mdl-for="logger-chk-container">Logging</div> -->
                                         </div>
                                     </div>
 

src/js/components/srform.js

@@ -1,5 +1,5 @@
 import deleteImg from '../../images/delete.png';
-import soundfile from '../../assets/Notification.wav';
+import notificationSound from '../../assets/Notification.wav';
 import { AppLogic } from './logic/app.logic';
 import * as AppCommon from './logic/lib/app.common';
 import * as Test from '../components/dialogbox/custompopup';
@@ -55,6 +55,23 @@ export function Init() {
             }
         });
 
+    const muteNotifcationElement = document.getElementById('chk-mute-notification');
+    const notifcationMute = window.localStorage.getItem('muteNotification');
+    
+    if((!!notifcationMute) === false) {
+        window.localStorage.setItem('muteNotification', 1);        
+    }
+
+    muteNotifcationElement.checked = parseInt(notifcationMute) === 1;
+
+    muteNotifcationElement.addEventListener('change', (event) => {
+        if (event.target.checked) {
+            window.localStorage.setItem('muteNotification', 0);
+        } else {
+            window.localStorage.setItem('muteNotification', 1);
+        }
+    });
+
     document.getElementById('btn-clearlogs')
         .addEventListener('click', (event) => {
             document.getElementById("app-logs").innerHTML = "";
@@ -324,7 +341,6 @@ function TextboxValidation(element, errorMessage) {
 export function OnConnect() {
 
     //Add validation
-    debugger;
     if(!UrlValidation()) {
         return;
     }
@@ -357,9 +373,20 @@ export function OnConnected() {
 }
 
 export function HandleResponse(data) {
-    document.querySelector("#inputResponseData").value += JSON.stringify(data) + '\n';
-    let sound = new Audio(soundfile);
-    sound.play();
+    document.querySelector("#inputResponseData").value += JSON.stringify(data) + '\n';    
+    var isNotificationMute = window.localStorage.getItem('muteNotification');
+
+    // if((!!isNotificationMute) === false) {
+    //     window.localStorage.setItem('muteNotification', 1);
+    //     isNotificationMute = 1
+    // }
+
+    debugger;
+    if(parseInt(isNotificationMute) === 1) {
+        let sound = new Audio(notificationSound);
+        sound.play();
+    }
+    
 }
 
 export function SetConnectionProtocol() {
@@ -414,8 +441,7 @@ export function Disconnect() {
 export function SendPayload() {
 
     const methodNameElement = document.getElementById("inputServerMethod");
-    var methodName = methodNameElement.value;
-    debugger;
+    var methodName = methodNameElement.value;   
     if(!TextboxValidation(methodNameElement, "Please enter the Hub method name")) {
         return false;
     }

src/js/main.js

@@ -7,34 +7,4 @@ import 'bootstrap/dist/js/bootstrap.js'
 import '../css/main.css';
 // import './components/custom.alertbox';
 import './components/srform.component';
-import './components/app.component';
-
-
-// class HelloComponent extends HTMLElement {
-//     static get observedAttributes() {
-//       return ['data-name'];
-//     }
-  
-//     // custom methods
-//     render() {
-//       this.innerHTML = `Hello ${this.name}`;
-//     }
-  
-//     get name() {
-//       return this.getAttribute('data-name');
-//     }
-  
-//     // lifecycle hooks
-//     connectedCallback() {
-//       this.render();
-//     }
-  
-//     attributeChangedCallback(attrName, oldVal, newVal) {
-//       this.render();
-//     }
-//   }
-
-//   if(!window.customElements.get('hello-component')){
-//     // add into the 'real' dom as a valid tag
-//     window.customElements.define('hello-component', HelloComponent);
-//   } 
+import './components/app.component';