sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-12-25 02:44:18 +00:00
Code Issues Projects Releases Wiki Activity

Use custom List classes for corpora and job lists.

Browse Source
This commit is contained in:
Patrick Jentsch 2019-08-20 11:24:52 +02:00
parent 74c863e0f7
commit 5ff2ef9301
8 changed files with 197 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
app/static/js/CorpusList.js Normal file
View File

@ -0,0 +1,79 @@
class CorpusList extends List {
constructor(idOrElement, options, live=false) {
super(idOrElement, options);
this.createCorpusElements(corpora);
if (live) {
subscribers.corpora.push(this);
}
}
createCorpusElement(corpus) {
var corpusDescriptionElement, corpusElement, corpusIconElement,
corpusTitleElement;
corpusDescriptionElement = document.createElement("p");
corpusDescriptionElement.dataset.key = "description";
corpusDescriptionElement.innerText = corpus.description;
corpusElement = document.createElement("a");
corpusElement.classList.add("avatar", "collection-item");
corpusElement.dataset.key = "id";
corpusElement.dataset.value = 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);
corpusElement.appendChild(corpusTitleElement);
corpusElement.appendChild(corpusDescriptionElement);
return corpusElement;
}
createCorpusElements(corpora) {
var corpus;
for (corpus of corpora) {
this.list.appendChild(this.createCorpusElement(corpus));
}
this.reIndex();
this.update();
List.updatePagination(this);
}
corporaUpdateHandler(delta) {
var corpusElement, key, listItem;
for (key in delta) {
if (key === "_t") {continue;}
if (key.startsWith("_")) {
this.remove("id", delta[key][0].id);
} else if (Array.isArray(delta[key])) {
corpusElement = this.createCorpusElement(delta[key][0]);
listItem = this.add({"description": delta[key][0].description,
"title": delta[key][0].title,
"id": delta[key][0].id})[0];
if (listItem.elm) {
listItem.elm.replaceWith(corpusElement);
}
listItem.elm = corpusElement;
} else {
listItem = this.get("id", corpora[parseInt(key)].id)[0];
if (delta[key]["description"]) {
listItem.values({"description": delta[key]["description"][1]});
}
if (delta[key]["title"]) {
listItem.values({"title": delta[key]["title"][1]});
}
}
}
}
}

99
app/static/js/JobList.js Normal file
View File

@ -0,0 +1,99 @@
class JobList extends List {
constructor(idOrElement, options, live=false) {
super(idOrElement, options);
this.createJobElements(jobs);
if (live) {
subscribers.jobs.push(this);
}
}
createJobElement(job) {
var jobDescriptionElement, jobElement, jobServiceElement, jobStatusElement,
jobTitleElement;
jobDescriptionElement = document.createElement("p");
jobDescriptionElement.classList.add("description");
jobDescriptionElement.innerText = job.description;
jobElement = document.createElement("a");
jobElement.classList.add("avatar", "collection-item");
jobElement.dataset.id = job.id;
jobElement.href = `/jobs/${job.id}`;
jobServiceElement = document.createElement("i");
jobServiceElement.classList.add("circle", "material-icons", "service-icon", JobList.SERVICE_COLORS[job.service]);
jobServiceElement.innerText = JobList.SERVICE_ICONS[job.service];
jobStatusElement = document.createElement("span");
jobStatusElement.classList.add("badge", "new", "status", JobList.STATUS_COLORS[job.status]);
jobStatusElement.dataset.badgeCaption = "";
jobStatusElement.innerText = job.status;
jobTitleElement = document.createElement("span");
jobTitleElement.classList.add("title");
jobTitleElement.innerText = job.title;
jobElement.appendChild(jobServiceElement);
jobElement.appendChild(jobStatusElement);
jobElement.appendChild(jobTitleElement);
jobElement.appendChild(jobDescriptionElement);
return jobElement;
}
createJobElements(jobs) {
var job;
for (job of jobs) {
this.list.appendChild(this.createJobElement(job));
}
this.reIndex();
this.update();
List.updatePagination(this);
}
jobsUpdateHandler(delta) {
var jobElement, jobStatusElement, key, listItem;
for (key in delta) {
if (key === "_t") {continue;}
if (key.startsWith("_")) {
this.remove("id", delta[key][0].id);
} else if (Array.isArray(delta[key])) {
jobElement = this.createJobElement(delta[key][0]);
listItem = this.add({"description": delta[key][0].description,
"title": delta[key][0].title,
"id": delta[key][0].id})[0];
if (listItem.elm) {
listItem.elm.replaceWith(jobElement);
}
listItem.elm = jobElement;
} else {
listItem = this.get("id", jobs[parseInt(key)].id)[0];
if (delta[key]["status"]) {
jobStatusElement = listItem.elm.querySelector(".status");
jobStatusElement.classList.remove(JobList.STATUS_COLORS[delta[key]["status"][0]]);
jobStatusElement.classList.add(JobList.STATUS_COLORS[delta[key]["status"][1]]);
jobStatusElement.innerHTML = delta[key]["status"][1];
}
if (delta[key]["description"]) {
listItem.values({"description": delta[key]["description"][1]});
}
if (delta[key]["title"]) {
listItem.values({"title": delta[key]["title"][1]});
}
}
}
}
}
JobList.SERVICE_COLORS = {"nlp": "blue",
"ocr": "green",
"default": "red"};
JobList.SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
"ocr": "find_in_page",
"default": "help"};
JobList.STATUS_COLORS = {"pending": "amber",
"running": "indigo",
"complete": "teal",
"default": "red"};

