From 945fb393c01ef0c1e31ce909322c5d60dddfbe65 Mon Sep 17 00:00:00 2001
From: FreneticScribbler <aj@aronajones.com>
Date: Sun, 2 Jan 2022 20:31:23 +0000
Subject: [PATCH] Display prerequisite item requirements on level detail

---
 training/templates/level_detail.html | 31 ++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/training/templates/level_detail.html b/training/templates/level_detail.html
index e7ec7cea..f8935e41 100644
--- a/training/templates/level_detail.html
+++ b/training/templates/level_detail.html
@@ -62,16 +62,25 @@
     <table class="table card-body">
       <thead>
         <tr>
-          <th scope="col" class="table-warning">Training Started</th>
-          <th scope="col" class="table-success">Training Complete</th>
-          <th scope="col" class="table-info">Passed Out</th>
+          <th scope="col" class="table-warning" style="width: 33%">Training Started</th>
+          <th scope="col" class="table-success" style="width: 33%">Training Complete</th>
+          <th scope="col" class="table-info" style="width: 33%">Passed Out</th>
         </tr>
       </thead>
-      <tbody>
+      <tbody class="table-body">
+        {% for level in object.prerequisite_levels.all %}
+        <tr data-toggle="collapse" data-target="#{{level.pk}}" style="cursor: pointer;"><th colspan="3" class="text-center font-italic" data-toggle="collapse" data-target="#level_{{level.pk}}">{{level}} (prerequisite)</th></tr>
+        <tr id="level_{{level.pk}}" class="collapse">
+          <td><ul class="list-unstyled">{% for req in level.started_requirements %}<li>{{ req.item }} {% user_has_qualification request.user req.item 0 %}</li>{% endfor %}</ul></td>
+          <td><ul class="list-unstyled">{% for req in level.complete_requirements %}<li>{{ req.item }} {% user_has_qualification request.user req.item 1 %}</li>{% endfor %}</ul></td>
+          <td><ul class="list-unstyled">{% for req in level.passed_out_requirements %}<li>{{ req.item }} {% user_has_qualification request.user req.item 2 %}</li>{% endfor %}</ul></td>
+        </tr>
+        {% endfor %}
+        <tr><th colspan="3" class="text-center">{{object}}</th></tr>
         <tr>
-          <td><ul class="list-unstyled">{% for req in object.started_requirements %}<li>{{ req.item }} {% user_has_qualification request.user req.item 0 %} {% if request.user.is_supervisor or perms.training.change_traininglevel %}<a type="button" class="btn btn-danger btn-sm" href="{% url 'remove_requirement' pk=req.pk %}"><span class="fas fa-times-circle"></span></a>{% endif %}</li>{% endfor %}</ul></td>
-          <td><ul class="list-unstyled">{% for req in object.complete_requirements %}<li>{{ req.item }} {% user_has_qualification request.user req.item 1 %} {% if request.user.is_supervisor or perms.training.change_traininglevel %}<a type="button" class="btn btn-danger btn-sm" href="{% url 'remove_requirement' pk=req.pk %}"><span class="fas fa-times-circle"></span></a>{% endif %}</li>{% endfor %}</ul></td>
-          <td><ul class="list-unstyled">{% for req in object.passed_out_requirements %}<li>{{ req.item }} {% user_has_qualification request.user req.item 2 %} {% if request.user.is_supervisor or perms.training.change_traininglevel %}<a type="button" class="btn btn-danger btn-sm" href="{% url 'remove_requirement' pk=req.pk %}"><span class="fas fa-times-circle"></span></a>{%endif%}</li>{% endfor %}</ul></td>
+          <td><ul class="list-unstyled">{% for req in object.started_requirements %}<li>{{ req.item }} {% user_has_qualification request.user req.item 0 %} {% if request.user.is_supervisor or perms.training.change_traininglevel %}<a type="button" class="btn btn-link tn-sm p-0 align-baseline" href="{% url 'remove_requirement' pk=req.pk %}"><span class="fas fa-trash-alt text-danger"></span></a>{%endif%}</li>{% endfor %}</ul></td>
+          <td><ul class="list-unstyled">{% for req in object.complete_requirements %}<li>{{ req.item }} {% user_has_qualification request.user req.item 1 %} {% if request.user.is_supervisor or perms.training.change_traininglevel %}<a type="button" class="btn btn-link tn-sm p-0 align-baseline" href="{% url 'remove_requirement' pk=req.pk %}"><span class="fas fa-trash-alt text-danger"></span></a>{%endif%}</li>{% endfor %}</ul></td>
+          <td><ul class="list-unstyled">{% for req in object.passed_out_requirements %}<li>{{ req.item }} {% user_has_qualification request.user req.item 2 %} {% if request.user.is_supervisor or perms.training.change_traininglevel %}<a type="button" class="btn btn-link tn-sm p-0 align-baseline"" href="{% url 'remove_requirement' pk=req.pk %}" title="Delete requirement"><span class="fas fa-trash-alt text-danger"></span></a>{%endif%}</li>{% endfor %}</ul></td>
         </tr>
       </tbody>
     </table>
@@ -93,7 +102,7 @@
        </ul>
     </div>
 </div>
-<div class="card mb-3 d-none d-md-block">
+<div class="card mb-3 mt-2">
     <h4 class="card-header">Users with this level</h4>
     <div class="card-body">
         {% for user in users_with %}
@@ -110,7 +119,7 @@
           <tbody>
         {% endif %}
         <tr {% if not level_qualification.confirmed_on %}style="border-style: dashed; opacity: 80%"{%endif%}>
-            <td><img src="{{user.profile_picture}}" style="width: 50px" class="img-thumbnail"/> {{user}}</td>
+            <td><a href="{{user.get_absolute_url}}"><img src="{{user.profile_picture}}" style="width: 50px" class="img-thumbnail"/> {{user}}</a></td>
             <td>{% if level_qualification.confirmed_on %}<p class="card-text"><small>Qualified on {{ level_qualification.confirmed_on }}</small></p>{%else%}Unconfirmed{%endif%}</td>
             <td><a href="{% url 'profile_detail' user.pk %}" class="btn btn-primary btn-sm"><span class="fas fa-user"></span> View Profile</a></div></td>
         </tr>
@@ -119,8 +128,8 @@
         </table>
         {% endif %}
         {% empty %}
-                Nobody here but us chickens... <span class="fas fa-egg text-warning"></span>
-            {% endfor %}
+            Nobody here but us chickens... <span class="fas fa-egg text-warning"></span>
+        {% endfor %}
     </div>
 </div>
 <div class="row">