simulations.html

{% load strings %}

{% for project, queryset in runs.items %}
<div class="card card-body card-outer mb-4">
  <div class="float-left">
    <h5>
      <button class="btn btn collapse-button mr-3" type="button" data-toggle="collapse"
        data-target="#{{project|make_id}}-collapse-major" aria-expanded="false"
        aria-controls="{{project|make_id}}-collapse-major" style="margin-left:20px;">
        <i class="fas fa-chevron-right" style="size:5x;"></i>
      </button>
      <a href="/{{project}}/">{{project}}</a></h5>
  </div>
  </h5>
  <div class="collapse collapse-arrow-minus" id="{{project|make_id}}-collapse-major">
    <table class="container table table-responsive-md">
      <tr>
        <th>Output</th>
        <th>Title</th>
        <th>Run time (s)</th>
        <th>Run cost ($)</th>
        <th>Date (EST)</th>
        <th>Status</th>
        <th>Access</th>
      </tr>
      {% for run in queryset %}
      <tr>
        <td>
          <div class="row">
            <div class="col align-self-start">
              <a href="{{run.get_absolute_url}}">{{run.model_pk}}</a>
            </div>
            <div class="col align-self-center ">
              <label data-toggle="tooltip" data-placement="top" title="Edit parameters">
                <a class="color-inherit hover-blue" href="{{run.get_absolute_edit_url}}"><i
                    class="fas fa-edit fa-sm"></i></a>
        </td>
        </label>
  </div>
</div>
<td>{{run.title}}</td>
<td>{{run.run_time}}</td>
<td>{{run.effective_cost}}</td>
<td>{{run.creation_date}}</td>
<td class="sim-status">{{run.status}}</td>
<td><i class="fas {% if run.is_public %}fa-lock-open{% else %}fa-lock{% endif %}"></i></td>
</tr>
{% endfor %}
</table>
</div>
</div>
{% endfor %}

<script>
  $(document).ready(function () {
    $(" .sim-status").each(function () {
      node = $(this); if (node.text() == "SUCCESS") { node.addClass("text-success"); }
      else if (node.text() == "PENDING") { node.addClass("text-warning"); } else if (node.text() == "STARTED") {
        node.addClass("text-primary");
      } else { node.addClass("text-danger"); }
    });
  }); </script>