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