siimee/frontend/src/App.vue

<template lang="pug">
w-app
    w-drawer(v-model="openDrawer")
    w-flex.my12(:gap="3" align-center wrap)
        w-button.ma1(@click="$waveui.notify('Information.')" bg-color="info") Notify info
        w-button.ma1(@click="$waveui.notify('Success!', 'success')" bg-color="success") Notify success
        w-button.ma1(@click="$waveui.notify('Warning!', 'warning')" bg-color="warning") Notify warning
        w-button.ma1(@click="$waveui.notify('Error :(', 'error', 0)" bg-color="error") Permanent error
    w-flex.my12(align-center wrap)
        w-spinner(bounce)
        w-input Label
        w-checkbox Single option
    w-flex.my12
        w-button(@click="openDrawer = true" outline="")
            | Open drawer
    w-flex.my12(grow column)
        w-slider(:model-value="40" thumb-label step-label :step="20" color="primary-light3").mt12
        .mt4 v-model:
            code.ml1 {{ sliderVal }}
    w-flex.my12(:gap="3" align-center wrap)
        | Show menu on:
        w-menu
            template(#activator="{ on }")
                w-button(v-on="on") Show menu
            | Menu content
        w-badge.mr10(bg-color="error")
            template(#badge) 3
            w-icon(color="grey-light1" size="2.5em") mdi mdi-email
    SideBar(
        v-if="showSidebar"
        :pid="getPid"
        @updatePid="setPid"
        @hide="showSidebar = false"
    )
    RouterView(
        :pid="getPid"
        @updatePid="setPid"
        @show-sidebar="showSidebar = !showSidebar"
    )
</template>

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

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

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

export default {
    components: { SideBar },
    data: () => ({
        showSidebar: false,
        sliderVal: 1,
        openDrawer: false,
    }),
    computed: {
        getPid: () => (currentProfile.id.value ? currentProfile.id.value : 999),
    },
    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) {
            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)

            if (currentProfile.isLoggedIn) {
                console.warn(
                    `setting up Chatter and Toaster for ${this.getPid}...`,
                )
                currentProfile.setupChatter()
                currentProfile.setupToaster(this.$waveui.notify)
            }
            console.log('---')
        },
    },
}
</script>