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

Job output list implementation

Browse Source
This commit is contained in:
Inga Kirschnick
2024-03-14 10:08:52 +01:00
parent 82d6f6003f
commit 71c0ddf515
4 changed files with 153 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
app/static/js/resource-lists/job-output-list.js Normal file
View File

@ -0,0 +1,137 @@
nopaque.resource_lists.JobOutputList = class JobOutputList extends nopaque.resource_lists.ResourceList {
static htmlClass = 'job-output-list';
constructor(listContainerElement, options = {}) {
super(listContainerElement, options);
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
this.isInitialized = false;
this.userId = listContainerElement.dataset.userId;
this.jobOutput = listContainerElement.dataset.jobOutput;
this.jobIds = listContainerElement.dataset.jobIds;
if (this.userId === undefined) {return;}
app.subscribeUser(this.userId).then((response) => {
app.socket.on('PATCH', (patch) => {
if (this.isInitialized) {this.onPatch(patch);}
});
});
app.getUser(this.userId).then((user) => {
let jobIds = JSON.parse(this.jobIds.replace(/'/g, '"'));
let job_results = {};
for (let jobId of jobIds) {
for (let jobResult of Object.values(user.jobs[jobId].results)) {
if (jobResult.mimetype === 'application/pdf') {
job_results[jobResult.id] = jobResult;
job_results[jobResult.id].description = user.jobs[jobId].description;
job_results[jobResult.id].title = user.jobs[jobId].title;
}
}
}
this.add(Object.values(job_results));
this.isInitialized = true;
});
}
get item() {
return `
<tr class="list-item clickable hoverable">
<td><span class="title"></span></td>
<td><span class="description"></span></td>
<td><span class="filename"></span></td>
<td class="right-align">
<a class="list-action-trigger btn-flat waves-effect waves-light" data-list-action="add"><i class="material-icons">add</i></a>
</td>
</tr>
`.trim();
}
get valueNames() {
return [
{data: ['id']},
{data: ['creation-date']},
'title',
'description',
'filename'
];
}
initListContainerElement() {
if (!this.listContainerElement.hasAttribute('id')) {
this.listContainerElement.id = nopaque.Utils.generateElementId('job-output-list-');
}
let listSearchElementId = nopaque.Utils.generateElementId(`${this.listContainerElement.id}-search-`);
this.listContainerElement.innerHTML = `
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="${listSearchElementId}" class="search" type="text"></input>
<label for="${listSearchElementId}">Search job output</label>
</div>
<table>
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Filename</th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
`;
}
mapResourceToValue(jobOutput) {
console.log(jobOutput);
return {
'id': jobOutput.id,
'creation-date': jobOutput.creationDate,
'title': jobOutput.title,
'description': jobOutput.description,
'filename': jobOutput.filename
};
}
sort() {
this.listjs.sort('title', {order: 'asc'});
}
onClick(event) {
let listItemElement = event.target.closest('.list-item[data-id]');
if (listItemElement === null) {return;}
let itemId = listItemElement.dataset.id;
let listActionElement = event.target.closest('.list-action-trigger[data-list-action]');
let listAction = listActionElement === null ? 'add' : listActionElement.dataset.listAction;
switch (listAction) {
case 'add': {
listActionElement.querySelector('i').textContent = 'done';
listActionElement.dataset.listAction = 'remove';
break;
}
case 'remove': {
listActionElement.querySelector('i').textContent = 'add';
listActionElement.dataset.listAction = 'add';
break;
}
default: {
break;
}
}
}
// onPatch(patch) {
// let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([A-Za-z0-9]*)`);
// let filteredPatch = patch.filter(operation => re.test(operation.path));
// for (let operation of filteredPatch) {
// switch(operation.op) {
// case 'add': {
// let re = new RegExp(`^/users/${this.userId}/jobs/${this.jobId}/results/([A-Za-z0-9]*)$`);
// if (re.test(operation.path)) {this.add(operation.value);}
// break;
// }
// default: {
// break;
// }
// }
// }
// }
};