Add ON_DEVICE var for controlling display states

Dockerfile

@@ -27,9 +27,11 @@ COPY ui ui
 # Run lint to ensure build fails if there are coding issues
 RUN yarn lint
 
-# Build ExpressJS and UI
+# Build ExpressJS and UI.
+# ON_DEVICE=false informs the build that this is not running on a device and therefore should
+# not perform certain functions like internet connectivity checks on boot
 RUN yarn build
-RUN yarn build-pwa
+RUN ON_DEVICE=false yarn build-pwa
 
 # Reduce the node_modules folder down to the essentials required for ExpressJS
 RUN yarn workspaces focus expressjs --production

ui/quasar.conf.js

@@ -63,7 +63,8 @@ module.exports = configure(function (ctx) {
     build: {
       env: {
         DEVICE_HOSTNAME: process.env.DEVICE_HOSTNAME,
-        BACKEND_PORT: process.env.BACKEND_PORT
+        BACKEND_PORT: process.env.BACKEND_PORT,
+        ON_DEVICE: process.env.ON_DEVICE ? process.env.ON_DEVICE : 'true'
       },
       target: {
         browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],

ui/src/App.vue

@@ -1,10 +1,5 @@
 <template>
-  <div
-    v-if="
-      $q.platform.is.electron &&
-      (currentURL.hostname == 'localhost' || currentURL.protocol == 'file:')
-    "
-  >
+  <div v-if="$q.platform.is.electron && !onDevice">
     <electron-layout />
   </div>
   <div v-else-if="currentURL.hash == '#/captiveportal'">
@@ -35,13 +30,14 @@ export default defineComponent({
     const $q = useQuasar()
 
     const currentURL = new URL(window.location.href)
+    const onDevice = ref(process.env.ON_DEVICE?.toLowerCase() === 'true')
     const quasarMode = ref(process.env.MODE)
 
     // Show loading indicator as early as possible in loading process.
     // Is disabled by the router afterEach function in router/index.ts
     $q.loading.show()
 
-    return { currentURL, quasarMode }
+    return { currentURL, onDevice, quasarMode }
   }
 })
 </script>

ui/src/boot/pinia.ts

@@ -1,17 +1,10 @@
 // Pinia store actions to call on first boot
-import { Platform } from 'quasar'
 import { networkSettings } from 'stores/system'
 
 const systemStore = networkSettings()
 
 // Get internet status. Error handling is done in the store.
 // Not using store for Electron state to avoid race condition
-const currentUrl = new URL(window.location.href)
-if (
-  (!Platform.is.electron && process.env.MODE !== 'pwa') ||
-  (Platform.is.electron &&
-    currentUrl.hostname !== 'localhost' &&
-    currentUrl.protocol !== 'file:')
-) {
+if (process.env.ON_DEVICE?.toLowerCase() === 'true') {
   void systemStore.checkInternetStatus()
 }

ui/src/components/SystemDeviceInfo.vue

@@ -13,7 +13,7 @@
     <div>
       <q-btn
         v-if="
-          ($q.screen.gt.xs && electronCorePage.$state.electronPage) ||
+          ($q.screen.gt.xs && $q.platform.is.electron) ||
           (!sdkLoading && quasarMode == 'pwa')
         "
         class="q-ml-sm text-grey-9"
@@ -218,7 +218,7 @@ import { sdk } from 'src/api/sdk'
 import { supervisor } from 'src/api/supervisor'
 import sysInfoCmds from 'src/api/sysInfoCmds'
 import { qSpinnerStyle } from 'src/config/qStyles'
-import { axiosSettings, electronSettings, networkSettings } from 'stores/system'
+import { axiosSettings, networkSettings } from 'stores/system'
 import { defineComponent, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -272,7 +272,6 @@ export default defineComponent({
   components: { CpuStats, MemoryStats },
   setup() {
     const $q = useQuasar()
-    const electronCorePage = electronSettings()
     // eslint-disable-next-line @typescript-eslint/unbound-method
     const { t } = useI18n()
 
@@ -388,7 +387,6 @@ export default defineComponent({
     return {
       baseUrl,
       checkInternet,
-      electronCorePage,
       device,
       f,
       isLoading,

ui/src/stores/system.ts

@@ -1,6 +1,5 @@
 import { expressApi } from 'boot/axios'
 import { defineStore } from 'pinia'
-import { Platform } from 'quasar'
 
 interface internetConnection {
   internet: boolean
@@ -17,37 +16,6 @@ export const axiosSettings = defineStore('axiosSettings', {
   }
 })
 
-// `electronSettings` store:
-// null = not Electron
-// true = Electron main page
-// false = Loaded in Electron but pointing to a page it redirect too away from it's embedded pages
-export const electronSettings = defineStore('electronSettings', {
-  state: () => {
-    let electronPage = null
-
-    // If it's not an electron page return null
-    if (!Platform.is.electron) {
-      return { electronPage }
-    }
-
-    // It's an electron page, is it localhost or a local file (i.e. the core page, not a redirect)?
-    const currentUrl = new URL(window.location.href)
-    if (
-      currentUrl.hostname === 'localhost' ||
-      currentUrl.protocol === 'file:'
-    ) {
-      electronPage = true
-      return { electronPage }
-    }
-
-    // It's electron but not localhost
-    electronPage = false
-    return {
-      electronPage
-    }
-  }
-})
-
 export const networkSettings = defineStore('networkSettings', {
   state: () => ({
     internetConnectivity: undefined as boolean | undefined