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 { Chatter, currentProfile, StonkAlert } 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)
        }

        if (currentProfile.isLoggedIn) {
            console.warn(`setting up Chatter and Toaster for ${this.getPid}...`)
            this.setupChatter()
            this.setupToaster()
        }
        console.log('---')
    },
    methods: {
        /**
         * Sync up this components state with
         * the currentProfile handler
         */
        setPid(profileId) {
            currentProfile.login(profileId)
        },

        /**
         * For push notifications and chat
         */
        setupToaster() {
            const t = new StonkAlert(this.getPid)
        },
        setupChatter() {
            const c = new Chatter()
            const testAccountUUID = import.meta.env.VITE_TEST_ACCOUNT_UUID
            c.setup(testAccountUUID)
        },
    },
}
</script>