Allow user to mute notifications on a favorite.

Allow the user to disable email notifications for a test without
removing it from favorites. This is the first step in some actionable
user feedback because this change can be used to allow the user to
unsubscribe from email alerts.

Test: staging
Bug: 62999724
Change-Id: I4df89ba3ac00ab7b173fb503913bda65227fca86

2 files changed, 66 insertions, 10 deletions

diff --git a/src/main/webapp/WEB-INF/jsp/dashboard_main.jsp b/src/main/webapp/WEB-INF/jsp/dashboard_main.jsp
index e0e8f57..796e295 100644
--- a/src/main/webapp/WEB-INF/jsp/dashboard_main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/dashboard_main.jsp
@@ -35,7 +35,7 @@
                 return;
             }
             $('#add-button').addClass('disabled');
-            $.post('/api/favorites/' + test).then(function(data) {
+            $.post('/api/favorites', { testName: test}).then(function(data) {
                 if (!data.key) {
                     return;
                 }
@@ -49,12 +49,24 @@
                 var span = $('<span class="entry valign"></span>').text(test);
                 span.appendTo(div);
                 a.appendTo(wrapper);
-                var clear = $('<a class="col s1 btn-flat center"></a>');
-                clear.addClass('clear-button');
+
+                var btnContainer = $('<div class="col s1 center btn-container"></div>');
+                var silence = $('<a class="col s6 btn-flat notification-button active"></a>');
+                silence.append('<i class="material-icons">notifications_active</i>');
+                silence.attr('test', test);
+                silence.attr('title', 'Disable notifications');
+                silence.appendTo(btnContainer);
+                silence.click(toggleNotifications);
+
+                var clear = $('<a class="col s6 btn-flat remove-button"></a>');
                 clear.append('<i class="material-icons">clear</i>');
                 clear.attr('test', test);
-                clear.appendTo(wrapper);
+                clear.attr('title', 'Remove favorite');
+                clear.appendTo(btnContainer);
                 clear.click(removeFavorite);
+
+                btnContainer.appendTo(wrapper);
+
                 wrapper.prependTo('#options').hide()
                                           .slideDown(150);
                 $('#input-box').val(null);
@@ -64,6 +76,40 @@
             });
         }
 
+        var toggleNotifications = function() {
+            var self = $(this);
+            if (self.hasClass('disabled')) {
+                return;
+            }
+            self.addClass('disabled');
+            var test = self.attr('test');
+            if (!(test in subscriptionMap)) {
+                return;
+            }
+            var muteStatus = self.hasClass('active');
+            var element = self;
+            $.post('/api/favorites', { userFavoritesKey: subscriptionMap[test], muteNotifications: muteStatus}).then(function(data) {
+                element = self.clone();
+                if (element.hasClass('active')) {
+                    element.find('i').text('notifications_off')
+                    element.removeClass('active');
+                    element.addClass('inactive');
+                    element.attr('title', 'Enable notifications');
+                } else {
+                    element.find('i').text('notifications_active')
+                    element.removeClass('inactive');
+                    element.addClass('active');
+                    element.attr('title', 'Disable notifications');
+                }
+                element.click(toggleNotifications);
+                self.replaceWith(function() {
+                    return element;
+                });
+            }).always(function() {
+                element.removeClass('disabled');
+            });
+        }
+
         var removeFavorite = function() {
             var self = $(this);
             if (self.hasClass('disabled')) {
@@ -81,7 +127,7 @@
                 self.removeClass('disabled');
             }).then(function() {
                 delete subscriptionMap[test];
-                self.parent().slideUp(150, function() {
+                self.parent().parent().slideUp(150, function() {
                     self.remove();
                 });
             });
@@ -107,7 +153,8 @@
                 }
             });
 
-            $('.clear-button').click(removeFavorite);
+            $('.remove-button').click(removeFavorite);
+            $('.notification-button').click(toggleNotifications);
             $('#add-button').click(addFavorite);
         });
     </script>
@@ -154,9 +201,14 @@
                   </div>
                 </a>
                 <c:if test='${not showAll}'>
-                  <a class='col s1 btn-flat center clear-button' test='${test.name}'>
-                    <i class='material-icons'>clear</i>
-                  </a>
+                  <div class='col s1 center btn-container'>
+                    <a class='col s6 btn-flat notification-button ${test.muteNotifications ? "inactive" : "active"}' test='${test.name}' title='${test.muteNotifications ? "Enable" : "Disable"} notifications'>
+                      <i class='material-icons'>notifications_${test.muteNotifications ? "off" : "active"}</i>
+                    </a>
+                    <a class='col s6 btn-flat remove-button' test='${test.name}' title='Remove favorite'>
+                      <i class='material-icons'>clear</i>
+                    </a>
+                  </div>
                 </c:if>
               </div>
             </c:forEach>
diff --git a/src/main/webapp/css/dashboard_main.css b/src/main/webapp/css/dashboard_main.css
index e6e899f..0db4c94 100644
--- a/src/main/webapp/css/dashboard_main.css
+++ b/src/main/webapp/css/dashboard_main.css
@@ -27,12 +27,16 @@
     height: 61px;
 }
 
-.btn-flat.clear-button {
+.btn-container > .btn-flat {
     margin-top: 8px;
     user-select: none;
     color: grey;
 }
 
+.btn-container > .btn-flat.inactive {
+    color: lightgray;
+}
+
 .row .col.card.option {
     padding: 6px 15px 6px 15px;
     margin: 5px 0;