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,8 +273,39 @@ import axios from "axios";
 
 import tagList from "../../fieldComponents/tagList";
 import keyvalList from "../../fieldComponents/keyvalList";
-
 import taskSubmitter from "../../genericComponents/taskSubmitter";
+import { syncDataWithLocalStorage } from "../../../syncDataWithLocalStorage";
+
+function defaultCaptureSettings() {
+  return {
+    filename: "",
+    temporary: false,
+    fullResolution: false,
+    storeBayer: false,
+    resizeCapture: false,
+    captureNotes: "",
+    scanCapture: false,
+    scanDeltaZ: "Fast",
+    scanStyle: "Raster",
+    namingStyle: "Coordinates",
+    scanStepSize: {
+      x: 800,
+      y: 640,
+      z: 50
+    },
+    scanSteps: {
+      x: 3,
+      y: 3,
+      z: 5
+    },
+    resizeDims: [640, 480],
+    tags: [],
+    annotations: {
+      Client: "openflexure-microscope-jsclient:builtin"
+    },
+    scanUri: null
+  };
+}
 
 // Export main app
 export default {
@@ -287,34 +318,9 @@ export default {
   },
 
   data: function() {
-    return {
+    // I've split this out so I can use the keys elsewhere, and to allow
-      filename: "",
+    // for some data in the future that isn't in defaultCaptureSettings();
-      temporary: false,
+    return defaultCaptureSettings();
-      fullResolution: false,
-      storeBayer: false,
-      resizeCapture: false,
-      captureNotes: "",
-      scanCapture: false,
-      scanDeltaZ: "Fast",
-      scanStyle: "Raster",
-      namingStyle: "Coordinates",
-      scanStepSize: {
-        x: 800,
-        y: 640,
-        z: 50
-      },
-      scanSteps: {
-        x: 3,
-        y: 3,
-        z: 5
-      },
-      resizeDims: [640, 480],
-      tags: [],
-      annotations: {
-        Client: "openflexure-microscope-jsclient:builtin"
-      },
-      scanUri: null
-    };
   },
 
   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 });
+  }
+}