mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-11-04 04:12:45 +00:00
Change js structure for displays
This commit is contained in:
Patrick Jentsch
105
app/static/js/resource-displays/corpus-display.js
Normal file
105
app/static/js/resource-displays/corpus-display.js
Normal file
@@ -0,0 +1,105 @@
|
||||
ResourceDisplays.CorpusDisplay = class CorpusDisplay extends ResourceDisplays.BaseDisplay {
|
||||
constructor(displayElement) {
|
||||
super(displayElement);
|
||||
this.corpusId = displayElement.dataset.corpusId;
|
||||
this.displayElement
|
||||
.querySelector('.action-button[data-action="build-request"]')
|
||||
.addEventListener('click', (event) => {
|
||||
requests.corpora.entity.build(this.corpusId);
|
||||
});
|
||||
}
|
||||
|
||||
init(user) {
|
||||
let corpus = user.corpora[this.corpusId];
|
||||
this.setCreationDate(corpus.creation_date);
|
||||
this.setDescription(corpus.description);
|
||||
this.setStatus(corpus.status);
|
||||
this.setTitle(corpus.title);
|
||||
this.setNumTokens(corpus.num_tokens);
|
||||
}
|
||||
|
||||
onPatch(patch) {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}`);
|
||||
let filteredPatch = patch.filter(operation => re.test(operation.path));
|
||||
for (let operation of filteredPatch) {
|
||||
switch(operation.op) {
|
||||
case 'remove': {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}$`);
|
||||
if (re.test(operation.path)) {
|
||||
window.location.href = '/dashboard#corpora';
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'replace': {
|
||||
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/num_tokens`);
|
||||
if (re.test(operation.path)) {
|
||||
this.setNumTokens(operation.value);
|
||||
break;
|
||||
}
|
||||
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/status$`);
|
||||
if (re.test(operation.path)) {
|
||||
this.setStatus(operation.value);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTitle(title) {
|
||||
this.setElements(this.displayElement.querySelectorAll('.corpus-title'), title);
|
||||
}
|
||||
|
||||
setNumTokens(numTokens) {
|
||||
this.setElements(
|
||||
this.displayElement.querySelectorAll('.corpus-token-ratio'),
|
||||
`${numTokens}/${app.data.users[this.userId].corpora[this.corpusId].max_num_tokens}`
|
||||
);
|
||||
}
|
||||
|
||||
setDescription(description) {
|
||||
this.setElements(this.displayElement.querySelectorAll('.corpus-description'), description);
|
||||
}
|
||||
|
||||
setStatus(status) {
|
||||
let elements = this.displayElement.querySelectorAll('.action-button[data-action="analyze"]');
|
||||
for (let element of elements) {
|
||||
if (['BUILT', 'STARTING_ANALYSIS_SESSION', 'RUNNING_ANALYSIS_SESSION', 'CANCELING_ANALYSIS_SESSION'].includes(status)) {
|
||||
element.classList.remove('disabled');
|
||||
} else {
|
||||
element.classList.add('disabled');
|
||||
}
|
||||
}
|
||||
elements = this.displayElement.querySelectorAll('.action-button[data-action="build-request"]');
|
||||
for (let element of elements) {
|
||||
if (['UNPREPARED', 'FAILED'].includes(status) && Object.values(app.data.users[this.userId].corpora[this.corpusId].files).length > 0) {
|
||||
element.classList.remove('disabled');
|
||||
} else {
|
||||
element.classList.add('disabled');
|
||||
}
|
||||
}
|
||||
elements = this.displayElement.querySelectorAll('.corpus-status');
|
||||
for (let element of elements) {
|
||||
element.dataset.status = status;
|
||||
}
|
||||
elements = this.displayElement.querySelectorAll('.corpus-status-spinner');
|
||||
for (let element of elements) {
|
||||
if (['SUBMITTED', 'QUEUED', 'BUILDING', 'STARTING_ANALYSIS_SESSION', 'CANCELING_ANALYSIS_SESSION'].includes(status)) {
|
||||
element.classList.remove('hide');
|
||||
} else {
|
||||
element.classList.add('hide');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setCreationDate(creationDate) {
|
||||
this.setElements(
|
||||
this.displayElement.querySelectorAll('.corpus-creation-date'),
|
||||
new Date(creationDate).toLocaleString("en-US")
|
||||
);
|
||||
}
|
||||
}
|
||||
46
app/static/js/resource-displays/index.js
Normal file
46
app/static/js/resource-displays/index.js
Normal file
@@ -0,0 +1,46 @@
|
||||
var ResourceDisplays = {};
|
||||
|
||||
ResourceDisplays.BaseDisplay = class BaseDisplay {
|
||||
constructor(displayElement) {
|
||||
this.displayElement = displayElement;
|
||||
this.userId = this.displayElement.dataset.userId;
|
||||
this.isInitialized = false;
|
||||
if (this.userId) {
|
||||
app.subscribeUser(this.userId)
|
||||
.then((response) => {
|
||||
app.socket.on('PATCH', (patch) => {
|
||||
if (this.isInitialized) {this.onPatch(patch);}
|
||||
});
|
||||
});
|
||||
app.getUser(this.userId)
|
||||
.then((user) => {
|
||||
this.init(user);
|
||||
this.isInitialized = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
init(user) {throw 'Not implemented';}
|
||||
|
||||
onPatch(patch) {throw 'Not implemented';}
|
||||
|
||||
setElement(element, value) {
|
||||
switch (element.tagName) {
|
||||
case 'INPUT': {
|
||||
element.value = value;
|
||||
M.updateTextFields();
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
element.innerText = value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setElements(elements, value) {
|
||||
for (let element of elements) {
|
||||
this.setElement(element, value);
|
||||
}
|
||||
}
|
||||
};
|
||||
126
app/static/js/resource-displays/job-display.js
Normal file
126
app/static/js/resource-displays/job-display.js
Normal file
@@ -0,0 +1,126 @@
|
||||
ResourceDisplays.JobDisplay = class JobDisplay extends ResourceDisplays.BaseDisplay {
|
||||
constructor(displayElement) {
|
||||
super(displayElement);
|
||||
this.jobId = this.displayElement.dataset.jobId;
|
||||
}
|
||||
|
||||
init(user) {
|
||||
let job = user.jobs[this.jobId];
|
||||
this.setCreationDate(job.creation_date);
|
||||
this.setEndDate(job.creation_date);
|
||||
this.setDescription(job.description);
|
||||
this.setService(job.service);
|
||||
this.setServiceArgs(job.service_args);
|
||||
this.setServiceVersion(job.service_version);
|
||||
this.setStatus(job.status);
|
||||
this.setTitle(job.title);
|
||||
}
|
||||
|
||||
onPatch(patch) {
|
||||
let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}`);
|
||||
let filteredPatch = patch.filter(operation => re.test(operation.path));
|
||||
for (let operation of filteredPatch) {
|
||||
switch(operation.op) {
|
||||
case 'remove': {
|
||||
let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}$`);
|
||||
if (re.test(operation.path)) {
|
||||
window.location.href = '/dashboard#jobs';
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'replace': {
|
||||
let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/end_date$`);
|
||||
if (re.test(operation.path)) {
|
||||
this.setEndDate(operation.value);
|
||||
break;
|
||||
}
|
||||
re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/status$`);
|
||||
if (re.test(operation.path)) {
|
||||
this.setStatus(operation.value);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTitle(title) {
|
||||
this.setElements(this.displayElement.querySelectorAll('.job-title'), title);
|
||||
}
|
||||
|
||||
setDescription(description) {
|
||||
this.setElements(this.displayElement.querySelectorAll('.job-description'), description);
|
||||
}
|
||||
|
||||
setStatus(status) {
|
||||
let elements = this.displayElement.querySelectorAll('.job-status');
|
||||
for (let element of elements) {
|
||||
element.dataset.status = status;
|
||||
}
|
||||
elements = this.displayElement.querySelectorAll('.job-status-spinner');
|
||||
for (let element of elements) {
|
||||
if (['COMPLETED', 'FAILED'].includes(status)) {
|
||||
element.classList.add('hide');
|
||||
} else {
|
||||
element.classList.remove('hide');
|
||||
}
|
||||
}
|
||||
elements = this.displayElement.querySelectorAll('.job-log-trigger');
|
||||
for (let element of elements) {
|
||||
if (['COMPLETED', 'FAILED'].includes(status)) {
|
||||
element.classList.remove('hide');
|
||||
} else {
|
||||
element.classList.add('hide');
|
||||
}
|
||||
}
|
||||
elements = this.displayElement.querySelectorAll('.action-button[data-action="get-log-request"]');
|
||||
for (let element of elements) {
|
||||
if (['COMPLETED', 'FAILED'].includes(status)) {
|
||||
element.classList.remove('disabled');
|
||||
} else {
|
||||
element.classList.add('disabled');
|
||||
}
|
||||
}
|
||||
elements = this.displayElement.querySelectorAll('.action-button[data-action="restart-request"]');
|
||||
for (let element of elements) {
|
||||
if (status === 'FAILED') {
|
||||
element.classList.remove('disabled');
|
||||
} else {
|
||||
element.classList.add('disabled');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setCreationDate(creationDate) {
|
||||
this.setElements(
|
||||
this.displayElement.querySelectorAll('.job-creation-date'),
|
||||
new Date(creationDate).toLocaleString('en-US')
|
||||
);
|
||||
}
|
||||
|
||||
setEndDate(endDate) {
|
||||
this.setElements(
|
||||
this.displayElement.querySelectorAll('.job-end-date'),
|
||||
new Date(endDate).toLocaleString('en-US')
|
||||
);
|
||||
}
|
||||
|
||||
setService(service) {
|
||||
this.setElements(this.displayElement.querySelectorAll('.job-service'), service);
|
||||
}
|
||||
|
||||
setServiceArgs(serviceArgs) {
|
||||
this.setElements(
|
||||
this.displayElement.querySelectorAll('.job-service-args'),
|
||||
JSON.stringify(serviceArgs)
|
||||
);
|
||||
}
|
||||
|
||||
setServiceVersion(serviceVersion) {
|
||||
this.setElements(this.displayElement.querySelectorAll('.job-service-version'), serviceVersion);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user