Files
ALVINN_f7/src/pages/specs.vue
2024-03-24 08:06:28 -07:00

68 lines
2.1 KiB
Vue

<template>
<f7-page name="specs">
<f7-navbar :sliding="false" back-link="Back">
<f7-nav-title sliding>Tech Specs</f7-nav-title>
</f7-navbar>
<f7-block style="display: flex; flex-direction: column; align-items: stretch;">
<div style="display: flex; flex-direction: column; align-items: center;">
<f7-block-title medium>Details</f7-block-title>
<f7-list>
<f7-list-item title="Version" :after="alvinnVersion"></f7-list-item>
</f7-list>
<f7-block-title medium>Models</f7-block-title>
<f7-list style="width: 100%;">
<f7-list-item :class="otherSettings.mini ? 'unused-model' : ''" title="Thorax" :after="thoraxDetails.version"></f7-list-item>
<f7-list-item title="Thorax-m" :after="miniThoraxDetails.version"></f7-list-item>
<f7-list-item title="Abdomen/Pelvis" :after="abdomenDetails.version"></f7-list-item>
<f7-list-item title="Limbs" :after="limbsDetails.version"></f7-list-item>
<f7-list-item title="Head/Neck" :after="headneckDetails.version"></f7-list-item>
</f7-list>
</div>
</f7-block>
</f7-page>
</template>
<style>
.unused-model {
opacity: .75;
}
.unused-model .item-title {
color: var(--f7-list-item-after-text-color)
}
</style>
<script>
import store from '../js/store'
export default {
data () {
return {
thoraxDetails: {},
miniThoraxDetails: {},
abdomenDetails: { "version": "N/A" },
limbsDetails: { "version": "N/A" },
headneckDetails: { "version": "N/A" },
alvinnVersion: store().getVersion,
otherSettings: {}
}
},
setup() {
return store()
},
created () {
var loadOtherSettings = localStorage.getItem('otherSettings')
if (loadOtherSettings) this.otherSettings = JSON.parse(loadOtherSettings)
import('../models/thorax/descript.json')
.then((mod) => {
this.thoraxDetails = mod.default
})
import('../models/thorax-mini/descript.json')
.then((mod) => {
this.miniThoraxDetails = mod.default
})
},
methods: {
}
}
</script>