From ef9f257e2399cb0aec5e09eb715175944b028607 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Sun, 22 Nov 2020 17:01:46 +0000
Subject: [PATCH] Fixed global state and scrolltotop

---
 openflexure_microscope/api/static/src/App.vue  |  4 ++--
 .../api/static/src/components/appContent.vue   |  2 +-
 .../aboutComponents/devTools.vue               |  6 ++++++
 .../captureComponents/paneCapture.vue          |  2 +-
 .../galleryComponents/captureCard.vue          |  8 +++-----
 .../tabContentComponents/galleryContent.vue    |  8 +++++---
 .../tabContentComponents/loggingContent.vue    |  5 ++++-
 .../settingsComponents/appSettings.vue         |  2 +-
 .../settingsComponents/featuresSettings.vue    |  2 +-
 .../settingsComponents/streamSettings.vue      |  6 +++---
 .../tabContentComponents/streamContent.vue     | 18 ++++++------------
 openflexure_microscope/api/static/src/main.js  |  6 +-----
 .../api/static/vue.config.js                   | 15 ---------------
 13 files changed, 34 insertions(+), 50 deletions(-)
 delete mode 100644 openflexure_microscope/api/static/vue.config.js

diff --git a/openflexure_microscope/api/static/src/App.vue b/openflexure_microscope/api/static/src/App.vue
index 320b0384..ef216d09 100644
--- a/openflexure_microscope/api/static/src/App.vue
+++ b/openflexure_microscope/api/static/src/App.vue
@@ -102,9 +102,9 @@ export default {
     },
     handleTheme: function() {
       var isDark = false;
-      if (this.$store.state.globalSettings.appTheme == "dark") {
+      if (this.$store.state.appTheme == "dark") {
         isDark = true;
-      } else if (this.$store.state.globalSettings.appTheme == "system") {
+      } else if (this.$store.state.appTheme == "system") {
         if (this.systemDark) {
           isDark = true;
         }
diff --git a/openflexure_microscope/api/static/src/components/appContent.vue b/openflexure_microscope/api/static/src/components/appContent.vue
index 08209ffc..27e72e0a 100644
--- a/openflexure_microscope/api/static/src/components/appContent.vue
+++ b/openflexure_microscope/api/static/src/components/appContent.vue
@@ -214,7 +214,7 @@ export default {
   computed: {
     enabledTopTabs: function() {
       var enabledTabs = this.topTabs;
-      if (this.$store.state.globalSettings.IHIEnabled) {
+      if (this.$store.state.IHIEnabled) {
         enabledTabs.push({
           id: "slidescan",
           icon: "settings_overscan",
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/aboutComponents/devTools.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/aboutComponents/devTools.vue
index f9dfb16d..07806e2f 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/aboutComponents/devTools.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/aboutComponents/devTools.vue
@@ -23,6 +23,12 @@ export default {
     };
   },
 
+  mounted() {
+    if (!this.$store.getters.ready) {
+      this.currentOrigin = "http://microscope.local:5000";
+    }
+  },
+
   methods: {
     overrideAPIHost: function() {
       this.$store.commit("changeOrigin", this.currentOrigin);
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue
index 34abb9f6..cd83a3cf 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue
@@ -308,7 +308,7 @@ export default {
       resizeDims: [640, 480],
       tags: [],
       annotations: {
-        Client: `${process.env.PACKAGE.name}.${process.env.PACKAGE.version}`
+        Client: "openflexure-microscope-jsclient:builtin"
       },
       scanUri: null
     };
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
index 7002fdc4..80c33397 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="capture-card uk-card uk-card-default uk-padding-remove uk-width-medium"
-    :class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }"
+    :class="{ 'uk-card-secondary': $store.state.darkMode }"
   >
     <div class="uk-card-media-top">
       <a class="lightbox-link" :href="imgURL" :data-caption="name">
@@ -70,8 +70,7 @@
       <div
         class="uk-modal-dialog uk-modal-body"
         :class="{
-          'uk-light uk-background-secondary':
-            $store.state.globalSettings.darkMode
+          'uk-light uk-background-secondary': $store.state.darkMode
         }"
       >
         <button class="uk-modal-close-default" type="button" uk-close></button>
@@ -112,8 +111,7 @@
       <form
         class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical"
         :class="{
-          'uk-light uk-background-secondary':
-            $store.state.globalSettings.darkMode
+          'uk-light uk-background-secondary': $store.state.darkMode
         }"
         @submit.prevent="handleTagSubmit"
       >
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue
index aa4ee6ac..612baee9 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue
@@ -24,8 +24,7 @@
             <a href="#">Filter</a>
             <div
               :class="{
-                'uk-light uk-background-secondary':
-                  $store.state.globalSettings.darkMode
+                'uk-light uk-background-secondary': $store.state.darkMode
               }"
               class="uk-navbar-dropdown"
             >
@@ -342,7 +341,10 @@ export default {
 
   methods: {
     scrollToTop() {
-      document.querySelector("#container-left").scrollTop = 0;
+      const el = document.querySelector("#container-left");
+      if (el) {
+        el.scrollTop = 0;
+      }
     },
 
     updateCaptures: function() {
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/loggingContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/loggingContent.vue
index 468a81de..a1968176 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/loggingContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/loggingContent.vue
@@ -111,7 +111,10 @@ export default {
 
   methods: {
     scrollToTop() {
-      document.querySelector("#container-left").scrollTop = 0;
+      const el = document.querySelector("#container-left");
+      if (el) {
+        el.scrollTop = 0;
+      }
     },
     visibilityChanged(isVisible) {
       if (isVisible) {
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue
index 6b547d44..6e208f7a 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue
@@ -26,7 +26,7 @@ export default {
   computed: {
     appTheme: {
       get() {
-        return this.$store.state.globalSettings.appTheme;
+        return this.$store.state.appTheme;
       },
       set(value) {
         this.$store.commit("changeAppTheme", value);
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
index 8b131607..1b78e27d 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue
@@ -29,7 +29,7 @@ export default {
   computed: {
     IHIEnabled: {
       get() {
-        return this.$store.state.globalSettings.IHIEnabled;
+        return this.$store.state.IHIEnabled;
       },
       set(value) {
         this.$store.commit("changeIHIEnabled", value);
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue
index 4814dc3e..b21627a6 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue
@@ -61,7 +61,7 @@ export default {
   computed: {
     disableStream: {
       get() {
-        return this.$store.state.globalSettings.disableStream;
+        return this.$store.state.disableStream;
       },
       set(value) {
         this.$store.commit("changeDisableStream", value);
@@ -70,7 +70,7 @@ export default {
 
     autoGpuPreview: {
       get() {
-        return this.$store.state.globalSettings.autoGpuPreview;
+        return this.$store.state.autoGpuPreview;
       },
       set(value) {
         this.$store.commit("changeAutoGpuPreview", value);
@@ -80,7 +80,7 @@ export default {
 
     trackWindow: {
       get() {
-        return this.$store.state.globalSettings.trackWindow;
+        return this.$store.state.trackWindow;
       },
       set(value) {
         this.$store.commit("changeTrackWindow", value);
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue
index 833c3247..d1ee99c1 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue
@@ -21,7 +21,7 @@
       </div>
 
       <div
-        v-else-if="$store.state.globalSettings.disableStream"
+        v-else-if="$store.state.disableStream"
         class="uk-position-center position-relative text-center"
       >
         Stream preview disabled
@@ -52,10 +52,7 @@ export default {
 
   computed: {
     streamEnabled: function() {
-      return (
-        this.$store.getters.ready &&
-        !this.$store.state.globalSettings.disableStream
-      );
+      return this.$store.getters.ready && !this.$store.state.disableStream;
     },
     thisStreamOpen: function() {
       // Only a single MJPEG connection should be open at a time
@@ -102,7 +99,7 @@ export default {
   created: function() {
     console.log(`${this._uid} created`);
     // Send a request to start/stop GPU preview based on global setting
-    this.safePreviewRequest(this.$store.state.globalSettings.autoGpuPreview);
+    this.safePreviewRequest(this.$store.state.autoGpuPreview);
   },
 
   beforeDestroy: function() {
@@ -187,7 +184,7 @@ export default {
       } else {
         console.log(`STREAM ${this._uid} OPEN`);
         this.$store.commit("addStream", this._uid);
-        if (this.$store.state.globalSettings.autoGpuPreview == true) {
+        if (this.$store.state.autoGpuPreview == true) {
           // Start the preview immediately
           this.safePreviewRequest(true);
           // Send another start preview request after a timeout
@@ -258,7 +255,7 @@ export default {
       // If requesting starting the stream, but this component is inactive, skip
       if (
         this.$store.getters.ready == true &&
-        this.$store.state.globalSettings.autoGpuPreview == true
+        this.$store.state.autoGpuPreview == true
       ) {
         var requestUri = null;
         // Create URI
@@ -270,10 +267,7 @@ export default {
 
         // Generate payload if tracking window position
         var payload = {};
-        if (
-          this.$store.state.globalSettings.trackWindow == true &&
-          state == true
-        ) {
+        if (this.$store.state.trackWindow == true && state == true) {
           // Recalculate frame dimensions and position
           this.recalculateSize();
           // Copy data into payload array
diff --git a/openflexure_microscope/api/static/src/main.js b/openflexure_microscope/api/static/src/main.js
index 44ce9a99..3e4a9933 100644
--- a/openflexure_microscope/api/static/src/main.js
+++ b/openflexure_microscope/api/static/src/main.js
@@ -3,7 +3,6 @@ import App from "./App.vue";
 import store from "./store";
 import UIkit from "uikit";
 import VueTour from "vue-tour";
-import LoadScript from "vue-plugin-load-script";
 import VueFriendlyIframe from "vue-friendly-iframe";
 import VueObserveVisibility from "vue-observe-visibility";
 
@@ -22,9 +21,6 @@ UIkit.mixin(
   "accordion"
 );
 
-// Use load-script module
-Vue.use(LoadScript);
-
 // Use vue-tour module
 Vue.use(VueTour);
 
@@ -58,7 +54,7 @@ Vue.mixin({
           .finally(function() {
             // Reenable the GPU preview, if it was active before the modal
             console.log("Re-enabling GPU preview");
-            if (context.$store.state.globalSettings.autoGpuPreview) {
+            if (context.$store.state.autoGpuPreview) {
               console.log("Re-enabling preview");
               context.$root.$emit("globalTogglePreview", true);
             }
diff --git a/openflexure_microscope/api/static/vue.config.js b/openflexure_microscope/api/static/vue.config.js
deleted file mode 100644
index 2983e5ab..00000000
--- a/openflexure_microscope/api/static/vue.config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-var webpack = require("webpack");
-
-module.exports = {
-  configureWebpack: {
-    plugins: [
-      new webpack.DefinePlugin({
-        "process.env": {
-          PACKAGE: JSON.stringify(require("./package.json"))
-        }
-      })
-    ]
-  },
-
-  publicPath: ""
-};