Skip to content
Snippets Groups Projects
Commit 9ee2e9bd authored by Stephan Porada's avatar Stephan Porada :speech_balloon:
Browse files

Merge branch 'development' of gitlab.ub.uni-bielefeld.de:sfb1288inf/opaque into development

parents e4b794d3 cebe1c6d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/static/js/CorpusList.js
+ 5
− 2
View file @ 9ee2e9bd
......@@ -37,6 +37,7 @@ class CorpusList extends List {
corpusStatusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
corpusStatusElement.classList.add(CorpusList.STATUS_COLORS[operation.value] || CorpusList.STATUS_COLORS['default']);
corpusStatusElement.innerHTML = operation.value;
item.values({status: operation.value});
break;
default:
break;
......@@ -106,13 +107,15 @@ class CorpusList extends List {
* 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}],
this.add([{description: corpus.description, id: corpus.id,
status: corpus.status, title: corpus.title}],
function(items) {items[0].elm = rowElement;});
}
}
CorpusList.DEFAULT_OPTIONS = {item: `<div>
<span class="title"></span>
<span class="description"></span>
<td class="status"></td>
<span class="title"></span>
</div>`,
page: 4,
pagination: {innerWindow: 8, outerWindow: 1},
......
app/static/js/JobList.js
+ 11
− 6
View file @ 9ee2e9bd
......@@ -37,6 +37,7 @@ class JobList extends List {
jobStatusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
jobStatusElement.classList.add(JobList.STATUS_COLORS[operation.value] || JobList.STATUS_COLORS['default']);
jobStatusElement.innerHTML = operation.value;
item.values({status: operation.value});
break;
default:
break;
......@@ -106,17 +107,21 @@ class JobList extends List {
* 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}],
this.add([{description: job.description, id: job.id,
service: `/service=${job.service}`, status: job.status,
title: job.title}],
function(items) {items[0].elm = rowElement;});
}
}
JobList.DEFAULT_OPTIONS = {item: `<div>
<span class="title"></span>
<span class="description"></span>
</div>`,
JobList.DEFAULT_OPTIONS = {item: `<tr>
<td class="description"></td>
<td class="service"></td>
<td class="status"></td>
<td class="title"></td>
</tr>`,
page: 4,
pagination: {innerWindow: 8, outerWindow: 1},
valueNames: ["description", "title", {data: ["id"]}]};
valueNames: ["description", "service", "status", "title", {data: ["id"]}]};
JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
"nlp": "format_textdirection_l_to_r",
"ocr": "find_in_page",
......
app/static/js/nopaque.js 0 → 100644
+ 104
− 0
View file @ 9ee2e9bd
var socket = io();
var corpora;
var corporaSubscribers = [];
var jobs;
var jobsSubscribers = [];
var foreignCorpora;
var foreignCorporaSubscribers = [];
var foreignJobs;
var foreignJobsSubscribers = [];
function toast(message) {
var toast;
var toastActionElement;
toast = M.toast({"html": `<span>${message}</span>
<button class="btn-flat toast-action red-text" data-action="close">
<i class="material-icons">close</i>
</button>`});
toastActionElement = toast.el.querySelector(`.toast-action[data-action="close"]`);
if (toastActionElement) {
toastActionElement.addEventListener("click", function() {
toast.dismiss();
});
}
}
socket.on('init-corpora', function(msg) {
corpora = JSON.parse(msg);
for (let subscriber of corporaSubscribers) {subscriber._init(corpora);}
});
socket.on('init-jobs', function(msg) {
jobs = JSON.parse(msg);
for (let subscriber of jobsSubscribers) {subscriber._init(jobs);}
});
socket.on('update-corpora', function(msg) {
var patch;
patch = JSON.parse(msg);
corpora = jsonpatch.apply_patch(corpora, patch);
for (let subscriber of corporaSubscribers) {subscriber._update(patch);}
});
socket.on('update-jobs', function(msg) {
var patch;
patch = JSON.parse(msg);
jobs = jsonpatch.apply_patch(jobs, patch);
for (let subscriber of jobsSubscribers) {subscriber._update(patch);}
});
socket.on('init-foreign-corpora', function(msg) {
foreignCorpora = JSON.parse(msg);
for (let subscriber of foreignCorporaSubscribers) {subscriber._init(foreignCorpora);}
});
socket.on('init-foreign-jobs', function(msg) {
foreignJobs = JSON.parse(msg);
for (let subscriber of foreignJobsSubscribers) {subscriber._init(foreignJobs);}
});
socket.on('update-foreign-corpora', function(msg) {
var patch;
patch = JSON.parse(msg);
foreignCorpora = jsonpatch.apply_patch(foreignCorpora, patch);
for (let subscriber of foreignCorporaSubscribers) {subscriber._update(patch);}
});
socket.on('update-foreign-jobs', function(msg) {
var patch;
patch = JSON.parse(msg);
foreignJobs = jsonpatch.apply_patch(foreignJobs, patch);
for (let subscriber of foreignJobsSubscribers) {subscriber._update(patch);}
});
document.addEventListener("DOMContentLoaded", function() {
M.AutoInit();
M.CharacterCounter.init(document.querySelectorAll(`input[data-length][type="text"]`));
M.Dropdown.init(document.getElementById("nav-notifications"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false});
M.Dropdown.init(document.getElementById("nav-account"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false});
for (let entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
if (entry.href === window.location.href) {
entry.parentNode.classList.add("active");
}
}
socket.emit("subscribe_user_ressources");
});
app/templates/admin/user.html.j2
+ 25
− 4
View file @ 9ee2e9bd
......@@ -35,10 +35,21 @@
<div class="card-content" id="corpora">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-corpus" class="search" type="text"></input>
<input id="search-corpus" class="search" type="search"></input>
<label for="search-corpus">Search corpus</label>
</div>
<table>
<thead>
<tr>
<th></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
......@@ -52,10 +63,21 @@
<div class="card-content" id="jobs">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-job" class="search" type="text"></input>
<input id="search-job" class="search" type="search"></input>
<label for="search-job">Search job</label>
</div>
<table>
<thead>
<tr>
<th><span class="sort" data-sort="service">Service</span></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
......@@ -78,9 +100,8 @@
<script>
socket.emit('subscribe_foreign_user_ressources', {{ user.id }});
var corpusList = new CorpusList("corpora", foreignCorporaSubscribers);
var jobList = new JobList("jobs", foreignJobsSubscribers);
socket.emit("subscribe_foreign_user_ressources", {{ user.id }});
</script>
{% endblock %}
app/templates/base.html.j2
+ 28
− 127
View file @ 9ee2e9bd
......@@ -2,111 +2,27 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% if title %}
<title>nopaque – {{ title }}</title>
{% else %}
<title>nopaque</title>
{% endif %}
<link href="{{ url_for('static', filename='images/favicon.png') }}" rel="icon" type="image/png">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection"/>
<link rel="icon" href="{{ url_for('static', filename='images/favicon.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
<script src="{{ url_for('static', filename='js/JSONPatch.js/jsonpatch.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/Dark_Reader/darkreader.js') }}"></script>
<script src="{{ url_for('static', filename='js/List.js/list.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/Socket.IO/socket.io.slim.js') }}"></script>
<script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
<script src="{{ url_for('static', filename='js/add_job.js') }}"></script>
<script src="{{ url_for('static', filename='js/CorpusList.js') }}"></script>
<script src="{{ url_for('static', filename='js/JobList.js') }}"></script>
<script>
{% if current_user.is_dark == True %}
DarkReader.enable({
brightness: 100,
contrast: 100,
sepia: 0
});
{% else %}
DarkReader.disable();
{% endif %}
</script>
<script>
var corpora;
var corporaSubscribers = [];
var jobs;
var jobsSubscribers = [];
var socket = io();
socket.on('init-corpora', function(msg) {
corpora = JSON.parse(msg);
for (let subscriber of corporaSubscribers) {subscriber._init(corpora);}
});
socket.on('init-jobs', function(msg) {
jobs = JSON.parse(msg);
for (let subscriber of jobsSubscribers) {subscriber._init(jobs);}
});
socket.on('update-corpora', function(msg) {
var patch;
patch = JSON.parse(msg);
corpora = jsonpatch.apply_patch(corpora, patch);
for (let subscriber of corporaSubscribers) {subscriber._update(patch);}
});
socket.on('update-jobs', function(msg) {
var patch;
patch = JSON.parse(msg);
jobs = jsonpatch.apply_patch(jobs, patch);
for (let subscriber of jobsSubscribers) {subscriber._update(patch);}
});
socket.on('message', function(msg) {
console.log(msg);
});
</script>
<script>
var foreignCorpora;
var foreignCorporaSubscribers = [];
var foreignJobs;
var foreignJobsSubscribers = [];
socket.on('init-foreign-corpora', function(msg) {
foreignCorpora = JSON.parse(msg);
for (let subscriber of foreignCorporaSubscribers) {subscriber._init(foreignCorpora);}
});
socket.on('init-foreign-jobs', function(msg) {
foreignJobs = JSON.parse(msg);
for (let subscriber of foreignJobsSubscribers) {subscriber._init(foreignJobs);}
});
socket.on('update-foreign-corpora', function(msg) {
var patch;
patch = JSON.parse(msg);
foreignCorpora = jsonpatch.apply_patch(foreignCorpora, patch);
for (let subscriber of foreignCorporaSubscribers) {subscriber._update(patch);}
});
socket.on('update-foreign-jobs', function(msg) {
var patch;
patch = JSON.parse(msg);
foreignJobs = jsonpatch.apply_patch(foreignJobs, patch);
for (let subscriber of foreignJobsSubscribers) {subscriber._update(patch);}
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<header>
<div id="nav-notifications-dropdown" class="dropdown-content grey-text text-darken-4">
<p>Notifications</p>
</div>
<ul id="nav-account-dropdown" class="dropdown-content">
{% if current_user.is_authenticated %}
<li><a href="{{ url_for('profile.index') }}"><i class="material-icons">settings</i>Settings</a></li>
<li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
{% else %}
<li><a href="{{ url_for('auth.login') }}"><i class="material-icons">person</i>Log in</a></li>
<li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</i>Register</a></li>
{% endif %}
</ul>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
......@@ -128,6 +44,20 @@
</nav>
</div>
<!-- Dropdown menus for the navbar -->
<div id="nav-notifications-dropdown" class="dropdown-content grey-text text-darken-4">
<p>Notifications</p>
</div>
<ul id="nav-account-dropdown" class="dropdown-content">
{% if current_user.is_authenticated %}
<li><a href="{{ url_for('profile.index') }}"><i class="material-icons">settings</i>Settings</a></li>
<li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
{% else %}
<li><a href="{{ url_for('auth.login') }}"><i class="material-icons">person</i>Log in</a></li>
<li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</i>Register</a></li>
{% endif %}
</ul>
<ul id="slide-out" class="sidenav sidenav-fixed">
<li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>nopaque</a></li>
<li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
......@@ -168,45 +98,16 @@
</div>
</div>
</footer>
<script>
socket.emit('subscribe_user_ressources');
</script>
<script src="{{ url_for('static', filename='js/Materialize/materialize.min.js') }}"></script>
<script>
M.AutoInit();
M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="text"]'))
M.Dropdown.init(
document.getElementById("nav-notifications"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
);
M.Dropdown.init(
document.getElementById("nav-account"),
{"alignment": "right", "constrainWidth": false, "coverTrigger": false}
);
// Highlight current navigation entry
var entry;
for (entry of document.querySelectorAll("#slide-out a:not(.subheader)")) {
if (entry.href === window.location.href) {
entry.parentNode.classList.add("active");
}
}
var toast;
var toastActionElement;
{% for message in get_flashed_messages() %}
toast = M.toast({"html": `<span>{{ message }}</span><button class="btn-flat toast-action red-text" data-action="close"><i class="material-icons">close</i></button>`});
toastActionElement = toast.el.querySelector(".toast-action[data-action='close']");
if (toastActionElement) {
toastActionElement.addEventListener("click", function() {
toast.dismiss();
});
}
{% endfor %}
for (toastActionElement of document.querySelectorAll(".toast-action[data-action='close']")) {
toastActionElement.addEventListener("click", function(event) {
M.Toast.getInstance(toastActionElement.parentElement).dismiss();
});
}
document.addEventListener("DOMContentLoaded", function() {
{% if current_user.is_authenticated and current_user.is_dark %}
DarkReader.enable({"brightness": 100, "contrast": 100, "sepia": 0});
{% endif %}
{% for flashed_message in get_flashed_messages() %}
toast("{{ flashed_message }}");
{% endfor %}
});
</script>
</body>
</html>
app/templates/main/dashboard.html.j2
+ 35
− 12
View file @ 9ee2e9bd
......@@ -8,10 +8,21 @@
<div class="card-content" id="corpora">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-corpus" class="search" type="text"></input>
<input id="search-corpus" class="search" type="search"></input>
<label for="search-corpus">Search corpus</label>
</div>
<table>
<thead>
<tr>
<th></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
......@@ -29,10 +40,21 @@
<div class="card-content" id="jobs">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-job" class="search" type="text"></input>
<input id="search-job" class="search" type="search"></input>
<label for="search-job">Search job</label>
</div>
<table>
<thead>
<tr>
<th><span class="sort" data-sort="service">Service</span></th>
<th>
<span class="sort" data-sort="title">Title</span>
<span class="sort" data-sort="description">Description</span>
</th>
<th><span class="sort" data-sort="status">Status</span></th>
<th></th>
</tr>
</thead>
<tbody class="list"></tbody>
</table>
<ul class="pagination"></ul>
......@@ -45,12 +67,17 @@
<div id="new-job-modal" class="modal">
<div class="modal-content">
<h4>Job types</h4>
<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>
<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>
<h4>Select a service</h4>
<ul class="collection">
<a href="{{ url_for('services.service', service='merge_images') }}" class="collection-item">
<i class="material-icons left">burst_mode</i>Merge images
</a>
<a href="{{ url_for('services.service', service='nlp') }}" class="collection-item">
<i class="material-icons left">format_textdirection_l_to_r</i>Natural Language Processing
</a>
<a href="{{ url_for('services.service', service='ocr') }}" class="collection-item">
<i class="material-icons left">find_in_page</i>Optical Character Recognition
</a>
</ul>
</div>
<div class="modal-footer">
......@@ -64,9 +91,5 @@
// Init job list
var jobList = new JobList("jobs", jobsSubscribers);
document.addEventListener('DOMContentLoaded', function() {
M.Dropdown.init(document.getElementById("new-job"), {"coverTrigger": false});
});
</script>
{% endblock %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment