op_tasks/templates/task_list.html

{% extends "userpage.html" %}

{% block content %}

<h1>TASK LIST</h1>

<!-- progress bar -->
{% if user.userprofile.experiment.show_progress %}
<div class="status-bar-title">Status</div>
<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60"
      aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{user.userprofile.progress}}%;">
      {{user.userprofile.progress}}% Complete
   </div>
</div>
{% endif %}

<!-- instructions -->
<div class="instructions" >
  <a href="{% url 'op_tasks:instruct' %}">
    {% if user.userprofile.exp_inst_complete and user.userprofile.portal_inst_complete %}
      <div class="task-list-text">
        <span class="glyphicon glyphicon-check"></span>
        Click here to review instructional materials.
      </div>
      <div class="task-list-subtext">This material is available throughout the experiment</div>
    {% else %}
      <div class="task-current">
        <div class="task-list-text">
          <span class="glyphicon glyphicon-unchecked"></span>
          Click here to review instructional materials.
        </div>
      </div>
    {% endif %}
  </a>
</div>

<!-- tasklistitem list table -->
<table class="ot-list table table-bordered">
  <tbody>
    {% for tasklistitem in userprofile.tasklistitem_set.all %}

      {% if tasklistitem.task_complete and not tasklistitem.task_active and tasklistitem.exit_complete %}
      <!-- tasklistitem not active, complete, and exit complete -->
        <tr class="ot-disabled task-list-item">
          <td class="status">
            <span class="glyphicon glyphicon-check"></span>
          </td>
          <td>
            <div class="task-list-text">
              <span class="heading">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</span>
              <span class="pull-right text">Task Complete. Thank You!</span>
            </div>
          </td>
        </tr>

      {% elif tasklistitem.task_complete and not tasklistitem.task_active and not tasklistitem.exit_complete %}
      <!-- tasklistitem not active, complete, and exit active -->
        <tr class="task-current task-list-item">
          <td class="status">
            <span class="glyphicon glyphicon-unchecked"></span>
          </td>
          <td>
            <div class="task-current">
              <div class="heading disabled task-list-text">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</div>
              <div class="text disabled task-list-text">Task Complete. Thank You!</div>
              <a href="" data-toggle="modal" data-target="#exit-{{tasklistitem.pk}}">
                <span class="glyphicon glyphicon-hand-right"></span>
                <div class="task-list-subtext" style="display:inline-block;">Complete Post-Task Survey to Continue</div>
              </a>
            </div>
          </td>
        </tr>

      {% elif not tasklistitem.task_complete and not tasklistitem.task_active %}
      <!-- task not active and not complete -->
        <tr class="ot-disabled task-list-item">
          <td class="status">
            <span class="glyphicon glyphicon-unchecked"></span>
          </td>
          <td>
            <div class="task-list-text">
              <span class="heading">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</span>
              <span class="pull-right text">Complete previous tasks first.</span>
            </div>
          </td>
        </tr>

      {% elif tasklistitem.task_complete and tasklistitem.task_active and tasklistitem.exit_active and not tasklistitem.exit_complete %}
      <!-- task active and complete with exit active -->
        <tr class="task-list-item">
          <td class="status" >
            <span class="glyphicon glyphicon-check" style="color:#428bca"></span>
          </td>
          <td>
            <a href="{% url 'op_tasks:task_test' task_pk=tasklistitem.pk %}">
              <div class="heading task-list-text">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</div>
              <div class="text task-list-text">Task Complete.  Thank you!</div>
            </a>
            <a class="task-current" href="" data-toggle="modal" data-target="#exit-{{tasklistitem.pk}}">
              <span class="glyphicon glyphicon-hand-right"></span>
              <div class="task-list-subtext" style="display:inline-block;">Complete Post-Task Survey Here</div>
            </a>
          </td>
        </tr>

      {% elif tasklistitem.task_active and tasklistitem.task_complete and tasklistitem.exit_complete %}
      <!-- task active, complete, exit complete -->
        <tr class="task-list-item">
          <td class="status">
            <span class="glyphicon glyphicon-check" style="color:#428bca"></span>
          </td>
          <td>
            <a href="{% url 'op_tasks:task_test' task_pk=tasklistitem.pk %}">
              <div class="heading task-list-text">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</div>
              <div class="text task-list-text">Task Complete.  Thank you!</div>
            </a>
            <a href="" data-toggle="modal" data-target="#exit-{{tasklistitem.pk}}">
              <span class="glyphicon glyphicon-check"></span>
              <div class="task-list-subtext" style="display:inline-block;">Post-task survey complete</div>
            </a>
          </td>
        </tr>

      {% elif tasklistitem.task_active and not tasklistitem.task_complete %}
      <!-- task active, not complete and exit task not active -->
        <tr class="task-current task-list-item">
          <td class="status">
            <span class="glyphicon glyphicon-unchecked"></span>
          </td>
          <td>
            <a class="task-current" href="{% url 'op_tasks:task_test' task_pk=tasklistitem.pk %}">
              <div class="heading task-list-text">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</div>
              <div class="text task-list-subtext">Task not yet completed. Click to start this Operational Task</div>
            </a>
          </td>
        </tr>

      {% endif %}

      <!-- exit survey popup -->
      <div class="modal fade" id="exit-{{tasklistitem.pk}}" tabindex="-1" role="dialog" aria-labelledby="intake" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body" id="surveymonkeyframe">
              <iframe src="{{tasklistitem.op_task.exit_url}}?sid={{userprofile.user_hash}}::{{tasklistitem.pk}}" width="100%" height="100%"></iframe>
            </div>
            <div class="modal-footer">
              <div>
                <button type="button" style="float: left;" class="btn btn-primary" data-dismiss="modal">Hide</button>
              </div>
              <div>
                <form id="exit-survey-complete" method="post" action="{% url 'op_tasks:product' task_pk=tasklistitem.pk %}">{% csrf_token %}
                  <button type="submit" style="float: right;" class="btn btn-success">Survey Finished</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>

    {% endfor %}

  </tbody>
</table>


{% if all_complete %}
  <hr>
  <div class="task-list-text">Thank you for participating, you have completed all Operational Tasks!</div>
  <p>If you are interested in future study components or engagement with analytic tools, we will contact you if you indicated such interest in the intake questionnaire.</p>
  <p>If you are interested in working on developing these analytic tools, which are free and open source, please return to <a href="http://www.xdataonline.com/">XDATA Online</a> to explore DARPA's <a href="http://www.darpa.mil/opencatalog/XDATA.html">Open Catalog</a>, the applications you used, and datasets!</p>
{% endif %}

{% endblock %}