mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-04-05 00:34:24 +00:00
249 lines
9.1 KiB
JavaScript
249 lines
9.1 KiB
JavaScript
class AppClient {
|
|
constructor(currentUserId) {
|
|
this.socket = io({transports: ['websocket']});
|
|
this.users = {};
|
|
this.users.self = this.loadUser(currentUserId);
|
|
this.users.self.eventListeners.job.addEventListener((eventType, payload) => this.jobEventHandler(eventType, payload));
|
|
}
|
|
|
|
jobEventHandler(eventType, payload) {
|
|
switch (eventType) {
|
|
case 'init':
|
|
break;
|
|
case 'patch':
|
|
this.jobPatch(payload);
|
|
break;
|
|
default:
|
|
console.error(`[AppClient.jobEventHandler] Unknown event type: ${eventType}`);
|
|
break;
|
|
}
|
|
}
|
|
|
|
loadUser(userId) {
|
|
if (userId in this.users) {return this.users[userId];}
|
|
let user = new User();
|
|
this.users[userId] = user;
|
|
this.socket.on(`user_${userId}_init`, msg => user.init(msg));
|
|
this.socket.on(`user_${userId}_patch`, msg => user.patch(msg));
|
|
this.socket.emit('start_user_session', userId);
|
|
return user;
|
|
}
|
|
|
|
jobPatch(patch) {
|
|
if (this.users.self.data.settings.job_status_site_notifications === 'none') {return;}
|
|
let jobStatusPatches = patch.filter(operation => operation.op === 'replace' && /^\/jobs\/(\d+)\/status$/.test(operation.path));
|
|
for (let operation of jobStatusPatches) {
|
|
let [match, jobId] = operation.path.match(/^\/jobs\/(\d+)\/status$/);
|
|
if (this.users.self.data.settings.job_status_site_notifications === "end" && !['complete', 'failed'].includes(operation.value)) {continue;}
|
|
nopaque.flash(`[<a href="/jobs/${jobId}">${this.users.self.data.jobs[jobId].title}</a>] New status: ${operation.value}`, 'job');
|
|
}
|
|
}
|
|
}
|
|
|
|
class User {
|
|
constructor() {
|
|
this.data = undefined;
|
|
this.eventListeners = {
|
|
corpus: {
|
|
addEventListener(listener, corpusId='*') {
|
|
if (corpusId in this) {this[corpusId].push(listener);} else {this[corpusId] = [listener];}
|
|
}
|
|
},
|
|
job: {
|
|
addEventListener(listener, jobId='*') {
|
|
if (jobId in this) {this[jobId].push(listener);} else {this[jobId] = [listener];}
|
|
}
|
|
},
|
|
queryResult: {
|
|
addEventListener(listener, queryResultId='*') {
|
|
if (queryResultId in this) {this[queryResultId].push(listener);} else {this[queryResultId] = [listener];}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
init(data) {
|
|
this.data = data;
|
|
|
|
for (let [corpusId, eventListeners] of Object.entries(this.eventListeners.corpus)) {
|
|
if (corpusId === '*') {
|
|
for (let eventListener of eventListeners) {eventListener('init');}
|
|
} else {
|
|
if (corpusId in this.data.corpora) {
|
|
for (let eventListener of eventListeners) {eventListener('init');}
|
|
}
|
|
}
|
|
}
|
|
|
|
for (let [jobId, eventListeners] of Object.entries(this.eventListeners.job)) {
|
|
if (jobId === '*') {
|
|
for (let eventListener of eventListeners) {eventListener('init');}
|
|
} else {
|
|
if (jobId in this.data.jobs) {
|
|
for (let eventListener of eventListeners) {eventListener('init');}
|
|
}
|
|
}
|
|
}
|
|
|
|
for (let [queryResultId, eventListeners] of Object.entries(this.eventListeners.queryResult)) {
|
|
if (queryResultId === '*') {
|
|
for (let eventListener of eventListeners) {eventListener('init');}
|
|
} else {
|
|
if (queryResultId in this.data.query_results) {
|
|
for (let eventListener of eventListeners) {eventListener('init');}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
patch(patch) {
|
|
this.data = jsonpatch.apply_patch(this.data, patch);
|
|
|
|
let corporaPatch = patch.filter(operation => operation.path.startsWith("/corpora"));
|
|
if (corporaPatch.length > 0) {
|
|
for (let [corpusId, eventListeners] of Object.entries(this.eventListeners.corpus)) {
|
|
if (corpusId === '*') {
|
|
for (let eventListener of eventListeners) {eventListener('patch', corporaPatch);}
|
|
} else {
|
|
let corpusPatch = corporaPatch.filter(operation => operation.path.startsWith(`/corpora/${corpusId}`));
|
|
if (corpusPatch.length > 0) {
|
|
for (let eventListener of eventListeners) {eventListener('patch', corpusPatch);}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
let jobsPatch = patch.filter(operation => operation.path.startsWith("/jobs"));
|
|
if (jobsPatch.length > 0) {
|
|
for (let [jobId, eventListeners] of Object.entries(this.eventListeners.job)) {
|
|
if (jobId === '*') {
|
|
for (let eventListener of eventListeners) {eventListener('patch', jobsPatch);}
|
|
} else {
|
|
let jobPatch = jobsPatch.filter(operation => operation.path.startsWith(`/jobs/${jobId}`));
|
|
if (jobPatch.length > 0) {
|
|
for (let eventListener of eventListeners) {eventListener('patch', jobPatch);}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
let queryResultsPatch = patch.filter(operation => operation.path.startsWith("/query_results"));
|
|
if (queryResultsPatch.length > 0) {
|
|
for (let [queryResultId, eventListeners] of Object.entries(this.eventListeners.queryResult)) {
|
|
if (queryResultId === '*') {
|
|
for (let eventListener of eventListeners) {eventListener('patch', queryResultsPatch);}
|
|
} else {
|
|
let queryResultPatch = queryResultsPatch.filter(operation => operation.path.startsWith(`/query_results/${queryResultId}`));
|
|
if (queryResultPatch.length > 0) {
|
|
for (let eventListener of eventListeners) {eventListener('patch', queryResultPatch);}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* The nopaque object is used as a namespace for nopaque specific functions and
|
|
* variables.
|
|
*/
|
|
var nopaque = {};
|
|
|
|
nopaque.flash = function(message, category) {
|
|
let toast;
|
|
let toastActionElement;
|
|
|
|
switch (category) {
|
|
case "corpus":
|
|
message = `<i class="left material-icons">book</i>${message}`;
|
|
break;
|
|
case "error":
|
|
message = `<i class="left material-icons red-text">error</i>${message}`;
|
|
break;
|
|
case "job":
|
|
message = `<i class="left material-icons">work</i>${message}`;
|
|
break;
|
|
default:
|
|
message = `<i class="left material-icons">notifications</i>${message}`;
|
|
}
|
|
|
|
toast = M.toast({html: `<span>${message}</span>
|
|
<button data-action="close" class="btn-flat toast-action white-text">
|
|
<i class="material-icons">close</i>
|
|
</button>`});
|
|
toastActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
|
|
toastActionElement.addEventListener('click', () => {toast.dismiss();});
|
|
};
|
|
|
|
nopaque.Forms = {};
|
|
nopaque.Forms.init = function() {
|
|
var abortRequestElement, parentElement, progressElement, progressModal,
|
|
progressModalElement, request, submitElement;
|
|
|
|
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")) {
|
|
helperTextElement.remove();
|
|
}
|
|
parentElement.insertAdjacentHTML("beforeend", `<span class="helper-text red-text">Please select an option.</span>`);
|
|
}
|
|
}
|
|
});
|
|
|
|
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>`);
|
|
}
|
|
}
|
|
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() + "%";
|
|
});
|
|
}
|
|
}
|
|
}
|