Some cleanup (css, html, js)

This commit is contained in:
Patrick Jentsch
2021-12-09 12:50:14 +01:00
parent 067273df6d
commit 40bd169101
45 changed files with 36 additions and 6478 deletions

@ -0,0 +1,114 @@
class CorpusDisplay extends RessourceDisplay {
constructor(displayElement) {
super(displayElement);
this.corpusId = displayElement.dataset.corpusId;
}
init(user) {
let corpus;
corpus = user.corpora[this.corpusId];
this.setCreationDate(corpus.creation_date);
this.setDescription(corpus.description);
this.setLastEditedDate(corpus.last_edited_date);
this.setStatus(corpus.status);
this.setTitle(corpus.title);
this.setNumTokens(corpus.num_tokens);
}
usersPatchHandler(patch) {
let filteredPatch;
let operation;
let re;
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}`);
filteredPatch = patch.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
switch(operation.op) {
case 'replace':
re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/last_edited_date$`);
if (re.test(operation.path)) {
this.setLastEditedDate(operation.value);
break;
}
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.users[this.userId].corpora[this.corpusId].max_num_tokens}`
);
}
setDescription(description) {
this.setElements(this.displayElement.querySelectorAll('.corpus-description'), description);
}
setStatus(status) {
let element;
let elements;
this.setElements(this.displayElement.querySelectorAll('.corpus-status'), status);
elements = this.displayElement.querySelectorAll('.analyse-corpus-trigger')
for (element of elements) {
if (['analysing', 'prepared', 'start analysis'].includes(status)) {
element.classList.remove('disabled');
} else {
element.classList.add('disabled');
}
}
elements = this.displayElement.querySelectorAll('.build-corpus-trigger');
for (element of elements) {
if (status === 'unprepared' && Object.values(app.users[this.userId].corpora[this.corpusId].files).length > 0) {
element.classList.remove('disabled');
} else {
element.classList.add('disabled');
}
}
elements = this.displayElement.querySelectorAll('.status');
for (element of elements) {
element.dataset.status = status;
}
elements = this.displayElement.querySelectorAll('.status-spinner');
for (element of elements) {
if (['submitted', 'queued', 'running', 'canceling', 'start analysis', 'stop analysis'].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")
);
}
setLastEditedDate(lastEditedDate) {
this.setElements(
this.displayElement.querySelectorAll('.corpus-end-date'),
new Date(lastEditedDate).toLocaleString("en-US")
);
}
}

@ -0,0 +1,109 @@
class JobDisplay extends RessourceDisplay {
constructor(displayElement) {
super(displayElement);
this.jobId = this.displayElement.dataset.jobId;
}
init(user) {
let job;
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);
}
usersPatchHandler(patch) {
let filteredPatch;
let operation;
let re;
re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}`);
filteredPatch = patch.filter(operation => re.test(operation.path));
for (operation of filteredPatch) {
switch(operation.op) {
case 'replace':
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 element;
let elements;
this.setElements(this.displayElement.querySelectorAll('.job-status'), status);
elements = this.displayElement.querySelectorAll('.status');
for (element of elements) {
element.dataset.status = status;
}
elements = this.displayElement.querySelectorAll('.status-spinner');
for (element of elements) {
if (['complete', 'failed'].includes(status)) {
element.classList.add('hide');
} else {
element.classList.remove('hide');
}
}
elements = this.displayElement.querySelectorAll('.restart-job-trigger');
for (element of elements) {
if (['complete', 'failed'].includes(status)) {
element.classList.remove('hide');
} else {
element.classList.add('hide');
}
}
}
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'), serviceArgs);
}
setServiceVersion(serviceVersion) {
this.setElements(this.displayElement.querySelectorAll('.job-service-version'), serviceVersion);
}
}

@ -0,0 +1,32 @@
class RessourceDisplay {
constructor(displayElement) {
this.displayElement = displayElement;
this.userId = this.displayElement.dataset.userId;
app.addEventListener('users.patch', patch => this.usersPatchHandler(patch));
app.getUserById(this.userId).then(user => this.init(user));
}
init(user) {throw 'Not implemented';}
usersPatchHandler(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) {
let element;
for (element of elements) {
this.setElement(element, value);
}
}
}