nopaque/app/templates/main/jobs/job.html.j2

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

{% block page_content %}
<script>
  var JOB_ID = {{ job.id }}

  class InformationUpdater {
    constructor(jobId) {
      this.jobId = jobId;
      jobsSubscribers.push(this);
    }

    _init() {
      var creationDateElement, descriptionElement, endDateElement,
          memMbElement, nCoresElement, serviceElement, serviceArgsElement,
          serviceVersionElement, statusColor, statusElement, titleElement;

      this.job = jobs[this.jobId];
      creationDateElement = document.getElementById("creation-date");
      creationDateElement.value = (new Date(this.job.creation_date * 1000)).toLocaleString();
      descriptionElement = document.getElementById("description");
      descriptionElement.innerHTML = this.job.description;
      endDateElement = document.getElementById("end-date");
      endDateElement.value = this.job.end_date ? (new Date(this.job.end_date * 1000)).toLocaleString() : "Not available";
      memMbElement = document.getElementById("mem-mb");
      memMbElement.value = this.job.mem_mb;
      nCoresElement = document.getElementById("n-cores");
      nCoresElement.value = this.job.n_cores;
      serviceElement = document.getElementById("service");
      serviceElement.value = this.job.service;
      serviceArgsElement = document.getElementById("service-args");
      serviceArgsElement.value = this.job.service_args;
      serviceVersionElement = document.getElementById("service-version");
      serviceVersionElement.value = this.job.service_version;
      statusColor = JobList.STATUS_COLORS[this.job.status]
                  || JobList.STATUS_COLORS['default'];
      statusElement = document.getElementById("status");
      statusElement.classList.add(statusColor);
      statusElement.innerHTML = this.job.status;
      titleElement = document.getElementById("title");
      titleElement.innerHTML = this.job.title;

      M.updateTextFields();
    }

    _update(patch) {
      var newStatusColor, operation, pathArray, status, statusColor,
          updatedElement;

      for (operation of patch) {
        /* "/jobId/valueName" -> ["jobId", "valueName"] */
        pathArray = operation.path.split("/").slice(1);
        if (pathArray[0] != this.jobId) {continue;}
        switch(operation.op) {
          case "delete":
            location.reload();
            break;
          case "replace":
            switch(pathArray[1]) {
              case "description":
                updatedElement = document.getElementById("description");
                updatedElement.innerHTML = operation.value;
                break;
              case "end_date":
                updatedElement = document.getElementById("end-date");
                updatedElement.value = (new Date(operation.value * 1000)).toLocaleString();
                M.updateTextFields();
                break;
              case "status":
                if (operation.value == "complete") {
                  location.reload();
                }
                updatedElement = document.getElementById("status");
                status = updatedElement.innerHTML;
                statusColor = JobList.STATUS_COLORS[status]
                            || JobList.STATUS_COLORS['default'];
                newStatusColor = JobList.STATUS_COLORS[operation.value]
                               || JobList.STATUS_COLORS['default'];
                updatedElement.classList.remove(statusColor);
                updatedElement.classList.add(newStatusColor);
                updatedElement.innerHTML = operation.value;
                Animations.pulse(updatedElement, 3000);
                break;
              case "title":
                updatedElement = document.getElementById("title");
                updatedElement.innerHTML = operation.value;
                break;
              default:
                break;
            }
            break;
          default:
            break;
        }
      }
    }
  }
  var informationUpdater = new InformationUpdater(JOB_ID);
</script>

<div class="col s12 m4">
  <h2>Status:</h2>
  <h3 id="title"></h3>
  <p id="description"></p>
  <a class="waves-effect waves-light btn" id="status"></a>
  <h2>Actions:</h2>
  <!-- Confirm deletion of job with modal dialogue
  Modal Trigger-->
  <a href="#modal-confirm-delete" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete Job</a>
  <!-- Modal Strucutre -->
  <div id="modal-confirm-delete" class="modal">
    <div class="modal-content">
      <h4>Confirm deletion</h4>
        <p>Do you really want to delete the job {{job.title}}?
        All iput and output files will be permanently deleted.</p>
    </div>
    <div class="modal-footer">
      <a href="{{ url_for('main.delete_job', job_id=job.id) }}" class="modal-close waves-effect waves-green btn red"><i class="material-icons left">delete</i>Delete Job</a></a>
    </div>
  </div>
</div>


<div class="col s12 m8">
  <div class="card">
    <div class="card-content">
      <span class="card-title">Chronometrics</span>
      <div class="row">
        <div class="col s12 m6">
          <div class="input-field">
            <input disabled value="" id="creation-date" type="text" class="validate">
            <label for="creation-date">Creation date</label>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="input-field">
            <input disabled value="" id="end-date" type="text" class="validate">
            <label for="end-date">End date</label>
          </div>
        </div>
      </div>

      <span class="card-title">Ressource allocations</span>
      <div class="row">
        <div class="col s12 m6">
          <div class="input-field">
            <input disabled value="" id="mem-mb" type="text" class="validate">
            <label for="mem-mb">Memory</label>
          </div>
        </div>
        <div class="col s12 m6">
          <div class="input-field">
            <input disabled value="" id="n-cores" type="text" class="validate">
            <label for="n-cores">CPU cores</label>
          </div>
        </div>
      </div>

      <span class="card-title">Service informations</span>
      <div class="row">
        <div class="col s12 m4">
          <div class="input-field">
            <input disabled value="" id="service" type="text" class="validate">
            <label for="service">Service</label>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="input-field">
            <input disabled value="" id="service-args" type="text" class="validate">
            <label for="service-args">Service arguments</label>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="input-field">
            <input disabled value="" id="service-version" type="text" class="validate">
            <label for="service-version">Service version</label>
          </div>
        </div>
      </div>

      <span class="card-title">Files</span>
      <table>
        <thead>
          <tr>
              <th style="width: 50%;">Inputs</th>
              <th style="width: 50%;">Results</th>
          </tr>
        </thead>
        <tbody>
          {% for file in files %}
          <tr>
            <td>
              <a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['path']) }}" class="waves-effect waves-light btn-small">{{ file }}</a>
            </td>
            <td>
              {% if job.status == 'complete' %}
              {% for result in files[file]['results'] %}
              <a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['results'][result]['path']) }}" class="waves-effect waves-light btn-small">{{ result }}</a>
              {% endfor %}
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% endblock %}