From 6be2426f0948e4400eed96f3f6c40e77594dc4df Mon Sep 17 00:00:00 2001
From: Stefan Midjich <swehack@gmail.com>
Date: Mon, 18 Apr 2016 21:34:16 +0200
Subject: [PATCH] job handling code in js.

---
 static/css/captiveportal.css |  9 ++++
 static/js/captiveportal.js   | 84 +++++++++++++++++++++++++++++++++---
 views/portalindex.tpl        | 16 ++++++-
 3 files changed, 103 insertions(+), 6 deletions(-)

diff --git a/static/css/captiveportal.css b/static/css/captiveportal.css
index 32a9039..48f6b06 100644
--- a/static/css/captiveportal.css
+++ b/static/css/captiveportal.css
@@ -7,3 +7,12 @@
   height: 100px;
   width: 100px;
 }
+
+.msgbox {
+  border-radius: 25px;
+  padding: 15px;
+}
+
+.msgbox-error {
+  background: #ff4000;
+}
diff --git a/static/js/captiveportal.js b/static/js/captiveportal.js
index b6e9eea..e3398eb 100644
--- a/static/js/captiveportal.js
+++ b/static/js/captiveportal.js
@@ -1,3 +1,80 @@
+// Captive portal Javascript
+// by Stefan Midjich
+//
+//
+
+// This function ensures the user gets redirect to the correct destination once
+// all jobs have succeeded in the portal software.
+function do_success() {
+    console.log('success: '+window.location);
+    // Do something like refresh the window or go to another URL.
+}
+
+// Show an error to the user
+function do_error(message) {
+    $('#error-row').show();
+    $('#form-row').hide();
+    $('#error-msg').val('Failed. Reload page and try again or contact support. ');
+    if (message) {
+        $('#error-msg').append('System response: '+message);
+    }
+}
+
+// Poll the returned jobs and ensure they all succeed
+function poll_jobs(data) {
+    var promises = [];
+
+    // Push promises into array
+    for(var job in data) {
+        var job_id = data[job].id;
+        var api_url = '/job/'+job_id;
+
+        promises.push(new Promise(function(resolve, reject) {
+            var maxRun = 3;
+            var timesRun = 0;
+
+            // Timer function that polls the API for job results
+            var pollJob = function() {
+                ajaxReq = $.get(api_url);
+                ajaxReq.done(function(getResponse) {
+                    // Verify job data
+                    var job_result = getResponse;
+                    if(job_result.is_finished) {
+                        resolve(job_result.result);
+                    }
+                });
+
+                ajaxReq.fail(function(XMLHttpRequest, textStatus, errorThrown) {
+                    console.log('Request Error: '+ XMLHttpRequest.responseText + ', status:' + XMLHttpRequest.status + ', status text: ' + XMLHttpRequest.statusText);
+                    reject(XMLHttpRequest.responseText);
+                });
+
+                // Set timeout recursively until a certain threshold is reached
+                if (++timesRun == maxRun) {
+                    clearTimeout(timer);
+                    reject("Job polling timed out");
+                } else {
+                    timer = setTimeout(pollJob, 2000);
+                }
+            };
+
+            var timer = setTimeout(pollJob, 500);
+        }));
+    }
+
+    // Run .all() on promises array until all promises resolve
+    Promise.all(promises).then(function(result) {
+        if(result.failed) {
+            do_error(result.error);
+        } else {
+            do_success();
+        }
+    }, function(reason) {
+        do_error(reason);
+    });
+}
+
+// Submit the form
 $('#approveForm').submit(function (event) {
     var api_url = '/approve';
     event.preventDefault();
@@ -11,13 +88,10 @@ $('#approveForm').submit(function (event) {
         $('#approveButtonDiv').replaceWith('<img src="/static/images/radio.svg" alt="Loading, please wait..." />');
 
         var ajaxReq = $.post(api_url);
-
-        ajaxReq.done(function(data) {
-            console.log(data);
-        });
+        ajaxReq.done(poll_jobs);
 
         ajaxReq.fail(function(XMLHttpRequest, textStatus, errorThrown) {
-            console.log('Request Error: '+ XMLHttpRequest.responseText + ', status:' + XMLHttpRequest.status + ', status text: ' + XMLHttpRequest.statusText)
+            console.log('Request Error: '+ XMLHttpRequest.responseText + ', status:' + XMLHttpRequest.status + ', status text: ' + XMLHttpRequest.statusText);
         });
     }
 });
diff --git a/views/portalindex.tpl b/views/portalindex.tpl
index e8c8372..3ae526b 100644
--- a/views/portalindex.tpl
+++ b/views/portalindex.tpl
@@ -19,6 +19,14 @@
 <body>
 
   <div class="container">
+    <noscript>
+      <div class="row">
+        <div class="six columns msgbox msgbox-error" style="margin-top: 2%;">
+          <p>Denna sidan kräver Javascript, du måste aktivera Javascript i din webbläsare för att fortsätta.</p>
+        </div>
+      </div>
+    </noscript>
+
     <div class="row">
       <div class="six columns" style="margin-top: 10%">
         <h4>End User Agreement</h4>
@@ -30,7 +38,13 @@
     </div>
 
     <form id="approveForm" method="post">
-      <div class="row">
+      <div id="error-row" class="row" style="visibility:hidden;">
+        <div class="five columns msgbox msgbox-error">
+          <p id="error-message"></p>
+        </div>
+      </div>
+
+      <div id="form-row" class="row">
         <div class="four columns">
           <label>
             <input type="checkbox" id="approveCheckbox" required> I approve this user agreement