save responses as we go on first mark screens

crowdsourcer/static/js/questions.esm.js

@@ -0,0 +1,75 @@
+const form_regex = /form-\d-/i
+function get_name_from_input(input) {
+  return input.name.replace(form_regex, "");
+}
+
+function disable_submit_if_invalid() {
+  if ($.find('.invalid-feedback').length > 0) {
+    $('#save_all_answers').prop("disabled", true);
+  } else {
+    $('#save_all_answers').prop("disabled", false);
+  }
+}
+
+$(function(){
+  $('.form-select, .form-control, .form-check-input').on('blur', function(e){
+    var $d = $(this);
+    var $fs = $d.parents('fieldset');
+
+    var csrf = $('input[name="csrfmiddlewaretoken"]').val()
+    let data = {"csrfmiddlewaretoken": csrf};
+    let has_values = false;
+    $fs.find('.form-select, .form-control, input[type="hidden"]').each(function($i, $field) {
+      let name = get_name_from_input($field);
+      let $f = $( $field );
+      let val = $( $field ).val();
+      if (name != "question" && name != "authority" && val) {
+        has_values = true;
+      }
+      data[name] = val;
+    });
+    if ( $fs.find('.form-check-input') ) {
+      let $f = $fs.find('.form-check-input').get(0);
+      let name = get_name_from_input($f);
+      data[name] = $( $f.name ).val();
+    }
+
+    if (!has_values) {
+      $fs.find('.form-select, .form-control, .form-check-input, input[type="hidden"]').each(function($i, $field) {
+        let $f = $($field);
+        $f.removeClass("is-invalid").removeClass("is-valid");
+        $f.next('.invalid-feedback').remove();
+      });
+      disable_submit_if_invalid()
+      return;
+    }
+
+    url = window.location + data["question"] + "/";
+
+    $.post(url, data, function(r_data) {
+      if (r_data["success"] != 1) {
+        $fs.find('.form-select, .form-control, .form-check-input, input[type="hidden"]').each(function($i, $field) {
+          let name = get_name_from_input($field);
+          let $f = $($field);
+          $f.next('.invalid-feedback').remove();
+          if (r_data["errors"].hasOwnProperty(name)) {
+            $f.addClass("is-invalid").removeClass("is-valid");
+            $f.after('<div class="invalid-feedback">' + r_data["errors"][name] + '</div>');
+          } else {
+            $f.addClass("is-valid").removeClass("is-invalid");
+          }
+        });
+        $('#save_all_answers').prop("disabled", true);
+      } else {
+        $fs.find('.form-select, .form-control, .form-check-input, input[type="hidden"]').each(function($i, $field) {
+          let name = get_name_from_input($field);
+          $f = $($field);
+          $f.next('.invalid-feedback').remove();
+          $f.addClass("is-valid").removeClass("is-invalid");
+        });
+
+        disable_submit_if_invalid()
+      }
+    });
+  });
+});

crowdsourcer/templates/crowdsourcer/authority_questions.html

@@ -1,6 +1,7 @@
 {% extends 'crowdsourcer/base.html' %}
 
 {% load django_bootstrap5 %}
+{% load static %}
 
 {% block content %}
     <h1 class="mb-3 mb-md-4">
@@ -82,8 +83,12 @@ <h3 class="mb-4 mb-md-5 text-success">
       {% endfor %}
 
       <div class="sticky-bottom py-3 bg-white border-top" style="margin-top: -1px;">
-          <input type="submit" class="btn btn-primary" value="Save answers">
+          <input id="save_all_answers" type="submit" class="btn btn-primary" value="Save answers">
       </div>
     </form>
 
 {% endblock %}
+
+{% block script %}
+<script src={% static 'js/questions.esm.js' %}"></script>
+{% endblock %}

crowdsourcer/templates/crowdsourcer/authority_questions_with_previous.html

@@ -2,6 +2,7 @@
 
 {% load django_bootstrap5 %}
 {% load neighbourhood_filters %}
+{% load static %}
 
 {% block content %}
     <h1 class="mb-3 mb-md-4">
@@ -173,7 +174,7 @@ <h3 class="h5 text-muted mb-3 mb-lg-4">New response</h3>
       {% endfor %}
 
       <div class="sticky-bottom py-3 bg-white border-top" style="margin-top: -1px;">
-          <input type="submit" class="btn btn-primary" value="Save answers">
+          <input id="save_all_answers" type="submit" class="btn btn-primary" value="Save answers">
       </div>
     </form>
 
@@ -206,3 +207,7 @@ <h3 class="h5 text-muted mb-3 mb-lg-4">New response</h3>
     </script>
 
 {% endblock %}
+
+{% block script %}
+<script src="{% static 'js/questions.esm.js' %}"></script>
+{% endblock %}