From 1dd2e4f316268024baa7ce79b0f468ec49e4e716 Mon Sep 17 00:00:00 2001
From: Anna Sidwell <anna@takkaria.org>
Date: Thu, 12 Apr 2018 17:00:02 +1000
Subject: [PATCH] Add the formsaver module tied into nice UI for data saving
 (#52)

---
 apps/map/static/map/plugins/FormSaver.js      | 269 ++++++++++++++++++
 .../map/plugins/jquery.dirtyforms.min.js      |   7 +
 apps/map/templates/map/form.html              | 130 ++++++++-
 3 files changed, 402 insertions(+), 4 deletions(-)
 create mode 100644 apps/map/static/map/plugins/FormSaver.js
 create mode 100644 apps/map/static/map/plugins/jquery.dirtyforms.min.js

diff --git a/apps/map/static/map/plugins/FormSaver.js b/apps/map/static/map/plugins/FormSaver.js
new file mode 100644
index 0000000..27814a0
--- /dev/null
+++ b/apps/map/static/map/plugins/FormSaver.js
@@ -0,0 +1,269 @@
+"use strict";
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var FormSaverSerialisers = {
+	"input:submit": function inputSubmit() {
+		return null;
+	},
+	"input:button": function inputButton() {
+		return null;
+	},
+	"input:image": function inputImage() {
+		return null;
+	},
+	"input:reset": function inputReset() {
+		return null;
+	},
+	"input:file": function inputFile() {
+		return null;
+	},
+
+	"input:radio": function inputRadio(group) {
+		return group.filter(function (input) {
+			return input.checked;
+		}).map(function (input) {
+			return input.value;
+		});
+	},
+
+	"input:checkbox": "input:radio",
+
+	"select": function select(group) {
+		return group.length == 1 ? Array.from(group[0].selectedOptions).map(function (elem) {
+			return elem.value;
+		}) : new Error('More than one select wth the same name');
+	},
+
+	"textarea": function textarea(group) {
+		return group.length == 1 ? group[0].value : new Error('More than one textarea with the same name');
+	},
+
+	"*": function _(group) {
+		return group.length == 1 ? group[0].value : new Error('More than one input with the same name');
+	}
+};
+
+var FormSaver = function () {
+	function FormSaver(_ref) {
+		var formId = _ref.formId,
+		    except = _ref.except;
+
+		_classCallCheck(this, FormSaver);
+
+		this.formId = formId;
+		this.skipList = except || [];
+	}
+
+	_createClass(FormSaver, [{
+		key: "getExtendedTagName",
+		value: function getExtendedTagName(element) {
+			var tag = element.tagName.toLowerCase();
+			if (tag == 'input') {
+				return 'input:' + element.type;
+			} else {
+				return tag;
+			}
+		}
+	}, {
+		key: "deserialise",
+		value: function deserialise(data) {
+			var form = document.getElementById(this.formId);
+
+			var _iteratorNormalCompletion = true;
+			var _didIteratorError = false;
+			var _iteratorError = undefined;
+
+			try {
+				for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+					var field = _step.value;
+
+					var element = form.elements[field.name];
+
+					// Skip some fields
+					if (this.skipList.includes(field.name)) {
+						continue;
+					}
+
+					// Deal with the case where we have a single tag first,
+					// ie. input type=text, selects, textareas
+					if (element.tagName) {
+						var tagName = this.getExtendedTagName(element);
+
+						if (tagName == 'select') {
+							// Go over all the <option>s and select the right ones
+							var _iteratorNormalCompletion2 = true;
+							var _didIteratorError2 = false;
+							var _iteratorError2 = undefined;
+
+							try {
+								for (var _iterator2 = element.options[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+									var option = _step2.value;
+
+									option.selected = field.value.includes(option.value);
+								}
+							} catch (err) {
+								_didIteratorError2 = true;
+								_iteratorError2 = err;
+							} finally {
+								try {
+									if (!_iteratorNormalCompletion2 && _iterator2.return) {
+										_iterator2.return();
+									}
+								} finally {
+									if (_didIteratorError2) {
+										throw _iteratorError2;
+									}
+								}
+							}
+						} else {
+							element.value = field.value;
+						}
+					} else {
+						// We've got a list.  This means we're radio or checkbox.
+						// Go over all the elements and select the right ones
+						var _iteratorNormalCompletion3 = true;
+						var _didIteratorError3 = false;
+						var _iteratorError3 = undefined;
+
+						try {
+							for (var _iterator3 = element[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+								var input = _step3.value;
+
+								input.checked = field.value.includes(input.value);
+							}
+						} catch (err) {
+							_didIteratorError3 = true;
+							_iteratorError3 = err;
+						} finally {
+							try {
+								if (!_iteratorNormalCompletion3 && _iterator3.return) {
+									_iterator3.return();
+								}
+							} finally {
+								if (_didIteratorError3) {
+									throw _iteratorError3;
+								}
+							}
+						}
+					}
+				}
+			} catch (err) {
+				_didIteratorError = true;
+				_iteratorError = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion && _iterator.return) {
+						_iterator.return();
+					}
+				} finally {
+					if (_didIteratorError) {
+						throw _iteratorError;
+					}
+				}
+			}
+		}
+	}, {
+		key: "serialise",
+		value: function serialise() {
+			var output = [];
+			var errors = [];
+
+			var form = document.getElementById(this.formId);
+			var allControls = Array.from(form.elements);
+
+			// All inputs
+			var controlsByName = {};
+			var _iteratorNormalCompletion4 = true;
+			var _didIteratorError4 = false;
+			var _iteratorError4 = undefined;
+
+			try {
+				for (var _iterator4 = allControls[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+					var control = _step4.value;
+
+					// Skip controls without names
+					if (control.name) {
+						// Make sure this entry exists
+						controlsByName[control.name] = controlsByName[control.name] || [];
+						controlsByName[control.name].push(control);
+					}
+				}
+
+				// Iterate over all the name groups
+			} catch (err) {
+				_didIteratorError4 = true;
+				_iteratorError4 = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion4 && _iterator4.return) {
+						_iterator4.return();
+					}
+				} finally {
+					if (_didIteratorError4) {
+						throw _iteratorError4;
+					}
+				}
+			}
+
+			var _iteratorNormalCompletion5 = true;
+			var _didIteratorError5 = false;
+			var _iteratorError5 = undefined;
+
+			try {
+				for (var _iterator5 = Object.keys(controlsByName)[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
+					var name = _step5.value;
+
+					// Skip some fields
+					if (this.skipList.includes(name)) {
+						continue;
+					}
+
+					// Get the current group
+					var group = controlsByName[name];
+
+					// Get a type like `input:file` or `textarea`
+					var type = this.getExtendedTagName(group[0]);
+
+					var fn = FormSaverSerialisers[type] || FormSaverSerialisers["*"];
+					if (typeof fn == "string") {
+						fn = FormSaverSerialisers[fn];
+					}
+
+					var value = fn(group);
+					if (value === null) {
+						// The less said the better
+					} else if ((typeof value === "undefined" ? "undefined" : _typeof(value)) == 'object' && value.name == 'Error') {
+						errors.push({ name: name, error: value });
+					} else {
+						output.push({ name: name, value: value });
+					}
+				}
+			} catch (err) {
+				_didIteratorError5 = true;
+				_iteratorError5 = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion5 && _iterator5.return) {
+						_iterator5.return();
+					}
+				} finally {
+					if (_didIteratorError5) {
+						throw _iteratorError5;
+					}
+				}
+			}
+
+			return {
+				errors: errors,
+				form: output
+			};
+		}
+	}]);
+
+	return FormSaver;
+}();
\ No newline at end of file
diff --git a/apps/map/static/map/plugins/jquery.dirtyforms.min.js b/apps/map/static/map/plugins/jquery.dirtyforms.min.js
new file mode 100644
index 0000000..3fa4d18
--- /dev/null
+++ b/apps/map/static/map/plugins/jquery.dirtyforms.min.js
@@ -0,0 +1,7 @@
+/*!
+Dirty Forms jQuery Plugin | v2.0.0 | github.com/snikch/jquery.dirtyforms
+(c) 2010-2015 Mal Curtis
+License MIT
+*/
+!function(e,t,i,r){e.fn.on||(e.fn.on=function(e,t,i,r){return this.delegate(t,e,i,r)}),e.fn.dirtyForms=function(t){return n[t]?n[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?void e.error("Method "+t+" does not exist on jQuery.dirtyForms"):n.init.apply(this,arguments)};var n={init:function(r){var n={};return a.initialized||(e.extend(!0,e.DirtyForms,r),e(i).trigger("bind.dirtyforms",[u]),u.bind(t,i,n),a.initialized=!0),this.filter("form").not(":dirtylistening").each(function(){var t=e(this);t.find(e.DirtyForms.fieldSelector).each(function(){m(e(this))}),t.trigger("scan.dirtyforms"),u.bindForm(t,n)}),this},isDirty:function(t){var i=p(),r=e.DirtyForms.dirtyClass,n=!1;return this.each(function(o){var a=e(this),s=b(a,i);return a.hasClass(r)&&!s?(n=!0,!1):(a.find("."+r).each(function(){return b(e(this),i)?void 0:(n=!0,!1)}),n?!1:s||t||(e.each(e.DirtyForms.helpers,function(e,t){return t.isDirty&&t.isDirty(a,o)?(n=!0,!1):void 0}),!n)?void 0:!1)}),n},setClean:function(t,i){var r=function(){var t=e(this);m(t),C(t,!1)};return g(this,e.DirtyForms.fieldSelector,t).each(r).parents("form").trigger("setclean.dirtyforms",[t]),i?this:y(this,"setClean",t,p())},rescan:function(t,i){var r=function(){var t=e(this);v(t)||m(t),C(t,F(t))};return g(this,e.DirtyForms.fieldSelector,t).each(r).parents("form").trigger("rescan.dirtyforms",[t]),i?this:y(this,"rescan",t,p())}};e.extend(e.expr[":"],{dirty:function(t){var i=e(t);return i.hasClass(e.DirtyForms.dirtyClass)&&!i.is(":dirtyignored")},dirtylistening:function(t){return e(t).hasClass(e.DirtyForms.listeningClass)},dirtyignored:function(t){return b(e(t),!1)}}),e.DirtyForms={message:"You've made changes on this page which aren't saved. If you leave you will lose these changes.",dirtyClass:"dirty",listeningClass:"dirtylisten",ignoreClass:"dirtyignore",ignoreSelector:"",fieldSelector:"input:not([type='button'],[type='image'],[type='submit'],[type='reset'],[type='file'],[type='search']),select,textarea",helpers:[],dialog:!1};var o,a={initialized:!1,formStash:!1,dialogStash:!1,deciding:!1,decidingEvent:!1},s=function(e){return e.data.bindEscKey&&27==e.which||e.data.bindEnterKey&&13==e.which?f(e,!1):void 0},d=function(t){var r=t.staySelector,n=t.proceedSelector;""!==r&&e(r).unbind("click",f).click(f),""!==n&&e(n).unbind("click",l).click(l),(t.bindEscKey||t.bindEnterKey)&&e(i).unbind("keydown",s).keydown(t,s)},c=function(t,i){e.isFunction(e.DirtyForms.dialog.close)&&e.DirtyForms.dialog.close(t,i)},l=function(e){return f(e,!0)},f=function(t,r){if(a.deciding){if(t.preventDefault(),r===!0){var n=a.decidingEvent;e(i).trigger("proceed.dirtyforms",[n]),u.clearUnload(),c(r,!1),E(n)}else{e(i).trigger("stay.dirtyforms");var o=e.DirtyForms.dialog!==!1&&a.dialogStash!==!1&&e.isFunction(e.DirtyForms.dialog.unstash);c(r,o),o&&e.DirtyForms.dialog.unstash(a.dialogStash,t),e(i).trigger("afterstay.dirtyforms")}return a.deciding=a.decidingEvent=a.dialogStash=a.formStash=!1,!1}},u={bind:function(t,i,r){e(t).bind("beforeunload",r,u.onBeforeUnload),e(i).on("click",'a:not([target="_blank"])',r,u.onAnchorClick).on("submit","form",r,u.onSubmit)},bindForm:function(t,r){var n=e.DirtyForms,o="onpropertychange"in i.createElement("input"),a="change input"+(o?" keyup selectionchange cut paste":"");t.addClass(n.listeningClass).on("focus keydown",n.fieldSelector,r,u.onFocus).on(a,n.fieldSelector,r,u.onFieldChange).bind("reset",r,u.onReset)},onFocus:function(t){var i=e(t.target);v(i)||m(i)},onFieldChange:function(t){var i=e(t.target);"change"!==t.type?S(function(){D(i)},100):D(i)},onReset:function(t){var i=e(t.target).closest("form");setTimeout(function(){i.dirtyForms("setClean")},100)},onAnchorClick:function(e){k(e)},onSubmit:function(e){k(e)},onBeforeUnload:function(e){var t=k(e);return t&&a.doubleunloadfix!==!0&&(a.deciding=!1),a.doubleunloadfix=!0,setTimeout(function(){a.doubleunloadfix=!1},200),"string"==typeof t?(e.returnValue=t,t):void 0},onRefireClick:function(t){var i=new e.Event("click");e(t.target).trigger(i),i.isDefaultPrevented()||u.onRefireAnchorClick(t)},onRefireAnchorClick:function(i){var n=e(i.target).closest("a[href]").attr("href");n!==r&&(t.location.href=n)},clearUnload:function(){e(t).unbind("beforeunload",u.onBeforeUnload),t.onbeforeunload=null,e(i).trigger("beforeunload.dirtyforms")}},g=function(e,t,i){var r=e.filter(t).add(e.find(t));return i&&(r=r.not(":dirtyignored")),r},y=function(t,i,r,n){return t.each(function(t){var o=e(this);r&&b(o,n)||e.each(e.DirtyForms.helpers,function(e,n){n[i]&&n[i](o,t,r)})})},h=function(t){var i;return t.is("select")?(i="",t.find("option").each(function(){var t=e(this);t.is(":selected")&&(i.length>0&&(i+=","),i+=t.val())})):i=t.is(":checkbox,:radio")?t.is(":checked"):t.val(),i},m=function(e){e.data("df-orig",h(e));var t=e.data("df-orig")===r;e.data("df-empty",t)},v=function(e){return e.data("df-orig")!==r||e.data("df-empty")===!0},p=function(){var t=e.DirtyForms,i=t.ignoreSelector;return e.each(t.helpers,function(e,t){"ignoreSelector"in t&&(i.length>0&&(i+=","),i+=t.ignoreSelector)}),i},b=function(t,i){return i||(i=p()),t.is(i)||t.closest("."+e.DirtyForms.ignoreClass).length>0},F=function(e,t){return!v(e)||b(e,t)?!1:h(e)!=e.data("df-orig")},D=function(t,i){if(!b(t,i))if(t.is(":radio[name]")){var r=t.attr("name"),n=t.parents("form");n.find(":radio[name='"+r+"']").each(function(){var t=e(this);C(t,F(t,i))})}else C(t,F(t,i))},C=function(t,i){var r=e.DirtyForms.dirtyClass,n=t.parents("form");t.toggleClass(r,i);var o=i!==(n.hasClass(r)&&0===n.find(":dirty").length);o&&(n.toggleClass(r,i),i&&n.trigger("dirty.dirtyforms"),i||n.trigger("clean.dirtyforms"))},S=function(){var e=0;return function(t,i){clearTimeout(e),e=setTimeout(t,i)}}(),k=function(t){var r=e(t.target),n=t.type,s=e.DirtyForms;if(t.isDefaultPrevented())return!1;if("beforeunload"==n&&a.doubleunloadfix)return a.doubleunloadfix=!1,!1;if(r.is(":dirtyignored"))return u.clearUnload(),!1;if(a.deciding)return!1;if(!e("form:dirtylistening").dirtyForms("isDirty"))return u.clearUnload(),!1;if("submit"==n&&r.dirtyForms("isDirty"))return u.clearUnload(),!0;if(e(i).trigger("defer.dirtyforms"),"beforeunload"==n)return s.message;if(s.dialog){t.preventDefault(),t.stopImmediatePropagation(),a.deciding=!0,a.decidingEvent=t,e.isFunction(s.dialog.stash)&&(a.dialogStash=s.dialog.stash());var c=s.dialog.stashSelector;"string"==typeof c&&r.is("form")&&r.parents(c).length>0?a.formStash=r.clone(!0).hide():a.formStash=!1,o={proceed:!1,commit:function(e){return f(e,o.proceed)},bindEscKey:!0,bindEnterKey:!1,proceedSelector:"",staySelector:""},s.dialog.open(o,s.message,s.ignoreClass),d(o)}},E=function(t){if("click"===t.type)u.onRefireClick(t);else{var i;a.formStash?(i=a.formStash,e("body").append(i)):i=e(t.target).closest("form"),i.trigger(t.type)}}}(jQuery,window,document);
+//# sourceMappingURL=jquery.dirtyforms.min.js.map
diff --git a/apps/map/templates/map/form.html b/apps/map/templates/map/form.html
index c9b558e..7171fd7 100644
--- a/apps/map/templates/map/form.html
+++ b/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 %}