From 3c287bf5e56b43f94e8aa5f8b289161eb506ac2d Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Sun, 11 Feb 2024 10:51:16 -0700
Subject: [PATCH] Add enabled regions to store (#93)

Closes: #91

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

Reviewed-on: https://gitea.azgeorgis.net/Georgi_Lab/ALVINN_f7/pulls/93
---
 src/js/store.js      |  4 +++-
 src/pages/detect.vue | 12 ++++++++----
 src/pages/home.vue   | 12 ++++--------
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/js/store.js b/src/js/store.js
index a9e2e29..3cf85e8 100644
--- a/src/js/store.js
+++ b/src/js/store.js
@@ -1,7 +1,8 @@
 import { reactive, computed } from 'vue';
 
 const state = reactive({
-    disclaimerAgreement: false
+    disclaimerAgreement: false,
+    enabledRegions: ['thorax','abdomen','limbs']
   })
 
 const agree = () => {
@@ -10,5 +11,6 @@ const agree = () => {
 
 export default () => ({
   isAgreed: computed(() => state.disclaimerAgreement),
+  getRegions: computed(() => state.enabledRegions),
   agree
 })
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index 0d5a219..51c4a6b 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -63,16 +63,16 @@
 
     <f7-popover id="region-popover" class="popover-button-menu">
       <f7-segmented raised class="segment-button-menu">
-        <f7-button style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
+        <f7-button :class="(getRegions.includes('thorax')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
           <RegionIcon :region="0" />
         </f7-button>
-        <f7-button style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
+        <f7-button :class="(getRegions.includes('abdomen')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
           <RegionIcon :region="1" />
         </f7-button>
-        <f7-button style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
+        <f7-button :class="(getRegions.includes('limbs')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
           <RegionIcon :region="2" />
         </f7-button>
-        <f7-button class="disabled" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
+        <f7-button :class="(getRegions.includes('head')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
           <RegionIcon :region="3" />
         </f7-button>
       </f7-segmented>
@@ -281,6 +281,7 @@
 <script>
   import { f7 } from 'framework7-vue'
 
+  import store from '../js/store'
   import RegionIcon from '../components/region-icon.vue'
   import SvgIcon from '../components/svg-icon.vue'
 
@@ -316,6 +317,9 @@
         uploadDirty: false
       }
     },
+    setup() {
+      return store()
+    },
     created () {
       switch (this.f7route.params.region) {
         case 'thorax':
diff --git a/src/pages/home.vue b/src/pages/home.vue
index fb37552..a78dd09 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -13,20 +13,16 @@
       <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><f7-button :class="`region-button thorax`" :href="'/detect/thorax/'">-->
-        <f7-button :class="`region-button thorax${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/thorax/'">
+        <f7-button :class="`region-button thorax${isAgreed && getRegions.includes('thorax') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('thorax') && '/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${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/abdomen/'">
+        <f7-button :class="`region-button abdomen${isAgreed && getRegions.includes('abdomen') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('abdomen') && '/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${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/limbs/'">
+        <f7-button :class="`region-button limbs${isAgreed && getRegions.includes('limbs') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('limbs') && '/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="'/detect/head/'">
+        <f7-button :class="`region-button headneck${isAgreed && getRegions.includes('head') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('head') && '/detect/head/'">
           <RegionIcon class="region-image" :region="3" />
         </f7-button>
       </div>