Add pagination and search to dashboard.

This commit is contained in:
Patrick Jentsch 2019-08-08 15:28:15 +02:00
parent f415d4ea9c
commit 14b64f86ba

View File

@ -7,31 +7,46 @@
</div>
<div class="col s12 m8">
<ul class="collection">
<li class="collection-item">
<div class="row">
<div class="col s12 m8">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-corpus" type="search"></input>
<label for="search-corpus">Search corpus</label>
<div id="corpus-list">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s12 m8">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-corpus" class="search" type="text"></input>
<label for="search-corpus">Search corpus</label>
</div>
</div>
<div class="col s12 m4">
<p><a data-target="new-corpus-modal" class="waves-effect waves-light btn modal-trigger right"><i class="material-icons left">add</i>New corpus</a></p>
</div>
<div class="col s12">
<ul class="pagination"></ul>
</div>
</div>
<div class="col s12 m4">
<p><a data-target="new-corpus-modal" class="waves-effect waves-light btn modal-trigger right"><i class="material-icons left">add</i>New corpus</a></p>
</div>
</div>
</li>
{% for corpus in current_user.corpora.all() %}
<li class="collection-item avatar">
<i class="material-icons circle">book</i>
<span class="title">{{ corpus.title }}</span>
<p>{{ corpus.description }}</p>
<a href="#!" class="secondary-content"><i class="material-icons">send</i></a>
</li>
{% endfor %}
</ul>
</div>
<ul class="collection list">
{% for corpus in current_user.corpora.all() %}
<li class="collection-item avatar">
<i class="material-icons circle">book</i>
<span class="title">{{ corpus.title }}</span>
<p>{{ corpus.description }}</p>
<a href="#!" class="secondary-content"><i class="material-icons">send</i></a>
</li>
{% endfor %}
</ul>
</div>
</div>
<script>
corpusListOptions = {
valueNames: ['title'],
page: 4,
pagination: true
};
corpusList = new List("corpus-list", corpusListOptions);
</script>
<div class="col s12">
<p>&nbsp;</p>
@ -43,47 +58,62 @@
</div>
<div class="col s12 m8">
<ul class="collection">
<li class="collection-item">
<div class="row">
<div class="col s12 m8">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-job" type="search"></input>
<label for="search-job">Search job</label>
<div id="job-list">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s12 m8">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="search-job" class="search" type="text"></input>
<label for="search-job">Search job</label>
</div>
</div>
<div class="col s12 m4">
<p><a id="new-job" class="dropdown-trigger waves-effect waves-light btn right no-autoinit" href="#" data-target="new-job-dropdown"><i class="material-icons left">add</i>New job</a></p>
</div>
<div class="col s12">
<ul class="pagination"></ul>
</div>
</div>
<div class="col s12 m4">
<p><a id="new-job" class="dropdown-trigger waves-effect waves-light btn right no-autoinit" href="#" data-target="new-job-dropdown"><i class="material-icons left">add</i>New job</a></p>
</div>
</div>
</li>
{% for job in current_user.jobs.all() %}
{% if job.service == 'nlp' %}
{% set service_icon = 'format_textdirection_l_to_r' %}
{% elif job.service =='ocr' %}
{% set service_icon = 'find_in_page' %}
{% else %}
{% set service_icon = 'help' %}
{% endif %}
{% if job.status == 'pending' %}
{% set badge_color = 'amber' %}
{% elif job.status =='running' %}
{% set badge_color = 'indigo' %}
{% elif job.status =='complete' %}
{% set badge_color = 'teal' %}
{% else %}
{% set badge_color = 'red' %}
{% endif %}
<li class="collection-item avatar">
<i class="material-icons circle">{{ service_icon }}</i>
<span class="new badge {{ badge_color }}" data-badge-caption="">{{ job.status }}</span>
<span class="title">{{ job.title }}</span>
<p>{{ job.description }}</p>
</li>
{% endfor %}
</ul>
</div>
<ul class="collection list">
{% for job in current_user.jobs.all() %}
{% if job.service == 'nlp' %}
{% set service_icon = 'format_textdirection_l_to_r' %}
{% elif job.service =='ocr' %}
{% set service_icon = 'find_in_page' %}
{% else %}
{% set service_icon = 'help' %}
{% endif %}
{% if job.status == 'pending' %}
{% set badge_color = 'amber' %}
{% elif job.status =='running' %}
{% set badge_color = 'indigo' %}
{% elif job.status =='complete' %}
{% set badge_color = 'teal' %}
{% else %}
{% set badge_color = 'red' %}
{% endif %}
<li class="collection-item avatar">
<i class="material-icons circle">{{ service_icon }}</i>
<span class="new badge {{ badge_color }}" data-badge-caption="">{{ job.status }}</span>
<span class="title">{{ job.title }}</span>
<p>{{ job.description }}</p>
</li>
{% endfor %}
</ul>
</div>
</div>
<script>
jobListOptions = {
valueNames: ['title'],
page: 4,
pagination: true
};
jobList = new List("job-list", jobListOptions);
</script>
<div id="new-corpus-modal" class="modal">
<div class="modal-content">