Move disclaimer to app (#68)

The pre app disclaimer makes more sense initialized by the app and not the home page. This PR moves the popup to the app and adds basic store functionality to give global access to the state of the apps agreement. Signed-off-by: Justin Georgi <justin.georgi@gmail.com> Reviewed-on: Georgi_Lab/ALVINN_f7#68
2024-01-10 09:32:41 -07:00
parent 671813958b
commit 23a2772468
3 changed files with 99 additions and 102 deletions
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -17,7 +17,29 @@
  </f7-panel>

  <!-- Your main view, should have "view-main" class -->
-  <f7-view main class="safe-areas" url="/"></f7-view>
+  <f7-view main class="safe-areas" url="/">
+    <f7-popup :opened="showDisclaimer"
+      style="height: auto; text-align: center;"
+      :close-by-backdrop-click="false"
+      :close-on-escape="false"
+      :swipe-to-close="false"
+    >
+      <f7-block-title large>
+        IMPORTANT
+      </f7-block-title>
+      <f7-block>
+        <h3>
+          ALVINN is for educational purposes only. It may not be used for medical diagnosis, intervention, or treatment.
+        </h3>
+        <div style="display: flex; justify-content: space-around; flex-direction: row; align-items: center;">
+          <span style="height: min-content;">
+            <f7-checkbox v-model:checked="rememberAgreement"/> Don't show again
+          </span>
+          <f7-button text="I agree" fill @click="setAgreement" />
+        </div>
+      </f7-block>
+    </f7-popup>
+  </f7-view>

  </f7-app>
 </template>
@@ -38,6 +60,57 @@
  import store from '../js/store';

  export default {
+    data () {
+      return {
+        rememberAgreement: false,
+        siteAgreement: false,
+        showDisclaimer: true
+      }
+    },
+    created () {
+      var loadSiteSettings = localStorage.getItem('siteSettings')
+      if (loadSiteSettings) {
+        var loadedSettings = JSON.parse(loadSiteSettings)
+        this.siteAgreement = loadedSettings.siteAgreement
+        this.rememberAgreement = loadedSettings.rememberAgreement
+      }
+      if (this.siteAgreement && this.rememberAgreement) {
+        this.showDisclaimer = false
+        store().agree()
+      }
+    },
+    methods: {
+      setAgreement () {
+        this.siteAgreement = true
+        store().agree()
+        let newSettings = {
+          siteAgreement: this.siteAgreement,
+          rememberAgreement: this.rememberAgreement
+        }
+        let saveSiteSettings = new Promise(
+          (saved,failed) => {
+            try {
+              localStorage.setItem('siteSettings',JSON.stringify(newSettings))
+              saved()
+            } catch {
+              failed()
+            }
+          }
+        )
+        saveSiteSettings.then(
+          () => {
+            this.showDisclaimer = false
+          },
+          () => {
+            var toast = f7.toast.create({
+              text: 'ERROR: No settings saved',
+              closeTimeout: 2000
+            })
+            toast.open()
+          }
+        )
+      }
+    },
    setup() {
      const device = getDevice();
      // Framework7 Parameters
@@ -48,6 +121,7 @@
      } catch {
        var darkTheme = 'auto'
      }
+      //provide('isAgreed',siteAgreement)
      const f7params = {
        name: 'ALVINN', // App name
        theme: 'auto', // Automatic theme detection
@@ -56,8 +130,6 @@
          primary: '#002f65',
        },

-        // App store
-        store: store,
        // App routes
        routes: routes,

@@ -98,7 +170,7 @@
      });

      return {
-        f7params
+        f7params,
      }
    }
  }
--- a/src/js/store.js
+++ b/src/js/store.js
@@ -1,35 +1,14 @@
+import { reactive, computed } from 'vue';

-import { createStore } from 'framework7/lite';
+const state = reactive({
+    disclaimerAgreement: false
+  })

