Add the formsaver module tied into nice UI for data saving (#52)

apps/map/templates/map/form.html

@@ -3,25 +3,31 @@
 {% load crispy_forms_tags %}
 {% load i18n %}
 {% load leaflet_tags %}
-
+{% load static %}
 
 {% block stylesheets %}
   {{ block.super }}
   {% leaflet_css %}
   <style> html, body, #main { width: 100; height:100%; } </style>
-{% endblock %}
 
+<style>
+.savebutton--icon { margin-left: 15px; margin-right: 2px; }
+.savebutton--icon-failed { color: #d9534f; }
+</style>
+{% endblock %}
 
 {% block page_title %}{% trans "Submit a Case Study" %} - {{ block.super }}{% endblock %}
 {% block description %}{% trans "Here you can submit a case study for review and it will be added to the map." %}{% endblock %}
 
 {% block inner %}
+  <div class="savebutton"></div>
   {% crispy form %}
 {% endblock %}
 
 {% block scripts %}
   {% leaflet_js %}
-  <script type="text/javascript">
+
+  <script>
     YourGeometryField = L.GeometryField.extend({
       addTo: function (map) {
         L.GeometryField.prototype.addTo.call(this, map);
@@ -33,7 +39,7 @@
   </script>
 
   <!-- Conditional logic for hiding and un-hiding fields. -->
-  <script type="text/javascript">
+  <script>
     // Here we define the fields we need to conditionally toggle.
     // TODO: Move this knowledge out of the template
     var conditionalFields = [{
@@ -177,4 +183,120 @@
     });
 
   </script>
+
+<script src="{% static 'map/plugins/FormSaver.js' %}"></script>
+<script src="{% static 'map/plugins/jquery.dirtyforms.min.js' %}"></script>
+<script>
+"use strict";
+
+class SaveButton {
+  constructor(div) {
+    this.root = div
+    this.root.className = "savebutton"
+    this.root.innerHTML =
+      `<button class="savebutton--button btn btn-success">Save</button>
+       <i class="savebutton--icon"></i><i><span class="savebutton--details"></span></i>`
+
+    this.element = {
+      root: this.root,
+      button: this.root.querySelector('.savebutton--button'),
+      icon: this.root.querySelector('.savebutton--icon'),
+      details: this.root.querySelector('.savebutton--details')
+    }
+
+    this.switchStateInitial()
+  }
+
+  changeState(data) {
+    data = data || {}
+    this.element.button.innerText = data.buttonText || "Save"
+    this.element.button.disabled = data.buttonClickable === false ? true : false
+    this.element.icon.className = 'savebutton--icon ' + (data.iconClasses || "")
+    this.element.details.innerText = data.detailsText || ""
+  }
+
+  switchStateInitial() {
+    this.changeState({
+      buttonClickable: false
+    })
+  }
+
+  switchStateUnsaved() {
+    this.changeState({
+      detailsText: "You have unsaved changes. Click here to save a draft, which you can access next time you are here."
+    })
+  }
+
+  switchStateSaving() {
+    this.changeState({
+      buttonText: "Saving...",
+      iconClasses: "fa fa-spinner fa-spin"
+    })
+  }
+
+  switchStateSaveSuccess() {
+    this.changeState({
+      buttonText: "Saved",
+      detailsText: "Saved successfully.",
+      iconClasses: "fa fa-check",
+      buttonClickable: false
+    })
+  }
+
+  switchStateSaveFailed(reason = "") {
+    this.changeState({
+      detailsText: "Save failed! " + reason,
+      iconClasses: "fa fa-exclamation-triangle savebutton--icon-failed"
+    })
+  }
+}
+
+function initDrafts() {
+  var button = new SaveButton(document.querySelector('.savebutton'))
+
+  $('#case-study-form').dirtyForms()
+  $('#case-study-form').on('dirty.dirtyforms', ev => {
+    button.switchStateUnsaved()
+  })
+
+  button.element.button.addEventListener('click', evt => {
+    button.switchStateSaving()
+
+    var fs = new FormSaver({
+      formId: 'case-study-form',
+      except: [ 'csrfmiddlewaretoken' ]
+    })
+    var s = fs.serialise();
+
+    fetch('/en-gb/case-study/draft', {
+      method: 'PUT',
+      credentials: "same-origin",
+      headers: {
+          "X-CSRFToken": jQuery("[name=csrfmiddlewaretoken]").val(),
+          "Accept": "application/json",
+          "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ data: s.form, version: 1 })
+    }).then(response => {
+      console.log(response);
+      if (response.ok) {
+        button.switchStateSaveSuccess();
+        $('#case-study-form').dirtyForms('setClean');
+      } else {
+        button.switchStateSaveFailed();
+      }
+    }).catch(err => {
+      console.error(err);
+      button.switchStateSaveFailed();
+    })
+  })
+
+  document.forms['case-study-form'].addEventListener('submit', () => {
+    // We're submitting, so kosh the saved data
+  })
+}
+
+initDrafts()
+</script>
+
 {% endblock %}