mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
Rework jobs package
This commit is contained in:
Patrick Jentsch
parent
73a597fdd2
commit
a996d36f2d
@ -1,168 +1,171 @@
|
||||
{% extends "nopaque.html.j2" %}
|
||||
|
||||
{% set headline = '<i class="left material-icons service" data-service="{service}" style="font-size: inherit;"></i>Job ({service}) - {title}'.format(service=job.service, title=job.title) %}
|
||||
{% from '_constants.html.j2' import COLORS %}
|
||||
|
||||
{% if job.service == 'file-setup' %}
|
||||
{% set border_color = COLORS.file_setup_darken %}
|
||||
{% set main_class = 'file-setup-color lighten' %}
|
||||
{% set scheme_color = COLORS.file_setup_darken %}
|
||||
{% elif job.service == 'nlp' %}
|
||||
{% set border_color = COLORS.nlp_darken %}
|
||||
{% set main_class = 'nlp-color lighten' %}
|
||||
{% set scheme_color = COLORS.nlp_darken %}
|
||||
{% elif job.service == 'ocr' %}
|
||||
{% set border_color = COLORS.ocr_darken %}
|
||||
{% set main_class = 'ocr-color lighten' %}
|
||||
{% set scheme_color = COLORS.ocr_darken %}
|
||||
{% endif %}
|
||||
|
||||
{% block main_attribs %} class="{{ main_class }}"{% endblock main_attribs %}
|
||||
|
||||
{% block page_content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<h1><i class="left material-icons service" data-service="{{ job.service }}" style="font-size: inherit;"></i>Job ({{ job.service }}) - {{ job.title }}</h1>
|
||||
</div>
|
||||
|
||||
{% if job.service == 'file-setup' %}
|
||||
{{ Macros.insert_color_scheme(file_setup_color_darken) }}
|
||||
{% set border_color = file_setup_color_darken %}
|
||||
{% elif job.service == 'nlp' %}
|
||||
{{ Macros.insert_color_scheme(nlp_color_darken) }}
|
||||
{% set border_color = nlp_color_darken %}
|
||||
{% elif job.service == 'ocr' %}
|
||||
{{ Macros.insert_color_scheme(ocr_color_darken) }}
|
||||
{% set border_color = ocr_color_darken %}
|
||||
{% endif %}
|
||||
<div class="col s12">
|
||||
<div class="card" style="border-top: 10px solid {{border_color}}">
|
||||
<div class="card-content">
|
||||
<div class="row">
|
||||
<div class="col s8 m9 l10">
|
||||
<span class="card-title title">{{ job.title }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<div class="card" style="border-top: 10px solid {{border_color}}">
|
||||
<div class="card-content">
|
||||
<div class="row">
|
||||
<div class="col s8 m9 l10">
|
||||
<span class="card-title title">{{ job.title }}</span>
|
||||
</div>
|
||||
|
||||
<div class="col s4 m3 l2 right-align">
|
||||
<span class="chip status white-text"></span>
|
||||
<div class="active preloader-wrapper small" id="progress-indicator">
|
||||
<div class="spinner-layer spinner-blue-only">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
<div class="col s4 m3 l2 right-align">
|
||||
<span class="chip status white-text"></span>
|
||||
<div class="active preloader-wrapper small" id="progress-indicator">
|
||||
<div class="spinner-layer spinner-blue-only">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<p class="description">{{ job.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="col s12"> </div>
|
||||
|
||||
<div class="col s12 m6">
|
||||
<div class="input-field">
|
||||
<input disabled id="creation-date" type="text" value="{{ job.creation_date.strftime('%d/%m/%Y, %H:%M:%S %p') }}">
|
||||
<label for="creation-date">Creation date</label>
|
||||
</div>
|
||||
<div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m6">
|
||||
<div class="input-field">
|
||||
<input class="end-date" disabled id="end-date" type="text" value="">
|
||||
<label for="end-date">End date</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="input-field">
|
||||
<input disabled id="service" type="text" value="{{ job.service }}">
|
||||
<label for="service">Service</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="input-field">
|
||||
<input disabled id="service-args" type="text" value="{{ job.service_args|e }}">
|
||||
<label for="service-args">Service arguments</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="input-field">
|
||||
<input disabled id="service-version" type="text" value="{{ job.service_version }}">
|
||||
<label for="service-version">Service version</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<p class="description">{{ job.description }}</p>
|
||||
<div class="card-action right-align">
|
||||
{% if current_user.is_administrator() and job.status == 'failed' %}
|
||||
<a href="{{ url_for('jobs.restart', job_id=job.id) }}" class="btn waves-effect waves-light"><i class="material-icons left">repeat</i>Restart</a>
|
||||
{% endif %}
|
||||
<!-- <a href="#" class="btn disabled waves-effect waves-light"><i class="material-icons left">settings</i>Export Parameters</a> -->
|
||||
<a data-target="delete-job-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12"> </div>
|
||||
|
||||
<div class="col s12 m6">
|
||||
<div class="input-field">
|
||||
<input disabled id="creation-date" type="text" value="{{ job.creation_date.strftime('%d/%m/%Y, %H:%M:%S %p') }}">
|
||||
<label for="creation-date">Creation date</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m6">
|
||||
<div class="input-field">
|
||||
<input class="end-date" disabled id="end-date" type="text" value="">
|
||||
<label for="end-date">End date</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="input-field">
|
||||
<input disabled id="service" type="text" value="{{ job.service }}">
|
||||
<label for="service">Service</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="input-field">
|
||||
<input disabled id="service-args" type="text" value="{{ job.service_args|e }}">
|
||||
<label for="service-args">Service arguments</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="input-field">
|
||||
<input disabled id="service-version" type="text" value="{{ job.service_version }}">
|
||||
<label for="service-version">Service version</label>
|
||||
<div class="col s12">
|
||||
<div class="card">
|
||||
<div class="card-content" id="inputs">
|
||||
<div class="row">
|
||||
<div class="col s12 m2">
|
||||
<span class="card-title"><i class="left material-icons" style="font-size: inherit;">input</i>Inputs</span>
|
||||
<p>Original input files.</p>
|
||||
</div>
|
||||
<div class="col s12 m10">
|
||||
<ul class="pagination paginationTop"></ul>
|
||||
<table class="highlight responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort" data-sort="filename">Filename</th>
|
||||
<th>{# Actions #}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list">
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination paginationBottom"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-action right-align">
|
||||
{% if current_user.is_administrator() and job.status == 'failed' %}
|
||||
<a href="{{ url_for('jobs.restart', job_id=job.id) }}" class="btn waves-effect waves-light"><i class="material-icons left">repeat</i>Restart</a>
|
||||
{% endif %}
|
||||
<!-- <a href="#" class="btn disabled waves-effect waves-light"><i class="material-icons left">settings</i>Export Parameters</a> -->
|
||||
<a data-target="delete-job-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<div class="card">
|
||||
<div class="card-content" id="inputs">
|
||||
<div class="row">
|
||||
<div class="col s12 m2">
|
||||
<span class="card-title"><i class="left material-icons" style="font-size: inherit;">input</i>Inputs</span>
|
||||
<p>Original input files.</p>
|
||||
</div>
|
||||
<div class="col s12 m10">
|
||||
<ul class="pagination paginationTop"></ul>
|
||||
<table class="highlight responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sort" data-sort="filename">Filename</th>
|
||||
<th>{# Actions #}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list">
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination paginationBottom"></ul>
|
||||
<div class="col s12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="row">
|
||||
<div class="col s12 m2">
|
||||
<span class="card-title"><i class="left material-icons" style="font-size: inherit;">done</i>Results</span>
|
||||
<p>Processed result files.</p>
|
||||
</div>
|
||||
<div class="col s12 m10">
|
||||
<table class="highlight responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Result Type</th>
|
||||
<th>Archive Name</th>
|
||||
<th>{# Actions #}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="results">
|
||||
<tr class="show-if-only-child">
|
||||
<td colspan="3">
|
||||
<span class="card-title">
|
||||
<i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...
|
||||
</span>
|
||||
<p>
|
||||
No results available (yet). Is the job already completed?
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="row">
|
||||
<div class="col s12 m2">
|
||||
<span class="card-title"><i class="left material-icons" style="font-size: inherit;">done</i>Results</span>
|
||||
<p>Processed result files.</p>
|
||||
</div>
|
||||
<div class="col s12 m10">
|
||||
<table class="highlight responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Result Type</th>
|
||||
<th>Archive Name</th>
|
||||
<th>{# Actions #}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="results">
|
||||
<tr class="show-if-only-child">
|
||||
<td colspan="3">
|
||||
<span class="card-title">
|
||||
<i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...
|
||||
</span>
|
||||
<p>
|
||||
No results available (yet). Is the job already completed?
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Modals -->
|
||||
<div id="delete-job-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
@ -174,8 +177,10 @@
|
||||
<a class="btn modal-close red waves-effect waves-light" href="{{ url_for('jobs.delete_job', job_id=job.id) }}"><i class="material-icons left">delete</i>Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock page_content %}
|
||||
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script type="module">
|
||||
import {RessourceList} from '../../static/js/nopaque.lists.js';
|
||||
class InformationUpdater {
|
||||
@ -309,13 +314,9 @@ class InformationUpdater {
|
||||
var informationUpdater = new InformationUpdater({{ job.id }}, false);
|
||||
{% else %}
|
||||
var informationUpdater = new InformationUpdater({{ job.id }}, true);
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
nopaque.socket.emit("foreign_user_data_stream_init", {{ job.user_id }});
|
||||
});
|
||||
nopaque.socket.emit("foreign_user_data_stream_init", {{ job.user_id }});
|
||||
{% endif %}
|
||||
let jobInputsList = new RessourceList("inputs", null, "JobInput");
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
jobInputsList._add({{ job_inputs|tojson|safe }});
|
||||
});
|
||||
jobInputsList._add({{ job_inputs|tojson|safe }});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock scripts %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user