Let prettier change a load of things because new prettier has new rules :(

webapp/.eslintrc.js

@@ -5,14 +5,19 @@ module.exports = {
     node: true,
   },
 
+  parser: "vue-eslint-parser",
+
   parserOptions: {
     parser: "@babel/eslint-parser",
+    requireConfigFile: false,
+    ecmaVersion: 2020,
+    sourceType: "module",
   },
 
+  extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
+
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
   },
-
-  extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
 };

webapp/src/App.vue

@@ -98,7 +98,7 @@ export default {
       this.systemDark = true;
     }
     // Create a theme observer to watch for changes
-    this.themeObserver = mql.addListener(e => {
+    this.themeObserver = mql.addListener((e) => {
       if (e.matches) {
         this.systemDark = true;
       } else {
@@ -131,7 +131,7 @@ export default {
     // Arrow keys
     Mousetrap.bind(
       ["up", "down", "left", "right"],
-      event => {
+      (event) => {
         this.arrowKeysDown[event.keyCode] = true; //Add key to array
         this.navigateKeyHandler();
       },
@@ -139,7 +139,7 @@ export default {
     );
     Mousetrap.bind(
       ["up", "down", "left", "right"],
-      event => {
+      (event) => {
         delete this.arrowKeysDown[event.keyCode]; //Remove key from array
       },
       "keyup",

webapp/src/components/appContent.vue

@@ -22,7 +22,7 @@
           >
             <img
               v-if="item.iconURL"
-              style="filter: grayscale(100%);width: 22px;margin-top: 5px;margin-bottom: 8px;"
+              style="filter: grayscale(100%); width: 22px; margin-top: 5px; margin-bottom: 8px"
               :src="item.iconURL"
             />
             <span v-if="!item.iconURL" class="material-symbols-outlined">
@@ -182,7 +182,7 @@ export default {
         },
       ];
       if (!this.$store.state.galleryEnabled) {
-        tabs = tabs.filter(tab => tab.id != "gallery");
+        tabs = tabs.filter((tab) => tab.id != "gallery");
       }
       return tabs;
     },
@@ -196,7 +196,7 @@ export default {
 
   mounted() {
     // A global signal listener to switch tab
-    this.$root.$on("globalSwitchTab", tabID => {
+    this.$root.$on("globalSwitchTab", (tabID) => {
       this.currentTab = tabID;
     });
     // A global signal listener to increment tab

webapp/src/components/labThingsComponents/actionButton.vue

@@ -245,13 +245,13 @@ export default {
       }
       // Check for a task that is ongoing.
       // We can't handle multiple tasks ongoing, so this picks the first.
-      const ongoingTask = response.data.find(t => ["pending", "running"].includes(t.status));
+      const ongoingTask = response.data.find((t) => ["pending", "running"].includes(t.status));
       if (ongoingTask) {
         // There is a started task
         this.taskStarted = true;
         this.$emit("taskStarted");
         // Find its URL
-        const taskUrl = ongoingTask.links.find(t => t.rel == "self").href;
+        const taskUrl = ongoingTask.links.find((t) => t.rel == "self").href;
         try {
           await this.pollOngoingTask(ongoingTask.id, taskUrl);
         } catch (error) {
@@ -332,7 +332,7 @@ export default {
 
       var checkCondition = (resolve, reject) => {
         // If the condition is met, we're done!
-        axios.get(this.taskUrl, { baseURL: this.$store.getters.baseUri }).then(response => {
+        axios.get(this.taskUrl, { baseURL: this.$store.getters.baseUri }).then((response) => {
           var result = response.data.status;
           this.taskStatus = result;
           if ((result == "running") | (result == "pending")) {

webapp/src/components/labThingsComponents/actionLogDisplay.vue

@@ -17,9 +17,7 @@
       </div>
 
       <!-- Paused banner outside scroll container, positioned relative to wrapper -->
-      <div v-if="userIsHovering" class="paused-banner">
+      <div v-if="userIsHovering" class="paused-banner">Auto-scroll paused</div>
-        Auto-scroll paused
-      </div>
     </div>
   </div>
 </template>

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -162,7 +162,7 @@ export default {
           return "number_array";
         }
         if (Array.isArray(prop.items)) {
-          if (prop.items.every(t => num_types.includes(t.type))) {
+          if (prop.items.every((t) => num_types.includes(t.type))) {
             return "number_array";
           }
         }

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -90,7 +90,7 @@ export default {
         this.value = requestedValue;
         await this.writeThingProperty(this.thingName, this.propertyName, requestedValue);
         if (this.readBack) {
-          await new Promise(r => setTimeout(r, this.readBackDelay));
+          await new Promise((r) => setTimeout(r, this.readBackDelay));
           let newVal = await this.readProperty();
           if (newVal == requestedValue) {
             this.animate = true;

webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
     <p>
-      <b>
+      <b> Before starting camera calibration: </b>
-        Before starting camera calibration:
-      </b>
     </p>
     <ul class="uk-list uk-list-bullet">
       <li>Remove any samples from your microscope</li>

webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/csmExplanation.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
+    <p>Camera-stage mapping will calibrate the stage movement using the camera.</p>
     <p>
-      Camera-stage mapping will calibrate the stage movement using the camera.
+      <b> Before starting camera-stage mapping: </b>
-    </p>
-    <p>
-      <b>
-        Before starting camera-stage mapping:
-      </b>
     </p>
     <ul class="uk-list uk-list-bullet">
       <li>Add a sample with dense features to the microscope.</li>

webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue

@@ -1,8 +1,6 @@
 <template>
   <stepTemplateWithStream>
-    <p>
+    <p>Use the buttons below to bring the sample into focus.</p>
-      Use the buttons below to bring the sample into focus.
-    </p>
     <p>You may also adjust the z position with <b>page up</b> and <b>page down</b>.</p>
     <template #below-stream>
       <div class="action-button-container">

webapp/src/components/modalComponents/calibrationWizardComponents/finalStep.vue

@@ -3,12 +3,8 @@
     <p>
       <b>Calibration complete</b>
     </p>
-    <p>
+    <p>You'll need to repeat these steps from the Settings tab if you swap your objective.</p>
-      You'll need to repeat these steps from the Settings tab if you swap your objective.
+    <p>Click Finish to return to your microscope.</p>
-    </p>
-    <p>
-      Click Finish to return to your microscope.
-    </p>
   </div>
 </template>
 

webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
     <p>
-      <b>
+      <b> Some important microscope calibration data is currently missing. </b>
-        Some important microscope calibration data is currently missing.
-      </b>
     </p>
     <p>
       Your microscope will still function, however some functionality will be limited, and image

webapp/src/components/tabContentComponents/aboutComponents/devTools.vue

@@ -7,9 +7,7 @@
         <input v-model="reloadWhenOverridingOrigin" class="uk-input uk-checkbox" type="checkbox" />
         Reload web app with new origin
       </label>
-      <button class="uk-button uk-button-default uk-margin-small">
+      <button class="uk-button uk-button-default uk-margin-small">Apply</button>
-        Apply
-      </button>
     </form>
   </div>
 </template>

webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue

@@ -50,9 +50,7 @@
 
       <hr />
     </div>
-    <div v-else-if="$store.state.waiting">
+    <div v-else-if="$store.state.waiting">Loading...</div>
-      Loading...
-    </div>
     <div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
     <div v-else>No active connection</div>
   </div>

webapp/src/components/tabContentComponents/controlComponents/paneControl.vue

@@ -139,9 +139,7 @@
     </div>
     <div v-else class="uk-text-warning">
       <p>Stage positioning is disabled since no stage is connected.</p>
-      <p>
+      <p>Please check all data and power connections to your motor controller board.</p>
-        Please check all data and power connections to your motor controller board.
-      </p>
     </div>
   </div>
 </template>
@@ -235,7 +233,7 @@ export default {
 
   methods: {
     timeout(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
+      return new Promise((resolve) => setTimeout(resolve, ms));
     },
     async move(x, y, z, absolute) {
       // Move the stage, by updating the controls and starting a move task
@@ -281,7 +279,7 @@ export default {
           .then(() => {
             this.updatePosition(); // Update the position in text boxes
           })
-          .catch(error => {
+          .catch((error) => {
             this.modalError(error); // Let mixin handle error
           })
           .then(() => {

webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue

@@ -35,9 +35,7 @@
             button-label="Download JPEG"
           />
         </div>
-        <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">
+        <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">Delete</button>
-          Delete
-        </button>
         <action-button
           v-if="scanData.can_stitch | (scanData.stitch_available & !scanData.dzi)"
           submit-label="Stitch Images"
@@ -121,14 +119,8 @@ export default {
       let yyyy = d.getFullYear();
       let mm = d.getMonth() + 1;
       let dd = d.getDate();
-      let HH = d
+      let HH = d.getHours().toString().padStart(2, "0");
-        .getHours()
+      let MM = d.getMinutes().toString().padStart(2, "0");
-        .toString()
-        .padStart(2, "0");
-      let MM = d
-        .getMinutes()
-        .toString()
-        .padStart(2, "0");
       return `${HH}:${MM} ${dd}/${mm}/${yyyy}`;
     },
     formatDuration(duration) {

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -18,9 +18,7 @@
               :button-primary="false"
               :modal-progress="true"
               :requires-confirmation="true"
-              :confirmation-message="
+              :confirmation-message="'<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'"
-                '<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'
-              "
               @error="modalError"
             />
           </div>
@@ -62,9 +60,7 @@
       <div class="gallery-grid uk-grid-match" uk-grid>
         <div v-if="scansEmpty">
           <h2>No scans available</h2>
-          <p>
+          <p>There are no scans available to show.</p>
-            There are no scans available to show.
-          </p>
         </div>
         <div v-for="scanData in paginatedScans" :key="scanData.id">
           <scan-card
@@ -168,7 +164,7 @@ export default {
       (state, getters) => {
         return getters.ready;
       },
-      ready => {
+      (ready) => {
         if (ready) {
           // If the connection is now ready, update capture list
           this.updateScans();
@@ -205,7 +201,7 @@ export default {
         if (!scans | (scans.length == 0)) {
           this.scans = scans;
         }
-        scans.forEach(scan => {
+        scans.forEach((scan) => {
           scan.can_stitch = !scan.stitch_available && scan.number_of_images > 3;
         });
         scans.sort((a, b) => {

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

@@ -6,9 +6,7 @@
         :button-primary="true"
         :can-terminate="true"
         :requires-confirmation="true"
-        :confirmation-message="
+        :confirmation-message="'Start recalibration of the stage to the camera? This may take a while, and the microscope will be locked during this time.'"
-          'Start recalibration of the stage to the camera? This may take a while, and the microscope will be locked during this time.'
-        "
         thing="camera_stage_mapping"
         action="calibrate_xy"
         :submit-label="'Auto-Calibrate Using Camera'"
@@ -26,9 +24,9 @@
     >
       Download Calibration Data
     </button>
-    <div v-if="csmMatrix != 'undefined'" style="margin:10px;">
+    <div v-if="csmMatrix != 'undefined'" style="margin: 10px">
-      <details
+      <details>
-        ><summary>Calibration Details</summary>
+        <summary>Calibration Details</summary>
         <strong>CSM calculated for images with a resolution of {{ csmResolution }}</strong>
         <ul>
           <li>

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

@@ -4,16 +4,12 @@
     <div>
       <div class="uk-margin">
         <p>Your z motor is currently {{ z_inverted }} inverted.</p>
-        <p>
+        <p>We expect that moving in +z:</p>
-          We expect that moving in +z:
-        </p>
         <ul>
           <li>Moves your objective up, towards the sample and illumination</li>
           <li>Turns the exposed z gear anti-clockwise (when viewed from above)</li>
         </ul>
-        <p>
+        <p>If this is not the case, click the button below to switch.</p>
-          If this is not the case, click the button below to switch.
-        </p>
         <div class="uk-margin">
           <div class="uk-margin">
             <action-button

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

@@ -6,9 +6,7 @@
         ><input v-model="disableStream" class="uk-checkbox" type="checkbox" /> Disable Web
         Stream</label
       >
-      <p class="uk-margin-small">
+      <p class="uk-margin-small">This will disable the embedded web stream of the camera.</p>
-        This will disable the embedded web stream of the camera.
-      </p>
     </div>
   </div>
 </template>

webapp/src/components/tabContentComponents/slideScanContent.vue

@@ -1,7 +1,5 @@
 <template>
-  <div v-if="!backendOK" class="uk-alert-danger">
+  <div v-if="!backendOK" class="uk-alert-danger">No scan back-end found.</div>
-    No scan back-end found.
-  </div>
   <!-- Grid managing tab content -->
   <div v-else uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component uk-padding-small">
@@ -101,9 +99,7 @@
         </div>
       </div>
       <div v-show="scanning">
-        <h2 v-if="displayImageOnRight" style="text-align: center;">
+        <h2 v-if="displayImageOnRight" style="text-align: center">Live stitching preview</h2>
-          Live stitching preview
-        </h2>
         <mini-stream-display v-if="displayImageOnRight" />
         <action-log-display id="log-display" :log="log" :task-status="taskStatus" />
         <action-progress-bar :progress="progress" :task-status="taskStatus" />

webapp/src/main.js

@@ -198,5 +198,5 @@ Vue.mixin({
 
 new Vue({
   store,
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount("#app");

webapp/src/store.js

@@ -146,14 +146,14 @@ export default new Vuex.Store({
   actions: {},
 
   getters: {
-    baseUri: state => state.origin,
+    baseUri: (state) => state.origin,
-    ready: state => state.available,
+    ready: (state) => state.available,
   },
 
   plugins: [
-    store => {
+    (store) => {
       // Load initial state from localStorage
-      LOCALSTORAGE_KEYS.forEach(key => {
+      LOCALSTORAGE_KEYS.forEach((key) => {
         console.log(key);
         const saved = localStorage.getItem(key);
         if (saved !== null) {

webapp/src/wot-client.js

@@ -28,12 +28,7 @@ export const wotStoreModule = {
       // Deduplication should be done elsewhere.
       let response = await axios.get(uri);
       let td = response.data;
-      let thing_name =
+      let thing_name = name | uri.replace(/\/$/, "").split("/").pop();
-        name |
-        uri
-          .replace(/\/$/, "")
-          .split("/")
-          .pop();
       commit("addThingDescription", {
         thingName: thing_name,
         thingDescription: td,
@@ -53,16 +48,18 @@ export const wotStoreModule = {
     },
   },
   getters: {
-    thingDescriptions: state => {
+    thingDescriptions: (state) => {
       return state.thingDescriptions;
     },
-    thingDescription: state => thingName => {
+    thingDescription: (state) => (thingName) => {
       return state.thingDescriptions[thingName];
     },
-    thingAvailable: state => thingName => {
+    thingAvailable: (state) => (thingName) => {
       return thingName in state.thingDescriptions;
     },
-    thingFormUrl: state => (thing, affordanceType, affordance, op, allowUndefined = true) => {
+    thingFormUrl:
+      (state) =>
+      (thing, affordanceType, affordance, op, allowUndefined = true) => {
         // Find the URL for a particular operation
         let td = state.thingDescriptions[thing];
         if (!td) {
@@ -100,7 +97,7 @@ export function findFormHref(affordance, op) {
   // Find the form in the affordance that matches the given operation type
   if (affordance == undefined) return undefined;
   let forms = affordance.forms;
-  let matchingForm = forms.find(f => f.op == op || f.op.includes(op));
+  let matchingForm = forms.find((f) => f.op == op || f.op.includes(op));
   if (matchingForm == undefined) return undefined;
   return matchingForm.href;
 }