Merge branch 'fewer-ui-assumptions' into 'v3'

UI customises to available Things

Closes #510 and #385

See merge request openflexure/openflexure-microscope-server!435

webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue

@@ -86,10 +86,10 @@ export default {
 
   computed: {
     actions() {
-      return this.$store.getters["wot/thingDescription"]("camera_stage_mapping").actions;
+      return this.thingDescription("camera_stage_mapping").actions;
     },
     properties() {
-      return this.$store.getters["wot/thingDescription"]("camera_stage_mapping").properties;
+      return this.thingDescription("camera_stage_mapping").properties;
     },
   },
 

webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue

@@ -52,7 +52,7 @@ export default {
 
   computed: {
     actions() {
-      return this.$store.getters["wot/thingDescription"]("camera").actions;
+      return this.thingDescription("camera").actions;
     },
   },
 

webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <appSettings />
+    <streamSettings />
+  </div>
+</template>
+
+<script>
+import appSettings from "./displaySetttingsComponents/appSettings.vue";
+import streamSettings from "./displaySetttingsComponents/streamSettings.vue";
+
+// Export main app
+export default {
+  name: "DisplaySettings",
+
+  components: {
+    streamSettings,
+    appSettings,
+  },
+};
+</script>

webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="uk-width-large">
+    <p><b>Single Move Step Size</b></p>
+    <p>
+      This sets the size (and direction) of movements made using the navigation buttons in the
+      control tab or using the keyboard (arrow keys, page up/down).
+    </p>
+    <p>These settings do not affect the operation of other actions your microscope performs.</p>
+    <div class="uk-grid-small uk-child-width-1-3" uk-grid>
+      <div>
+        <label class="uk-form-label" for="form-stacked-text">x</label>
+        <div class="uk-form-controls">
+          <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
+        </div>
+        <label class="uk-margin-small-right">
+          <input v-model="invert.x" class="uk-checkbox" type="checkbox" />
+          Invert x
+        </label>
+      </div>
+
+      <div>
+        <label class="uk-form-label" for="form-stacked-text">y</label>
+        <div class="uk-form-controls">
+          <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
+        </div>
+        <label class="uk-margin-small-right">
+          <input v-model="invert.y" class="uk-checkbox" type="checkbox" />
+          Invert y
+        </label>
+      </div>
+
+      <div>
+        <label class="uk-form-label" for="form-stacked-text">z</label>
+        <div class="uk-form-controls">
+          <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StageControlSettings",
+
+  computed: {
+    // Note that as stepSize and invert are mutated (i.e. we change stepSize.x not stepSize)
+    // rather than directly set we cannot use get() and set() computed to interact with the
+    // store as changed won't be detected by set(). Instead use a deep watcher to
+    // update the store (see ``watch:`` below)
+    stepSize() {
+      return this.$store.state.navigationStepSize;
+    },
+    invert() {
+      return this.$store.state.navigationInvert;
+    },
+  },
+
+  watch: {
+    stepSize: {
+      deep: true,
+      handler(newVal) {
+        this.$store.commit("changeNavigationStepSize", newVal);
+      },
+    },
+    invert: {
+      deep: true,
+      handler(newVal) {
+        this.$store.commit("changeNavigationInvert", newVal);
+      },
+    },
+  },
+};
+</script>