siimee/frontend/src/App.vue

<template lang="pug">
w-app 
    TopNav(@on-open='openDrawer = !openDrawer')

    w-drawer(v-model='openDrawer')
        SideBar(:pid='profile.id.value' @updatePid='setPid')

    RouterView(@updatePid='setPid')
</template>

<script>
import 'wave-ui/dist/wave-ui.css'
import SideBar from './components/SideBar.vue'
import TopNav from './components/TopNav.vue'

import { currentProfile } from './services'
import { surveyFactory } from './utils'

const DEV_MODE = import.meta.env.VITE_DEV == 'true'
const DEV_PID = 46

export default {
    components: { TopNav, SideBar },
    data: () => ({
        sliderVal: 1,
        openDrawer: false,
    }),
    computed: {
        profile: () => {
            return currentProfile
        },
    },
    async created() {
        /** Get questions so we can compare against profile responses */
        await surveyFactory.getQuestions()

        /**
         * Development mode turns router guards off so
         * we hard set the profile id instead of
         * using the login form
         */
        if (DEV_MODE) {
            console.info('===============================================')
            console.info('-                   SIIMEE                    -')
            console.info('-----------------------------------------------')
            console.info('[Siimee App]: You are in development mode:', DEV_MODE)
            console.info('[Siimee App]: Starting application...')
            console.info('-----------------------------------------------')
            await this.setPid(DEV_PID)
        }
    },
    methods: {
        /**
         * Sync up this components state with
         * the currentProfile handler
         */
        async setPid(profileId) {
            if (currentProfile.isLoggedIn) {
                currentProfile.logout()
            }

            await currentProfile.login(profileId, this.$waveui.notify)
            console.log('---')

            /**
             * Default to the HomeView and alter as needed (side-effects!)
             */
            const toRoute = { name: 'HomeView' }
            this.$router.push(toRoute)
        },
    },
}
</script>

<style lang="sass">
@import '../assets/sass/main'
#app > .w-app > main
    position: relative
    top: 50px
    max-width: 960px
    width:100%
    margin: 0 auto
</style>