fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make async forms process json response

Browse Source
This commit is contained in:
Felix Hamann 2019-02-24 23:23:23 +01:00
parent b343066a88
commit 2f3a735ae2
3 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Foundation.hs
View File

@ -1031,6 +1031,7 @@ siteLayout' headingOverride widget = do
addScript $ StaticR js_utils_tabber_js
addStylesheet $ StaticR css_utils_alerts_scss
addStylesheet $ StaticR css_utils_asidenav_scss
addStylesheet $ StaticR css_utils_asyncForm_scss
addStylesheet $ StaticR css_utils_form_scss
addStylesheet $ StaticR css_utils_inputs_scss
addStylesheet $ StaticR css_utils_modal_scss

9
static/css/utils/asyncForm.scss Normal file
View File

@ -0,0 +1,9 @@
.async-form-response {
margin: 20px 0;
}
.async-form-loading {
opacity: 0.1;
transition: opacity 400ms ease-in-out;
pointer-events: none;
}

27
static/js/utils/asyncForm.js
View File

@ -3,12 +3,21 @@
window.utils = window.utils || {};
var ASYNC_FORM_RESPONSE_CLASS = 'async-form-response';
var ASYNC_FORM_LOADING_CLASS = 'async-form-loading';
var ASYNC_FORM_MIN_DELAY = 600;
window.utils.asyncForm = function(formElement, options) {
var lastRequestTimestamp = 0;
function setup() {
formElement.addEventListener('submit', function(event) {
event.preventDefault();
formElement.classList.add(ASYNC_FORM_LOADING_CLASS)
lastRequestTimestamp = Date.now();
var url = formElement.getAttribute('action');
var headers = { };
var body = new FormData(formElement);
@ -23,14 +32,28 @@
.then(function(response) {
return response.json();
}).then(function(response) {
console.log('asyncForm: got response', response);
// TODO: process json response once backend returns json
processResponse(response[0])
}).catch(function(error) {
console.error('could not fetch or process response from ' + url, { error });
});
});
}
function processResponse(response) {
var responseElement = document.createElement('div');
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS);
responseElement.innerHTML = response.content;
var parentElement = formElement.parentElement;
// make sure there is a delay between click and response
var delay = Math.max(0, ASYNC_FORM_MIN_DELAY + lastRequestTimestamp - Date.now());
setTimeout(function() {
parentElement.insertBefore(responseElement, formElement);
formElement.remove();
}, delay);
}
setup();
};
})();