diff --git a/app/static/js/corpora.js b/app/static/js/corpora.js new file mode 100644 index 00000000..6922adec --- /dev/null +++ b/app/static/js/corpora.js @@ -0,0 +1,33 @@ +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); +} diff --git a/app/static/js/jobs.js b/app/static/js/jobs.js new file mode 100644 index 00000000..97fd1afa --- /dev/null +++ b/app/static/js/jobs.js @@ -0,0 +1,53 @@ +// 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.key = "id"; + jobElement.dataset.value = job.id; + jobElement.href = `/jobs/${job.id}`; + jobDescriptionElement = document.createElement("p"); + jobDescriptionElement.dataset.key = "description"; + jobDescriptionElement.innerText = job.description; + jobServiceElement = document.createElement("i"); + jobServiceElement.classList.add("circle", "material-icons", SERVICE_COLORS[job.service]); + jobServiceElement.dataset.key = "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.dataset.key = "status"; + jobStatusElement.innerText = job.status; + jobTitleElement = document.createElement("span"); + jobTitleElement.classList.add("title"); + jobTitleElement.dataset.key = "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); +} diff --git a/app/static/js/polls.js b/app/static/js/polls.js new file mode 100644 index 00000000..c8e8ce34 --- /dev/null +++ b/app/static/js/polls.js @@ -0,0 +1,57 @@ +var subscribers = {"corpora": [], "jobs": []}; + + +function getCorpora() { + fetch("/api/v1.0/corpora") + .then(function(response) { + if (response.status >= 200 && response.status < 300) { + return Promise.resolve(response); + } else { + return Promise.reject(new Error(response.statusText)); + } + }) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + if (JSON.stringify(corpora) != JSON.stringify(data)) { + corpora = data; + for (subscriber of subscribers.corpora) { + subscriber(); + } + } + }) + .catch(function(error) { + console.log('Request failed', error); + }); +} + + +function getJobs() { + fetch("/api/v1.0/jobs") + .then(function(response) { + if (response.status >= 200 && response.status < 300) { + return Promise.resolve(response); + } else { + return Promise.reject(new Error(response.statusText)); + } + }) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + if (JSON.stringify(jobs) != JSON.stringify(data)) { + jobs = data; + for (subscriber of subscribers.jobs) { + subscriber(); + } + } + }) + .catch(function(error) { + console.log('Request failed', error); + }); +} + + +setInterval(getCorpora, 5000); +setInterval(getJobs, 5000); diff --git a/app/static/js/utils.js b/app/static/js/utils.js new file mode 100644 index 00000000..91e3a66c --- /dev/null +++ b/app/static/js/utils.js @@ -0,0 +1,9 @@ +// List.js utils +var updatePagination = function(list) { + pagination = list.listContainer.querySelector(".pagination"); + if (pagination.childElementCount <= 1) { + pagination.classList.add("hide"); + } else { + pagination.classList.remove("hide"); + } +} diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2 index 94ca3988..d5b361b7 100644 --- a/app/templates/base.html.j2 +++ b/app/templates/base.html.j2 @@ -11,18 +11,25 @@ - + {% if current_user.is_authenticated %} + + {% endif %} + + + + diff --git a/app/templates/main/dashboard.html.j2 b/app/templates/main/dashboard.html.j2 index ac063dae..94c97662 100644 --- a/app/templates/main/dashboard.html.j2 +++ b/app/templates/main/dashboard.html.j2 @@ -27,15 +27,7 @@ -
- {% for corpus in current_user.corpora.all() %} - - book - {{ corpus.title }} -

{{ corpus.description }}

-
- {% endfor %} -
+
@@ -85,103 +81,10 @@ pagination: false}); jobList.on("filterComplete", updatePagination); jobList.on("searchComplete", updatePagination); - - -