ALVINN_f7/src/components/app.vue

<template>
  <f7-app v-bind="f7params">
  <!-- Left panel with cover effect-->
  <f7-panel left cover>
    <f7-view>
      <f7-page>
        <f7-navbar title="ALVINN"></f7-navbar>
        <f7-list>
          <f7-list-item link="/settings/" view=".view-main" panel-close=".panel-left">Settings</f7-list-item>
          <f7-list-item link="/about/">About ALVINN</f7-list-item>
        </f7-list>
        <f7-toolbar class="panel-bar" position="bottom">
          <span>version 0.1.1</span>
        </f7-toolbar>
      </f7-page>
    </f7-view>
  </f7-panel>

  <!-- Your main view, should have "view-main" class -->
  <f7-view main class="safe-areas" url="/">
    <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="rememberAgreement"/> Don't show again
          </span>
          <f7-button text="I agree" fill @click="setAgreement" />
        </div>
      </f7-block>
    </f7-popup>
  </f7-view>

  </f7-app>
</template>

<style>
  .panel-bar > .toolbar-inner {
    justify-content: center;
  }
</style>

<script>
  import { ref, onMounted } from 'vue';
  import { f7, f7ready } from 'framework7-vue';
  import { getDevice }  from 'framework7/lite-bundle';
  import cordovaApp from '../js/cordova-app.js';

  import routes from '../js/routes.js';
  import store from '../js/store';

  export default {
    data () {
      return {
        rememberAgreement: false,
        siteAgreement: false,
        showDisclaimer: true
      }
    },
    created () {
      var loadSiteSettings = localStorage.getItem('siteSettings')
      if (loadSiteSettings) {
        var loadedSettings = JSON.parse(loadSiteSettings)
        this.siteAgreement = loadedSettings.siteAgreement
        this.rememberAgreement = loadedSettings.rememberAgreement
      }
      if (this.siteAgreement && this.rememberAgreement) {
        this.showDisclaimer = false
        store().agree()
      }
    },
    methods: {
      setAgreement () {
        this.siteAgreement = true
        store().agree()
        let newSettings = {
          siteAgreement: this.siteAgreement,
          rememberAgreement: this.rememberAgreement
        }
        let saveSiteSettings = new Promise(
          (saved,failed) => {
            try {
              localStorage.setItem('siteSettings',JSON.stringify(newSettings))
              saved()
            } catch {
              failed()
            }
          }
        )
        saveSiteSettings.then(
          () => {
            this.showDisclaimer = false
          },
          () => {
            var toast = f7.toast.create({
              text: 'ERROR: No settings saved',
              closeTimeout: 2000
            })
            toast.open()
          }
        )
      }
    },
    setup() {
      const device = getDevice();
      // Framework7 Parameters
      var loadThemeSettings = localStorage.getItem('themeSettings')
      if (loadThemeSettings) var themeSettings = JSON.parse(loadThemeSettings)
      try {
        if (themeSettings.darkMode.toString()) var darkTheme = themeSettings.darkMode
      } catch {
        var darkTheme = 'auto'
      }
      //provide('isAgreed',siteAgreement)
      const f7params = {
        name: 'ALVINN', // App name
        theme: 'auto', // Automatic theme detection
        darkMode: darkTheme,
        colors: {
          primary: '#002f65',
        },

        // App routes
        routes: routes,

        // Register service worker (only on production build)
        serviceWorker: process.env.NODE_ENV ==='production' ? {
          path: '/service-worker.js',
        } : {},

        // Input settings
        input: {
          scrollIntoViewOnFocus: device.cordova,
          scrollIntoViewCentered: device.cordova,
        },
        // Cordova Statusbar settings
        statusbar: {
          iosOverlaysWebView: true,
          androidOverlaysWebView: false,
        },
        // Navbar settings
        navbar: {
          mdCenterTitle: true,
          iosCenterTitle: true,
        },
        // Dialog settings
        dialog: {
          title: 'ALVINN'
        }
      };
      onMounted(() => {
        f7ready(() => {
          // Init cordova APIs (see cordova-app.js)
          if (device.cordova) {
            cordovaApp.init(f7);
          }

          // Call F7 APIs here
        });
      });

      return {
        f7params,
      }
    }
  }
</script>