better extension ui

app/assets/javascripts/app/frontend/models/app/extension.js

@@ -0,0 +1,23 @@
+class Extension extends Item {
+  constructor(json) {
+      _.merge(this, json);
+
+      this.actions = this.actions.map(function(action){
+        return new Action(action);
+      })
+  }
+}
+
+class Action {
+  constructor(json) {
+      _.merge(this, json);
+
+      var comps = this.type.split(":");
+      if(comps.length > 0) {
+        this.repeatable = true;
+        this.repeatType = comps[0]; // 'watch' or 'poll'
+        this.repeatVerb = comps[1]; // http verb
+        this.repeatFrequency = comps[2];
+      }
+  }
+}

app/assets/javascripts/app/services/extensionManager.js

@@ -1,27 +1,3 @@
-class Extension {
-  constructor(json) {
-      _.merge(this, json);
-
-      this.actions = this.actions.map(function(action){
-        return new Action(action);
-      })
-  }
-}
-
-class Action {
-  constructor(json) {
-      _.merge(this, json);
-
-      var comps = this.type.split(":");
-      if(comps.length > 0) {
-        this.repeatable = true;
-        this.repeatType = comps[0]; // 'watch' or 'poll'
-        this.repeatVerb = comps[1]; // http verb
-        this.repeatFrequency = comps[2];
-      }
-  }
-}
-
 class ExtensionManager {
 
   constructor(Restangular, modelManager) {
@@ -29,6 +5,7 @@ class ExtensionManager {
       this.modelManager = modelManager;
       this.extensions = [];
       this.enabledRepeatActions = [];
+      this.enabledRepeatActionUrls = localStorage.getItem("enabled_ext_urls") || [];
   }
 
   addExtension(url) {
@@ -45,11 +22,6 @@ class ExtensionManager {
 
   registerExtension(extension) {
       this.extensions.push(extension);
-      for(var action of extension.actions) {
-        if(action.repeatable) {
-          this.enableRepeatAction(action);
-        }
-      }
       console.log("registered extensions", this.extensions);
   }
 
@@ -64,12 +36,27 @@ class ExtensionManager {
     }
   }
 
+  isRepeatActionEnabled(action) {
+    return this.enabledRepeatActionUrls.includes(action.url);
+  }
+
+  disableRepeatAction(action, extension) {
+    console.log("Disabling action", action);
+    _.pull(this.enabledRepeatActionUrls, action.url);
+    _.pull(this.enabledRepeatActions, action);
+    this.modelManager.removeItemObserver(action.url);
+    console.assert(this.isRepeatActionEnabled(action) == false);
+  }
+
   enableRepeatAction(action, extension) {
     console.log("Enabling repeat action", action);
+
+    this.enabledRepeatActionUrls.push(action.url);
     this.enabledRepeatActions.push(action);
+
     if(action.repeatType == "watch") {
       for(var structure of action.structures) {
-        this.modelManager.watchItemType(structure.type, function(changedItems){
+        this.modelManager.addItemObserver(action.url, structure.type, function(changedItems){
           this.triggerWatchAction(action, changedItems);
         }.bind(this))
       }
@@ -86,7 +73,7 @@ class ExtensionManager {
         return;
       }
     }
-    
+
     if(action.repeatVerb == "post") {
       var request = this.Restangular.oneUrl(action.url, action.url);
       request.items = changedItems.map(function(item){
@@ -95,7 +82,7 @@ class ExtensionManager {
       })
       request.post().then(function(response){
         console.log("watch action response", response);
-        action.lastExecuted =  new Date();
+        action.lastExecuted = new Date();
       })
     }
   }

app/assets/javascripts/app/services/modelManager.js

@@ -23,10 +23,12 @@ class ModelManager extends ItemManager {
     })
   }
 
-  watchItemType(type, callback) {
-    console.log("Watching item type", type, "callback:", callback);
-    this.changeObservers.push({type: type, callback: callback});
-    console.log("Change observers", this.changeObservers);
+  addItemObserver(id, type, callback) {
+    this.changeObservers.push({id: id, type: type, callback: callback});
+  }
+
+  removeItemObserver(id) {
+    _.remove(this.changeObservers, _.find(this.changeObservers, {id: id}));
   }
 
   addDirtyItems(items) {

app/assets/stylesheets/app/_header.scss

@@ -278,14 +278,51 @@ Extensions
 
   .extension {
     margin-bottom: 18px;
+    background-color: #ededed;
+    padding: 10px;
+    color: black;
+
     > .name {
       font-weight: bold;
+      font-size: 16px;
+      margin-bottom: 2px;
+    }
+
+    > .subtitle {
+      font-size: 14px;
+      margin-bottom: 10px;
     }
 
     > .actions {
+      margin-top: 15px;
+      font-size: 14px;
+
       .action {
-        font-weight: bold;
+        margin-bottom: 10px;
+
+        > .name {
+          font-weight: bold;
+        }
+
+        > .execute {
+          a {
+            color: $blue-color;
+          }
+          font-weight: bold;
+          margin-bottom: 3px;
+          font-size: 12px;
+        }
+
+        > .execute-type {
+          font-size: 12px;
+        }
+
+        > .last-run {
+          opacity: 0.5;
+          font-size: 12px;
+        }
       }
+
     }
   }
 

app/assets/stylesheets/app/_main.scss

@@ -3,6 +3,7 @@ $secondary-text-color: rgba($main-text-color, 0.8);
 $bg-color: #e3e3e3;
 $selection-color: $bg-color;
 $selected-text-color: black;
+$blue-color: #086dd6;
 
 @mixin MQ-Small() {
   @media (max-width: $screen-xs-max) {

app/assets/stylesheets/app/_notes.scss

@@ -53,8 +53,6 @@
     }
   }
 
-  $note-selection-color: #086dd6;
-
   .note {
     width: 100%;
     padding: 15px;
@@ -75,13 +73,9 @@
     }
 
     &.selected {
-      background-color: $note-selection-color;
+      background-color: $blue-color;
       color: white;
     }
 
-    // &:hover:not(.selected) {
-    //   background-color: $note-selection-color;
-    //   color: white;
-    // }
   }
 }

app/assets/templates/frontend/header.html.haml

@@ -91,18 +91,28 @@
               .registered-extensions{"ng-if" => "ctrl.extensionManager.extensions.length"}
                 .extension{"ng-repeat" => "extension in ctrl.extensionManager.extensions"}
                   .name {{extension.name}}
-                  Actions
-                  %ul.actions
-                    %li.action{"ng-repeat" => "action in extension.actions"}
-                      %a{"ng-click" => "ctrl.selectedAction(action, extension)"} {{action.label}}
-
+                  .subtitle Available Actions
+                  .actions
+                    .action{"ng-repeat" => "action in extension.actions"}
+                      .name {{action.label}}
+                      .execute
+                        %a{"ng-click" => "ctrl.selectedAction(action, extension)"}
+                          %span{"ng-if" => "action.repeatable"}
+                            %span{"ng-if" => "ctrl.extensionManager.isRepeatActionEnabled(action)", "ng-click" => "ctrl.extensionManager.disableRepeatAction(action, extension)"} Disable
+                            %span{"ng-if" => "!ctrl.extensionManager.isRepeatActionEnabled(action)", "ng-click" => "ctrl.extensionManager.enableRepeatAction(action, extension)"} Enable
+                          %span{"ng-if" => "!action.repeatable"}
+                            Perform Action
+                      .execute-type{"ng-if" => "action.repeatable"}
+                        This is a repeat action.
+                      .last-run{"ng-if" => "action.lastExecuted"}
+                        Last executed {{action.lastExecuted | appDate}}
 
               %a{"ng-click" => "ctrl.toggleExtensionForm()"} Add new extension
               %form.extension-form{"ng-if" => "ctrl.showNewExtensionForm"}
                 .form-tag.has-feedback
                   %input.form-control{:autofocus => 'autofocus', :name => 'url', :placeholder => 'Extension URL', :required => true, :type => 'text', 'ng-model' => 'ctrl.newExtensionData.url'}
                 %button.btn.dark-button.btn-block{:type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
-                  %span.ladda-label{"ng-click" => "ctrl.submitNewExtensionForm()"} Get Extension
+                  %span.ladda-label{"ng-click" => "ctrl.submitNewExtensionForm()"} Add Extension
 
         .item
           %a{"href" => "https://standardnotes.org", "target" => "_blank"}