mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-03 20:02:47 +00:00 
			
		
		
		
	Add pagination and search to dashboard.
This commit is contained in:
		@@ -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> </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">
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user