mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-16 02:50:40 +00:00
Huge List class update
This commit is contained in:
Patrick Jentsch
107
app/static/js/resource-lists/admin-user-list.js
Normal file
107
app/static/js/resource-lists/admin-user-list.js
Normal file
@ -0,0 +1,107 @@
|
||||
ResourceLists.AdminUserList = class AdminUserList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'admin-user-list';
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
super(listContainerElement, options);
|
||||
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td><span class="id-1"></span></td>
|
||||
<td><span class="username"></span></td>
|
||||
<td><span class="email"></span></td>
|
||||
<td><span class="last-seen"></span></td>
|
||||
<td><span class="role"></span></td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete"><i class="material-icons">delete</i></a>
|
||||
<a class="list-action-trigger btn-floating waves-effect waves-light" data-list-action="edit"><i class="material-icons">edit</i></a>
|
||||
<a class="list-action-trigger btn-floating waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['member-since']},
|
||||
'email',
|
||||
'id-1',
|
||||
'last-seen',
|
||||
'role',
|
||||
'username'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('user-list-');
|
||||
}
|
||||
let listSearchElementId = 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 user</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Last seen</th>
|
||||
<th>Role</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(user) {
|
||||
return {
|
||||
'id': user.id,
|
||||
'id-1': user.id,
|
||||
'username': user.username,
|
||||
'email': user.email,
|
||||
'last-seen': new Date(user.last_seen).toLocaleString('en-US'),
|
||||
'member-since': user.member_since,
|
||||
'role': user.role.name
|
||||
};
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('member-since', {order: 'desc'});
|
||||
}
|
||||
|
||||
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 ? 'view' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'delete': {
|
||||
Requests.users.entity.delete(itemId);
|
||||
if (itemId === currentUserId) {window.location.href = '/';}
|
||||
break;
|
||||
}
|
||||
case 'edit': {
|
||||
window.location.href = `/admin/users/${itemId}/edit`;
|
||||
break;
|
||||
}
|
||||
case 'view': {
|
||||
window.location.href = `/admin/users/${itemId}`;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
368
app/static/js/resource-lists/corpus-file-list.js
Normal file
368
app/static/js/resource-lists/corpus-file-list.js
Normal file
@ -0,0 +1,368 @@
|
||||
ResourceLists.CorpusFileList = class CorpusFileList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'corpus-file-list';
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
super(listContainerElement, options);
|
||||
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
|
||||
document.querySelectorAll('.selection-action-trigger[data-selection-action]').forEach((element) => {
|
||||
element.addEventListener('click', (event) => {this.onSelectionAction(event)});
|
||||
});
|
||||
this.isInitialized = false;
|
||||
this.selectedItemIds = new Set();
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
this.corpusId = listContainerElement.dataset.corpusId;
|
||||
this.hasPermissionView = listContainerElement.dataset?.hasPermissionView == 'true' || false;
|
||||
this.hasPermissionManageFiles = listContainerElement.dataset?.hasPermissionManageFiles == 'true' || false;
|
||||
if (this.userId === undefined || this.corpusId === 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) => {
|
||||
this.add(Object.values(user.corpora[this.corpusId].files || user.followed_corpora[this.corpusId].files));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return (values) => {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td>
|
||||
<label class="list-action-trigger ${this.hasPermissionView ? '' : 'hide'}" data-list-action="select">
|
||||
<input class="select-checkbox" type="checkbox">
|
||||
<span class="disable-on-click"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td><span class="filename"></span></td>
|
||||
<td><span class="author"></span></td>
|
||||
<td><span class="title"></span></td>
|
||||
<td><span class="publishing-year"></span></td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating red waves-effect waves-light ${this.hasPermissionManageFiles ? '' : 'hide'}" data-list-action="delete"><i class="material-icons">delete</i></a>
|
||||
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light ${this.hasPermissionView ? '' : 'hide'}" data-list-action="download" data-service="corpus-analysis"><i class="material-icons">file_download</i></a>
|
||||
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light ${this.hasPermissionManageFiles ? '' : 'hide'}" data-list-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
}
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['creation-date']},
|
||||
'author',
|
||||
'filename',
|
||||
'publishing-year',
|
||||
'title'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('corpus-file-list-');
|
||||
}
|
||||
let listSearchElementId = 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 corpus file</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<label class="disable-on-click selection-action-trigger ${this.listContainerElement.dataset?.hasPermissionView == 'true' ? '' : 'hide'}" data-selection-action="select-all">
|
||||
<input class="select-all-checkbox" type="checkbox">
|
||||
<span class="disable-on-click"></span>
|
||||
</label>
|
||||
</th>
|
||||
<th>Filename</th>
|
||||
<th>Author</th>
|
||||
<th>Title</th>
|
||||
<th>Publishing year</th>
|
||||
<th class="right-align">
|
||||
<a class="selection-action-trigger btn-floating red waves-effect waves-light hide" data-selection-action="delete"><i class="material-icons">delete</i></a>
|
||||
<a class="selection-action-trigger btn-floating service-color darken waves-effect waves-light hide" data-selection-action="download" data-service="corpus-analysis"><i class="material-icons">file_download</i></a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(corpusFile) {
|
||||
return {
|
||||
'id': corpusFile.id,
|
||||
'author': corpusFile.author,
|
||||
'creation-date': corpusFile.creation_date,
|
||||
'filename': corpusFile.filename,
|
||||
'publishing-year': corpusFile.publishing_year,
|
||||
'title': corpusFile.title
|
||||
};
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('creation-date', {order: 'desc'});
|
||||
}
|
||||
|
||||
onClick(event) {
|
||||
if (event.target.closest('.disable-on-click') !== null) {return;}
|
||||
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 ? 'view' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'delete': {
|
||||
let values = this.listjs.get('id', itemId)[0].values();
|
||||
let modalElement = Utils.HTMLToElement(
|
||||
`
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm Corpus File deletion</h4>
|
||||
<p>Do you really want to delete the Corpus File <b>${values.title}</b>? All files will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
document.querySelector('#modals').appendChild(modalElement);
|
||||
let modal = M.Modal.init(
|
||||
modalElement,
|
||||
{
|
||||
dismissible: false,
|
||||
onCloseEnd: () => {
|
||||
modal.destroy();
|
||||
modalElement.remove();
|
||||
}
|
||||
}
|
||||
);
|
||||
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
||||
confirmElement.addEventListener('click', (event) => {
|
||||
if (currentUserId != this.userId) {
|
||||
Requests.corpora.entity.files.ent.delete(this.corpusId, itemId)
|
||||
.then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
} else {
|
||||
Requests.corpora.entity.files.ent.delete(this.corpusId, itemId)
|
||||
}
|
||||
});
|
||||
modal.open();
|
||||
break;
|
||||
}
|
||||
case 'download': {
|
||||
window.location.href = `/corpora/${this.corpusId}/files/${itemId}/download`;
|
||||
break;
|
||||
}
|
||||
case 'view': {
|
||||
window.location.href = `/corpora/${this.corpusId}/files/${itemId}`;
|
||||
break;
|
||||
}
|
||||
case 'select': {
|
||||
if (event.target.checked) {
|
||||
this.selectedItemIds.add(itemId);
|
||||
} else {
|
||||
this.selectedItemIds.delete(itemId);
|
||||
}
|
||||
this.renderingItemSelection();
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onSelectionAction(event) {
|
||||
let selectionActionElement = event.target.closest('.selection-action-trigger[data-selection-action]');
|
||||
let selectionAction = selectionActionElement.dataset.selectionAction;
|
||||
let items = this.listjs.items;
|
||||
let selectableItems = Array.from(items)
|
||||
.filter(item => item.elm)
|
||||
.map(item => item.elm.querySelector('.select-checkbox[type="checkbox"]'));
|
||||
|
||||
switch (selectionAction) {
|
||||
case 'select-all': {
|
||||
let selectedIds = new Set(Array.from(items)
|
||||
.map(item => item.values().id))
|
||||
if (event.target.checked !== undefined) {
|
||||
if (event.target.checked) {
|
||||
selectableItems.forEach(selectableItem => selectableItem.checked = true);
|
||||
this.selectedItemIds = selectedIds;
|
||||
} else {
|
||||
selectableItems.forEach(checkbox => checkbox.checked = false);
|
||||
this.selectedItemIds = new Set([...this.selectedItemIds].filter(id => !selectedIds.has(id)));
|
||||
}
|
||||
this.renderingItemSelection();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'delete': {
|
||||
let modalElement = Utils.HTMLToElement(
|
||||
`
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm Corpus File deletion</h4>
|
||||
<p>Do you really want to delete the Corpus Files?</p>
|
||||
<ul id="selected-items-list"></ul>
|
||||
<p>All files will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
document.querySelector('#modals').appendChild(modalElement);
|
||||
let itemList = document.querySelector('#selected-items-list');
|
||||
this.selectedItemIds.forEach(selectedItemId => {
|
||||
let listItem = this.listjs.get('id', selectedItemId)[0].elm;
|
||||
let values = this.listjs.get('id', listItem.dataset.id)[0].values();
|
||||
let itemElement = Utils.HTMLToElement(`<li> - ${values.title}</li>`);
|
||||
itemList.appendChild(itemElement);
|
||||
});
|
||||
let modal = M.Modal.init(
|
||||
modalElement,
|
||||
{
|
||||
dismissible: false,
|
||||
onCloseEnd: () => {
|
||||
modal.destroy();
|
||||
modalElement.remove();
|
||||
}
|
||||
}
|
||||
);
|
||||
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
||||
confirmElement.addEventListener('click', (event) => {
|
||||
this.selectedItemIds.forEach(selectedItemId => {
|
||||
if (currentUserId != this.userId) {
|
||||
Requests.corpora.entity.files.ent.delete(this.corpusId, selectedItemId)
|
||||
.then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
} else {
|
||||
Requests.corpora.entity.files.ent.delete(this.corpusId, selectedItemId);
|
||||
}
|
||||
});
|
||||
this.selectedItemIds.clear();
|
||||
this.renderingItemSelection();
|
||||
});
|
||||
modal.open();
|
||||
break;
|
||||
}
|
||||
case 'download': {
|
||||
this.selectedItemIds.forEach(selectedItemId => {
|
||||
let downloadLink = document.createElement('a');
|
||||
downloadLink.href = `/corpora/${this.corpusId}/files/${selectedItemId}/download`;
|
||||
downloadLink.download = '';
|
||||
downloadLink.click();
|
||||
});
|
||||
selectableItems.forEach(checkbox => checkbox.checked = false);
|
||||
this.selectedItemIds.clear();
|
||||
this.renderingItemSelection();
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderingItemSelection() {
|
||||
let selectionActionButtons;
|
||||
if (this.hasPermissionManageFiles) {
|
||||
selectionActionButtons = document.querySelectorAll('.selection-action-trigger:not([data-selection-action="select-all"])');
|
||||
} else if (this.hasPermissionView) {
|
||||
selectionActionButtons = document.querySelectorAll('.selection-action-trigger:not([data-selection-action="select-all"]):not([data-selection-action="delete"])');
|
||||
}
|
||||
let selectableItems = this.listjs.items;
|
||||
let actionButtons = [];
|
||||
|
||||
Object.values(selectableItems).forEach(selectableItem => {
|
||||
if (selectableItem.elm) {
|
||||
let checkbox = selectableItem.elm.querySelector('.select-checkbox[type="checkbox"]');
|
||||
if (checkbox.checked) {
|
||||
selectableItem.elm.classList.add('grey', 'lighten-3');
|
||||
} else {
|
||||
selectableItem.elm.classList.remove('grey', 'lighten-3');
|
||||
}
|
||||
let itemActionButtons = [];
|
||||
if (this.hasPermissionManageFiles) {
|
||||
itemActionButtons = selectableItem.elm.querySelectorAll('.list-action-trigger:not([data-list-action="select"])');
|
||||
} else if (this.hasPermissionView) {
|
||||
itemActionButtons = selectableItem.elm.querySelectorAll('.list-action-trigger:not([data-list-action="select"]):not([data-list-action="delete"]):not([data-list-action="view"])');
|
||||
}
|
||||
itemActionButtons.forEach(itemActionButton => {
|
||||
actionButtons.push(itemActionButton);
|
||||
});
|
||||
}
|
||||
});
|
||||
// Hide item action buttons if > 0 item is selected and show selection action buttons
|
||||
if (this.selectedItemIds.size > 0) {
|
||||
selectionActionButtons.forEach(selectionActionButton => {
|
||||
selectionActionButton.classList.remove('hide');
|
||||
});
|
||||
actionButtons.forEach(actionButton => {
|
||||
actionButton.classList.add('hide');
|
||||
});
|
||||
} else {
|
||||
selectionActionButtons.forEach(selectionActionButton => {
|
||||
selectionActionButton.classList.add('hide');
|
||||
});
|
||||
actionButtons.forEach(actionButton => {
|
||||
actionButton.classList.remove('hide');
|
||||
});
|
||||
}
|
||||
|
||||
// Check select all checkbox if all items are selected
|
||||
let selectAllCheckbox = document.querySelector('.select-all-checkbox[type="checkbox"]');
|
||||
if (selectableItems.length === this.selectedItemIds.size && selectAllCheckbox.checked === false) {
|
||||
selectAllCheckbox.checked = true;
|
||||
} else if (selectableItems.length !== this.selectedItemIds.size && selectAllCheckbox.checked === true) {
|
||||
selectAllCheckbox.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
onPatch(patch) {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([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}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
}
|
||||
case 'remove': {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, corpusFileId] = operation.path.match(re);
|
||||
this.remove(corpusFileId);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'replace': {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/files/([A-Za-z0-9]*)/(author|filename|publishing_year|title)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, corpusFileId, valueName] = operation.path.match(re);
|
||||
this.replace(corpusFileId, valueName.replace('_', '-'), operation.value);
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
195
app/static/js/resource-lists/corpus-follower-list.js
Normal file
195
app/static/js/resource-lists/corpus-follower-list.js
Normal file
@ -0,0 +1,195 @@
|
||||
ResourceLists.CorpusFollowerList = class CorpusFollowerList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'corpus-follower-list';
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
super(listContainerElement, options);
|
||||
this.listjs.on('updated', () => {
|
||||
M.FormSelect.init(this.listjs.list.querySelectorAll('.list-item select'));
|
||||
});
|
||||
this.listjs.list.addEventListener('change', (event) => {this.onChange(event)});
|
||||
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
|
||||
this.isInitialized = false;
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
this.corpusId = listContainerElement.dataset.corpusId;
|
||||
if (this.userId === undefined || this.corpusId === 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 corpusFollowerAssociations = Object.values(user.corpora[this.corpusId].corpus_follower_associations);
|
||||
// let filteredList = corpusFollowerAssociations.filter(association => association.follower.id != currentUserId);
|
||||
// this.add(filteredList);
|
||||
this.add(Object.values(user.corpora[this.corpusId].corpus_follower_associations));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return (values) => {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td><img alt="follower-avatar" class="circle responsive-img follower-avatar" style="width:50%"></td>
|
||||
<td><b class="follower-username"><b></td>
|
||||
<td>
|
||||
<span class="follower-full-name"></span>
|
||||
<br>
|
||||
<i class="follower-about-me"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="input-field disable-on-click list-action-trigger" data-list-action="update-role">
|
||||
<select ${values['follower-id'] === currentUserId ? 'disabled' : ''}>
|
||||
<option value="Viewer" ${values['role-name'] === 'Viewer' ? 'selected' : ''}>Viewer</option>
|
||||
<option value="Contributor" ${values['role-name'] === 'Contributor' ? 'selected' : ''}>Contributor</option>
|
||||
<option value="Administrator" ${values['role-name'] === 'Administrator' ? 'selected' : ''}>Administrator</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="unfollow-request"><i class="material-icons">delete</i></a>
|
||||
<a class="list-action-trigger btn-floating darken waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
}
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['follower-id']},
|
||||
{name: 'follower-avatar', attr: 'src'},
|
||||
'follower-username',
|
||||
'follower-about-me',
|
||||
'follower-full-name'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('corpus-follower-list-');
|
||||
}
|
||||
let listSearchElementId = 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 corpus follower</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:15%;"></th>
|
||||
<th>Username</th>
|
||||
<th>User details</th>
|
||||
<th>Role</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(corpusFollowerAssociation) {
|
||||
return {
|
||||
'id': corpusFollowerAssociation.id,
|
||||
'follower-id': corpusFollowerAssociation.follower.id,
|
||||
'follower-avatar': corpusFollowerAssociation.follower.avatar ? `/users/${corpusFollowerAssociation.follower.id}/avatar` : '/static/images/user_avatar.png',
|
||||
'follower-username': corpusFollowerAssociation.follower.username,
|
||||
'follower-full-name': corpusFollowerAssociation.follower.full_name ? corpusFollowerAssociation.follower.full_name : '',
|
||||
'follower-about-me': corpusFollowerAssociation.follower.about_me ? corpusFollowerAssociation.follower.about_me : '',
|
||||
'role-name': corpusFollowerAssociation.role.name
|
||||
};
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('username', {order: 'desc'});
|
||||
}
|
||||
|
||||
onChange(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]');
|
||||
if (listActionElement === null) {return;}
|
||||
let listAction = listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'update-role': {
|
||||
let followerId = listItemElement.dataset.followerId;
|
||||
let roleName = event.target.value;
|
||||
Requests.corpora.entity.followers.entity.role.update(this.corpusId, followerId, roleName);
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onClick(event) {
|
||||
if (event.target.closest('.disable-on-click') !== null) {return;}
|
||||
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 ? 'view' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'unfollow-request': {
|
||||
let followerId = listItemElement.dataset.followerId;
|
||||
if (currentUserId != this.userId) {
|
||||
Requests.corpora.entity.followers.entity.delete(this.corpusId, followerId)
|
||||
.then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
} else {
|
||||
Requests.corpora.entity.followers.entity.delete(this.corpusId, followerId);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'view': {
|
||||
let followerId = listItemElement.dataset.followerId;
|
||||
window.location.href = `/users/${followerId}`;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onPatch(patch) {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/corpus_follower_associations/([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}/corpora/${this.corpusId}/corpus_follower_associations/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
}
|
||||
case 'remove': {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/corpus_follower_associations/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, jobId] = operation.path.match(re);
|
||||
this.remove(jobId);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'replace': {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/${this.corpusId}/corpus_follower_associations/([A-Za-z0-9]*)/role$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, jobId, valueName] = operation.path.match(re);
|
||||
this.replace(jobId, valueName, operation.value);
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
369
app/static/js/resource-lists/corpus-list.js
Normal file
369
app/static/js/resource-lists/corpus-list.js
Normal file
@ -0,0 +1,369 @@
|
||||
ResourceLists.CorpusList = class CorpusList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'corpus-list';
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
super(listContainerElement, options);
|
||||
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
|
||||
document.querySelectorAll('.corpus-list-selection-action-trigger[data-selection-action]').forEach((element) => {
|
||||
element.addEventListener('click', (event) => {this.onSelectionAction(event)});
|
||||
});
|
||||
this.isInitialized = false
|
||||
this.selectedItemIds = new Set();
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
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) => {
|
||||
this.add(this.aggregateData(user));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
}
|
||||
|
||||
aggregateData(user) {
|
||||
const aggregatedData = [];
|
||||
for (let corpus of Object.values(user.corpora)) {
|
||||
aggregatedData.push(
|
||||
{
|
||||
'id': corpus.id,
|
||||
'creation-date': corpus.creation_date,
|
||||
'description': corpus.description,
|
||||
'status': corpus.status,
|
||||
'title': corpus.title,
|
||||
'owner': user.username,
|
||||
'is-owner': true,
|
||||
'current-user-is-following': false
|
||||
}
|
||||
);
|
||||
}
|
||||
for (let cfa of Object.values(user.corpus_follower_associations)) {
|
||||
aggregatedData.push(
|
||||
{
|
||||
'id': cfa.corpus.id,
|
||||
'creation-date': cfa.corpus.creation_date,
|
||||
'description': cfa.corpus.description,
|
||||
'status': cfa.corpus.status,
|
||||
'title': cfa.corpus.title,
|
||||
'owner': cfa.corpus.user.username,
|
||||
'is-owner': false,
|
||||
'current-user-is-following': true
|
||||
}
|
||||
);
|
||||
}
|
||||
return aggregatedData;
|
||||
}
|
||||
|
||||
// #region Mandatory getters and methods to implement
|
||||
get item() {
|
||||
return (values) => {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td>
|
||||
<label class="list-action-trigger" data-list-action="select">
|
||||
<input class="select-checkbox" type="checkbox">
|
||||
<span class="disable-on-click"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td><b class="title"></b><br><i class="description"></i></td>
|
||||
<td><span class="owner"></span></td>
|
||||
<td><span class="status badge new corpus-status-color corpus-status-text" data-badge-caption=""></span></td>
|
||||
<td>${values['current-user-is-following'] ? '<span><i class="left material-icons">visibility</i>Following</span>' : ''}</td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
|
||||
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light" data-list-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
};
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['creation-date']},
|
||||
{name: 'status', attr: 'data-status'},
|
||||
'description',
|
||||
'title',
|
||||
'owner',
|
||||
'current-user-is-following'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('corpus-list-');
|
||||
}
|
||||
let listSearchElementId = 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 Corpus</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<label class="corpus-list-selection-action-trigger" data-selection-action="select-all">
|
||||
<input class="corpus-list-select-all-checkbox" type="checkbox">
|
||||
<span></span>
|
||||
</label>
|
||||
</th>
|
||||
<th>Title and Description</th>
|
||||
<th>Owner</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
<th class="right-align">
|
||||
<a class="corpus-list-selection-action-trigger btn-floating red waves-effect waves-light hide" data-selection-action="delete"><i class="material-icons">delete</i></a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('creation-date', {order: 'desc'});
|
||||
}
|
||||
|
||||
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 ? 'view' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'delete-request': {
|
||||
let values = this.listjs.get('id', itemId)[0].values();
|
||||
let modalElement = Utils.HTMLToElement(
|
||||
`
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm Corpus deletion</h4>
|
||||
<p>Do you really want to ${values['is-owner'] ? 'delete' : 'unfollow'} the Corpus <b>${values.title}</b>? ${values['is-owner'] ? 'All files will be permanently deleted!' : ''}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
document.querySelector('#modals').appendChild(modalElement);
|
||||
let modal = M.Modal.init(
|
||||
modalElement,
|
||||
{
|
||||
dismissible: false,
|
||||
onCloseEnd: () => {
|
||||
modal.destroy();
|
||||
modalElement.remove();
|
||||
}
|
||||
}
|
||||
);
|
||||
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
||||
confirmElement.addEventListener('click', (event) => {
|
||||
if (!values['is-owner']) {
|
||||
Requests.corpora.entity.followers.entity.delete(itemId, currentUserId)
|
||||
.then((response) => {
|
||||
window.location.reload();
|
||||
});
|
||||
} else {
|
||||
Requests.corpora.entity.delete(itemId);
|
||||
}
|
||||
});
|
||||
modal.open();
|
||||
break;
|
||||
}
|
||||
case 'view': {
|
||||
window.location.href = `/corpora/${itemId}`;
|
||||
break;
|
||||
}
|
||||
case 'select': {
|
||||
if (event.target.checked) {
|
||||
this.selectedItemIds.add(itemId);
|
||||
} else {
|
||||
this.selectedItemIds.delete(itemId);
|
||||
}
|
||||
this.renderingItemSelection();
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onSelectionAction(event) {
|
||||
let selectionActionElement = event.target.closest('.corpus-list-selection-action-trigger[data-selection-action]');
|
||||
let selectionAction = selectionActionElement.dataset.selectionAction;
|
||||
let items = Array.from(this.listjs.items);
|
||||
let selectableItems = Array.from(items)
|
||||
.filter(item => item.elm)
|
||||
.map(item => item.elm.querySelector('.select-checkbox[type="checkbox"]'));
|
||||
|
||||
switch (selectionAction) {
|
||||
case 'select-all': {
|
||||
let selectedIds = new Set(Array.from(items)
|
||||
.map(item => item.values().id))
|
||||
if (event.target.checked !== undefined) {
|
||||
if (event.target.checked) {
|
||||
selectableItems.forEach(selectableItem => selectableItem.checked = true);
|
||||
this.selectedItemIds = selectedIds;
|
||||
} else {
|
||||
selectableItems.forEach(checkbox => checkbox.checked = false);
|
||||
this.selectedItemIds = new Set([...this.selectedItemIds].filter(id => !selectedIds.has(id)));
|
||||
}
|
||||
this.renderingItemSelection();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'delete': {
|
||||
// Saved for future use:
|
||||
// <p class="hide">Do you really want to unfollow this Corpora?</p>
|
||||
// <ul id="selected-unfollow-items-list"></ul>
|
||||
let modalElement = Utils.HTMLToElement(
|
||||
`
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm Corpus deletion</h4>
|
||||
<p>Do you really want to delete this Corpora? <i>All corpora will be permanently deleted!</i></p>
|
||||
<ul id="selected-deletion-items-list"></ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
document.querySelector('#modals').appendChild(modalElement);
|
||||
let itemDeletionList = document.querySelector('#selected-deletion-items-list');
|
||||
// let itemUnfollowList = document.querySelector('#selected-unfollow-items-list');
|
||||
this.selectedItemIds.forEach(selectedItemId => {
|
||||
let listItem = this.listjs.get('id', selectedItemId)[0].elm;
|
||||
let values = this.listjs.get('id', listItem.dataset.id)[0].values();
|
||||
let itemElement = Utils.HTMLToElement(`<li> - ${values.title}</li>`);
|
||||
// if (!values['is-owner']) {
|
||||
// itemUnfollowList.appendChild(itemElement);
|
||||
// } else {
|
||||
itemDeletionList.appendChild(itemElement);
|
||||
// }
|
||||
});
|
||||
let modal = M.Modal.init(
|
||||
modalElement,
|
||||
{
|
||||
dismissible: false,
|
||||
onCloseEnd: () => {
|
||||
modal.destroy();
|
||||
modalElement.remove();
|
||||
}
|
||||
}
|
||||
);
|
||||
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
||||
confirmElement.addEventListener('click', (event) => {
|
||||
this.selectedItemIds.forEach(selectedItemId => {
|
||||
let listItem = this.listjs.get('id', selectedItemId)[0].elm;
|
||||
let values = this.listjs.get('id', listItem.dataset.id)[0].values();
|
||||
if (values['is-owner']) {
|
||||
Requests.corpora.entity.delete(selectedItemId);
|
||||
} else {
|
||||
Requests.corpora.entity.followers.entity.delete(selectedItemId, currentUserId);
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
this.selectedItemIds.clear();
|
||||
this.renderingItemSelection();
|
||||
|
||||
});
|
||||
modal.open();
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderingItemSelection() {
|
||||
let selectionActionButtons = document.querySelectorAll('.corpus-list-selection-action-trigger:not([data-selection-action="select-all"])');
|
||||
let selectableItems = this.listjs.items;
|
||||
let actionButtons = [];
|
||||
|
||||
Object.values(selectableItems).forEach(selectableItem => {
|
||||
if (selectableItem.elm) {
|
||||
let checkbox = selectableItem.elm.querySelector('.select-checkbox[type="checkbox"]');
|
||||
if (checkbox.checked) {
|
||||
selectableItem.elm.classList.add('grey', 'lighten-3');
|
||||
} else {
|
||||
selectableItem.elm.classList.remove('grey', 'lighten-3');
|
||||
}
|
||||
let itemActionButtons = selectableItem.elm.querySelectorAll('.list-action-trigger:not([data-list-action="select"])');
|
||||
itemActionButtons.forEach(itemActionButton => {
|
||||
actionButtons.push(itemActionButton);
|
||||
});
|
||||
}
|
||||
});
|
||||
// Hide item action buttons if > 0 item is selected and show selection action buttons
|
||||
if (this.selectedItemIds.size > 0) {
|
||||
selectionActionButtons.forEach(selectionActionButton => {
|
||||
selectionActionButton.classList.remove('hide');
|
||||
});
|
||||
actionButtons.forEach(actionButton => {
|
||||
actionButton.classList.add('hide');
|
||||
});
|
||||
} else {
|
||||
selectionActionButtons.forEach(selectionActionButton => {
|
||||
selectionActionButton.classList.add('hide');
|
||||
});
|
||||
actionButtons.forEach(actionButton => {
|
||||
actionButton.classList.remove('hide');
|
||||
});
|
||||
}
|
||||
|
||||
// Check select all checkbox if all items are selected
|
||||
let selectAllCheckbox = document.querySelector('.corpus-list-select-all-checkbox[type="checkbox"]');
|
||||
if (selectableItems.length === this.selectedItemIds.size && selectAllCheckbox.checked === false) {
|
||||
selectAllCheckbox.checked = true;
|
||||
} else if (selectableItems.length !== this.selectedItemIds.size && selectAllCheckbox.checked === true) {
|
||||
selectAllCheckbox.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
onPatch(patch) {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/([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}/corpora/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
}
|
||||
case 'remove': {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, corpusId] = operation.path.match(re);
|
||||
this.remove(corpusId);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'replace': {
|
||||
let re = new RegExp(`^/users/${this.userId}/corpora/([A-Za-z0-9]*)/(status|description|title)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, corpusId, valueName] = operation.path.match(re);
|
||||
this.replace(corpusId, valueName, operation.value);
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
107
app/static/js/resource-lists/corpus-text-info-list.js
Normal file
107
app/static/js/resource-lists/corpus-text-info-list.js
Normal file
@ -0,0 +1,107 @@
|
||||
ResourceLists.CorpusTextInfoList = class CorpusTextInfoList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'corpus-text-info-list';
|
||||
|
||||
static defaultOptions = {
|
||||
page: 5
|
||||
};
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
let _options = Utils.mergeObjectsDeep(
|
||||
ResourceLists.CorpusTextInfoList.defaultOptions,
|
||||
options
|
||||
);
|
||||
super(listContainerElement, _options);
|
||||
this.isInitialized = false;
|
||||
let sortElements = this.listContainerElement.querySelectorAll('.sort');
|
||||
sortElements.forEach((sortElement) => {
|
||||
sortElement.addEventListener('click', (event) => {this.renderSortElement(sortElement)});
|
||||
});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return (values) => {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td><span class="title"></span> (<span class="publishing_year"></span>)</td>
|
||||
<td><span class="num_tokens"></span></td>
|
||||
<td><span class="num_sentences"></span></td>
|
||||
<td><span class="num_unique_words"></span></td>
|
||||
<td><span class="num_unique_lemmas"></span></td>
|
||||
<td><span class="num_unique_pos"></span></td>
|
||||
<td><span class="num_unique_simple_pos"></span></td>
|
||||
</tr>
|
||||
`.trim();
|
||||
}
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
'title',
|
||||
'publishing_year',
|
||||
'num_tokens',
|
||||
'num_sentences',
|
||||
'num_unique_words',
|
||||
'num_unique_lemmas',
|
||||
'num_unique_pos',
|
||||
'num_unique_simple_pos'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('corpus-file-list-');
|
||||
}
|
||||
let listSearchElementId = 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 corpus file</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Text<span class="sort right material-icons" data-sort="title" style="cursor:pointer; color:#aa9cc9">arrow_drop_down</span></th>
|
||||
<th>Tokens<span class="sort right material-icons" data-sort="num_tokens" style="cursor:pointer">arrow_drop_down</span></th>
|
||||
<th>Sentences<span class="sort right material-icons" data-sort="num_sentences" style="cursor:pointer">arrow_drop_down</span></th>
|
||||
<th>Unique words<span class="sort right material-icons" data-sort="num_unique_words" style="cursor:pointer">arrow_drop_down</span></th>
|
||||
<th>Unique lemmas<span class="sort right material-icons" data-sort="num_unique_lemmas" style="cursor:pointer">arrow_drop_down</span></th>
|
||||
<th>Unique pos<span class="sort right material-icons" data-sort="num_unique_pos" style="cursor:pointer">arrow_drop_down</span></th>
|
||||
<th>Unique simple pos<span class="sort right material-icons" data-sort="num_unique_simple_pos" style="cursor:pointer">arrow_drop_down</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(corpusTextData) {
|
||||
return {
|
||||
title: corpusTextData.title,
|
||||
publishing_year: corpusTextData.publishing_year,
|
||||
num_tokens: corpusTextData.num_tokens,
|
||||
num_sentences: corpusTextData.num_sentences,
|
||||
num_unique_words: corpusTextData.num_unique_words,
|
||||
num_unique_lemmas: corpusTextData.num_unique_lemmas,
|
||||
num_unique_pos: corpusTextData.num_unique_pos,
|
||||
num_unique_simple_pos: corpusTextData.num_unique_simple_pos
|
||||
};
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('title');
|
||||
}
|
||||
|
||||
renderSortElement(clickedSortElement) {
|
||||
this.listContainerElement.querySelectorAll('.sort').forEach((sortElement) => {
|
||||
if (sortElement !== clickedSortElement) {
|
||||
sortElement.classList.remove('asc', 'desc');
|
||||
sortElement.style.color = 'black';
|
||||
sortElement.innerHTML = 'arrow_drop_down';
|
||||
};
|
||||
});
|
||||
clickedSortElement.style.color = '#aa9cc9';
|
||||
clickedSortElement.innerHTML = clickedSortElement.classList.contains('asc') ? 'arrow_drop_down' : 'arrow_drop_up';
|
||||
}
|
||||
};
|
||||
137
app/static/js/resource-lists/corpus-token-list.js
Normal file
137
app/static/js/resource-lists/corpus-token-list.js
Normal file
@ -0,0 +1,137 @@
|
||||
ResourceLists.CorpusTokenList = class CorpusTokenList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'corpus-token-list';
|
||||
|
||||
static defaultOptions = {
|
||||
page: 7
|
||||
};
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
let _options = Utils.mergeObjectsDeep(
|
||||
ResourceLists.CorpusTokenList.defaultOptions,
|
||||
options
|
||||
);
|
||||
super(listContainerElement, _options);
|
||||
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
|
||||
this.selectedItemTerms = new Set();
|
||||
this.listjs.on('sortComplete', () => {
|
||||
let listItems = Array.from(this.listjs.items).filter(item => item.elm);
|
||||
for (let item of listItems) {
|
||||
let termElement = item.elm.querySelector('.term');
|
||||
let mostFrequent = item.elm.dataset.mostfrequent === 'true';
|
||||
if (mostFrequent) {
|
||||
this.selectedItemTerms.add(termElement.textContent);
|
||||
}
|
||||
}
|
||||
corpusAnalysisApp.extensions['Static Visualization (beta)'].renderFrequenciesGraphic(this.selectedItemTerms);
|
||||
});
|
||||
|
||||
let tokenListResetButtonElement = this.listContainerElement.querySelector('#token-list-reset-button');
|
||||
tokenListResetButtonElement.addEventListener('click', () => {
|
||||
this.selectedItemTerms.clear();
|
||||
let listItems = Array.from(this.listjs.items).filter(item => item.elm);
|
||||
for (let item of listItems) {
|
||||
let termElement = item.elm.querySelector('.term');
|
||||
let mostFrequent = item.elm.dataset.mostfrequent === 'true';
|
||||
if (mostFrequent) {
|
||||
item.elm.querySelector('.select-checkbox').checked = true;
|
||||
this.selectedItemTerms.add(termElement.textContent);
|
||||
} else {
|
||||
item.elm.querySelector('.select-checkbox').checked = false;
|
||||
}
|
||||
}
|
||||
corpusAnalysisApp.extensions['Static Visualization (beta)'].renderFrequenciesGraphic(this.selectedItemTerms);
|
||||
});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return (values) => {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td>
|
||||
<label class="list-action-trigger" data-list-action="select">
|
||||
<input class="select-checkbox" type="checkbox" ${values.mostFrequent ? 'checked="checked"' : ''}>
|
||||
<span class="disable-on-click"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td><span class="term"></span></td>
|
||||
<td><span class="count"></span></td>
|
||||
<td><span class="frequency"></span></td>
|
||||
</tr>
|
||||
`.trim();
|
||||
}
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
'term',
|
||||
'count',
|
||||
{data: ['mostFrequent']},
|
||||
'frequency'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('corpus-token-list-');
|
||||
}
|
||||
let listSearchElementId = 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 token</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:15%;">
|
||||
<span class="material-icons" style="cursor:pointer" id="token-list-reset-button">refresh</span>
|
||||
</th>
|
||||
<th>Term</th>
|
||||
<th>Count</th>
|
||||
<th>Frequency</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(corpusTokenData) {
|
||||
return {
|
||||
term: corpusTokenData.term,
|
||||
count: corpusTokenData.count,
|
||||
mostFrequent: corpusTokenData.mostFrequent,
|
||||
frequency: '-'
|
||||
};
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('count', {order: 'desc'});
|
||||
}
|
||||
|
||||
onClick(event) {
|
||||
if (event.target.closest('.disable-on-click') !== null) {return;}
|
||||
let listItemElement = event.target.closest('.list-item');
|
||||
if (listItemElement === null) {return;}
|
||||
let item = listItemElement.querySelector('.term').textContent;
|
||||
let listActionElement = event.target.closest('.list-action-trigger[data-list-action]');
|
||||
let listAction = listActionElement === null ? '' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'select': {
|
||||
if (event.target.checked) {
|
||||
this.selectedItemTerms.add(item);
|
||||
} else {
|
||||
this.selectedItemTerms.delete(item);
|
||||
}
|
||||
corpusAnalysisApp.extensions['Static Visualization (beta)'].renderFrequenciesGraphic(this.selectedItemTerms);
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
73
app/static/js/resource-lists/detailed-public-corpus-list.js
Normal file
73
app/static/js/resource-lists/detailed-public-corpus-list.js
Normal file
@ -0,0 +1,73 @@
|
||||
ResourceLists.DetailedPublicCorpusList = class DetailedPublicCorpusList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'detailed-public-corpus-list';
|
||||
|
||||
get item() {
|
||||
return (values) => {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td></td>
|
||||
<td><b class="title"></b><br><i class="description"></i></td>
|
||||
<td><span class="owner"></span></td>
|
||||
<td><span class="status badge new corpus-status-color corpus-status-text" data-badge-caption=""></span></td>
|
||||
<td>${values['current-user-is-following'] ? '<span><i class="left material-icons">visibility</i>Following</span>' : ''}</td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light" data-list-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
};
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['creation-date']},
|
||||
{name: 'status', attr: 'data-status'},
|
||||
'description',
|
||||
'title',
|
||||
'owner',
|
||||
'current-user-is-following'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('corpus-list-');
|
||||
}
|
||||
let listSearchElementId = 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 Corpus</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Title and Description</th>
|
||||
<th>Owner</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(corpus) {
|
||||
return {
|
||||
'id': corpus.id,
|
||||
'creation-date': corpus.creation_date,
|
||||
'description': corpus.description,
|
||||
'status': corpus.status,
|
||||
'title': corpus.title,
|
||||
'owner': corpus.user.username,
|
||||
'is-owner': corpus.user.id === this.userId,
|
||||
'current-user-is-following': Object.values(corpus.corpus_follower_associations).some(association => association.follower.id === currentUserId)
|
||||
};
|
||||
}
|
||||
};
|
||||
18
app/static/js/resource-lists/index.js
Normal file
18
app/static/js/resource-lists/index.js
Normal file
@ -0,0 +1,18 @@
|
||||
var ResourceLists = {};
|
||||
|
||||
ResourceLists.autoInit = () => {
|
||||
for (let propertyName in ResourceLists) {
|
||||
let property = ResourceLists[propertyName];
|
||||
// Call autoInit of all properties that are subclasses of `ResourceLists.ResourceList`.
|
||||
// This does not include `ResourceLists.ResourceList` itself.
|
||||
if (property.prototype instanceof ResourceLists.ResourceList) {
|
||||
// Check if the static `htmlClass` property is defined.
|
||||
if (property.htmlClass === undefined) {return;}
|
||||
// Gather all HTML elements that have the `this.htmlClass` class
|
||||
// and do not have the `no-autoinit` class.
|
||||
let listElements = document.querySelectorAll(`.${property.htmlClass}:not(.no-autoinit)`);
|
||||
// Create an instance of this class for each display element.
|
||||
for (let listElement of listElements) {new property(listElement);}
|
||||
}
|
||||
}
|
||||
};
|
||||
89
app/static/js/resource-lists/job-input-list.js
Normal file
89
app/static/js/resource-lists/job-input-list.js
Normal file
@ -0,0 +1,89 @@
|
||||
ResourceLists.JobInputList = class JobInputList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'job-input-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.jobId = listContainerElement.dataset.jobId;
|
||||
if (this.userId === undefined || this.jobId === undefined) {return;}
|
||||
app.subscribeUser(this.userId);
|
||||
app.getUser(this.userId).then((user) => {
|
||||
this.add(Object.values(user.jobs[this.jobId].inputs));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td><span class="filename"></span></td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating waves-effect waves-light" data-list-action="download"><i class="material-icons">file_download</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['creation-date']},
|
||||
'filename'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('job-input-list-');
|
||||
}
|
||||
let listSearchElementId = 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 input</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Filename</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(jobInput) {
|
||||
return {
|
||||
'id': jobInput.id,
|
||||
'creation-date': jobInput.creation_date,
|
||||
'filename': jobInput.filename
|
||||
};
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('filename', {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 ? 'download' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'download': {
|
||||
window.location.href = `/jobs/${this.jobId}/inputs/${itemId}/download`;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
322
app/static/js/resource-lists/job-list.js
Normal file
322
app/static/js/resource-lists/job-list.js
Normal file
@ -0,0 +1,322 @@
|
||||
ResourceLists.JobList = class JobList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'job-list';
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
super(listContainerElement, options);
|
||||
this.documentJobArea = document.querySelector('#jobs');
|
||||
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
|
||||
document.querySelectorAll('.job-list-selection-action-trigger[data-selection-action]').forEach((element) => {
|
||||
element.addEventListener('click', (event) => {this.onSelectionAction(event)});
|
||||
});
|
||||
this.isInitialized = false;
|
||||
this.selectedItemIds = new Set();
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
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) => {
|
||||
this.add(Object.values(user.jobs));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return `
|
||||
<tr class="list-item service-scheme clickable hoverable">
|
||||
<td>
|
||||
<label class="list-action-trigger" data-list-action="select">
|
||||
<input class="select-checkbox" type="checkbox">
|
||||
<span class="disable-on-click"></span>
|
||||
</label>
|
||||
</td>
|
||||
<td><a class="btn-floating"><i class="nopaque-icons service-icons" data-service="inherit"></i></a></td>
|
||||
<td><b class="title"></b><br><i class="description"></i></td>
|
||||
<td><span class="badge new job-status-color job-status-text status" data-badge-caption=""></span></td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
|
||||
<a class="list-action-trigger btn-floating darken waves-effect waves-light" data-list-action="view"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['creation-date']},
|
||||
{data: ['service']},
|
||||
{name: 'status', attr: 'data-status'},
|
||||
'description',
|
||||
'title'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('job-list-');
|
||||
}
|
||||
let listSearchElementId = 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</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<label class="job-list-selection-action-trigger" data-selection-action="select-all">
|
||||
<input class="job-list-select-all-checkbox" type="checkbox">
|
||||
<span class="disable-on-click"></span>
|
||||
</label>
|
||||
</th>
|
||||
<th>Service</th>
|
||||
<th>Title and Description</th>
|
||||
<th>Status</th>
|
||||
<th class="right-align">
|
||||
<a class="job-list-selection-action-trigger btn-floating red waves-effect waves-light hide" data-selection-action="delete"><i class="material-icons">delete</i></a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(job) {
|
||||
return {
|
||||
'id': job.id,
|
||||
'creation-date': job.creation_date,
|
||||
'description': job.description,
|
||||
'service': job.service,
|
||||
'status': job.status,
|
||||
'title': job.title
|
||||
};
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('creation-date', {order: 'desc'});
|
||||
}
|
||||
|
||||
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 ? 'view' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'delete-request': {
|
||||
let values = this.listjs.get('id', itemId)[0].values();
|
||||
let modalElement = Utils.HTMLToElement(
|
||||
`
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm Job deletion</h4>
|
||||
<p>Do you really want to delete the Job <b>${values.title}</b>? All files will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
document.querySelector('#modals').appendChild(modalElement);
|
||||
let modal = M.Modal.init(
|
||||
modalElement,
|
||||
{
|
||||
dismissible: false,
|
||||
onCloseEnd: () => {
|
||||
modal.destroy();
|
||||
modalElement.remove();
|
||||
}
|
||||
}
|
||||
);
|
||||
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
||||
confirmElement.addEventListener('click', (event) => {
|
||||
Requests.jobs.entity.delete(itemId);
|
||||
});
|
||||
modal.open();
|
||||
break;
|
||||
}
|
||||
case 'view': {
|
||||
window.location.href = `/jobs/${itemId}`;
|
||||
break;
|
||||
}
|
||||
case 'select': {
|
||||
if (event.target.checked) {
|
||||
this.selectedItemIds.add(itemId);
|
||||
} else {
|
||||
this.selectedItemIds.delete(itemId);
|
||||
}
|
||||
this.renderingItemSelection();
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onSelectionAction(event) {
|
||||
let selectionActionElement = event.target.closest('.job-list-selection-action-trigger[data-selection-action]');
|
||||
let selectionAction = selectionActionElement.dataset.selectionAction;
|
||||
let items = this.listjs.items;
|
||||
let selectableItems = Array.from(items)
|
||||
.filter(item => item.elm)
|
||||
.map(item => item.elm.querySelector('.select-checkbox[type="checkbox"]'));
|
||||
switch (selectionAction) {
|
||||
case 'select-all': {
|
||||
let selectedIds = new Set(Array.from(items)
|
||||
.map(item => item.values().id))
|
||||
if (event.target.checked !== undefined) {
|
||||
if (event.target.checked) {
|
||||
selectableItems.forEach(selectableItem => selectableItem.checked = true);
|
||||
this.selectedItemIds = selectedIds;
|
||||
} else {
|
||||
selectableItems.forEach(checkbox => checkbox.checked = false);
|
||||
this.selectedItemIds = new Set([...this.selectedItemIds].filter(id => !selectedIds.has(id)));
|
||||
}
|
||||
this.renderingItemSelection();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'delete': {
|
||||
let modalElement = Utils.HTMLToElement(
|
||||
`
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm Corpus File deletion</h4>
|
||||
<p>Do you really want to delete the Jobs?</p>
|
||||
<ul id="selected-items-list"></ul>
|
||||
<p>All files will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
document.querySelector('#modals').appendChild(modalElement);
|
||||
let itemList = document.querySelector('#selected-items-list');
|
||||
this.selectedItemIds.forEach(selectedItemId => {
|
||||
let listItem = this.listjs.get('id', selectedItemId)[0].elm;
|
||||
let values = this.listjs.get('id', listItem.dataset.id)[0].values();
|
||||
let itemElement = Utils.HTMLToElement(`<li> - ${values.title}</li>`);
|
||||
itemList.appendChild(itemElement);
|
||||
});
|
||||
let modal = M.Modal.init(
|
||||
modalElement,
|
||||
{
|
||||
dismissible: false,
|
||||
onCloseEnd: () => {
|
||||
modal.destroy();
|
||||
modalElement.remove();
|
||||
}
|
||||
}
|
||||
);
|
||||
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
||||
confirmElement.addEventListener('click', (event) => {
|
||||
this.selectedItemIds.forEach(selectedItemId => {
|
||||
Requests.jobs.entity.delete(selectedItemId);
|
||||
});
|
||||
this.selectedItemIds.clear();
|
||||
this.renderingItemSelection();
|
||||
});
|
||||
modal.open();
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderingItemSelection() {
|
||||
let selectionActionButtons = document.querySelectorAll('.job-list-selection-action-trigger:not([data-selection-action="select-all"])');
|
||||
let selectableItems = this.listjs.items;
|
||||
let actionButtons = [];
|
||||
|
||||
Object.values(selectableItems).forEach(selectableItem => {
|
||||
if (selectableItem.elm) {
|
||||
let checkbox = selectableItem.elm.querySelector('.select-checkbox[type="checkbox"]');
|
||||
if (checkbox.checked) {
|
||||
selectableItem.elm.classList.add('grey', 'lighten-3');
|
||||
} else {
|
||||
selectableItem.elm.classList.remove('grey', 'lighten-3');
|
||||
}
|
||||
let itemActionButtons = selectableItem.elm.querySelectorAll('.list-action-trigger:not([data-list-action="select"])');
|
||||
itemActionButtons.forEach(itemActionButton => {
|
||||
actionButtons.push(itemActionButton);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Hide item action buttons if > 0 item is selected and show selection action buttons
|
||||
if (this.selectedItemIds.size > 0) {
|
||||
selectionActionButtons.forEach(selectionActionButton => {
|
||||
selectionActionButton.classList.remove('hide');
|
||||
});
|
||||
actionButtons.forEach(actionButton => {
|
||||
actionButton.classList.add('hide');
|
||||
});
|
||||
} else {
|
||||
selectionActionButtons.forEach(selectionActionButton => {
|
||||
selectionActionButton.classList.add('hide');
|
||||
});
|
||||
actionButtons.forEach(actionButton => {
|
||||
actionButton.classList.remove('hide');
|
||||
});
|
||||
}
|
||||
|
||||
// Check select all checkbox if all items are selected
|
||||
let selectAllCheckbox = document.querySelector('.job-list-select-all-checkbox[type="checkbox"]');
|
||||
if (selectableItems.length === this.selectedItemIds.size && selectAllCheckbox.checked === false) {
|
||||
selectAllCheckbox.checked = true;
|
||||
} else if (selectableItems.length !== this.selectedItemIds.size && selectAllCheckbox.checked === true) {
|
||||
selectAllCheckbox.checked = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onPatch(patch) {
|
||||
let re = new RegExp(`^/users/${this.userId}/jobs/([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/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
}
|
||||
case 'remove': {
|
||||
let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, jobId] = operation.path.match(re);
|
||||
this.remove(jobId);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'replace': {
|
||||
let re = new RegExp(`^/users/${this.userId}/jobs/([A-Za-z0-9]*)/(service|status|description|title)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, jobId, valueName] = operation.path.match(re);
|
||||
this.replace(jobId, valueName, operation.value);
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
114
app/static/js/resource-lists/job-result-list.js
Normal file
114
app/static/js/resource-lists/job-result-list.js
Normal file
@ -0,0 +1,114 @@
|
||||
ResourceLists.JobResultList = class JobResultList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'job-result-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.jobId = listContainerElement.dataset.jobId;
|
||||
if (this.userId === undefined || this.jobId === 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) => {
|
||||
this.add(Object.values(user.jobs[this.jobId].results));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td><span class="description"></span></td>
|
||||
<td><span class="filename"></span></td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating waves-effect waves-light" data-list-action="download"><i class="material-icons">file_download</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['creation-date']},
|
||||
'description',
|
||||
'filename'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('job-result-list-');
|
||||
}
|
||||
let listSearchElementId = 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 result</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th>Filename</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(jobResult) {
|
||||
return {
|
||||
'id': jobResult.id,
|
||||
'creation-date': jobResult.creation_date,
|
||||
'description': jobResult.description,
|
||||
'filename': jobResult.filename
|
||||
};
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('filename', {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 ? 'download' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'download': {
|
||||
window.location.href = `/jobs/${this.jobId}/results/${itemId}/download`;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
57
app/static/js/resource-lists/public-corpus-list.js
Normal file
57
app/static/js/resource-lists/public-corpus-list.js
Normal file
@ -0,0 +1,57 @@
|
||||
ResourceLists.PublicCorpusList = class PublicCorpusList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'public-corpus-list';
|
||||
|
||||
get item() {
|
||||
return (values) => {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td><b class="title"></b><br><i class="description"></i></td>
|
||||
<td><span class="owner"></span></td>
|
||||
<td>${values['current-user-is-following'] ? '<span><i class="left material-icons">visibility</i></span>' : ''}</td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light" data-list-action="view" data-service="corpus-analysis"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
};
|
||||
}
|
||||
|
||||
mapResourceToValue(corpus) {
|
||||
return {
|
||||
'id': corpus.id,
|
||||
'creation-date': corpus.creation_date,
|
||||
'description': corpus.description,
|
||||
'status': corpus.status,
|
||||
'title': corpus.title,
|
||||
'owner': corpus.user.username,
|
||||
'is-owner': corpus.user.id === this.userId ? true : false,
|
||||
'current-user-is-following': Object.values(corpus.corpus_follower_associations).some(association => association.follower.id === currentUserId)
|
||||
};
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('corpus-list-');
|
||||
}
|
||||
let listSearchElementId = 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 Corpus</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title and Description</th>
|
||||
<th>Owner</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
};
|
||||
69
app/static/js/resource-lists/resource-list.js
Normal file
69
app/static/js/resource-lists/resource-list.js
Normal file
@ -0,0 +1,69 @@
|
||||
ResourceLists.ResourceList = class ResourceList {
|
||||
/* A wrapper class for the list.js list.
|
||||
* This class is not meant to be used directly, instead it should be used as
|
||||
* a base class for concrete resource list implementations.
|
||||
*/
|
||||
|
||||
static htmlClass;
|
||||
|
||||
static defaultOptions = {
|
||||
page: 5,
|
||||
pagination: {
|
||||
innerWindow: 2,
|
||||
outerWindow: 2
|
||||
}
|
||||
};
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
if ('items' in options) {
|
||||
throw '"items" is not supported as an option, define it as a getter in the list class';
|
||||
}
|
||||
if ('valueNames' in options) {
|
||||
throw '"valueNames" is not supported as an option, define it as a getter in the list class';
|
||||
}
|
||||
let _options = Utils.mergeObjectsDeep(
|
||||
{item: this.item, valueNames: this.valueNames},
|
||||
ResourceLists.ResourceList.defaultOptions,
|
||||
options
|
||||
);
|
||||
this.listContainerElement = listContainerElement;
|
||||
this.initListContainerElement();
|
||||
this.listjs = new List(listContainerElement, _options);
|
||||
}
|
||||
|
||||
add(resources, callback) {
|
||||
let tmp = Array.isArray(resources) ? resources : [resources];
|
||||
let values = tmp.map((resource) => {
|
||||
return this.mapResourceToValue(resource);
|
||||
});
|
||||
this.listjs.add(values, (items) => {
|
||||
this.sort();
|
||||
if (typeof callback === 'function') {
|
||||
callback(items);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
remove(id) {
|
||||
this.listjs.remove('id', id);
|
||||
}
|
||||
|
||||
replace(id, key, value) {
|
||||
let item = this.listjs.get('id', id)[0];
|
||||
item.values({[key]: value});
|
||||
}
|
||||
|
||||
// #region Mandatory getters and methods to implement
|
||||
get item() {throw 'Not implemented';}
|
||||
|
||||
get valueNames() {throw 'Not implemented';}
|
||||
|
||||
initListContainerElement() {throw 'Not implemented';}
|
||||
// #endregion
|
||||
|
||||
// #region Optional methods to implement
|
||||
mapResourceToValue(resource) {return resource;}
|
||||
|
||||
sort() {return;}
|
||||
// #endregion
|
||||
}
|
||||
219
app/static/js/resource-lists/spacy-nlp-pipeline-model-list.js
Normal file
219
app/static/js/resource-lists/spacy-nlp-pipeline-model-list.js
Normal file
@ -0,0 +1,219 @@
|
||||
ResourceLists.SpaCyNLPPipelineModelList = class SpaCyNLPPipelineModelList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'spacy-nlp-pipeline-model-list';
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
super(listContainerElement, options);
|
||||
this.listjs.list.addEventListener('change', (event) => {this.onChange(event)});
|
||||
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
|
||||
this.isInitialized = false;
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
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) => {
|
||||
this.add(Object.values(user.spacy_nlp_pipeline_models));
|
||||
this.isInitialized = true;
|
||||
});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return (values) => {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
|
||||
<td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url publishing-url-2"></a></td>
|
||||
<td>
|
||||
<span class="disable-on-click">
|
||||
<label>
|
||||
<input ${values['is-public'] ? 'checked' : ''} class="is-public list-action-trigger" data-list-action="toggle-is-public" type="checkbox">
|
||||
<span>Public</span>
|
||||
</label>
|
||||
</span>
|
||||
</td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
|
||||
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light service-2" data-list-action="view"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
};
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['creation-date']},
|
||||
{name: 'publisher-url', attr: 'href'},
|
||||
{name: 'publishing-url', attr: 'href'},
|
||||
'description',
|
||||
'publisher',
|
||||
'publishing-url-2',
|
||||
'publishing-year',
|
||||
'title',
|
||||
'title-2',
|
||||
'version'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('spacy-nlp-pipeline-model-list-');
|
||||
}
|
||||
let listSearchElementId = 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 SpaCy NLP Pipeline Model</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title and Description</th>
|
||||
<th>Publisher</th>
|
||||
<th>Availability</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(spaCyNLPPipelineModel) {
|
||||
return {
|
||||
'id': spaCyNLPPipelineModel.id,
|
||||
'creation-date': spaCyNLPPipelineModel.creation_date,
|
||||
'description': spaCyNLPPipelineModel.description,
|
||||
'publisher': spaCyNLPPipelineModel.publisher,
|
||||
'publisher-url': spaCyNLPPipelineModel.publisher_url,
|
||||
'publishing-url': spaCyNLPPipelineModel.publishing_url,
|
||||
'publishing-url-2': spaCyNLPPipelineModel.publishing_url,
|
||||
'publishing-year': spaCyNLPPipelineModel.publishing_year,
|
||||
'title': spaCyNLPPipelineModel.title,
|
||||
'title-2': spaCyNLPPipelineModel.title,
|
||||
'version': spaCyNLPPipelineModel.version,
|
||||
'is-public': spaCyNLPPipelineModel.is_public
|
||||
};
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('creation-date', {order: 'desc'});
|
||||
}
|
||||
|
||||
onChange(event) {
|
||||
if (event.target.tagName !== 'INPUT') {return;}
|
||||
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]');
|
||||
if (listActionElement === null) {return;}
|
||||
let listAction = listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'toggle-is-public': {
|
||||
let newIsPublicValue = listActionElement.checked;
|
||||
Requests.contributions.spacy_nlp_pipeline_models.entity.isPublic.update(itemId, newIsPublicValue)
|
||||
.catch((response) => {
|
||||
listActionElement.checked = !newIsPublicValue;
|
||||
});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onClick(event) {
|
||||
if (event.target.closest('.disable-on-click') !== null) {return;}
|
||||
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 ? 'view' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'delete-request': {
|
||||
let values = this.listjs.get('id', itemId)[0].values();
|
||||
let modalElement = Utils.HTMLToElement(
|
||||
`
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm SpaCy NLP Pipeline Model deletion</h4>
|
||||
<p>Do you really want to delete the SpaCy NLP Pipeline Model <b>${values.title}</b>? All files will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
document.querySelector('#modals').appendChild(modalElement);
|
||||
let modal = M.Modal.init(
|
||||
modalElement,
|
||||
{
|
||||
dismissible: false,
|
||||
onCloseEnd: () => {
|
||||
modal.destroy();
|
||||
modalElement.remove();
|
||||
}
|
||||
}
|
||||
);
|
||||
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
||||
confirmElement.addEventListener('click', (event) => {
|
||||
Requests.contributions.spacy_nlp_pipeline_models.entity.delete(itemId);
|
||||
});
|
||||
modal.open();
|
||||
break;
|
||||
}
|
||||
case 'view': {
|
||||
window.location.href = `/contributions/spacy-nlp-pipeline-models/${itemId}`;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onPatch(patch) {
|
||||
let re = new RegExp(`^/users/${this.userId}/spacy_nlp_pipeline_models/([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}/spacy_nlp_pipeline_models/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
}
|
||||
case 'remove': {
|
||||
let re = new RegExp(`^/users/${this.userId}/spacy_nlp_pipeline_models/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, itemId] = operation.path.match(re);
|
||||
this.remove(itemId);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'replace': {
|
||||
let re = new RegExp(`^/users/${this.userId}/spacy_nlp_pipeline_models/([A-Za-z0-9]*)/(is_public)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, itemId, valueName] = operation.path.match(re);
|
||||
if (valueName === 'is_public') {
|
||||
this.listjs.list.querySelector(`.list-item[data-id="${itemId}"] .is-public`).checked = operation.value;
|
||||
valueName = 'is-public';
|
||||
}
|
||||
this.replace(itemId, valueName, operation.value);
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,228 @@
|
||||
ResourceLists.TesseractOCRPipelineModelList = class TesseractOCRPipelineModelList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'tesseract-ocr-pipeline-model-list';
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
super(listContainerElement, options);
|
||||
this.listjs.list.addEventListener('change', (event) => {this.onChange(event)});
|
||||
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
|
||||
this.isInitialized = false;
|
||||
this.userId = listContainerElement.dataset.userId;
|
||||
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) => {
|
||||
this.add(Object.values(user.tesseract_ocr_pipeline_models));
|
||||
for (let uncheckedCheckbox of this.listjs.list.querySelectorAll('input[data-checked="True"]')) {
|
||||
uncheckedCheckbox.setAttribute('checked', '');
|
||||
}
|
||||
if (user.role.name !== ('Administrator' || 'Contributor')) {
|
||||
for (let switchElement of this.listjs.list.querySelectorAll('.is_public')) {
|
||||
switchElement.setAttribute('disabled', '');
|
||||
}
|
||||
}
|
||||
this.isInitialized = true;
|
||||
});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return (values) => {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td><b><span class="title"></span> <span class="version"></span></b><br><i><span class="description"></span></i></td>
|
||||
<td><a class="publisher-url"><span class="publisher"></span></a> (<span class="publishing-year"></span>)<br><a class="publishing-url"><span class="publishing-url-2"></span></a></td>
|
||||
<td>
|
||||
<span class="disable-on-click">
|
||||
<label>
|
||||
<input ${values['is-public'] ? 'checked' : ''} class="is-public list-action-trigger" data-list-action="toggle-is-public" type="checkbox">
|
||||
<span>Public</span>
|
||||
</label>
|
||||
</span>
|
||||
</td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating red waves-effect waves-light" data-list-action="delete-request"><i class="material-icons">delete</i></a>
|
||||
<a class="list-action-trigger btn-floating service-color darken waves-effect waves-light service-2" data-list-action="view"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
};
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['creation-date']},
|
||||
{name: 'publisher-url', attr: 'href'},
|
||||
{name: 'publishing-url', attr: 'href'},
|
||||
'description',
|
||||
'publisher',
|
||||
'publishing-url-2',
|
||||
'publishing-year',
|
||||
'title',
|
||||
'title-2',
|
||||
'version',
|
||||
{name: 'is_public', attr: 'data-checked'}
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('tesseract-ocr-pipeline-model-list-');
|
||||
}
|
||||
let listSearchElementId = 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 Tesseract OCR Pipeline Model</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title and Description</th>
|
||||
<th>Publisher</th>
|
||||
<th>Availability</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(tesseractOCRPipelineModel) {
|
||||
return {
|
||||
'id': tesseractOCRPipelineModel.id,
|
||||
'creation-date': tesseractOCRPipelineModel.creation_date,
|
||||
'description': tesseractOCRPipelineModel.description,
|
||||
'publisher': tesseractOCRPipelineModel.publisher,
|
||||
'publisher-url': tesseractOCRPipelineModel.publisher_url,
|
||||
'publishing-url': tesseractOCRPipelineModel.publishing_url,
|
||||
'publishing-url-2': tesseractOCRPipelineModel.publishing_url,
|
||||
'publishing-year': tesseractOCRPipelineModel.publishing_year,
|
||||
'title': tesseractOCRPipelineModel.title,
|
||||
'title-2': tesseractOCRPipelineModel.title,
|
||||
'version': tesseractOCRPipelineModel.version,
|
||||
'is-public': tesseractOCRPipelineModel.is_public
|
||||
};
|
||||
}
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('creation-date', {order: 'desc'});
|
||||
}
|
||||
|
||||
onChange(event) {
|
||||
if (event.target.tagName !== 'INPUT') {return;}
|
||||
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]');
|
||||
if (listActionElement === null) {return;}
|
||||
let listAction = listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'toggle-is-public': {
|
||||
let newIsPublicValue = listActionElement.checked;
|
||||
Requests.contributions.tesseract_ocr_pipeline_models.entity.isPublic.update(itemId, newIsPublicValue)
|
||||
.catch((response) => {
|
||||
listActionElement.checked = !newIsPublicValue;
|
||||
});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onClick(event) {
|
||||
if (event.target.closest('.disable-on-click') !== null) {return;}
|
||||
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 ? 'view' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'delete-request': {
|
||||
let values = this.listjs.get('id', itemId)[0].values();
|
||||
let modalElement = Utils.HTMLToElement(
|
||||
`
|
||||
<div class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Confirm Tesseract OCR Pipeline Model deletion</h4>
|
||||
<p>Do you really want to delete the Tesseract OCR Pipeline Model <b>${values.title}</b>? All files will be permanently deleted!</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a class="btn modal-close waves-effect waves-light">Cancel</a>
|
||||
<a class="action-button btn modal-close red waves-effect waves-light" data-action="confirm">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
document.querySelector('#modals').appendChild(modalElement);
|
||||
let modal = M.Modal.init(
|
||||
modalElement,
|
||||
{
|
||||
dismissible: false,
|
||||
onCloseEnd: () => {
|
||||
modal.destroy();
|
||||
modalElement.remove();
|
||||
}
|
||||
}
|
||||
);
|
||||
let confirmElement = modalElement.querySelector('.action-button[data-action="confirm"]');
|
||||
confirmElement.addEventListener('click', (event) => {
|
||||
Requests.contributions.tesseract_ocr_pipeline_models.entity.delete(itemId);
|
||||
});
|
||||
modal.open();
|
||||
break;
|
||||
}
|
||||
case 'view': {
|
||||
window.location.href = `/contributions/tesseract-ocr-pipeline-models/${itemId}`;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onPatch(patch) {
|
||||
let re = new RegExp(`^/users/${this.userId}/tesseract_ocr_pipeline_models/([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}/tesseract_ocr_pipeline_models/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {this.add(operation.value);}
|
||||
break;
|
||||
}
|
||||
case 'remove': {
|
||||
let re = new RegExp(`^/users/${this.userId}/tesseract_ocr_pipeline_models/([A-Za-z0-9]*)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, itemId] = operation.path.match(re);
|
||||
this.remove(itemId);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'replace': {
|
||||
let re = new RegExp(`^/users/${this.userId}/tesseract_ocr_pipeline_models/([A-Za-z0-9]*)/(is_public)$`);
|
||||
if (re.test(operation.path)) {
|
||||
let [match, itemId, valueName] = operation.path.match(re);
|
||||
if (valueName === 'is_public') {
|
||||
this.listjs.list.querySelector(`.list-item[data-id="${itemId}"] .is-public`).checked = operation.value;
|
||||
valueName = 'is-public';
|
||||
}
|
||||
this.replace(itemId, valueName, operation.value);
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
100
app/static/js/resource-lists/user-list.js
Normal file
100
app/static/js/resource-lists/user-list.js
Normal file
@ -0,0 +1,100 @@
|
||||
ResourceLists.UserList = class UserList extends ResourceLists.ResourceList {
|
||||
static htmlClass = 'user-list';
|
||||
|
||||
constructor(listContainerElement, options = {}) {
|
||||
super(listContainerElement, options);
|
||||
this.listjs.list.addEventListener('click', (event) => {this.onClick(event)});
|
||||
}
|
||||
|
||||
get item() {
|
||||
return `
|
||||
<tr class="list-item clickable hoverable">
|
||||
<td><img alt="user-image" class="circle responsive-img avatar" style="width:25%"></td>
|
||||
<td><b><span class="username"></span><b></td>
|
||||
<td><span class="full-name"></span></td>
|
||||
<td><span class="location"></span></td>
|
||||
<td><span class="organization"></span></td>
|
||||
<td><span class="corpora-online"></span></td>
|
||||
<td class="right-align">
|
||||
<a class="list-action-trigger btn-floating waves-effect waves-light social-area-color-darken" data-list-action="view"><i class="material-icons">send</i></a>
|
||||
</td>
|
||||
</tr>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
get valueNames() {
|
||||
return [
|
||||
{data: ['id']},
|
||||
{data: ['member-since']},
|
||||
{name: 'avatar', attr: 'src'},
|
||||
'username',
|
||||
'full-name',
|
||||
'location',
|
||||
'organization',
|
||||
'corpora-online'
|
||||
];
|
||||
}
|
||||
|
||||
initListContainerElement() {
|
||||
if (!this.listContainerElement.hasAttribute('id')) {
|
||||
this.listContainerElement.id = Utils.generateElementId('user-list-');
|
||||
}
|
||||
let listSearchElementId = 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 user</label>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:15%;"></th>
|
||||
<th>Username</th>
|
||||
<th>Full name</th>
|
||||
<th>Location</th>
|
||||
<th>Organization</th>
|
||||
<th>Corpora online</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list"></tbody>
|
||||
</table>
|
||||
<ul class="pagination"></ul>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
mapResourceToValue(user) {
|
||||
return {
|
||||
'id': user.id,
|
||||
'member-since': user.member_since,
|
||||
'avatar': user.avatar,
|
||||
'username': user.username,
|
||||
'full-name': user.full_name ? user.full_name : '',
|
||||
'location': user.location ? user.location : '',
|
||||
'organization': user.organization ? user.organization : '',
|
||||
'corpora-online': Object.values(user.corpora).filter((corpus) => corpus.is_public).length
|
||||
};
|
||||
};
|
||||
|
||||
sort() {
|
||||
this.listjs.sort('member-since', {order: 'desc'});
|
||||
}
|
||||
|
||||
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 ? 'view' : listActionElement.dataset.listAction;
|
||||
switch (listAction) {
|
||||
case 'view': {
|
||||
window.location.href = `/users/${itemId}`;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user