Add activity indicator

Change-Id: I9512daa32d8605315e53978bc945199239dfdd3d
diff --git a/cmd/koralmapper/static/config.html b/cmd/koralmapper/static/config.html
index ac22063..dd286e4 100644
--- a/cmd/koralmapper/static/config.html
+++ b/cmd/koralmapper/static/config.html
@@ -63,6 +63,11 @@
           </dl>
 
           <button type="button" id="reset-btn">Reset all</button>
+
+          <span id="active-toggle">
+            <input type="checkbox" id="check-active" class="checkbox">
+            <label for="check-active"><span></span> <strong>Active</strong></label>
+          </span>
         </section>
 
         <section class="mapping-section" id="pipe-info">
diff --git a/cmd/koralmapper/static/config.js b/cmd/koralmapper/static/config.js
index 9f6a92c..aeda326 100644
--- a/cmd/koralmapper/static/config.js
+++ b/cmd/koralmapper/static/config.js
@@ -1,6 +1,6 @@
 "use strict";
 
-(function () {
+function pluginit(KorAPugin) {
   var container = document.querySelector(".container");
   if (!container) return;
 
@@ -244,11 +244,36 @@
     return parts.join(";");
   }
 
+  // Active state tracking
+
+  var isPluginActive = false;
+  var activeCheckbox = container.querySelector("#check-active");
+
+  function setActiveState(value) {
+    isPluginActive = !!value;
+    if (activeCheckbox) {
+      activeCheckbox.checked = isPluginActive;
+    }
+    syncPipes();
+  }
+
   // Kalamar pipe registration
 
   var lastQueryPipe = null;
   var lastResponsePipe = null;
 
+  function removePipes() {
+    if (typeof KorAPugin === "undefined") return;
+    if (lastQueryPipe) {
+      KorAPlugin.sendMsg({ action: "pipe", job: "del", service: lastQueryPipe });
+      lastQueryPipe = null;
+    }
+    if (lastResponsePipe) {
+      KorAPlugin.sendMsg({ action: "pipe", job: "del-after", service: lastResponsePipe });
+      lastResponsePipe = null;
+    }
+  }
+
   function registerPipes() {
     var queryCfg = buildCfgParam("request");
     var responseCfg = buildCfgParam("response");
@@ -260,6 +285,11 @@
       responseCfgPreview.value = responseCfg;
     }
 
+    if (!isPluginActive) {
+      removePipes();
+      return;
+    }
+
     var newQueryPipe = queryCfg ? serviceURL + "/query?cfg=" + encodeURIComponent(queryCfg) : "";
     var newResponsePipe = responseCfg ? serviceURL + "/response?cfg=" + encodeURIComponent(responseCfg) : "";
 
@@ -288,6 +318,14 @@
     lastResponsePipe = newResponsePipe;
   }
 
+  function syncPipes() {
+    if (isPluginActive) {
+      registerPipes();
+    } else {
+      removePipes();
+    }
+  }
+
   // Change handler
 
   function onChange() {
@@ -302,7 +340,7 @@
     restoreFormState(saved);
   }
 
-  var checkboxes = container.querySelectorAll('input[type="checkbox"]');
+  var checkboxes = container.querySelectorAll('input[type="checkbox"]:not(#check-active)');
   for (var i = 0; i < checkboxes.length; i++) {
     checkboxes[i].addEventListener("change", onChange);
   }
@@ -350,10 +388,40 @@
     registerPipes();
   }
 
+
   var resetBtn = container.querySelector("#reset-btn");
   if (resetBtn) {
     resetBtn.addEventListener("click", resetForm);
   }
 
-  registerPipes();
-})();
+  // When the active checkbox in the iframe is toggled,
+  // send the new state to the host button.
+  if (activeCheckbox) {
+    activeCheckbox.addEventListener("change", function () {
+      isPluginActive = activeCheckbox.checked;
+      if (typeof KorAPlugin !== "undefined") {
+        KorAPlugin.sendMsg({
+          action: "set",
+          key: "Active",
+          value: isPluginActive
+        });
+      }
+      syncPipes();
+    });
+  }
+
+  // Don't register pipes until we know the active state
+    KorAPugin.requestMsg({
+      'action': 'get',
+      'key': 'Active'
+    }, function (msg) {
+      setActiveState(msg.value);
+    });
+
+    KorAPugin.onMessage = function(msg) {
+      if (msg.action === 'state' && msg.key === 'active') {
+        setActiveState(msg.value);
+        return;
+      }
+    };
+};
diff --git a/cmd/koralmapper/static/style.css b/cmd/koralmapper/static/style.css
index d639d93..1ca4a0b 100644
--- a/cmd/koralmapper/static/style.css
+++ b/cmd/koralmapper/static/style.css
@@ -86,10 +86,15 @@
     padding: 0.3rem 1rem;
 }
 
+#active-toggle {
+  white-space: nowrap;
+  margin-left: 1em;
+}
+
 footer {
     background-color: var(--light-grey-color);
     font-size:60%;
     text-align: right;
     padding: 0.25rem;
     padding-right:1em;
-}
\ No newline at end of file
+}