Add client-side support for Eventsource
Change-Id: Icaa8c379a11e2b1e0d511a81923715e352658333
diff --git a/plugin/src/main/resources/assets/export.js b/plugin/src/main/resources/assets/export.js
index e49f4fa..941efbe 100644
--- a/plugin/src/main/resources/assets/export.js
+++ b/plugin/src/main/resources/assets/export.js
@@ -1,6 +1,8 @@
"use strict";
function pluginit(P) {
+
+ // Request query params from the embedding window
P.requestMsg(
{
'action':'get',
@@ -29,4 +31,70 @@
if (window.dynCall) {
window.dynCall(P)
};
+
+ // Set plugin object globally
+ window.Plugin = P;
+
+ // Convert POST formparams to GET queryparams
+ // on submission to be usable in eventsource.
+ // This, for the moment, ignores all other form
+ // fields and has to be expanded if needed.
+ document.getElementById("export").onsubmit = function (e) {
+ const form = e.target;
+ const url = new URL(form.action !== undefined ? form.action : "", location);
+ const query = url.searchParams;
+
+ let field;
+ let inputs = form.querySelectorAll("input:not([type=radio]):not([type=checkbox])");
+ for (let i = 0; i < inputs.length; i++) {
+ field = inputs[i];
+ if (field.name.length != "" && field.value != "") {
+ query.append(field.name, field.value);
+ }
+ };
+
+ // Check radio buttons and checkboxes
+ inputs = form.querySelectorAll("input[type=radio],input[type=checkbox]");
+ for (var i = 0; i < inputs.length; i++) {
+ if (inputs[i].checked) {
+ query.append(inputs[i].name, inputs[i].value)
+ };
+ };
+
+ reqStream(url.href);
+ return false;
+ };
+};
+
+
+// Create an eventsource listener for target
+function reqStream (target) {
+ const sse = new EventSource(target);
+ const prog = document.getElementById('progress');
+ sse.addEventListener('Progress', function (e) {
+ prog.value = e.data;
+ prog.textualData = e.data + "%";
+ });
+ sse.addEventListener('Error', function (e) {
+ prog.style.display = "none";
+ sse.close();
+ window.plugin.log(0, e.data);
+ });
+ sse.addEventListener('Relocate', function (e) {
+ prog.style.display = "none";
+ sse.close();
+ console.log(e.data);
+ });
+ sse.addEventListener('Process', function (e) {
+ prog.style.display = "display";
+ if (e.data == "init") {
+ prog.value = 0;
+ prog.textualData = "0%";
+ P.resize();
+ }
+ else if (e.data == 'done') {
+ prog.value = 100;
+ prog.textualData = "100%";
+ }
+ });
};
diff --git a/plugin/src/main/resources/assets/templates/export.ftl b/plugin/src/main/resources/assets/templates/export.ftl
index d6cb11a..8bac95a 100644
--- a/plugin/src/main/resources/assets/templates/export.ftl
+++ b/plugin/src/main/resources/assets/templates/export.ftl
@@ -11,7 +11,7 @@
<div class="banner" data-note="Experimental"></div>
<h1>Export: <code id="export-query"></code></h1>
<section>
- <form id="frmid" class="form-table" action="export" method="POST">
+ <form id="export" class="form-table" action="export" method="POST">
<fieldset>
<input type="hidden" id="q" name="q">
<input type="hidden" id="ql" name="ql">
@@ -54,6 +54,8 @@
<input type="submit" value="Exportieren">
+ <progress id="progress" value="0" max="100" style="display: none;">0%</progress>
+
</fieldset>
</form>
</section>