Works end to end.

Works end to end.

view/template/mail/_settingsForm.php

@@ -17,9 +17,9 @@
     <table></table>
   </div>
   <div class="tag-section">
-    <div class="notice notice-error hide"></div>
     <h2>Tags</h2>
     <h4>Any particular interests?</h4>
+    <div class="notice notice-error hide"></div>
     <table id="tag_table"></table>
     <div>
       <input type="submit" value="Save" class="btn-primary">

web/js/emailSettings.js

@@ -10,32 +10,40 @@ lbry.emailSettingsForm = function (formSelector, emailState, userAuthToken) {
         tagTable = tagSection.find('table'),
         hasError = false,
         isEmailSubmitPending = false,
+        tagMap = new Map(),
         isTagSubmitPending = false;
 
+
     $.each(emails, function(email, enabled = false){
-        console.log('email: ',email, ' enabled: ',enabled)
-        $labelCell = $('<td><label>'+email+'</label></td>');
-        $checkbox = $('<input id="'+email+'" type="checkbox">').prop('checked',enabled ? true : false);
-        $checkBoxCell = $('<td></td>').append($checkbox);
-        $rowEmail =  $('<tr></tr><br>').append($labelCell).append($checkBoxCell);
+        //console.log('email: ',email, ' enabled: ',enabled);
+        $labelCell = $('<td style="padding: 5px 10px 5px 5px;" ><label>'+email+'</label></td>');
+        var checked = enabled ? 'checked':''
+        $checkbox = $(
+            '<section class="slider-checkbox">' +
+                '<input id="'+email+'" type="checkbox" '+checked+'>' +
+                '<label class="label"></label>'+
+            '</section>'
+            );
+        $checkBoxCell = $('<td style="padding: 5px 10px 5px 5px;">'+$checkbox[0].outerHTML+'</td>');
+        $rowEmail =  $('<tr>'+$labelCell[0].outerHTML+$checkBoxCell[0].outerHTML+'</tr>');
         emailTable.append($rowEmail)
     });
     $.each(tags, function(tag, enabled){
-        console.log('tagName: ',tag,' enabled: ',enabled)
-        $labelCell = $('<td><label>'+tag+'</label></td>')
-        $checkbox = $('<input id="'+tag+'" type="checkbox">').prop('checked',enabled ? true : false);
-        $checkBoxCell = $('<td></td>').append($checkbox);
-        $rowTag =  $('<tr></tr><br>')
-        tagTable.append($rowTag).append($labelCell).append($checkBoxCell);
+        tagMap[tag] = enabled;
+        //console.log('tagName: ',tag,' enabled: ',enabled)
+        $labelCell = $('<td style="padding: 5px 10px 5px 5px;"><label>'+tag+'</label></td>');
+        var checked = enabled ? 'checked':''
+        $checkbox = $(
+            '<section class="slider-checkbox">' +
+                '<input id="'+tag+'" type="checkbox" '+checked+'>' +
+                '<label class="label"></label>'+
+            '</section>'
+        );
+        $checkBoxCell = $('<td style="padding: 5px 10px 5px 5px;">'+$checkbox[0].outerHTML+'</td>');
+        $rowTag =  $('<tr>'+$labelCell[0].outerHTML+$checkBoxCell[0].outerHTML+'</tr>');
+        tagTable.append($rowTag)
     });
 
-    function showSuccess() {
-        if (!isEmailSubmitPending && !isTagSubmitPending && !hasError)
-        {
-            form.find('.notice-success').show();
-        }
-    }
-
     //cleverness could eliminate some mild DRY violations below
     form.submit(function(e) {
         //remove below obv
@@ -47,45 +55,88 @@ lbry.emailSettingsForm = function (formSelector, emailState, userAuthToken) {
         hasError = false;
         isEmailSubmitPending = true;
         isTagSubmitPending = true;
-
+        console.log("Run Email Edit");
         //do email edit
-        var url = 'http://localhost:8080/user/email/edit?auth_token=' + userAuthToken,
-            //Did not test below but should be close to this, it may need to be scrubbed and/or modified.
-            formData = emailSection.find(':input').serialize();
-
-
-        fetch(url, {
-            method: "POST",
-            body: formData
-        }).then(function(value) {
-            isEmailSubmitPending = false;
-            showSuccess();
-        }).catch(function(value) {
-            isEmailSubmitPending = false;
-            hasError = true;
-            var error = "get actual error message from value";
-            emailSection.find('.notice-error').html(error).show();
-        });
-
+        var url = 'https://api.lbry.io/user/email/edit?auth_token=' + userAuthToken
+        $.param($.map(emailSection.find("input"), function(element) {
+            console.log("email: ",element.id," is_enabled: ",element.checked);
+            url = url + "&email="+element.id+"&enabled="+element.checked.toString();
+            fetch(url).then(function(value) { return value.json()}).then(jsonResponse => {
+                isEmailSubmitPending = false;
+                if (!jsonResponse.success){
+                    hasError = true
+                    emailSection.find('.notice-error').html(jsonResponse.error).show();
+                }
+                showSuccess();
+            }).catch(function(value) {
+                isEmailSubmitPending = false;
+                hasError = true;
+                var error = "get actual error message from value";
+                emailSection.find('.notice-error').html(error).show();
+            });
+        }));
+        console.log("Run Tag Edit");
         //do tag edit
-        var url = 'http://localhost:8080/user/fix/me?auth_token=' + userAuthToken,
-            //Did not test below but should be close to this, it may need to be scrubbed and/or modified.
-            formData = tagSection.find(':input').serialize();
-
-
-        fetch(url, {
-            method: "POST",
-            body: formData
-        }).then(function(value) {
-            isTagSubmitPending = false;
-            showSuccess();
-        }).catch(function(value) {
-            isTagSubmitPending = false;
-            hasError = true;
-            var error = "get actual error message from value";
-            tagSection.find('.notice-error').html(error).show();
+        var url = 'https://api.lbry.io/user/tag/edit?auth_token=' + userAuthToken
+        var addTags =  new Array(),removeTags = new Array();
+        $('#tag_table tr').each(function() {
+            $trow = $(this);
+            $trow.find('input').each(function () {
+                var tagName = $(this)[0].id
+                var enabled =  $(this)[0].checked
+                if (enabled && !tagMap[$(this)[0].id] ){
+                    addTags.push($(this)[0].id)
+                }else if (!enabled && tagMap[$(this)[0].id]){
+                    removeTags.push($(this)[0].id)
+                }
+            })
         });
+        var hasChanges = addTags[0] || removeTags[0]
+        console.log("AddTags: ",addTags,"RemoveTags: ",removeTags)
+        var addTagsParam = addTags[0]
+        for (var i = 1; i < addTags.length; i++) {
+            hasChanges = true
+            addTagsParam = addTagsParam+","+addTags[i];
+        }
+        var removeTagsParam = removeTags[0]
+        for (var i = 1; i < removeTags.length; i++) {
+            hasChanges = true
+            removeTagsParam = removeTagsParam +","+removeTags[i];
+        }
+        if (addTagsParam && addTagsParam.length > 0){
+            url = url + "&add="+addTagsParam
+        }
+        if ( removeTagsParam  && removeTagsParam.length > 0){
+            url = url + "&remove="+removeTagsParam
+        }
+        if (hasChanges){
+            fetch(url).then(response => { return response.json() }).then(jsonResponse =>{
+                isTagSubmitPending = false;
+                console.log("Success: ",jsonResponse)
+                if (jsonResponse.success){
+                    showSuccess();
+                }else {
+                    hasError = true;
+                    tagSection.find('.notice-error').html(jsonResponse.error).show();
+                }
+            }).catch(function(value) {
+                isTagSubmitPending = false;
+                hasError = true;
+                tagSection.find('.notice-error').html(value.error).show();
+            });
+        } else{
+            isTagSubmitPending = false;
+        }
+
     });
 
     form.show();
-}
+
+    function showSuccess() {
+        if (!isEmailSubmitPending && !isTagSubmitPending && !hasError)
+        {
+            form.find('.notice-success').show();
+        }
+    }
+}
+

web/scss/_slider.scss

@@ -0,0 +1,71 @@
+$checked-color: #006148;
+$unchecked-color: #888;
+
+.slider-checkbox {
+  position: relative;
+  input {
+    margin: 0px;
+    margin-top: 1px;
+    cursor: pointer;
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    -moz-opacity: 0;
+    -khtml-opacity: 0;
+    opacity: 0;
+    position: absolute;
+    z-index: 1;
+    top: 0px;
+    left: 0px;
+    background: red;
+    width: 40px;
+    height: 20px;
+    &:checked + .label {
+      &:before {
+        background-color: $checked-color;
+        content: "\f00c";
+        padding-left: 6px;
+      }
+      &:after {
+        left: 21px;
+      }
+    }
+  }
+  .label {
+    position: relative;
+    padding-left: 46px;
+    &:before, &:after {
+      position: absolute;
+      -webkit-border-radius: 0px;
+      -moz-border-radius: 0px;
+      border-radius: 0px;
+      transition: background-color 0.3s, left 0.3s;
+    }
+    &:before {
+      content: "\f00d";
+      color: #fff;
+      box-sizing: border-box;
+      font-family: 'FontAwesome', sans-serif;
+      padding-left: 23px;
+      font-size: 12px;
+      line-height: 20px;
+      background-color: $unchecked-color;
+      left: 0px;
+      top: 0px;
+      height: 20px;
+      width: 40px;
+      -webkit-border-radius: 0px;
+      -moz-border-radius: 0px;
+      border-radius: 0px;
+    }
+    &:after {
+      content: "";
+      letter-spacing: 20px;
+      background: #fff;
+      left: 1px;
+      top: 1px;
+      height: 18px;
+      width: 18px;
+    }
+  }
+}

web/scss/all.scss

@@ -18,4 +18,5 @@
 @import "quickstart";
 @import "social";
 @import "home";
-@import "mail_settings";
+@import "mail_settings";
+@import "slider";