ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Add enabled regions to store (#93)

Browse Source 
Closes: #91

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

Reviewed-on: Georgi_Lab/ALVINN_f7#93
This commit is contained in:
Justin Georgi
2024-02-11 10:51:16 -07:00
parent d99db4f337
commit 3c287bf5e5
3 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/store.js
View File

@@ -1,7 +1,8 @@
import { reactive, computed } from 'vue'; import { reactive, computed } from 'vue';
const state = reactive({ const state = reactive({
disclaimerAgreement: false disclaimerAgreement: false,
enabledRegions: ['thorax','abdomen','limbs']
}) })
const agree = () => { const agree = () => {
@@ -10,5 +11,6 @@ const agree = () => {
export default () => ({ export default () => ({
isAgreed: computed(() => state.disclaimerAgreement), isAgreed: computed(() => state.disclaimerAgreement),
getRegions: computed(() => state.enabledRegions),
agree agree
}) })

12
src/pages/detect.vue
View File

@@ -63,16 +63,16 @@
<f7-popover id="region-popover" class="popover-button-menu"> <f7-popover id="region-popover" class="popover-button-menu">
<f7-segmented raised class="segment-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" /> <RegionIcon :region="0" />
</f7-button> </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" /> <RegionIcon :region="1" />
</f7-button> </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" /> <RegionIcon :region="2" />
</f7-button> </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" /> <RegionIcon :region="3" />
</f7-button> </f7-button>
</f7-segmented> </f7-segmented>
@@ -281,6 +281,7 @@
<script> <script>
import { f7 } from 'framework7-vue' import { f7 } from 'framework7-vue'
import store from '../js/store'
import RegionIcon from '../components/region-icon.vue' import RegionIcon from '../components/region-icon.vue'
import SvgIcon from '../components/svg-icon.vue' import SvgIcon from '../components/svg-icon.vue'
@@ -316,6 +317,9 @@
uploadDirty: false uploadDirty: false
} }
}, },
setup() {
return store()
},
created () { created () {
switch (this.f7route.params.region) { switch (this.f7route.params.region) {
case 'thorax': case 'thorax':

12
src/pages/home.vue
View File

@@ -13,20 +13,16 @@
<h4 style="text-align: center; margin: 0;">Veterinary Anatomy Edition</h4> <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"> <div class="region-grid">
<!--</f7-button><f7-button :class="`region-button thorax`" :href="'/detect/thorax/'">--> <f7-button :class="`region-button thorax${isAgreed && getRegions.includes('thorax') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('thorax') && '/detect/thorax/'">
<f7-button :class="`region-button thorax${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/thorax/'">
<RegionIcon class="region-image" :region="0" /> <RegionIcon class="region-image" :region="0" />
</f7-button> </f7-button>
<!--<f7-button :class="`region-button abdomen${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/abdomen/'">--> <f7-button :class="`region-button abdomen${isAgreed && getRegions.includes('abdomen') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('abdomen') && '/detect/abdomen/'">
<f7-button :class="`region-button abdomen${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/abdomen/'">
<RegionIcon class="region-image" :region="1" /> <RegionIcon class="region-image" :region="1" />
</f7-button> </f7-button>
<!--<f7-button :class="`region-button limbs${siteSettings.siteAgreement ? '' : ' disabled'}`" :href="siteSettings.siteAgreement && '/detect/limbs/'">--> <f7-button :class="`region-button limbs${isAgreed && getRegions.includes('limbs') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('limbs') && '/detect/limbs/'">
<f7-button :class="`region-button limbs${isAgreed ? '' : ' disabled'}`" :href="isAgreed && '/detect/limbs/'">
<RegionIcon class="region-image" :region="2" /> <RegionIcon class="region-image" :region="2" />
</f7-button> </f7-button>
<!--<f7-button class="region-button headneck disabled" :href="siteSettings.siteAgreement && '/detect/head/'">--> <f7-button :class="`region-button headneck${isAgreed && getRegions.includes('head') ? '' : ' disabled'}`" :href="isAgreed && getRegions.includes('head') && '/detect/head/'">
<f7-button class="region-button headneck disabled" :href="'/detect/head/'">
<RegionIcon class="region-image" :region="3" /> <RegionIcon class="region-image" :region="3" />
</f7-button> </f7-button>
</div> </div>