33
app/static/js/corpora.js
View File

@ -1,33 +0,0 @@
function createCorpusElement(corpus) {
corpusElement = document.createElement("a");
corpusElement.classList.add("avatar", "collection-item");
corpusElement.dataset.key = "id";
corpusElement.dataset.value = corpus.id;
corpusElement.href = `/corpora/${corpus.id}`;
corpusDescriptionElement = document.createElement("p");
corpusDescriptionElement.dataset.key = "description";
corpusDescriptionElement.innerText = corpus.description;
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);
corpusElement.appendChild(corpusTitleElement);
corpusElement.appendChild(corpusDescriptionElement);
return corpusElement;
}
function createCorpusElements(corpusList) {
for (corpus of corpora) {
corpusList.list.appendChild(createCorpusElement(corpus));
}
corpusList.reIndex();
corpusList.update();
updatePagination(corpusList);
}

49
app/static/js/jobs.js
View File

@ -1,49 +0,0 @@
// Job list code
const SERVICE_COLORS = {"nlp": "blue",
"ocr": "green",
"default": "red"};
const SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
"ocr": "find_in_page",
"default": "help"};
const STATUS_COLORS = {"pending": "amber",
"running": "indigo",
"complete": "teal",
"default": "red"};
function createJobElement(job) {
jobElement = document.createElement("a");
jobElement.classList.add("avatar", "collection-item");
jobElement.dataset.id = job.id;
jobElement.href = `/jobs/${job.id}`;
jobDescriptionElement = document.createElement("p");
jobDescriptionElement.classList.add("description");
jobDescriptionElement.innerText = job.description;
jobServiceElement = document.createElement("i");
jobServiceElement.classList.add("circle", "material-icons", "service-icon", SERVICE_COLORS[job.service]);
jobServiceElement.innerText = SERVICE_ICONS[job.service];
jobStatusElement = document.createElement("span");
jobStatusElement.classList.add("badge", "new", "status", STATUS_COLORS[job.status]);
jobStatusElement.dataset.badgeCaption = "";
jobStatusElement.innerText = job.status;
jobTitleElement = document.createElement("span");
jobTitleElement.classList.add("title");
jobTitleElement.innerText = job.title;
jobElement.appendChild(jobServiceElement);
jobElement.appendChild(jobStatusElement);
jobElement.appendChild(jobTitleElement);
jobElement.appendChild(jobDescriptionElement);
return jobElement;
}
function createJobElements(jobList) {
for (job of jobs) {
jobList.list.appendChild(createJobElement(job));
}
jobList.reIndex();
jobList.update();
updatePagination(jobList);
}

4
app/static/js/polls.js
View File

@ -17,7 +17,7 @@ function getCorpora() {
if (JSON.stringify(corpora) != JSON.stringify(data)) { if (JSON.stringify(corpora) != JSON.stringify(data)) {
corpora = data; corpora = data;
for (subscriber of subscribers.corpora) { for (subscriber of subscribers.corpora) {
subscriber(); subscriber.corporaUpdateHandler();
} }
} }
}) })
@ -44,7 +44,7 @@ function getJobs() {
if (delta) { if (delta) {
jobs = json; jobs = json;
for (subscriber of subscribers.jobs) { for (subscriber of subscribers.jobs) {
subscriber(delta); subscriber.jobsUpdateHandler(delta);
} }
} }
}) })

