Skip to content
Snippets Groups Projects
Commit 025c5164 authored by Patrick Jentsch's avatar Patrick Jentsch
Browse files

Add javascript code for polling with update subscibers.

parent 6d0096c2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/static/js/corpora.js 0 → 100644
+ 33
− 0
View file @ 025c5164
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);
}
app/static/js/jobs.js 0 → 100644
+ 53
− 0
View file @ 025c5164
// 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);
}
app/static/js/polls.js 0 → 100644
+ 57
− 0
View file @ 025c5164
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);
app/static/js/utils.js 0 → 100644
+ 9
− 0
View file @ 025c5164
// 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");
}
}
app/templates/base.html.j2
+ 17
− 10
View file @ 025c5164
......@@ -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>
......
app/templates/main/dashboard.html.j2
+ 9
− 106
View file @ 025c5164
......@@ -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">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment