From a996d36f2d363c80655d78db322ec5f2539eeb68 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Mon, 26 Oct 2020 13:04:12 +0100
Subject: [PATCH] Rework jobs package
---
web/app/templates/jobs/job.html.j2 | 275 +++++++++++++++--------------
1 file changed, 138 insertions(+), 137 deletions(-)
diff --git a/web/app/templates/jobs/job.html.j2 b/web/app/templates/jobs/job.html.j2
index 70cf4736..20fda0f3 100644
--- a/web/app/templates/jobs/job.html.j2
+++ b/web/app/templates/jobs/job.html.j2
@@ -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 page_content %}
-{% 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 %}
+{% block main_attribs %} class="{{ main_class }}"{% endblock main_attribs %}
-<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>
+{% 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>
- <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 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>
+ <div class="gap-patch">
+ <div class="circle"></div>
+ </div>
+ <div class="circle-clipper right">
+ <div class="circle"></div>
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- <div class="col s12">
- <p class="description">{{ job.description }}</p>
- </div>
+ <div class="col s12">
+ <p class="description">{{ job.description }}</p>
+ </div>
- <div class="col s12"> </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 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 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" 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-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 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="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="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" 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>
-</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 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>
-
<!-- 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 %}
--
GitLab