Add conf.yaml PWA config (#168)

Closes: #160 Reviewed-on: #168
2024-03-30 21:00:35 -07:00
parent 0420e6b411
commit c1542283ea
8 changed files with 174 additions and 54 deletions
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -52,13 +52,15 @@
 </style>

 <script>
-  import { ref, onMounted } from 'vue';
-  import { f7, f7ready } from 'framework7-vue';
-  import { getDevice }  from 'framework7/lite-bundle';
-  import cordovaApp from '../js/cordova-app.js';
+  import { ref, onMounted } from 'vue'
+  import { f7, f7ready } from 'framework7-vue'
+  import { getDevice }  from 'framework7/lite-bundle'
+  import cordovaApp from '../js/cordova-app.js'

-  import routes from '../js/routes.js';
-  import store from '../js/store';
+  import YAML from 'yaml'
+
+  import routes from '../js/routes.js'
+  import store from '../js/store'

  export default {
    data () {
@@ -66,27 +68,49 @@
        rememberAgreement: false,
        siteAgreement: false,
        dateAgreement: null,
-        showDisclaimer: true,
-        alvinnVersion: store().getVersion
+        showDisclaimer: false,
+        alvinnVersion: store().getVersion,
+        siteConf: {}
      }
    },
-    created () {
-      var loadSiteSettings = localStorage.getItem('siteSettings')
+    async created () {
+      if (!window.cordova) {
+        const confText = await fetch('./conf/conf.yaml')
+          .then((mod) => { return mod.text() })
+        this.siteConf = YAML.parse(confText)
+      }
+      const loadSiteSettings = localStorage.getItem('siteSettings')
      if (loadSiteSettings) {
-        var loadedSettings = JSON.parse(loadSiteSettings)
+        let loadedSettings = JSON.parse(loadSiteSettings)
        this.siteAgreement = loadedSettings.siteAgreement
        this.rememberAgreement = loadedSettings.rememberAgreement
        this.dateAgreement = loadedSettings.dateAgreement && new Date(loadedSettings.dateAgreement)
      }
-      var curDate = new Date ()
-      var agreeStillValid = this.dateAgreement && (curDate < this.dateAgreement.setMonth(this.dateAgreement.getMonth() + 3)) 
+      const curDate = new Date ()
+      const expireMonth = (this.dateAgreement?.getMonth() || 0) + (this.siteConf?.agreeExpire || 3)
+      const agreeStillValid = this.dateAgreement && (curDate < this.dateAgreement.setMonth(expireMonth))
      if (this.siteAgreement && this.rememberAgreement && agreeStillValid) {
-        this.showDisclaimer = false
        store().agree()
+      } else {
+        this.showDisclaimer = true        
      }
-      var loadServerSettings = localStorage.getItem('serverSettings')
-      if (!loadServerSettings) {
+      store().set('enabledRegions',this.siteConf?.regions)
+      store().set('siteDemo',this.siteConf?.demo)
+      const loadServerSettings = localStorage.getItem('serverSettings')
+      if (this.siteConf?.useExternal) {
+        if (!['none','list','optional','required'].includes(this.siteConf.useExternal)) {
+          console.warn(`'${this.siteConf.useExternal}' is not a valid value for useExternal configuration: using 'optional'`)
+        } else {
+          store().set('useExternal',this.siteConf.useExternal)
+          if (this.siteConf.external) {
+            store().set('externalServerList',this.siteConf.external)
+          }
+        }
+      }
+      if (!loadServerSettings && !this.siteConf.external) {
        localStorage.setItem('serverSettings','{"use":false,"address":"10.188.0.98","port":"9001","previous":{"10.188.0.98":"9001"}}')
+      } else if (this.siteConf.useExternal == 'required') {
+        localStorage.setItem('serverSettings',`{"use":true,"address":"${this.siteConf.external[0].address}","port":${this.siteConf.external[0].port}}`)
      }
    },
    methods: {
@@ -113,7 +137,7 @@
            this.showDisclaimer = false
          },
          () => {
-            var toast = f7.toast.create({
+            const toast = f7.toast.create({
              text: 'ERROR: No settings saved',
              closeTimeout: 2000
            })
@@ -125,13 +149,11 @@
    setup() {
      const device = getDevice();
      // Framework7 Parameters
-      var loadThemeSettings = localStorage.getItem('themeSettings')
-      if (loadThemeSettings) var themeSettings = JSON.parse(loadThemeSettings)
-      try {
-        if (themeSettings.darkMode.toString()) var darkTheme = themeSettings.darkMode
-      } catch {
-        var darkTheme = 'auto'
-      }
+      const loadThemeSettings = localStorage.getItem('themeSettings')
+      let themeSettings = {}
+      let darkTheme = 'auto'
+      if (loadThemeSettings) { themeSettings = JSON.parse(loadThemeSettings) }
+      if (themeSettings?.darkMode) darkTheme = themeSettings.darkMode
      const f7params = {
        name: 'ALVINN', // App name
        theme: 'auto', // Automatic theme detection
--- a/src/js/store.js
+++ b/src/js/store.js
@@ -2,17 +2,37 @@ import { reactive, computed } from 'vue';

 const state = reactive({
    disclaimerAgreement: false,
-    enabledRegions: ['thorax','abdomen','limbs'],
-    version: '0.5.0-rc'
+    enabledRegions: ['thorax','abdomen','limbs','head'],
+    version: '0.5.0-rc',
+    useExternal: 'optional',
+    siteDemo: false,
+    externalServerList: []
  })

+const set = (config, confObj) => {
+  if (confObj === undefined) { return }
+  state[config] = confObj
+}
+
 const agree = () => {
  state.disclaimerAgreement = true
 }

+const getServerList = () => {
+  if (state.useExternal == 'required') {
+    return state.externalServerList[0]
+  } else {
+    return state.externalServerList
+  }
+}
+
 export default () => ({
  isAgreed: computed(() => state.disclaimerAgreement),
+  demoMode: computed(() => state.siteDemo),
+  externalType: computed(() => state.useExternal),
  getRegions: computed(() => state.enabledRegions),
  getVersion: computed(() => state.version),
-  agree
+  set,
+  agree,
+  getServerList
 })
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -99,7 +99,7 @@
        <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('file')">
          <SvgIcon icon="photo_library" />
        </f7-button>
-        <f7-button v-if="otherSettings.demo" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('sample')">
+        <f7-button v-if="demoEnabled" style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('sample')">
          <SvgIcon icon="photo_sample"/>
        </f7-button>
      </f7-segmented>
@@ -120,6 +120,7 @@
  import submitMixin from './submit-mixin'
  import detectionMixin from './detection-mixin'
  import cameraMixin from './camera-mixin'
+import { Conv2DBackpropFilter } from '@tensorflow/tfjs'

  export default {
    mixins: [submitMixin, detectionMixin, cameraMixin],
@@ -252,6 +253,9 @@
        } else {
          return false
        }
+      },
+      demoEnabled () {
+        return this.otherSettings.demo || this.demoMode
      }
    },
    methods: {
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -31,19 +31,22 @@
            <span style="margin-left: 16px;">Disable video estimates<f7-icon size="16" style="padding-left: 5px;" f7="question_diamond_fill" tooltip="faster: recommended for slower devices" /></span>
            <f7-toggle v-model:checked="otherSettings.disableVideo" style="margin-right: 16px;" />
          </div>
-          <div style="display:flex; justify-content:space-between; width: 100%">
-            <span style="margin-left: 16px;">Use external server</span>
-            <f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" @change="setDirty()" />
+          <div  v-if="serverToggle">
+            <div style="display:flex; justify-content:space-between; width: 100%">
+              <span style="margin-left: 16px;">Use external server</span>
+              <f7-toggle v-model:checked="serverSettings.use" style="margin-right: 16px;" @change="setDirty()" />
+            </div>
+            <f7-list >
+              <f7-list-input :disabled="!serverSettings.use || serverList" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
+              <f7-list-input :disabled="!serverSettings.use || serverList" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
+            </f7-list>
+            <span>Other servers</span>
+            <f7-list :dividers="true" :outline="true" :strong="true" :inset="true" style="width: calc(100% - 32px); margin-top: 0;">
+              <f7-list-item v-for="(addObj) in externalIp" :disabled="!serverSettings.use" :title="addObj.name" @click="setServerProps(addObj.address, addObj.port)"></f7-list-item>
+              <f7-list-item v-if="!serverList" v-for="(port, add) in otherIp" :disabled="!serverSettings.use" :title="add" @click="setServerProps(add, port)">{{ port }}</f7-list-item>
+              <f7-list-item v-if="Object.keys(otherIp).length == 0 && externalIp.length == 0" title="No previous server settings"></f7-list-item>
+            </f7-list>
          </div>
-          <f7-list>
-            <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
-            <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
-          </f7-list>
-          <span>Other servers</span>
-          <f7-list :dividers="true" :outline="true" :strong="true" :inset="true" style="width: calc(100% - 32px); margin-top: 0;">
-            <f7-list-item v-for="(port, add) in otherIp" :disabled="!serverSettings.use" :title="add" @click="setServerProps(add, port)">{{ port }}</f7-list-item>
-            <f7-list-item v-if="Object.keys(otherIp).length == 0" title="No previous server settings"></f7-list-item>
-          </f7-list>
        </div>
        <f7-button fill @click="saveAllSettings">SAVE</f7-button>
      </div>
@@ -61,6 +64,7 @@

 <script>
  import { f7 } from 'framework7-vue'
+  import store from '../js/store'

  export default {
    data () {
@@ -72,8 +76,8 @@
        },
        serverSettings: {
          use: false,
-          address: '10.170.64.22',
-          port: '9001',
+          address: '127.0.0.1',
+          port: '9000',
          previous: {}
        },
        themeSettings: {
@@ -81,6 +85,9 @@
        }
      }
    },
+    setup() {
+      return store()
+    },
    computed: {
      otherIp () {
        let filteredIps = {}
@@ -90,6 +97,15 @@
          }
        }
        return filteredIps
+      },
+      serverToggle () {
+        return ['optional','list'].includes(this.externalType)
+      },
+      serverList () {
+        return this.externalType == 'list'
+      },
+      externalIp () {
+        return this.getServerList()
      }
    },
    created () {
@@ -106,7 +122,7 @@
        let saveSetting = new Promise(
          (saved,failed) => {
            try {
-              if (this.serverSettings.use) {
+              if (this.serverSettings.use && !this.externalIp.some( (srv) => srv.address == this.serverSettings.address)) {
                this.serverSettings.previous[this.serverSettings.address] = this.serverSettings.port
              }
              localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
@@ -151,7 +167,8 @@
      },
      toggleSettingsView () {
        this.showAdvanced = !this.showAdvanced
-        this.$refs.advancedSettings.style.maxHeight = `${this.showAdvanced ? this.$refs.advancedSettings.scrollHeight : 0}px`
+        //this.$refs.advancedSettings.style.maxHeight = `${this.showAdvanced ? this.$refs.advancedSettings.scrollHeight : 0}px`
+        this.$refs.advancedSettings.style.maxHeight = this.showAdvanced ? '100%' : '0px'
      },
      confirmBack () {
        if (this.isDirty) {