Run lint:fix and accept a huge formatting change

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

@@ -1,15 +1,10 @@
 <template>
-  <div
-    id="CSMSettings"
-    class="uk-grid uk-grid-divider uk-child-width-expand"
-    uk-grid
-  >
+  <div id="CSMSettings" class="uk-grid uk-grid-divider uk-child-width-expand" uk-grid>
     <div class="uk-width-xlarge">
       <h3>Camera to Stage Mapping</h3>
       <p>
-        Camera-stage mapping allows the stage to move relative to the camera
-        view. This enables functions like click-to-move, and more precise tile
-        scans.
+        Camera-stage mapping allows the stage to move relative to the camera view. This enables
+        functions like click-to-move, and more precise tile scans.
       </p>
       <CSMCalibrationSettings />
     </div>
@@ -29,8 +24,8 @@ export default {
 
   components: {
     CSMCalibrationSettings,
-    miniStreamDisplay
-  }
+    miniStreamDisplay,
+  },
 };
 </script>
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-observe-visibility="visibilityChanged" id="CSMCalibrationSettings">
+  <div id="CSMCalibrationSettings" v-observe-visibility="visibilityChanged">
     <!--Show auto calibrate if default plugin is enabled-->
     <div v-if="'calibrate_xy' in actions" class="uk-margin-small">
       <action-button
@@ -26,15 +26,18 @@
     >
       Download Calibration Data
     </button>
-    <div v-if="this.csmMatrix!='undefined'" style="margin:10px;">
-    <details><summary>Calibration Details</summary>
-    <strong>CSM calculated for images with a resolution of {{ csmResolution }}</strong>
-    <ul>
-    <li>Current CSM Matrix: <tt>{{ csmMatrix }}</tt></li>
-    <li>Pixels per motor step: {{ csmRatio }}</li>
-    <li>Full field of view: {{ csmFOV }} motor steps</li>
-    </ul>
-    </details>
+    <div v-if="this.csmMatrix != 'undefined'" style="margin:10px;">
+      <details
+        ><summary>Calibration Details</summary>
+        <strong>CSM calculated for images with a resolution of {{ csmResolution }}</strong>
+        <ul>
+          <li>
+            Current CSM Matrix: <tt>{{ csmMatrix }}</tt>
+          </li>
+          <li>Pixels per motor step: {{ csmRatio }}</li>
+          <li>Full field of view: {{ csmFOV }} motor steps</li>
+        </ul>
+      </details>
     </div>
   </div>
 </template>
@@ -47,36 +50,32 @@ export default {
   name: "CSMCalibrationSettings",
 
   components: {
-    ActionButton
+    ActionButton,
   },
 
   props: {
     showExtraSettings: {
       type: Boolean,
       required: false,
-      default: true
-    }
+      default: true,
+    },
   },
-  
+
   data() {
     return {
       csmMatrix: "undefined",
       csmResolution: "undefined",
-      csmRatio: "undefined"
+      csmRatio: "undefined",
     };
   },
 
-
-
   computed: {
     actions() {
-      return this.$store.getters["wot/thingDescription"]("camera_stage_mapping")
-        .actions;
+      return this.$store.getters["wot/thingDescription"]("camera_stage_mapping").actions;
     },
     properties() {
-      return this.$store.getters["wot/thingDescription"]("camera_stage_mapping")
-        .properties;
-    }
+      return this.$store.getters["wot/thingDescription"]("camera_stage_mapping").properties;
+    },
   },
 
   methods: {
@@ -87,10 +86,7 @@ export default {
     },
     getCalibrationData: async function() {
       try {
-        let data = await this.readThingProperty(
-          "camera_stage_mapping",
-          "last_calibration"
-        );
+        let data = await this.readThingProperty("camera_stage_mapping", "last_calibration");
         if (data == {}) {
           throw "No calibration data available.";
         }
@@ -107,33 +103,29 @@ export default {
     },
     updateDisplayedCSM: async function() {
       let csmMatrix = await this.readThingProperty(
-          "camera_stage_mapping",
-          "image_to_stage_displacement_matrix"
-        );
-      this.csmResolution = await this.readThingProperty(
         "camera_stage_mapping",
-        "image_resolution"
-      );
-      let streamResolution = await this.readThingProperty(
-        "camera",
-        "stream_resolution"
+        "image_to_stage_displacement_matrix",
       );
+      this.csmResolution = await this.readThingProperty("camera_stage_mapping", "image_resolution");
+      let streamResolution = await this.readThingProperty("camera", "stream_resolution");
       csmMatrix[0][0] = Number(csmMatrix[0][0].toFixed(3));
       csmMatrix[0][1] = Number(csmMatrix[0][1].toFixed(3));
       csmMatrix[1][0] = Number(csmMatrix[1][0].toFixed(3));
       csmMatrix[1][1] = Number(csmMatrix[1][1].toFixed(3));
       this.csmMatrix = csmMatrix;
-      this.csmRatio = Number((Math.abs(csmMatrix[1][0]) + Math.abs(csmMatrix[0][1])) / 2).toFixed(3);
+      this.csmRatio = Number((Math.abs(csmMatrix[1][0]) + Math.abs(csmMatrix[0][1])) / 2).toFixed(
+        3,
+      );
       this.csmFOV = [
-        Number((streamResolution[0]**2 * this.csmRatio / this.csmResolution[1]).toFixed(0)),
-        Number((streamResolution[1]**2 * this.csmRatio / this.csmResolution[0]).toFixed(0)),
-      ]
+        Number(((streamResolution[0] ** 2 * this.csmRatio) / this.csmResolution[1]).toFixed(0)),
+        Number(((streamResolution[1] ** 2 * this.csmRatio) / this.csmResolution[0]).toFixed(0)),
+      ];
     },
     onRecalibrateResponse: function() {
       this.modalNotify("Finished stage-to-camera calibration.");
       this.updateDisplayedCSM();
-    }
-  }
+    },
+  },
 };
 </script>
 

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

