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

Move disclaimer to app (#68)

Browse Source 
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
This commit is contained in:
Justin Georgi
2024-01-10 09:32:41 -07:00
parent 671813958b
commit 23a2772468
3 changed files with 99 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/pages/home.vue
View File

@@ -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>