mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-11-03 20:02:47 +00:00
update nopaque forms
This commit is contained in:
Patrick Jentsch
@@ -5,72 +5,151 @@
|
||||
var nopaque = {};
|
||||
|
||||
nopaque.Forms = {};
|
||||
nopaque.Forms.init = function() {
|
||||
var abortRequestElement, parentElement, progressElement, progressModal,
|
||||
progressModalElement, request, submitElement;
|
||||
nopaque.Forms.autoInit = () => {
|
||||
const nopaqueSubmitForms = document.querySelectorAll('.nopaque-submit-form');
|
||||
let nopaqueSubmitForm;
|
||||
|
||||
for (let form of document.querySelectorAll(".nopaque-submit-form")) {
|
||||
submitElement = form.querySelector('button[type="submit"]');
|
||||
submitElement.addEventListener("click", function() {
|
||||
for (let selectElement of form.querySelectorAll('select')) {
|
||||
if (selectElement.value === "") {
|
||||
parentElement = selectElement.closest(".input-field");
|
||||
parentElement.querySelector(".select-dropdown").classList.add("invalid");
|
||||
for (let helperTextElement of parentElement.querySelectorAll(".helper-text")) {
|
||||
for (nopaqueSubmitForm of nopaqueSubmitForms) {
|
||||
nopaqueSubmitForm.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const request = new XMLHttpRequest();
|
||||
const selectElements = nopaqueSubmitForm.querySelectorAll('select');
|
||||
let abortElement;
|
||||
let helperTextElement;
|
||||
let helperTextElements;
|
||||
let inputFieldElement;
|
||||
let modal;
|
||||
let modalElement;
|
||||
let progressElement;
|
||||
let selectElement;
|
||||
let tmp;
|
||||
|
||||
// Check if select elements are filled out properly
|
||||
for (selectElement of selectElements) {
|
||||
if (selectElement.value === '') {
|
||||
inputFieldElement = selectElement.closest('.input-field');
|
||||
inputFieldElement.querySelector('.select-dropdown').classList.add('invalid');
|
||||
helperTextElements = inputFieldElement.querySelectorAll('.helper-text');
|
||||
for (helperTextElement of helperTextElements) {
|
||||
helperTextElement.remove();
|
||||
}
|
||||
parentElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">Please select an option.</span>`);
|
||||
inputFieldElement.insertAdjacentHTML(
|
||||
'beforeend',
|
||||
'<span class="helper-text error-color-text">Please select an option.</span>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
request = new XMLHttpRequest();
|
||||
if (form.dataset.hasOwnProperty("progressModal")) {
|
||||
progressModalElement = document.getElementById(form.dataset.progressModal);
|
||||
progressModal = M.Modal.getInstance(progressModalElement);
|
||||
progressModal.options.dismissible = false;
|
||||
abortRequestElement = progressModalElement.querySelector(".abort-request");
|
||||
abortRequestElement.addEventListener("click", function() {request.abort();});
|
||||
progressElement = progressModalElement.querySelector(".determinate");
|
||||
}
|
||||
form.addEventListener("submit", function(event) {
|
||||
event.preventDefault();
|
||||
var formData;
|
||||
|
||||
formData = new FormData(form);
|
||||
// Initialize progress modal
|
||||
if (progressModalElement) {
|
||||
progressElement.style.width = "0%";
|
||||
progressModal.open();
|
||||
}
|
||||
request.open("POST", window.location.href);
|
||||
request.send(formData);
|
||||
});
|
||||
request.addEventListener("load", function(event) {
|
||||
var fieldElement;
|
||||
|
||||
if (request.status === 201) {
|
||||
window.location.href = JSON.parse(this.responseText).redirect_url;
|
||||
}
|
||||
if (request.status === 400) {
|
||||
for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) {
|
||||
fieldElement = form.querySelector(`input[name$="${field}"]`).closest(".input-field");
|
||||
for (let error of errors) {
|
||||
fieldElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">${error}</span>`);
|
||||
// Setup modal
|
||||
tmp = document.createElement('div');
|
||||
tmp.innerHTML = `
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4><i class="material-icons left">file_upload</i>Uploading files...</h4>
|
||||
<div class="progress">
|
||||
<div class="determinate" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="btn red waves-effect waves-light abort">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
`.trim();
|
||||
modalElement = document.querySelector('#modals').appendChild(tmp.firstChild);
|
||||
modal = M.Modal.init(
|
||||
modalElement,
|
||||
{
|
||||
dismissible: false,
|
||||
onCloseEnd: () => {
|
||||
modal.destroy();
|
||||
modalElement.remove();
|
||||
}
|
||||
}
|
||||
if (progressModalElement) {
|
||||
progressModal.close();
|
||||
}
|
||||
}
|
||||
if (request.status === 500) {
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
if (progressModalElement) {
|
||||
request.upload.addEventListener("progress", function(event) {
|
||||
progressElement.style.width = Math.floor(100 * event.loaded / event.total).toString() + "%";
|
||||
);
|
||||
modal.open();
|
||||
|
||||
// Setup abort handling
|
||||
abortElement = modalElement.querySelector('.abort');
|
||||
abortElement.addEventListener('click', event => {request.abort();});
|
||||
request.addEventListener('abort', event => {
|
||||
request.abort();
|
||||
modal.close();
|
||||
});
|
||||
|
||||
// Setup load handling (after the request completed)
|
||||
request.addEventListener('load', event => {
|
||||
const response = JSON.parse(request.responseText);
|
||||
let inputError;
|
||||
let inputErrors;
|
||||
let inputFieldElement;
|
||||
let inputName;
|
||||
|
||||
if (request.status === 201) {
|
||||
window.location.href = response.redirect_url;
|
||||
}
|
||||
if (request.status === 400) {
|
||||
for ([inputName, inputErrors] of Object.entries(response)) {
|
||||
inputFieldElement = nopaqueSubmitForm.querySelector(`input[name="${inputName}"], select[name="${inputName}"]`).closest('.input-field');
|
||||
for (inputError of inputErrors) {
|
||||
inputFieldElement.insertAdjacentHTML(
|
||||
'beforeend',
|
||||
`<span class="helper-text red-text">${inputError}</span>`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (request.status === 500) {
|
||||
location.reload();
|
||||
}
|
||||
modal.close();
|
||||
});
|
||||
|
||||
// Setup progress handling
|
||||
progressElement = modalElement.querySelector('.progress > .determinate');
|
||||
request.upload.addEventListener('progress', event => {
|
||||
const progress = Math.floor(100 * event.loaded / event.total);
|
||||
progressElement.style.width = `${progress}%`;
|
||||
});
|
||||
|
||||
request.open('POST', window.location.href);
|
||||
request.send(new FormData(nopaqueSubmitForm));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nopaque.RessourceList = {};
|
||||
nopaque.RessourceList.autoInit = () => {
|
||||
const nopaqueRessourceListElements = document.querySelectorAll('.nopaque-ressource-list[data-ressource-type]:not(.no-autoinit)');
|
||||
let nopaqueRessourceListElement;
|
||||
|
||||
for (nopaqueRessourceListElement of nopaqueRessourceListElements) {
|
||||
switch (nopaqueRessourceListElement.dataset.ressourceType) {
|
||||
case 'Corpus':
|
||||
new CorpusList(nopaqueRessourceListElement);
|
||||
break;
|
||||
case 'CorpusFile':
|
||||
new CorpusFileList(nopaqueRessourceListElement);
|
||||
break;
|
||||
case 'Job':
|
||||
new JobList(nopaqueRessourceListElement);
|
||||
break;
|
||||
case 'JobInput':
|
||||
new JobInputList(nopaqueRessourceListElement);
|
||||
break;
|
||||
case 'JobResult':
|
||||
new JobResultList(nopaqueRessourceListElement);
|
||||
break;
|
||||
case 'QueryResult':
|
||||
new QueryResultList(nopaqueRessourceListElement);
|
||||
break;
|
||||
case 'User':
|
||||
new UserList(nopaqueRessourceListElement);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user