sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-06-12 09:00:40 +00:00
Code Issues Projects Releases Wiki Activity

Integrate job list javascript in nopaque.js

Browse Source
This commit is contained in:
Patrick Jentsch
2020-01-24 10:27:11 +01:00
parent 4dce792b51
commit 6a4ad05c35
5 changed files with 60 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/static/js/add_job.js
View File

@ -1,54 +0,0 @@
function SubmitAddJobForm(newJobFormElement, progressModalElement, request) {
var formData = new FormData(newJobFormElement);
var progressModal = M.Modal.getInstance(progressModalElement);
progressModal.options.dismissible = false;
progressModalElement.querySelector(".title").innerHTML = newJobFormElement.title.value;
request.addEventListener("abort", function(event) {
progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%";
progressModalElement.querySelector(".determinate").style.width = "0%";
});
request.addEventListener("load", function(event) {
if (request.status === 201) {
window.location.href = JSON.parse(this.responseText)['redirect_url'];
}
if (request.status === 400) {
progressModal.close();
progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%";
progressModalElement.querySelector(".determinate").style.width = "0%";
for (let [field, errors] of Object.entries(JSON.parse(this.responseText))) {
let fieldElement = document.getElementById(field).closest('.input-field');
for (let error of errors) {
fieldElement.insertAdjacentHTML('beforeend', '<span class="helper-text red-text">' + error + '</span>');
}
}
}
if (request.status === 500) {
location.reload();
}
});
request.upload.addEventListener("progress", function(event) {
progressInPercent = Math.floor(100 * event.loaded / event.total).toString() + "%";
progressModalElement.querySelector(".progress-in-percent").innerHTML = progressInPercent;
progressModalElement.querySelector(".determinate").style.width = progressInPercent;
});
progressModal.open();
request.open("POST", window.location.href);
request.send(formData);
}
function initAddJobForm(addJobFormElement, progressModalElement) {
var request;
request = new XMLHttpRequest();
addJobFormElement.addEventListener("submit", function(event) {
event.preventDefault();
SubmitAddJobForm(addJobFormElement, progressModalElement, request);
});
progressModalElement.querySelector(".cancel").addEventListener("click", function(event) {
request.abort();
});
}

68
app/static/js/nopaque.js
View File

@ -18,24 +18,64 @@ nopaque["foreignJobsSubscribers"] = [];
// nopaque functions
nopaque["forms"] = {};
nopaque["forms"]["init"] = function() {
for (let form of document.querySelectorAll(".nopaque-form")) {
var abortRequestElement, progressElement, progressModal,
progressModalElement, request;
for (let form of document.querySelectorAll(".nopaque-job-form")) {
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");
// just use request.abort?
abortRequestElement.addEventListener("click", function() {request.abort();});
progressElement = progressModalElement.querySelector(".determinate");
}
form.addEventListener("submit", function(event) {
event.preventDefault();
if (form.dataset.hasOwnProperty('loadingModal')) {
let loadingModalElement = document.getElementById(form.dataset.loadingModal);
M.Modal.getInstance(loadingModalElement).open();
var formData, progressModalTitleElement;
formData = new FormData(form);
// Initialize progress modal
if (progressModalElement) {
progressModalTitleElement = progressModalElement.querySelector(".title");
progressModalTitleElement.innerText = formData.get("title");
progressElement.style.width = "0%";
progressModal.open();
}
let data = {};
for (let input of form.querySelectorAll("input")) {
if (input.type === "file") {
file = input.files[0];
data[`${input.name}-wrapper`] = {"bytes": file, "name": file.name};
} else {
data[input.name] = input.value;
request.open("POST", window.location.href);
request.send(formData);
});
request.addEventListener("load", function(event) {
var errorElement, 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) {
errorElement = document.createElement("span");
errorElement.classList.add("helper-text", "red-text");
errorElement.innerText = error;
fieldElement.appendChild(errorElement);
}
}
if (progressModalElement) {
progressModal.close();
}
}
nopaque.socket.emit(`submit-${form.id}`, data);
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() + "%";
});
}
}
}
@ -131,9 +171,7 @@ nopaque.socket.on('update-foreign-jobs', function(msg) {
document.addEventListener("DOMContentLoaded", function() {
M.AutoInit();
M.CharacterCounter.init(document.querySelectorAll(`input[data-length][type="text"]`));
M.Dropdown.init(document.getElementById("nav-notifications"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false});
M.Dropdown.init(document.getElementById("nav-account"),
M.Dropdown.init(document.querySelectorAll('#nav-notifications, #nav-account'),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false});
nopaque.forms.init();
nopaque.navigation.init();