sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-04 04:12:45 +00:00
Code Issues Projects Releases Wiki Activity

Add javascript code for polling with update subscibers.

Browse Source
This commit is contained in:
Patrick Jentsch
2019-08-16 14:54:29 +02:00
parent 6d0096c2cc
commit 025c51646c
6 changed files with 178 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,18 +11,25 @@
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='fonts/material-icons/material-icons.css') }}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/opaque.css') }}" media="screen,projection"/>
<script src="{{ url_for('static', filename='js/list.js') }}"></script>
{% if current_user.is_authenticated %}
<script>
// Utils
var updatePagination = function(list) {
pagination = list.listContainer.querySelector(".pagination");
if (pagination.childElementCount <= 1) {
pagination.classList.add("hide");
} else {
pagination.classList.remove("hide");
}
}
var corpora = [
{% for corpus in current_user.corpora.all() %}
{{ corpus.to_dict()|tojson }},
{% endfor %}
];
var jobs = [
{% for job in current_user.jobs.all() %}
{{ job.to_dict()|tojson }},
{% endfor %}
];
</script>
<script src="{{ url_for('static', filename='js/polls.js') }}"></script>
{% endif %}
<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/corpora.js') }}"></script>
<script src="{{ url_for('static', filename='js/jobs.js') }}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

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

@@ -27,15 +27,7 @@
</div>
</div>
</div>
<div class="collection list">
{% for corpus in current_user.corpora.all() %}
<a href="#!" class="collection-item avatar">
<i class="material-icons circle">book</i>
<span class="title">{{ corpus.title }}</span>
<p>{{ corpus.description }}</p>
</a>
{% endfor %}
</div>
<div class="collection list"></div>
</div>
</div>
<script>
@@ -44,6 +36,10 @@
pagination: true});
corpusList.on("filterComplete", updatePagination);
corpusList.on("searchComplete", updatePagination);
createCorpusElements(corpusList);
subscribers.corpora.push(function() {
console.log('[Corpora]: Something changed.');
});
</script>
<div class="col s12">
@@ -85,103 +81,10 @@
pagination: false});
jobList.on("filterComplete", updatePagination);
jobList.on("searchComplete", updatePagination);
</script>
<script>
const SERVICE_COLORS = {"nlp": "blue",
"ocr": "green"}
const SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
"ocr": "find_in_page"}
const STATUS_COLORS = {"pending": "amber",
"running": "indigo",
"complete": "teal"}
var getJobsCallbackFunctions = [];
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(jobs) {
for (callbackFunction of getJobsCallbackFunctions) {
callbackFunction(jobs);
}
})
.catch(function(error) {
console.log('Request failed', error);
});
}
setInterval(getJobs, 1000);
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 updateJobElement(job, jobElement) {
/*
if (jobElement.dataset.value != job.id) {
jobElement.dataset.value = job.id;
jobElement.href = `/jobs/${job.id}`;
}
*/
}
function processJobs(jobs) {
for (job of jobs) {
jobElement = jobList.list.querySelectorAll('[data-key="id"]')
.querySelector(`[data-value="${job.id}"]`);
console.log(jobElement);
if (jobElement) {
statusElement = jobElement.querySelector(".status");
currentStatus = statusElement.text
continue;
}
jobList.list.appendChild(createJobElement(job));
}
jobList.reIndex();
jobList.update();
}
getJobsCallbackFunctions.push(processJobs)
createJobElements(jobList);
subscribers.jobs.push(function() {
console.log('[Jobs]: Something changed.');
});
</script>
<div id="new-corpus-modal" class="modal">