Only show nearby if running electron

src/App.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import isElectron from "./modules/isElectron";
 // Import components
 import appContent from "./components/appContent.vue";
 
@@ -46,7 +47,43 @@ export default {
       keysDown: {},
       systemDark: undefined,
       themeObserver: undefined,
-      tourSteps: [
+      liteMode: process.env.VUE_APP_LITEMODE == "true" ? true : false,
+      isElectron: isElectron(),
+      tourCallbacks: {
+        onStop: () => {
+          this.setLocalStorageObj("completedTour", true);
+        }
+      }
+    };
+  },
+
+  computed: {
+    isSystemDark: function() {
+      if (
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    handleTheme: function() {
+      var isDark = false;
+      if (this.$store.state.globalSettings.appTheme == "dark") {
+        isDark = true;
+      } else if (this.$store.state.globalSettings.appTheme == "system") {
+        if (this.systemDark) {
+          isDark = true;
+        }
+      }
+      return {
+        "uk-light": isDark,
+        "uk-background-secondary": isDark
+      };
+    },
+    tourSteps: function() {
+      return [
         {
           target: "#tour-header", // We're using document.querySelector() under the hood
           header: {
@@ -57,27 +94,39 @@ export default {
             placement: "bottom"
           }
         },
-        {
+        ...(!this.liteMode
-          target: "#saved-connections-grid",
+          ? [
-          header: {
+              {
-            title: "Saved microscopes"
+                target: "#saved-connections-grid",
-          },
+                header: {
-          content: `Connect to your saved microscopes for faster access`
+                  title: "Saved microscopes"
-        },
+                },
-        {
+                content: `Connect to your saved microscopes for faster access`
-          target: "#nearby-connections-grid",
+              }
-          header: {
+            ]
-            title: "Nearby microscopes"
+          : []),
-          },
+        ...(this.isElectron && !this.liteMode
-          content: `Connect to microscopes found on your network`
+          ? [
-        },
+              {
-        {
+                target: "#nearby-connections-grid",
-          target: "#new-connection-card",
+                header: {
-          header: {
+                  title: "Nearby microscopes"
-            title: "New connection"
+                },
-          },
+                content: `Connect to microscopes found on your network`
-          content: `Connect locally if you're running on a microscope, \nor open a new remote connection to a microscope`
+              }
-        },
+            ]
+          : []),
+        ...(!this.liteMode
+          ? [
+              {
+                target: "#new-connection-card",
+                header: {
+                  title: "New connection"
+                },
+                content: `Connect locally if you're running on a microscope, \nor open a new remote connection to a microscope`
+              }
+            ]
+          : []),
         {
           target: "#gallery-tab-icon",
           header: {
@@ -113,39 +162,7 @@ export default {
           },
           content: `Extensions installed on your microscope will appear below this line`
         }
-      ],
+      ];
-      tourCallbacks: {
-        onStop: () => {
-          this.setLocalStorageObj("completedTour", true);
-        }
-      }
-    };
-  },
-
-  computed: {
-    isSystemDark: function() {
-      if (
-        window.matchMedia &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches
-      ) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    handleTheme: function() {
-      var isDark = false;
-      if (this.$store.state.globalSettings.appTheme == "dark") {
-        isDark = true;
-      } else if (this.$store.state.globalSettings.appTheme == "system") {
-        if (this.systemDark) {
-          isDark = true;
-        }
-      }
-      return {
-        "uk-light": isDark,
-        "uk-background-secondary": isDark
-      };
     }
   },
 

src/components/viewComponents/connectDisplay.vue

@@ -95,14 +95,10 @@
 
       <div class="uk-width-expand">
         <ul uk-accordion="multiple: true; animation: false">
-          <li class="uk-open">
+          <li id="saved-connections-grid" class="uk-open">
             <a class="uk-accordion-title" href="#">Saved devices</a>
             <div class="uk-accordion-content">
-              <div
+              <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
-                id="saved-connections-grid"
-                class="uk-grid-medium uk-grid-match uk-margin-top"
-                uk-grid
-              >
                 <div v-for="host in savedHosts" :key="host.name">
                   <hostCard
                     :name="host.name"
@@ -116,14 +112,10 @@
             </div>
           </li>
 
-          <li class="uk-open">
+          <li v-show="isElectron" id="nearby-connections-grid" class="uk-open">
             <a class="uk-accordion-title" href="#">Nearby devices</a>
             <div class="uk-accordion-content">
-              <div
+              <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
-                id="nearby-connections-grid"
-                class="uk-grid-medium uk-grid-match uk-margin-top"
-                uk-grid
-              >
                 <div v-for="host in foundHostArray" :key="host.name">
                   <hostCard
                     :name="host.name"
@@ -163,6 +155,7 @@ export default {
 
   data: function() {
     return {
+      isElectron: isElectron(),
       localMode: true,
       hostname: "",
       port: 5000,