@@ -34,8 +34,19 @@ export default {
       },
       set(value) {
         this.$store.commit("changeAppTheme", value);
-      }
-    }
+      },
+    },
+  },
+
+  watch: {
+    appTheme: function() {
+      this.setLocalStorageObj("appTheme", this.appTheme);
+    },
+  },
+
+  mounted() {
+    // Try loading settings from localStorage. If null, don't change.
+    this.appTheme = this.getLocalStorageObj("appTheme") || this.appTheme;
   },
 
   methods: {
@@ -45,19 +56,8 @@ export default {
       } else {
         await document.exitFullscreen();
       }
-    }
+    },
   },
-
-  watch: {
-    appTheme: function() {
-      this.setLocalStorageObj("appTheme", this.appTheme);
-    }
-  },
-
-  mounted() {
-    // Try loading settings from localStorage. If null, don't change.
-    this.appTheme = this.getLocalStorageObj("appTheme") || this.appTheme;
-  }
 };
 </script>
 

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

@@ -33,7 +33,7 @@ export default {
   components: {
     cameraCalibrationSettings,
     miniStreamDisplay,
-    ServerSpecifiedPropertyControl
+    ServerSpecifiedPropertyControl,
   },
 
   data() {
@@ -45,15 +45,12 @@ export default {
   computed: {
     cameraUri: function() {
       return `${this.$store.getters.baseUri}/camera/`;
-    }
+    },
   },
 
   async created() {
-    this.manualCameraSettings = await this.readThingProperty(
-      "camera",
-      "manual_camera_settings"
-    );
-  }
+    this.manualCameraSettings = await this.readThingProperty("camera", "manual_camera_settings");
+  },
 };
 </script>
 

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

@@ -28,44 +28,44 @@ export default {
   name: "CameraCalibrationSettings",
 
   components: {
-    ServerSpecifiedActionButton
+    ServerSpecifiedActionButton,
   },
 
   props: {
     showExtraSettings: {
       type: Boolean,
       required: false,
-      default: true
+      default: true,
     },
     cameraUri: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
 
   data() {
     return {
       primaryCalibrationActions: [],
-      secondaryCalibrationActions: []
+      secondaryCalibrationActions: [],
     };
   },
 
   computed: {
     actions() {
       return this.$store.getters["wot/thingDescription"]("camera").actions;
-    }
+    },
   },
 
   async created() {
     this.primaryCalibrationActions = await this.readThingProperty(
       "camera",
-      "primary_calibration_actions"
+      "primary_calibration_actions",
     );
     this.secondaryCalibrationActions = await this.readThingProperty(
       "camera",
-      "secondary_calibration_actions"
+      "secondary_calibration_actions",
     );
-  }
+  },
 };
 </script>
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div id="stageSettings" class="uk-width-large" v-observe-visibility="visibilityChanged">
+  <div id="stageSettings" v-observe-visibility="visibilityChanged" class="uk-width-large">
     The microscope stage is a <b>{{ stageType }}</b>
     <div>
       <div class="uk-margin">
@@ -48,6 +48,12 @@ export default {
     };
   },
 
+  computed: {
+    stageType: function() {
+      return this.thingDescription("stage").title;
+    }
+  },
+
   methods:{
     visibilityChanged(isVisible) {
       if (isVisible) {
@@ -61,12 +67,6 @@ export default {
       );
       this.z_inverted = axes_inverted['z'] ? "" : "not ";
     }
-  },
-
-  computed: {
-    stageType: function() {
-      return this.thingDescription("stage").title;
-    }
   }
 };
 </script>

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

@@ -3,8 +3,8 @@
     <div>
       <h3>Stream Settings</h3>
       <label
-        ><input v-model="disableStream" class="uk-checkbox" type="checkbox" />
-        Disable Web Stream</label
+        ><input v-model="disableStream" class="uk-checkbox" type="checkbox" /> Disable Web
+        Stream</label
       >
       <p class="uk-margin-small">
         This will disable the embedded web stream of the camera.
@@ -29,8 +29,8 @@ export default {
       },
       set(value) {
         this.$store.commit("changeDisableStream", value);
-      }
-    }
+      },
+    },
   },
 
   watch: {
@@ -38,8 +38,8 @@ export default {
     // (the next 3 functions all relate to this)
     disableStream: function(newValue) {
       this.setLocalStorageObj("disableStream", newValue);
-    }
-  }
+    },
+  },
 };
 </script>