Basic UX for adding requirements to training levels

training/templates/edit_training_level.html

@@ -0,0 +1,39 @@
+{% extends 'base_rigs.html' %}
+
+{% load static %}
+{% load widget_tweaks %}
+
+{% block css %}
+    {{ block.super }}
+    <link rel="stylesheet" type="text/css" href="{% static 'css/selects.css' %}"/>
+{% endblock %}
+
+{% block preload_js %}
+    {{ block.super }}
+    <script src="{% static 'js/selects.js' %}"></script>
+{% endblock %}
+
+{% block js %}
+    {{ block.super }}
+    <script src="{% static 'js/autocompleter.js' %}"></script>
+    <script src="{% static 'js/tooltip.js' %}"></script>
+{% endblock %}
+
+{% block content %}
+{% if form.errors %}
+	{% include 'form_errors.html' %}
+{% endif %}
+<form id="requirement-form" action="{{ form.action|default:request.path }}" method="post">{% csrf_token %}
+    {% render_field form.level|attr:'hidden' value=form.trainee.initial %}
+    <div class="form-group form-row">
+      <label for="item_id" class="col-sm-2 col-form-label">Item</label>
+      <select name="item" id="item_id" class="form-control selectpicker custom-select col-sm-10" data-live-search="true" data-sourceurl="{% url 'api_secure' model='training_item' %}" required>
+      </select>
+    </div>
+    <div class="form-group form-row">
+      <label for="depth" class="col-sm-2 col-form-label">Depth</label>
+      {% render_field form.depth|add_class:'form-control custom-select selectpicker col-sm'|attr:'required' %}
+    </div>
+   <input type="submit" class="btn btn-primary">
+</form>
+{% endblock %}

training/templates/trainee_detail.html

@@ -7,7 +7,28 @@
 <div class="row mb-3">
 <h2 class="col-12">Training Levels</h2>
 {% for level in levels %}
-
+<div class="card m-3">
+    <h3 class="card-header"><a href="{% url 'level_edit' level.pk %}">{{ level }}</a></h3>
+    <div class="card-body">
+        <div class="progress mb-2">
+          <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25% complete</div>
+        </div>
+        <p>{{ level.description }}</p>
+        <p>Requirements:
+        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#reqs" aria-expanded="false" aria-controls="reqs">
+           <span class="fas fa-arrow-down"></span>
+        </button>
+        <div class="collapse" id="reqs">
+          {% for req in level.requirements.all %}
+          <li>{{req}}</li>
+          {% endfor %}
+        </p>
+        </div>
+    </div>
+    <div class="card-footer">
+        <button class="btn btn-success" disabled>Incomplete</button>
+    </div>
+</div>
 {% endfor %}
 </div>
 <div class="row">