Scan settings are now remembered

This is done in local storage, and I'm
quite pleased with how neat it is!
Happy to be corrected on a better way to pass `this` though!

openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue

@@ -273,20 +273,10 @@ import axios from "axios";
 
 import tagList from "../../fieldComponents/tagList";
 import keyvalList from "../../fieldComponents/keyvalList";
-
 import taskSubmitter from "../../genericComponents/taskSubmitter";
+import { syncDataWithLocalStorage } from "../../../syncDataWithLocalStorage";
 
-// Export main app
+function defaultCaptureSettings() {
-export default {
-  name: "PaneCapture",
-
-  components: {
-    tagList,
-    keyvalList,
-    taskSubmitter
-  },
-
-  data: function() {
   return {
     filename: "",
     temporary: false,
@@ -315,6 +305,22 @@ export default {
     },
     scanUri: null
   };
+}
+
+// Export main app
+export default {
+  name: "PaneCapture",
+
+  components: {
+    tagList,
+    keyvalList,
+    taskSubmitter
+  },
+
+  data: function() {
+    // I've split this out so I can use the keys elsewhere, and to allow
+    // for some data in the future that isn't in defaultCaptureSettings();
+    return defaultCaptureSettings();
   },
 
   computed: {
@@ -393,6 +399,9 @@ export default {
 
   mounted() {
     this.updateScanUri();
+    // Load settings if they have been saved, and set up watchers to sync with local storage
+    syncDataWithLocalStorage("captureSettings", this, defaultCaptureSettings());
+
     // A global signal listener to perform a capture action
     this.$root.$on("globalCaptureEvent", () => {
       this.handleCapture();

openflexure_microscope/api/static/src/syncDataWithLocalStorage.js

@@ -0,0 +1,37 @@
+/**
+ * This function should be called from a Vue component's "created" hook
+ * It will initialise a list of properties from local storage.
+ * It then sets up watchers for said properties to sync them back
+ * so that next time we load, the values persist.
+ *
+ * Arguments:
+ *   keyName: a string, used as the key in local storage
+ *   syncedObject: the object whose data you want to sync (usually `this`)
+ *   syncedData: an object, the keys of which set the properties to be synced
+ */
+export function syncDataWithLocalStorage(keyName, syncedObject, syncedData) {
+  const syncedKeys = Object.keys(syncedData);
+  // First, we try to retrieve the stored data
+  const storedString = localStorage.getItem(keyName);
+  if (storedString) {
+    const storedValues = JSON.parse(storedString);
+    for (const item of syncedKeys) {
+      if (item in storedValues) syncedObject[item] = storedValues[item];
+    }
+  }
+
+  // This function will update local storage with current values
+  //const context = this;
+  let updateStoredValues = function() {
+    let newData = {};
+    for (const item of syncedKeys) {
+      newData[item] = syncedObject[item];
+    }
+    localStorage.setItem(keyName, JSON.stringify(newData));
+  };
+
+  // Now, set up watchers to update local storage when things change
+  for (const item of syncedKeys) {
+    syncedObject.$watch(item, updateStoredValues, { deep: true });
+  }
+}