Add a disclaimer popup on home page (#66)

The same disclaimer language on the about page now appears in a modal popup the first time the user loads alvinn.  Further function is not available until the user agrees to the disclaimer

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: Georgi_Lab/ALVINN_f7#66

src/pages/home.vue

@@ -13,20 +13,41 @@
       <h4 style="text-align: center; margin: 0;">Veterinary Anatomy Edition</h4>
       <p style="text-align: center; margin: 0;">Select a region to begin</p>
       <div class="region-grid">
-        <f7-button class="region-button thorax" href="/detect/thorax/">
+        <f7-button :class="`region-button thorax${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/thorax/'">
           <RegionIcon class="region-image" :region="0" />
         </f7-button>
-        <f7-button class="region-button abdomen" href="/detect/abdomen/">
+        <f7-button :class="`region-button abdomen${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/abdomen/'">
           <RegionIcon class="region-image" :region="1" />
         </f7-button>
-        <f7-button class="region-button limbs" href="/detect/limbs/">
+        <f7-button :class="`region-button limbs${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/limbs/'">
           <RegionIcon class="region-image" :region="2" />
         </f7-button>
-        <f7-button class="region-button headneck disabled" href="/detect/head/">
+        <f7-button class="region-button headneck disabled" :href="siteSettings.siteAgreement && '/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>
 
@@ -50,6 +71,7 @@
     width: 100%;
     background-color: var(--avn-button-bg-color);
     padding: 5px;
+    max-width: 200px;
   }
 
   .region-image {
@@ -58,7 +80,7 @@
 
   @media (min-width: 600px) {
     .region-grid {
-      grid-template-columns: auto [thorax] auto [abdomen] auto [limbs] auto [headneck] auto auto;
+      grid-template-columns: 1fr [thorax] auto [abdomen] auto [limbs] auto [headneck] auto 1fr;
       grid-template-rows: minmax(0, 1fr);
     }
 
@@ -91,6 +113,47 @@
   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()
+          }
+        )
+      }
     }
   }
 </script>