mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
New corpus and job lists.
This commit is contained in:
Patrick Jentsch
parent
9862d32dbb
commit
32f2d7dbf7
@ -15,24 +15,29 @@ class CorpusList extends List {
|
|||||||
|
|
||||||
|
|
||||||
_update(patch) {
|
_update(patch) {
|
||||||
var item, operation, pathArray;
|
let item, corpusStatusElement, operation, pathArray;
|
||||||
|
|
||||||
for (operation of patch) {
|
for (operation of patch) {
|
||||||
/* "/corpusId/valueName" -> ["corpusId", "valueName"] */
|
/* "/corpusId/valueName" -> ["corpusId", "valueName"] */
|
||||||
pathArray = operation.path.split("/").slice(1);
|
pathArray = operation.path.split("/").slice(1);
|
||||||
switch(operation.op) {
|
switch(operation.op) {
|
||||||
case "add":
|
case "add":
|
||||||
|
if (pathArray.includes("results")) {break;}
|
||||||
this.addCorpus(operation.value);
|
this.addCorpus(operation.value);
|
||||||
this.update()
|
this.update();
|
||||||
List.updatePagination(this);
|
|
||||||
break;
|
break;
|
||||||
case "remove":
|
case "remove":
|
||||||
this.remove("id", pathArray[0]);
|
this.remove("id", pathArray[0]);
|
||||||
List.updatePagination(this);
|
|
||||||
break;
|
break;
|
||||||
case "replace":
|
case "replace":
|
||||||
item = this.get("id", pathArray[0])[0];
|
item = this.get("id", pathArray[0])[0];
|
||||||
switch(pathArray[1]) {
|
switch(pathArray[1]) {
|
||||||
|
case "status":
|
||||||
|
corpusStatusElement = item.elm.querySelector(".status");
|
||||||
|
corpusStatusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
|
||||||
|
corpusStatusElement.classList.add(CorpusList.STATUS_COLORS[operation.value] || CorpusList.STATUS_COLORS['default']);
|
||||||
|
corpusStatusElement.innerHTML = operation.value;
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -44,32 +49,65 @@ class CorpusList extends List {
|
|||||||
|
|
||||||
|
|
||||||
addCorpus(corpus) {
|
addCorpus(corpus) {
|
||||||
var corpusDescriptionElement, corpusElement, corpusIconElement,
|
let rowElement, columnElement, serviceElement, serviceIconElement, titleElement, descriptionElement, statusElement, viewElement, viewIconElement;
|
||||||
corpusTitleElement;
|
|
||||||
|
|
||||||
corpusDescriptionElement = document.createElement("p");
|
// Create a row elment, where all related information get stored
|
||||||
corpusDescriptionElement.classList.add("description");
|
rowElement = document.createElement("tr");
|
||||||
corpusDescriptionElement.innerText = corpus.description;
|
rowElement.dataset.id = corpus.id;
|
||||||
corpusElement = document.createElement("a");
|
|
||||||
corpusElement.classList.add("avatar", "collection-item");
|
|
||||||
corpusElement.dataset.id = corpus.id;
|
|
||||||
corpusElement.href = `/corpora/${corpus.id}`;
|
|
||||||
corpusIconElement = document.createElement("i");
|
|
||||||
corpusIconElement.classList.add("circle", "material-icons");
|
|
||||||
corpusIconElement.innerText = "book";
|
|
||||||
corpusTitleElement = document.createElement("span");
|
|
||||||
corpusTitleElement.classList.add("title");
|
|
||||||
corpusTitleElement.dataset.key = "title";
|
|
||||||
corpusTitleElement.innerText = corpus.title;
|
|
||||||
|
|
||||||
corpusElement.appendChild(corpusIconElement);
|
// Create a column containing a service type identifying icon
|
||||||
corpusElement.appendChild(corpusTitleElement);
|
columnElement = document.createElement("td");
|
||||||
corpusElement.appendChild(corpusDescriptionElement);
|
serviceElement = document.createElement("a");
|
||||||
|
serviceElement.classList.add("btn-floating", "disabled");
|
||||||
|
serviceIconElement = document.createElement("i");
|
||||||
|
serviceIconElement.classList.add("material-icons");
|
||||||
|
serviceIconElement.innerText = "book";
|
||||||
|
serviceElement.appendChild(serviceIconElement);
|
||||||
|
columnElement.appendChild(serviceElement);
|
||||||
|
rowElement.appendChild(columnElement);
|
||||||
|
|
||||||
this.add(
|
// Create a column containing the title and description
|
||||||
[{description: corpus.description, id: corpus.id, title: corpus.title}],
|
columnElement = document.createElement("td");
|
||||||
function(items) {items[0].elm = corpusElement;}
|
titleElement = document.createElement("b");
|
||||||
);
|
titleElement.classList.add("title");
|
||||||
|
titleElement.innerText = corpus.title;
|
||||||
|
descriptionElement = document.createElement("i");
|
||||||
|
descriptionElement.classList.add("description");
|
||||||
|
descriptionElement.innerText = corpus.description;
|
||||||
|
columnElement.appendChild(titleElement);
|
||||||
|
columnElement.appendChild(document.createElement("br"));
|
||||||
|
columnElement.appendChild(descriptionElement);
|
||||||
|
rowElement.appendChild(columnElement);
|
||||||
|
|
||||||
|
// Create a column containing the current status
|
||||||
|
columnElement = document.createElement("td");
|
||||||
|
statusElement = document.createElement("span");
|
||||||
|
statusElement.classList.add("badge", "new", "status", CorpusList.STATUS_COLORS[corpus.status] || CorpusList.STATUS_COLORS['default']);
|
||||||
|
statusElement.dataset.badgeCaption = "";
|
||||||
|
statusElement.innerText = corpus.status;
|
||||||
|
columnElement.appendChild(statusElement);
|
||||||
|
rowElement.appendChild(columnElement);
|
||||||
|
|
||||||
|
// Create a column containing a button leading to a details page
|
||||||
|
columnElement = document.createElement("td");
|
||||||
|
columnElement.classList.add("right-align");
|
||||||
|
viewElement = document.createElement("a");
|
||||||
|
viewElement.classList.add("waves-effect", "waves-light", "btn-small");
|
||||||
|
viewElement.href = `/corpora/${corpus.id}`;
|
||||||
|
viewElement.innerText = "View ";
|
||||||
|
viewIconElement = document.createElement("i");
|
||||||
|
viewIconElement.classList.add("material-icons", "right");
|
||||||
|
viewIconElement.innerText = "send";
|
||||||
|
viewElement.appendChild(viewIconElement);
|
||||||
|
columnElement.appendChild(viewElement);
|
||||||
|
rowElement.appendChild(columnElement);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add an entry to the List.js datastructure and immediatly replace the
|
||||||
|
* generic DOM element with our own one created above.
|
||||||
|
*/
|
||||||
|
this.add([{description: corpus.description, id: corpus.id, title: corpus.title}],
|
||||||
|
function(items) {items[0].elm = rowElement;});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CorpusList.DEFAULT_OPTIONS = {item: `<div>
|
CorpusList.DEFAULT_OPTIONS = {item: `<div>
|
||||||
|
|||||||
@ -15,8 +15,7 @@ class JobList extends List {
|
|||||||
|
|
||||||
|
|
||||||
_update(patch) {
|
_update(patch) {
|
||||||
var item, jobStatusElement, newStatusColor, operation, pathArray, status,
|
let item, jobStatusElement, operation, pathArray;
|
||||||
statusColor;
|
|
||||||
|
|
||||||
for (operation of patch) {
|
for (operation of patch) {
|
||||||
/* "/jobId/valueName" -> ["jobId", "valueName"] */
|
/* "/jobId/valueName" -> ["jobId", "valueName"] */
|
||||||
@ -35,13 +34,8 @@ class JobList extends List {
|
|||||||
switch(pathArray[1]) {
|
switch(pathArray[1]) {
|
||||||
case "status":
|
case "status":
|
||||||
jobStatusElement = item.elm.querySelector(".status");
|
jobStatusElement = item.elm.querySelector(".status");
|
||||||
status = jobStatusElement.innerHTML;
|
jobStatusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
|
||||||
statusColor = JobList.STATUS_COLORS[status]
|
jobStatusElement.classList.add(JobList.STATUS_COLORS[operation.value] || JobList.STATUS_COLORS['default']);
|
||||||
|| JobList.STATUS_COLORS['default'];
|
|
||||||
newStatusColor = JobList.STATUS_COLORS[operation.value]
|
|
||||||
|| JobList.STATUS_COLORS['default'];
|
|
||||||
jobStatusElement.classList.remove(statusColor);
|
|
||||||
jobStatusElement.classList.add(newStatusColor);
|
|
||||||
jobStatusElement.innerHTML = operation.value;
|
jobStatusElement.innerHTML = operation.value;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
@ -55,43 +49,65 @@ class JobList extends List {
|
|||||||
|
|
||||||
|
|
||||||
addJob(job) {
|
addJob(job) {
|
||||||
var jobDescriptionElement, jobElement, jobServiceElement, jobStatusElement,
|
let rowElement, columnElement, serviceElement, serviceIconElement, titleElement, descriptionElement, statusElement, viewElement, viewIconElement;
|
||||||
jobTitleElement, serviceColor, serviceIcon, statusColor;
|
|
||||||
|
|
||||||
jobDescriptionElement = document.createElement("p");
|
// Create a row elment, where all related information get stored
|
||||||
jobDescriptionElement.classList.add("description");
|
rowElement = document.createElement("tr");
|
||||||
jobDescriptionElement.innerText = job.description;
|
rowElement.dataset.id = job.id;
|
||||||
jobElement = document.createElement("a");
|
|
||||||
jobElement.classList.add("avatar", "collection-item");
|
|
||||||
jobElement.dataset.id = job.id;
|
|
||||||
jobElement.href = `/jobs/${job.id}`;
|
|
||||||
serviceColor = JobList.SERVICE_COLORS[job.service]
|
|
||||||
|| JobList.SERVICE_COLORS['default'];
|
|
||||||
serviceIcon = JobList.SERVICE_ICONS[job.service]
|
|
||||||
|| JobList.SERVICE_ICONS['default'];
|
|
||||||
jobServiceElement = document.createElement("i");
|
|
||||||
jobServiceElement.classList.add("circle", "material-icons", "service-icon",
|
|
||||||
serviceColor);
|
|
||||||
jobServiceElement.innerText = serviceIcon;
|
|
||||||
statusColor = JobList.STATUS_COLORS[job.status]
|
|
||||||
|| JobList.STATUS_COLORS['default'];
|
|
||||||
jobStatusElement = document.createElement("span");
|
|
||||||
jobStatusElement.classList.add("badge", "new", "status", statusColor);
|
|
||||||
jobStatusElement.dataset.badgeCaption = "";
|
|
||||||
jobStatusElement.innerText = job.status;
|
|
||||||
jobTitleElement = document.createElement("span");
|
|
||||||
jobTitleElement.classList.add("title");
|
|
||||||
jobTitleElement.innerText = job.title;
|
|
||||||
|
|
||||||
jobElement.appendChild(jobServiceElement);
|
// Create a column containing a service type identifying icon
|
||||||
jobElement.appendChild(jobStatusElement);
|
columnElement = document.createElement("td");
|
||||||
jobElement.appendChild(jobTitleElement);
|
serviceElement = document.createElement("a");
|
||||||
jobElement.appendChild(jobDescriptionElement);
|
serviceElement.classList.add("btn-floating", "disabled");
|
||||||
|
serviceIconElement = document.createElement("i");
|
||||||
|
serviceIconElement.classList.add("material-icons");
|
||||||
|
serviceIconElement.innerText = JobList.SERVICE_ICONS[job.service] || JobList.SERVICE_ICONS['default'];
|
||||||
|
serviceElement.appendChild(serviceIconElement);
|
||||||
|
columnElement.appendChild(serviceElement);
|
||||||
|
rowElement.appendChild(columnElement);
|
||||||
|
|
||||||
this.add(
|
// Create a column containing the title and description
|
||||||
[{description: job.description, id: job.id, title: job.title}],
|
columnElement = document.createElement("td");
|
||||||
function(items) {items[0].elm = jobElement;}
|
titleElement = document.createElement("b");
|
||||||
);
|
titleElement.classList.add("title");
|
||||||
|
titleElement.innerText = job.title;
|
||||||
|
descriptionElement = document.createElement("i");
|
||||||
|
descriptionElement.classList.add("description");
|
||||||
|
descriptionElement.innerText = job.description;
|
||||||
|
columnElement.appendChild(titleElement);
|
||||||
|
columnElement.appendChild(document.createElement("br"));
|
||||||
|
columnElement.appendChild(descriptionElement);
|
||||||
|
rowElement.appendChild(columnElement);
|
||||||
|
|
||||||
|
// Create a column containing the current status
|
||||||
|
columnElement = document.createElement("td");
|
||||||
|
statusElement = document.createElement("span");
|
||||||
|
statusElement.classList.add("badge", "new", "status", JobList.STATUS_COLORS[job.status] || JobList.STATUS_COLORS['default']);
|
||||||
|
statusElement.dataset.badgeCaption = "";
|
||||||
|
statusElement.innerText = job.status;
|
||||||
|
columnElement.appendChild(statusElement);
|
||||||
|
rowElement.appendChild(columnElement);
|
||||||
|
|
||||||
|
// Create a column containing a button leading to a details page
|
||||||
|
columnElement = document.createElement("td");
|
||||||
|
columnElement.classList.add("right-align");
|
||||||
|
viewElement = document.createElement("a");
|
||||||
|
viewElement.classList.add("waves-effect", "waves-light", "btn-small");
|
||||||
|
viewElement.href = `/jobs/${job.id}`;
|
||||||
|
viewElement.innerText = "View ";
|
||||||
|
viewIconElement = document.createElement("i");
|
||||||
|
viewIconElement.classList.add("material-icons", "right");
|
||||||
|
viewIconElement.innerText = "send";
|
||||||
|
viewElement.appendChild(viewIconElement);
|
||||||
|
columnElement.appendChild(viewElement);
|
||||||
|
rowElement.appendChild(columnElement);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add an entry to the List.js datastructure and immediatly replace the
|
||||||
|
* generic DOM element with our own one created above.
|
||||||
|
*/
|
||||||
|
this.add([{description: job.description, id: job.id, title: job.title}],
|
||||||
|
function(items) {items[0].elm = rowElement;});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
JobList.DEFAULT_OPTIONS = {item: `<div>
|
JobList.DEFAULT_OPTIONS = {item: `<div>
|
||||||
@ -101,10 +117,6 @@ JobList.DEFAULT_OPTIONS = {item: `<div>
|
|||||||
page: 4,
|
page: 4,
|
||||||
pagination: {innerWindow: 8, outerWindow: 1},
|
pagination: {innerWindow: 8, outerWindow: 1},
|
||||||
valueNames: ["description", "title", {data: ["id"]}]};
|
valueNames: ["description", "title", {data: ["id"]}]};
|
||||||
JobList.SERVICE_COLORS = {"merge_images": "amber",
|
|
||||||
"nlp": "blue",
|
|
||||||
"ocr": "green",
|
|
||||||
"default": "red"};
|
|
||||||
JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
|
JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
|
||||||
"nlp": "format_textdirection_l_to_r",
|
"nlp": "format_textdirection_l_to_r",
|
||||||
"ocr": "find_in_page",
|
"ocr": "find_in_page",
|
||||||
|
|||||||
@ -1,84 +1,75 @@
|
|||||||
{% extends "limited_width.html.j2" %}
|
{% extends "limited_width.html.j2" %}
|
||||||
|
|
||||||
{% block page_content %}
|
{% block page_content %}
|
||||||
<div class="col s12 m4">
|
<div class="col s12">
|
||||||
<h3>My Corpora</h3>
|
<h3>My Corpora</h3>
|
||||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
|
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col s12 m8">
|
<div class="col s12">
|
||||||
<div id="corpus-list">
|
<div class="card">
|
||||||
<div class="card">
|
<div class="card-content" id="corpora">
|
||||||
<div class="card-content">
|
<div class="input-field">
|
||||||
<div class="row">
|
<i class="material-icons prefix">search</i>
|
||||||
<div class="col s12 m8">
|
<input id="search-corpus" class="search" type="text"></input>
|
||||||
<div class="input-field">
|
<label for="search-corpus">Search corpus</label>
|
||||||
<i class="material-icons prefix">search</i>
|
|
||||||
<input id="search-corpus" class="search" type="text"></input>
|
|
||||||
<label for="search-corpus">Search corpus</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m4">
|
|
||||||
<p><a href="{{ url_for('corpora.add_corpus') }}" class="waves-effect waves-light btn right" style="width: 100%;"><i class="material-icons left">add</i>New corpus</a></p>
|
|
||||||
</div>
|
|
||||||
<div class="col s12">
|
|
||||||
<ul class="pagination"></ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<table>
|
||||||
|
<tbody class="list"></tbody>
|
||||||
|
</table>
|
||||||
|
<ul class="pagination"></ul>
|
||||||
|
</div>
|
||||||
|
<div class="card-action right-align">
|
||||||
|
<a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="collection list"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col s12">
|
<div class="col s12">
|
||||||
<p> </p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col s12 m4">
|
|
||||||
<h3>My Jobs</h3>
|
<h3>My Jobs</h3>
|
||||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
|
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col s12 m8">
|
<div class="col s12">
|
||||||
<div id="job-list">
|
<div class="card">
|
||||||
<div class="card">
|
<div class="card-content" id="jobs">
|
||||||
<div class="card-content">
|
<div class="input-field">
|
||||||
<div class="row">
|
<i class="material-icons prefix">search</i>
|
||||||
<div class="col s12 m8">
|
<input id="search-job" class="search" type="text"></input>
|
||||||
<div class="input-field">
|
<label for="search-job">Search job</label>
|
||||||
<i class="material-icons prefix">search</i>
|
|
||||||
<input id="search-job" class="search" type="text"></input>
|
|
||||||
<label for="search-job">Search job</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col s12 m4">
|
|
||||||
<p><a id="new-job" class="dropdown-trigger waves-effect waves-light btn right no-autoinit" href="#" data-target="new-job-dropdown" style="width: 100%;"><i class="material-icons left">add</i>New job</a></p>
|
|
||||||
</div>
|
|
||||||
<div class="col s12">
|
|
||||||
<ul class="pagination"></ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<table>
|
||||||
|
<tbody class="list"></tbody>
|
||||||
|
</table>
|
||||||
|
<ul class="pagination"></ul>
|
||||||
|
</div>
|
||||||
|
<div class="card-action right-align">
|
||||||
|
<p><a class="modal-trigger waves-effect waves-light btn" href="#" data-target="new-job-modal"><i class="material-icons left">add</i>New job</a></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="collection list"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<ul id='new-job-dropdown' class='dropdown-content'>
|
<div id="new-job-modal" class="modal">
|
||||||
<li><a href="{{ url_for('services.service', service='merge_images') }}"><i class="material-icons">burst_mode</i>Merge images</a></li>
|
<div class="modal-content">
|
||||||
<li><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
|
<h4>Job types</h4>
|
||||||
<li><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
|
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
||||||
</ul>
|
<ul>
|
||||||
|
<li><a href="{{ url_for('services.service', service='merge_images') }}"><i class="material-icons">burst_mode</i>Merge images</a></li>
|
||||||
|
<li><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
|
||||||
|
<li><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Init corpus list
|
// Init corpus list
|
||||||
var corpusList = new CorpusList("corpus-list", corporaSubscribers);
|
var corpusList = new CorpusList("corpora", corporaSubscribers);
|
||||||
|
|
||||||
// Init job list
|
// Init job list
|
||||||
var jobList = new JobList("job-list", jobsSubscribers);
|
var jobList = new JobList("jobs", jobsSubscribers);
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
M.Dropdown.init(document.getElementById("new-job"), {"coverTrigger": false});
|
M.Dropdown.init(document.getElementById("new-job"), {"coverTrigger": false});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user