-const store = createStore({
-  state: {
-    products: [
-      {
-        id: '1',
-        title: 'Apple iPhone 8',
-        description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
-      },
-      {
-        id: '2',
-        title: 'Apple iPhone 8 Plus',
-        description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
-      },
-      {
-        id: '3',
-        title: 'Apple iPhone X',
-        description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
-      },
-    ]
-  },
-  getters: {
-    products({ state }) {
-      return state.products;
-    }
-  },
-  actions: {
-    addProduct({ state }, product) {
-      state.products = [...state.products, product];
-    },
-  },
+const agree = () => {
+  state.disclaimerAgreement = true
+}
+
+export default () => ({
+  isAgreed: computed(() => state.disclaimerAgreement),
+  agree
 })
-export default store;
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -11,43 +11,26 @@
    <div style="display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content min-content 1fr; align-content: stretch; gap: 15px; min-height: 0px; max-height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top))); height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top)));">
      <h2 style="text-align: center; padding-left: 30px; padding-right: 30px;">Anatomy Lab Visual Identification Neural Network</h2>
      <h4 style="text-align: center; margin: 0;">Veterinary Anatomy Edition</h4>
-      <p style="text-align: center; margin: 0;">Select a region to begin</p>
+      <p style="text-align: center; margin: 0;">Select a region to begin.</p>
      <div class="region-grid">
-        <f7-button :class="`region-button thorax${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/thorax/'">
+        <!--</f7-button><f7-button :class="`region-button thorax`" :href="'/detect/thorax/'">-->
+        <f7-button :class="`region-button thorax${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/thorax/'">
          <RegionIcon class="region-image" :region="0" />
        </f7-button>
-        <f7-button :class="`region-button abdomen${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/abdomen/'">
+        <!--<f7-button :class="`region-button abdomen${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/abdomen/'">-->
+        <f7-button :class="`region-button abdomen${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/abdomen/'">
          <RegionIcon class="region-image" :region="1" />
        </f7-button>
-        <f7-button :class="`region-button limbs${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/limbs/'">
+        <!--<f7-button :class="`region-button limbs${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/limbs/'">-->
+        <f7-button :class="`region-button limbs${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/limbs/'">
          <RegionIcon class="region-image" :region="2" />
        </f7-button>
-        <f7-button class="region-button headneck disabled" :href="siteSettings.siteAgreement && '/detect/head/'">
+        <!--<f7-button class="region-button headneck disabled" :href="siteSettings.siteAgreement && '/detect/head/'">-->
+        <f7-button class="region-button headneck disabled" :href="'/detect/head/'">
          <RegionIcon class="region-image" :region="3" />
        </f7-button>
      </div>
    </div>
-    <f7-popup :opened="showDisclaimer"
-      style="height: auto; text-align: center;"
-      :close-by-backdrop-click="false"
-      :close-on-escape="false"
-      :swipe-to-close="false"
-    >
-      <f7-block-title large>
-        IMPORTANT
-      </f7-block-title>
-      <f7-block>
-        <h3>
-          ALVINN is for educational purposes only. It may not be used for medical diagnosis, intervention, or treatment.
-        </h3>
-        <div style="display: flex; justify-content: space-around; flex-direction: row; align-items: center;">
-          <span style="height: min-content;">
-            <f7-checkbox v-model:checked="siteSettings.rememberAgreement"/> Don't show again
-          </span>
-          <f7-button text="I agree" fill @click="setAgreement" />
-        </div>
-      </f7-block>
-    </f7-popup>
  </f7-page>
 </template>

@@ -109,51 +92,14 @@

 <script>
  import RegionIcon from '../components/region-icon.vue'
+  import store from '../js/store'

  export default {
    components: {
      RegionIcon
    },
-    data () {
-      return {
-        siteSettings: {
-          siteAgreement: false,
-          rememberAgreement: false
-        },
-        showDisclaimer: true
-      }
-    },
-    created () {
-      var loadSiteSettings = localStorage.getItem('siteSettings')
-      if (loadSiteSettings) this.siteSettings = JSON.parse(loadSiteSettings)
-      this.showDisclaimer = !this.siteSettings.siteAgreement || !this.siteSettings.rememberAgreement
-    },
-    methods: {
-      setAgreement () {
-        this.siteSettings.siteAgreement = true
-        let saveSiteSettings = new Promise(
-          (saved,failed) => {
-            try {
-              localStorage.setItem('siteSettings',JSON.stringify(this.siteSettings))
-              saved()
-            } catch {
-              failed()
-            }
-          }
-        )
-        saveSiteSettings.then(
-          () => {
-            this.showDisclaimer = false
-          },
-          () => {
-            var toast = f7.toast.create({
-              text: 'ERROR: No settings saved',
-              closeTimeout: 2000
-            })
-            toast.open()
-          }
-        )
-      }
+    setup() {
+      return store()
    }
  }
 </script>