From 7188d4e61c5b240728ccd70eade25c34d3e5417f Mon Sep 17 00:00:00 2001
From: maggie0002 <64841595+maggie0002@users.noreply.github.com>
Date: Thu, 1 Sep 2022 15:50:26 +0200
Subject: [PATCH] Add ON_DEVICE var for controlling display states

---
 Dockerfile                             |  6 +++--
 ui/quasar.conf.js                      |  3 ++-
 ui/src/App.vue                         | 10 +++-----
 ui/src/boot/pinia.ts                   | 10 +-------
 ui/src/components/SystemDeviceInfo.vue |  9 ++------
 ui/src/stores/system.ts                | 32 --------------------------
 6 files changed, 12 insertions(+), 58 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index f2ff2ed4..852146cf 100644
--- a/Dockerfile
+++ b/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 there my not be a backend available, and therefore 
+# not to perform certain function like communicating with the backend 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
diff --git a/ui/quasar.conf.js b/ui/quasar.conf.js
index de06bb8d..083d2d96 100644
--- a/ui/quasar.conf.js
+++ b/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'],
diff --git a/ui/src/App.vue b/ui/src/App.vue
index d7a50bf4..44dbbb97 100644
--- a/ui/src/App.vue
+++ b/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>
diff --git a/ui/src/boot/pinia.ts b/ui/src/boot/pinia.ts
index 6c80ff21..587356ce 100644
--- a/ui/src/boot/pinia.ts
+++ b/ui/src/boot/pinia.ts
@@ -1,17 +1,9 @@
 // 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()
 }
diff --git a/ui/src/components/SystemDeviceInfo.vue b/ui/src/components/SystemDeviceInfo.vue
index 2c89aea8..3231ffaa 100644
--- a/ui/src/components/SystemDeviceInfo.vue
+++ b/ui/src/components/SystemDeviceInfo.vue
@@ -12,10 +12,7 @@
     </q-slide-transition>
     <div>
       <q-btn
-        v-if="
-          ($q.screen.gt.xs && electronCorePage.$state.electronPage) ||
-          (!sdkLoading && quasarMode == 'pwa')
-        "
+        v-if="$q.platform.is.electron || quasarMode == 'pwa'"
         class="q-ml-sm text-grey-9"
         flat
         :loading="sdkLoading"
@@ -218,7 +215,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 +269,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 +384,6 @@ export default defineComponent({
     return {
       baseUrl,
       checkInternet,
-      electronCorePage,
       device,
       f,
       isLoading,
diff --git a/ui/src/stores/system.ts b/ui/src/stores/system.ts
index 47fd36a9..c045010f 100644
--- a/ui/src/stores/system.ts
+++ b/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