3
app/static/js/utils.js
View File

@ -1,5 +1,4 @@
// List.js utils List.updatePagination = function(list) {
var updatePagination = function(list) {
pagination = list.listContainer.querySelector(".pagination"); pagination = list.listContainer.querySelector(".pagination");
if (pagination.childElementCount <= 1) { if (pagination.childElementCount <= 1) {
pagination.classList.add("hide"); pagination.classList.add("hide");

4
app/templates/base.html.j2
View File

@ -29,8 +29,8 @@
{% endif %} {% endif %}
<script src="{{ url_for('static', filename='js/list.js') }}"></script> <script src="{{ url_for('static', filename='js/list.js') }}"></script>
<script src="{{ url_for('static', filename='js/utils.js') }}"></script> <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
<script src="{{ url_for('static', filename='js/corpora.js') }}"></script> <script src="{{ url_for('static', filename='js/CorpusList.js') }}"></script>
<script src="{{ url_for('static', filename='js/jobs.js') }}"></script> <script src="{{ url_for('static', filename='js/JobList.js') }}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head> </head>
<body> <body>

56
app/templates/main/dashboard.html.j2
View File

@ -31,15 +31,13 @@
</div> </div>
</div> </div>
<script> <script>
corpusList = new List("corpus-list", {valueNames: ["title"], var corpusListOptions = {item: '<a><span class="title"></span><span class="description"></span></a>',
page: 4, page: 4,
pagination: true}); pagination: true,
corpusList.on("filterComplete", updatePagination); valueNames: ["description", "title", {data: ["id"]}]}
corpusList.on("searchComplete", updatePagination); var corpusList = new CorpusList("corpus-list", corpusListOptions, true);
createCorpusElements(corpusList); corpusList.on("filterComplete", List.updatePagination);
subscribers.corpora.push(function() { corpusList.on("searchComplete", List.updatePagination);
console.log('[Corpora]: Something changed.');
});
</script> </script>
<div class="col s12"> <div class="col s12">
@ -76,45 +74,13 @@
</div> </div>
</div> </div>
<script> <script>
var template = '<a><span class="title"></span></a>' jobListOptions = {item: '<a><span class="title"></span><span class="description"></span></a>',
var jobList = new List("job-list", {item: '<a><span class="title"></span></a>',
page: 4, page: 4,
pagination: true, pagination: true,
valueNames: ["description", valueNames: ["description", "title", {data: ["id"]}]}
"title", var jobList = new JobList("job-list", jobListOptions, true);
{data: ["id"]}]}); jobList.on("filterComplete", List.updatePagination);
jobList.on("filterComplete", updatePagination); jobList.on("searchComplete", List.updatePagination);
jobList.on("searchComplete", updatePagination);
createJobElements(jobList);
subscribers.jobs.push(function(delta) {
for (key in delta) {
if (key === "_t") {continue;}
if (key.startsWith("_")) {
jobList.remove("id", delta[key][0].id);
} else if (Array.isArray(delta[key])) {
jobElement = createJobElement(delta[key][0]);
listItem = jobList.add({"description": delta[key][0].description,
"title": delta[key][0].title,
"id": delta[key][0].id})[0];
listItem.elm.replaceWith(jobElement);
listItem.elm = jobElement;
} else {
var listItem = jobList.get("id", jobs[parseInt(key)].id)[0];
if (delta[key]["status"]) {
var jobStatusElement = listItem.elm.querySelector(".status");
jobStatusElement.classList.remove(STATUS_COLORS[delta[key]["status"][0]]);
jobStatusElement.classList.add(STATUS_COLORS[delta[key]["status"][1]]);
jobStatusElement.innerHTML = delta[key]["status"][1];
}
if (delta[key]["description"]) {
listItem.values({"description": delta[key]["description"][1]});
}
if (delta[key]["title"]) {
listItem.values({"title": delta[key]["title"][1]});
}
}
}
});
</script> </script>
<div id="new-corpus-modal" class="modal"> <div id="new-corpus-modal" class="modal">