From 37f98bb4ecdd70b765dbe252bab003b0d6f6a9b7 Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Mon, 1 Feb 2021 09:57:10 +0100 Subject: [PATCH] Use the user data reference to access corpora, jobs or query results. Now all values should update as they should in lists an displays --- .../RessourceDisplays/CorpusDisplay.js | 31 +++++++++---------- .../nopaque/RessourceDisplays/JobDisplay.js | 29 +++++++++-------- .../nopaque/RessourceLists/CorpusFileList.js | 25 +++++++-------- .../js/nopaque/RessourceLists/CorpusList.js | 12 +++---- .../js/nopaque/RessourceLists/JobInputList.js | 11 +++---- .../js/nopaque/RessourceLists/JobList.js | 6 ++-- .../nopaque/RessourceLists/JobResultList.js | 15 +++++---- .../nopaque/RessourceLists/QueryResultList.js | 6 ++-- .../nopaque/RessourceLists/RessourceList.js | 2 +- 9 files changed, 63 insertions(+), 74 deletions(-) diff --git a/web/app/static/js/nopaque/RessourceDisplays/CorpusDisplay.js b/web/app/static/js/nopaque/RessourceDisplays/CorpusDisplay.js index 11064623..8d3b93b3 100644 --- a/web/app/static/js/nopaque/RessourceDisplays/CorpusDisplay.js +++ b/web/app/static/js/nopaque/RessourceDisplays/CorpusDisplay.js @@ -1,20 +1,19 @@ class CorpusDisplay extends RessourceDisplay { constructor(displayElement) { super(displayElement); - this.corpus = undefined; - this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), displayElement.dataset.corpusId); + this.corpusId = displayElement.dataset.corpusId; + this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), this.corpusId); } - init(corpus) { - this.corpus = corpus; + init() { for (let exportCorpusTriggerElement of this.displayElement.querySelectorAll('.export-corpus-trigger')) {exportCorpusTriggerElement.addEventListener('click', () => this.requestCorpusExport());} - nopaque.appClient.socket.on(`export_corpus_${this.corpus.id}`, () => this.downloadCorpus()); - this.setCreationDate(this.corpus.creation_date); - this.setDescription(this.corpus.description); - this.setLastEditedDate(this.corpus.last_edited_date); - this.setStatus(this.corpus.status); - this.setTitle(this.corpus.title); - this.setTokenRatio(this.corpus.current_nr_of_tokens, this.corpus.max_nr_of_tokens); + nopaque.appClient.socket.on(`export_corpus_${this.user.data.corpora[this.corpusId].id}`, () => this.downloadCorpus()); + this.setCreationDate(this.user.data.corpora[this.corpusId].creation_date); + this.setDescription(this.user.data.corpora[this.corpusId].description); + this.setLastEditedDate(this.user.data.corpora[this.corpusId].last_edited_date); + this.setStatus(this.user.data.corpora[this.corpusId].status); + this.setTitle(this.user.data.corpora[this.corpusId].title); + this.setTokenRatio(this.user.data.corpora[this.corpusId].current_nr_of_tokens, this.user.data.corpora[this.corpusId].max_nr_of_tokens); } patch(patch) { @@ -23,10 +22,10 @@ class CorpusDisplay extends RessourceDisplay { switch(operation.op) { case 'replace': // Matches: /jobs/{this.job.id}/status - re = new RegExp('^/corpora/' + this.corpus.id + '/last_edited_date'); + re = new RegExp('^/corpora/' + this.user.data.corpora[this.corpusId].id + '/last_edited_date'); if (re.test(operation.path)) {this.setLastEditedDate(operation.value); break;} // Matches: /jobs/{this.job.id}/status - re = new RegExp('^/corpora/' + this.corpus.id + '/status$'); + re = new RegExp('^/corpora/' + this.user.data.corpora[this.corpusId].id + '/status$'); if (re.test(operation.path)) {this.setStatus(operation.value); break;} break; default: @@ -36,7 +35,7 @@ class CorpusDisplay extends RessourceDisplay { } requestCorpusExport() { - nopaque.appClient.socket.emit('export_corpus', this.corpus.id); + nopaque.appClient.socket.emit('export_corpus', this.user.data.corpora[this.corpusId].id); nopaque.flash('Preparing your corpus export...', 'corpus'); for (let exportCorpusTriggerElement of this.displayElement.querySelectorAll('.export-corpus-trigger')) {exportCorpusTriggerElement.classList.toggle('disabled', true);} } @@ -46,7 +45,7 @@ class CorpusDisplay extends RessourceDisplay { for (let exportCorpusTriggerElement of this.displayElement.querySelectorAll('.export-corpus-trigger')) {exportCorpusTriggerElement.classList.toggle('disabled', false);} // Little trick to call the download view after ziping has finished let fakeBtn = document.createElement('a'); - fakeBtn.href = `/corpora/${this.corpus.id}/download`; + fakeBtn.href = `/corpora/${this.user.data.corpora[this.corpusId].id}/download`; fakeBtn.click(); } @@ -72,7 +71,7 @@ class CorpusDisplay extends RessourceDisplay { } } for (let element of this.displayElement.querySelectorAll('.build-corpus-trigger')) { - if (status === 'unprepared' && Object.values(this.corpus.files).length > 0) { + if (status === 'unprepared' && Object.values(this.user.data.corpora[this.corpusId].files).length > 0) { element.classList.remove('disabled'); } else { element.classList.add('disabled'); diff --git a/web/app/static/js/nopaque/RessourceDisplays/JobDisplay.js b/web/app/static/js/nopaque/RessourceDisplays/JobDisplay.js index 7d69fb82..a1dd3690 100644 --- a/web/app/static/js/nopaque/RessourceDisplays/JobDisplay.js +++ b/web/app/static/js/nopaque/RessourceDisplays/JobDisplay.js @@ -1,20 +1,19 @@ class JobDisplay extends RessourceDisplay { constructor(displayElement) { super(displayElement); - this.job = undefined; - this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), displayElement.dataset.jobId); + this.jobId = displayElement.dataset.jobId; + this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), this.jobId); } init(job) { - this.job = job; - this.setCreationDate(this.job.creation_date); - this.setEndDate(this.job.creation_date); - this.setDescription(this.job.description); - this.setService(this.job.service); - this.setServiceArgs(this.job.service_args); - this.setServiceVersion(this.job.service_version); - this.setStatus(this.job.status); - this.setTitle(this.job.title); + this.setCreationDate(this.user.data.jobs[this.jobId].creation_date); + this.setEndDate(this.user.data.jobs[this.jobId].creation_date); + this.setDescription(this.user.data.jobs[this.jobId].description); + this.setService(this.user.data.jobs[this.jobId].service); + this.setServiceArgs(this.user.data.jobs[this.jobId].service_args); + this.setServiceVersion(this.user.data.jobs[this.jobId].service_version); + this.setStatus(this.user.data.jobs[this.jobId].status); + this.setTitle(this.user.data.jobs[this.jobId].title); } patch(patch) { @@ -22,11 +21,11 @@ class JobDisplay extends RessourceDisplay { for (let operation of patch) { switch(operation.op) { case 'replace': - // Matches: /jobs/{this.job.id}/status - re = new RegExp('^/jobs/' + this.job.id + '/end_date'); + // Matches: /jobs/{this.user.data.jobs[this.jobId].id}/status + re = new RegExp('^/jobs/' + this.user.data.jobs[this.jobId].id + '/end_date'); if (re.test(operation.path)) {this.setEndDate(operation.value); break;} - // Matches: /jobs/{this.job.id}/status - re = new RegExp('^/jobs/' + this.job.id + '/status$'); + // Matches: /jobs/{this.user.data.jobs[this.jobId].id}/status + re = new RegExp('^/jobs/' + this.user.data.jobs[this.jobId].id + '/status$'); if (re.test(operation.path)) {this.setStatus(operation.value); break;} break; default: diff --git a/web/app/static/js/nopaque/RessourceLists/CorpusFileList.js b/web/app/static/js/nopaque/RessourceLists/CorpusFileList.js index c4926637..e6913733 100644 --- a/web/app/static/js/nopaque/RessourceLists/CorpusFileList.js +++ b/web/app/static/js/nopaque/RessourceLists/CorpusFileList.js @@ -1,13 +1,12 @@ class CorpusFileList extends RessourceList { constructor(listElement, options = {}) { super(listElement, {...CorpusFileList.options, ...options}); - this.corpus = undefined; - this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), listElement.dataset.corpusId); + this.corpusId = listElement.dataset.corpusId; + this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), this.corpusId); } - init(corpus) { - this.corpus = corpus; - super.init(this.corpus.files); + init() { + super.init(this.user.data.corpora[this.corpusId].files); } onclick(event) { @@ -22,11 +21,11 @@ class CorpusFileList extends RessourceList { let deleteModalHTML = `

Confirm corpus deletion

-

Do you really want to delete the corpus file ${this.corpus.files[corpusFileId].filename}? It will be permanently deleted!

+

Do you really want to delete the corpus file ${this.user.data.corpora[this.corpusId].files[corpusFileId].filename}? It will be permanently deleted!

Cancel - deleteDelete + deleteDelete
`; let deleteModalParentElement = document.querySelector('main'); @@ -36,10 +35,10 @@ class CorpusFileList extends RessourceList { deleteModal.open(); break; case 'download': - window.location.href = this.corpus.files[corpusFileId].download_url; + window.location.href = this.user.data.corpora[this.corpusId].files[corpusFileId].download_url; break; case 'view': - if (corpusFileId !== '-1') {window.location.href = this.corpus.files[corpusFileId].url;} + if (corpusFileId !== '-1') {window.location.href = this.user.data.corpora[this.corpusId].files[corpusFileId].url;} break; default: console.error(`Unknown action: "${action}"`); @@ -52,13 +51,13 @@ class CorpusFileList extends RessourceList { for (let operation of patch) { switch(operation.op) { case 'add': - // Matches the only paths that should be handled here: /corpora/{this.corpus.id}/files/{corpusFileId} - re = new RegExp('^/corpora/' + this.corpus.id + '/files/(\\d+)$'); + // Matches the only paths that should be handled here: /corpora/{this.user.data.corpora[this.corpusId].id}/files/{corpusFileId} + re = new RegExp('^/corpora/' + this.user.data.corpora[this.corpusId].id + '/files/(\\d+)$'); if (re.test(operation.path)) {this.add(operation.value);} break; case 'remove': // See case add ;) - re = new RegExp('^/corpora/' + this.corpus.id + '/files/(\\d+)$'); + re = new RegExp('^/corpora/' + this.user.data.corpora[this.corpusId].id + '/files/(\\d+)$'); if (re.test(operation.path)) { [match, id] = operation.path.match(re); this.remove(id); @@ -66,7 +65,7 @@ class CorpusFileList extends RessourceList { break; case 'replace': // Matches the only paths that should be handled here: /corpora/{corpusId}/{status || description || title} - re = new RegExp('^/corpora/' + this.corpus.id + '/files/(\\d+)/(author|filename|publishing_year|title)$'); + re = new RegExp('^/corpora/' + this.user.data.corpora[this.corpusId].id + '/files/(\\d+)/(author|filename|publishing_year|title)$'); if (re.test(operation.path)) { [match, id, valueName] = operation.path.match(re); this.replace(id, valueName, operation.value); diff --git a/web/app/static/js/nopaque/RessourceLists/CorpusList.js b/web/app/static/js/nopaque/RessourceLists/CorpusList.js index 13197534..c322c792 100644 --- a/web/app/static/js/nopaque/RessourceLists/CorpusList.js +++ b/web/app/static/js/nopaque/RessourceLists/CorpusList.js @@ -1,13 +1,11 @@ class CorpusList extends RessourceList { constructor(listElement, options = {}) { super(listElement, {...CorpusList.options, ...options}); - this.corpora = undefined; this.user.eventListeners.corpus.addEventListener((eventType, payload) => this.eventHandler(eventType, payload)); } - init(corpora) { - this.corpora = corpora; - super.init(corpora); + init() { + super.init(this.user.data.corpora); } onclick(event) { @@ -21,11 +19,11 @@ class CorpusList extends RessourceList { let deleteModalHTML = `

Confirm corpus deletion

-

Do you really want to delete the corpus ${this.corpora[corpusId].title}? All files will be permanently deleted!

+

Do you really want to delete the corpus ${this.user.data.corpora[corpusId].title}? All files will be permanently deleted!

Cancel - deleteDelete + deleteDelete
`; let deleteModalParentElement = document.querySelector('main'); @@ -35,7 +33,7 @@ class CorpusList extends RessourceList { deleteModal.open(); break; case 'view': - if (corpusId !== '-1') {window.location.href = this.corpora[corpusId].url;} + if (corpusId !== '-1') {window.location.href = this.user.data.corpora[corpusId].url;} break; default: console.error(`Unknown action: ${action}`); diff --git a/web/app/static/js/nopaque/RessourceLists/JobInputList.js b/web/app/static/js/nopaque/RessourceLists/JobInputList.js index 91f54a99..6d3dcd4f 100644 --- a/web/app/static/js/nopaque/RessourceLists/JobInputList.js +++ b/web/app/static/js/nopaque/RessourceLists/JobInputList.js @@ -1,13 +1,12 @@ class JobInputList extends RessourceList { constructor(listElement, options = {}) { super(listElement, {...JobInputList.options, ...options}); - this.job = undefined; - this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), listElement.dataset.jobId); + this.jobId = listElement.dataset.jobId; + this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), this.jobId); } - init(job) { - this.job = job; - super.init(this.job.inputs); + init() { + super.init(this.user.data.jobs[this.jobId].inputs); } onclick(event) { @@ -19,7 +18,7 @@ class JobInputList extends RessourceList { let action = actionButtonElement.dataset.action; switch (action) { case 'download': - window.location.href = this.job.inputs[jobInputId].download_url; + window.location.href = this.user.data.jobs[this.jobId].inputs[jobInputId].download_url; break; default: console.error(`Unknown action: "${action}"`); diff --git a/web/app/static/js/nopaque/RessourceLists/JobList.js b/web/app/static/js/nopaque/RessourceLists/JobList.js index 7f8565a1..08724a3c 100644 --- a/web/app/static/js/nopaque/RessourceLists/JobList.js +++ b/web/app/static/js/nopaque/RessourceLists/JobList.js @@ -1,13 +1,11 @@ class JobList extends RessourceList { constructor(listElement, options = {}) { super(listElement, {...JobList.options, ...options}); - this.jobs = undefined; this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload)); } - init(jobs) { - this.jobs = jobs; - super.init(jobs); + init() { + super.init(this.user.data.jobs); } onclick(event) { diff --git a/web/app/static/js/nopaque/RessourceLists/JobResultList.js b/web/app/static/js/nopaque/RessourceLists/JobResultList.js index 765588a3..44b35675 100644 --- a/web/app/static/js/nopaque/RessourceLists/JobResultList.js +++ b/web/app/static/js/nopaque/RessourceLists/JobResultList.js @@ -1,13 +1,12 @@ class JobResultList extends RessourceList { constructor(listElement, options = {}) { super(listElement, {...JobResultList.options, ...options}); - this.job = undefined; - this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), listElement.dataset.jobId); + this.jobId = listElement.dataset.jobId; + this.user.eventListeners.job.addEventListener((eventType, payload) => this.eventHandler(eventType, payload), this.jobId); } - init(job) { - this.job = job; - super.init(this.job.results); + init() { + super.init(this.user.data.jobs[this.jobId].results); } onclick(event) { @@ -19,7 +18,7 @@ class JobResultList extends RessourceList { let action = actionButtonElement.dataset.action; switch (action) { case 'download': - window.location.href = this.job.results[jobResultId].download_url; + window.location.href = this.user.data.jobs[this.jobId].results[jobResultId].download_url; break; default: console.error(`Unknown action: "${action}"`); @@ -32,8 +31,8 @@ class JobResultList extends RessourceList { for (let operation of patch) { switch(operation.op) { case 'add': - // Matches the only paths that should be handled here: /jobs/{this.job.id}/results/{jobResultId} - re = new RegExp('^/jobs/' + this.job.id + '/results/(\\d+)$'); + // Matches the only paths that should be handled here: /jobs/{this.user.data.jobs[this.jobId].id}/results/{jobResultId} + re = new RegExp('^/jobs/' + this.user.data.jobs[this.jobId].id + '/results/(\\d+)$'); if (re.test(operation.path)) {this.add(operation.value);} break; default: diff --git a/web/app/static/js/nopaque/RessourceLists/QueryResultList.js b/web/app/static/js/nopaque/RessourceLists/QueryResultList.js index d7d0c5a7..ae9b2fb1 100644 --- a/web/app/static/js/nopaque/RessourceLists/QueryResultList.js +++ b/web/app/static/js/nopaque/RessourceLists/QueryResultList.js @@ -1,13 +1,11 @@ class QueryResultList extends RessourceList { constructor(listElement, options = {}) { super(listElement, {...QueryResultList.options, ...options}); - this.queryResults = undefined; this.user.eventListeners.queryResult.addEventListener((eventType, payload) => this.eventHandler(eventType, payload)); } - init(queryResults) { - this.queryResults = queryResults; - super.init(queryResults); + init() { + super.init(this.user.data.query_results); } onclick(event) { diff --git a/web/app/static/js/nopaque/RessourceLists/RessourceList.js b/web/app/static/js/nopaque/RessourceLists/RessourceList.js index d1f7301f..81ad95c0 100644 --- a/web/app/static/js/nopaque/RessourceLists/RessourceList.js +++ b/web/app/static/js/nopaque/RessourceLists/RessourceList.js @@ -45,7 +45,7 @@ class RessourceList { eventHandler(eventType, payload) { switch (eventType) { case 'init': - this.init(payload); + this.init(); break; case 'patch': this.patch(payload);