Rework job page input file view

web/app/jobs/tables.py

+from flask_table import Table, Col, LinkCol
+
+
+class JobInputTable(Table):
+    """
+    Declares the table describing colum by column.
+    """
+    classes = ['highlight', 'responsive-table']
+    filename = Col('Filename', column_html_attrs={'class': 'filename'},
+                   th_html_attrs={'class': 'sort',
+                                  'data-sort': 'filename'})
+    url = LinkCol('Download', 'jobs.download_job_input',
+                  url_kwargs=dict(job_id='job.id',
+                                  job_input_id='input_id'),
+                  anchor_attrs={'class': 'waves-effect waves-light btn-small',
+                                'download': ''})
+
+
+class JobInputItem(object):
+    """
+    Describes one item like one row per table.
+    """
+
+    def __init__(self, filename, job, input_id):
+        self.filename = filename
+        self.job = job
+        self.input_id = input_id

web/app/jobs/views.py

@@ -3,6 +3,7 @@ from flask import (abort, current_app, flash, redirect, render_template,
 from flask_login import current_user, login_required
 from . import jobs
 from . import tasks
+from . tables import JobInputItem, JobInputTable
 from ..models import Job, JobInput, JobResult
 import os
 
@@ -13,7 +14,16 @@ def job(job_id):
     job = Job.query.get_or_404(job_id)
     if not (job.creator == current_user or current_user.is_administrator()):
         abort(403)
-    return render_template('jobs/job.html.j2', job=job, title='Job')
+    items = [JobInputItem(input.filename, job, input.id)
+             for input in job.inputs]
+    # Convert table object to html string
+    job_input_table = JobInputTable(items).__html__()
+    # Add class "list" to tbody element. Needed for "List.js"
+    job_input_table = job_input_table.replace('tbody', 'tbody class="list"', 1)
+    return render_template('jobs/job.html.j2',
+                           job=job,
+                           job_input_table=job_input_table,
+                           title='Job')
 
 
 @jobs.route('/<int:job_id>/delete')

web/app/templates/admin/index.html.j2

@@ -21,9 +21,19 @@
 
 <script>
   var options = {page: 10,
-                 pagination: [{name: "paginationTop",
-                               paginationClass: "paginationTop",},
-                              {paginationClass: "paginationBottom"}],
+                 pagination: [
+                 {
+                   name: "paginationTop",
+                   paginationClass: "paginationTop",
+                   innerWindow: 8,
+                   outerWindow: 1
+                 },
+                 {
+                    paginationClass: "paginationBottom",
+                    innerWindow: 8,
+                    outerWindow: 1
+                  }
+                 ],
                  valueNames: ['username', 'email', 'role', 'confirmed', 'id']};
   var userList = new List('users', options);
 </script>

web/app/templates/jobs/job.html.j2

@@ -79,7 +79,7 @@
 
 <div class="col s12">
   <div class="card">
-    <div class="card-content">
+    <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>
@@ -87,13 +87,9 @@
         </div>
         <div class="col s12 m10">
           <div class="inputs row">
-            {% for input in job.inputs %}
-              <div class="col s12 m6">
-                <a class="btn waves-effect waves-light" download href="{{ url_for('jobs.download_job_input', job_id=job.id, job_input_id=input.id) }}">
-                  <i class="material-icons left">file_download</i>{{ input.filename }}
-                </a>
-              </div>
-            {% endfor %}
+            <ul class="pagination paginationTop"></ul>
+            {{ job_input_table }}
+            <ul class="pagination paginationBottom"></ul>
           </div>
         </div>
       </div>
@@ -137,6 +133,25 @@
 
 
 <script>
+// job_input_table code
+var options = {page: 5,
+               pagination: [
+                 {
+                   name: "paginationTop",
+                   paginationClass: "paginationTop",
+                   innerWindow: 8,
+                   outerWindow: 1
+                 },
+                 {
+                    paginationClass: "paginationBottom",
+                    innerWindow: 8,
+                    outerWindow: 1
+                  }
+                ],
+               valueNames: ['filename']};
+  var jobInputList = new List('inputs', options);
+
+
   class InformationUpdater {
     constructor(jobId, foreignJobFlag) {
       this.jobId = jobId;
@@ -209,6 +224,8 @@
           resultType = "VRT";
         } else if (result.filename.endsWith(".xml.zip")) {
           resultType = "XML";
+        } else if (result.filename.endsWith(".poco.zip")) {
+          resultType = "POCO";
         } else {
           resultType = "ALL";
         }