nopaque/app/templates/main/dashboard.html.j2

{% extends "base.html.j2" %}

{% block page_content %}
<div class="col s12 m4">
  <h3>Corpora</h3>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
</div>

<div class="col s12 m8">
  <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>
    </div>
    <div class="collection list">
      {% for corpus in current_user.corpora.all() %}
        <a href="#!" class="collection-item avatar">
            <i class="material-icons circle">book</i>
            <span class="title">{{ corpus.title }}</span>
            <p>{{ corpus.description }}</p>
        </a>
      {% endfor %}
    </div>
  </div>
</div>
<script>
  corpusList = new List("corpus-list", {valueNames: ["title"],
                                        page: 4,
                                        pagination: true});
  corpusList.on("filterComplete", updatePagination);
  corpusList.on("searchComplete", updatePagination);
</script>

<div class="col s12">
  <p>&nbsp;</p>
</div>

<div class="col s12 m4">
  <h3>Jobs</h3>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
</div>

<div class="col s12 m8">
  <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>
    </div>
    <div class="collection list"></div>
  </div>
</div>
<script>
  var jobList = new List("job-list", {valueNames: ["title"],
                                      page: 4,
                                      pagination: false});
  jobList.on("filterComplete", updatePagination);
  jobList.on("searchComplete", updatePagination);
</script>

<script>
  const SERVICE_COLORS = {"nlp": "blue",
                          "ocr": "green"}
  const SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
                         "ocr": "find_in_page"}
  const STATUS_COLORS = {"pending": "amber",
                         "running": "indigo",
                         "complete": "teal"}

  var getJobsCallbackFunctions = [];

  function getJobs() {
    fetch("/api/v1.0/jobs")
    .then(function(response) {
      if (response.status >= 200 && response.status < 300) {
        return Promise.resolve(response)
      } else {
        return Promise.reject(new Error(response.statusText))
      }
    })
    .then(function(response) {
        return response.json()
    })
    .then(function(jobs) {
      for (callbackFunction of getJobsCallbackFunctions) {
        callbackFunction(jobs);
      }
    })
    .catch(function(error) {
      console.log('Request failed', error);
    });
  }

  setInterval(getJobs, 1000);

  function createJobElement(job) {
    jobElement = document.createElement("a");
    jobElement.classList.add("avatar", "collection-item");
    jobElement.dataset.key = "id";
    jobElement.dataset.value = job.id;
    jobElement.href = `/jobs/${job.id}`;
    jobDescriptionElement = document.createElement("p");
    jobDescriptionElement.dataset.key = "description";
    jobDescriptionElement.innerText = job.description;
    jobServiceElement = document.createElement("i");
    jobServiceElement.classList.add("circle", "material-icons", SERVICE_COLORS[job.service]);
    jobServiceElement.dataset.key = "service";
    jobServiceElement.innerText = SERVICE_ICONS[job.service];
    jobStatusElement = document.createElement("span");
    jobStatusElement.classList.add("badge", "new", "status", STATUS_COLORS[job.status]);
    jobStatusElement.dataset.badgeCaption = "";
    jobStatusElement.dataset.key = "status";
    jobStatusElement.innerText = job.status;
    jobTitleElement = document.createElement("span");
    jobTitleElement.classList.add("title");
    jobTitleElement.dataset.key = "title";
    jobTitleElement.innerText = job.title;

    jobElement.appendChild(jobServiceElement);
    jobElement.appendChild(jobStatusElement);
    jobElement.appendChild(jobTitleElement);
    jobElement.appendChild(jobDescriptionElement);

    return jobElement;
  }


  function updateJobElement(job, jobElement) {
    /*
    if (jobElement.dataset.value != job.id) {
      jobElement.dataset.value = job.id;
      jobElement.href = `/jobs/${job.id}`;
    }
    */


  }

  function processJobs(jobs) {
    for (job of jobs) {
      jobElement = jobList.list.querySelectorAll('[data-key="id"]')
                               .querySelector(`[data-value="${job.id}"]`);
      console.log(jobElement);
      if (jobElement) {
        statusElement = jobElement.querySelector(".status");
        currentStatus = statusElement.text
        continue;
      }
      jobList.list.appendChild(createJobElement(job));
    }
    jobList.reIndex();
    jobList.update();
  }

  getJobsCallbackFunctions.push(processJobs)
</script>

<div id="new-corpus-modal" class="modal">
  <div class="modal-content">
    <h4>New corpus</h4>
    <form method="POST" enctype="multipart/form-data">
      {{ create_corpus_form.hidden_tag() }}
      <div class="row">
        <div class="col s12 m4">
          <div class="input-field">
            <i class="material-icons prefix">title</i>
            {{ create_corpus_form.title() }}
            {{ create_corpus_form.title.label }}
            {% for error in create_corpus_form.title.errors %}
              <span class="helper-text red-text">{{ error }}</span>
            {% endfor %}
          </div>
        </div>
        <div class="col s12 m8">
          <div class="input-field">
            <i class="material-icons prefix">description</i>
            {{ create_corpus_form.description() }}
            {{ create_corpus_form.description.label }}
            {% for error in create_corpus_form.description.errors %}
              <span class="helper-text red-text">{{ error }}</span>
            {% endfor %}
          </div>
        </div>
        <div class="col s12">
          <div class="file-field input-field">
            <div class="btn">
              <span>{{ create_corpus_form.files.label.text }}</span>
              {{ create_corpus_form.files(accept='.vrt') }}
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text">
            </div>
            {% for error in create_corpus_form.files.errors %}
              <span class="helper-text red-text">{{ error }}</span>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="modal-footer">
        {{ create_corpus_form.submit(class='btn') }}
      </div>
    </form>
  </div>
</div>

<ul id='new-job-dropdown' class='dropdown-content'>
  <li><a href="{{ url_for('services.nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
  <li><a href="{{ url_for('services.ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
</ul>

{% endblock %}