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

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({
+const agree = () => {
-  state: {
+  state.disclaimerAgreement = true
-    products: [
+}
-      {
+
-        id: '1',
+export default () => ({
-        title: 'Apple iPhone 8',
+  isAgreed: computed(() => state.disclaimerAgreement),
-        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.'
+  agree
-      },
-      {
-        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];
-    },
-  },
 })
-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 () {
+    setup() {
-      return {
+      return store()
-        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()
-          }
-        )
-      }
     }
   }
 </script>