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,
       }
     }
   }

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;

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>