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
+}