job handling code in js.

This commit is contained in:
Stefan Midjich 2016-04-18 21:34:16 +02:00
parent ec24d0f125
commit 6be2426f09
3 changed files with 103 additions and 6 deletions

View file

@ -7,3 +7,12 @@
height: 100px;
width: 100px;
}
.msgbox {
border-radius: 25px;
padding: 15px;
}
.msgbox-error {
background: #ff4000;
}

View file

@ -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);
});
}
});

View file

@ -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