Modalify the training record addition form

training/templates/edit_training_record.html

@@ -1,4 +1,4 @@
-{% extends 'base_rigs.html' %}
+{% extends request.is_ajax|yesno:'base_ajax.html,base_training.html' %}
 
 {% load static %}
 {% load widget_tweaks %}
@@ -24,7 +24,9 @@
 {% if form.errors %}
 	{% include 'form_errors.html' %}
 {% endif %}
-<form role="form" action="{{ form.action|default:request.path }}" method="POST">{% csrf_token %}
+<form role="form" action="{{ form.action|default:request.path }}" method="POST" id="add_record_form">
+    {% include 'form_errors.html' %}
+    {% csrf_token %}
     {% render_field form.trainee|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>
@@ -53,8 +55,16 @@
                       id="notes" rows="3"></textarea>
         </div>
     </div>
-   <div class="col-sm-12 text-right pr-0"}>
+  {% if not request.is_ajax %}
+   <div class="col-sm-12 text-right pr-0">
         {% button 'submit' %}
     </div>
+  {% endif %}
 </form>
 {% endblock %}
+
+{% block footer %}
+<div class="col-sm-12 text-right pr-0">
+<button type="submit" class="btn btn-primary" title="Save" form="add_record_form"><span class="fas fa-save align-middle"></span> <span class="d-none d-sm-inline align-middle">Save</span></button>
+</div>
+{% endblock %}

training/templates/trainee_detail.html

@@ -1,15 +1,56 @@
 {% extends 'base_rigs.html' %}
 
+{% load static %}
 {% load user_has_qualification from tags %}
 {% load percentage_complete from tags %}
 {% load user_level_if_present from tags %}
 {% load colour_from_depth from tags %}
 
+{% 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 %}
+    <script src="{% static 'js/autocompleter.js' %}"></script>
+    <script src="{% static 'js/tooltip.js' %}"></script>
+    <script>
+    $('document').ready(function(){
+        $('#add_record').click(function (e) {
+             e.preventDefault();
+             var url = $(this).attr("href");
+             $.ajax({
+                url: url,
+                success: function(){
+                    $link = $(this);
+                    // Anti modal inception
+                    if ($link.parents('#modal').length === 0) {
+                        modaltarget = $link.data('target');
+                        modalobject = "";
+                        $('#modal').load(url, function (e) {
+                            $('#modal').modal();
+                            $(".selectpicker").selectpicker().each(function(){initPicker($(this))});
+                        });
+                    }
+                }
+             });
+        });
+    });
+    </script>
+{% endblock %}
+
 {% block content %}
-<div class="col-sm-12 text-right">
-<a type="button" class="btn btn-success" href="{% url 'edit_record' pk=request.user.pk %}">
-	<span class="fas fa-plus"></span> Add New Training Record
-</a>
+<div class="row">
+    <div class="col-sm-12 text-right">
+    <a type="button" class="btn btn-success modal-href" href="{% url 'edit_record' pk=request.user.pk %}" id="add_record">
+	    <span class="fas fa-plus"></span> Add New Training Record
+    </a>
+    </div>
 </div>
 <div class="row mb-3">
     <h2 class="col-12">Training Levels</h2>