siimee/frontend/src/App.vue

<template lang="pug">
SideBar(v-if="showSidebar" :pid="pid" @updatePid="setPid" @hide="showSidebar = false")
RouterView(:pid="pid" @show-sidebar="showSidebar = true")
</template>

<script>
import * as sss from '@/sss/import.css'

import SideBar from './components/SideBar.vue'

import { Chatter, StonkAlert, currentProfile } from '@/services'
import { surveyFactory } from '@/utils'

const DEFAULT_PID = 45

export default {
    components: { SideBar },
    data: () => ({
        showSidebar: false
    }),
    computed:{
        pid: () => {
            return currentProfile.id ?  currentProfile.id : DEFAULT_PID
        }
    },
    async created() {
        await this.setupSurveyFactory()
        this.setupChatter()
        this.setupToaster()
    },
    methods: {
        /**
         * For push notifications and chat group initiation
         */
        setupToaster() {
            const t = new StonkAlert(this.pid)
        },
        /**
         * Pubnub stuff
         */
        setupChatter() {
            const c = new Chatter()
            const testAccountUUID = import.meta.env.VITE_TEST_ACCOUNT_UUID
            c.setup(testAccountUUID)
            console.log('---')
        },
        /**
         * Get all the questions early because lots
         * of things depend on the count
         * 
         * Note: only make the survey if the
         * SurveyView is accessed
         */
        async setupSurveyFactory() {
            await surveyFactory.getQuestions()
        }
    },
}
</script>

<style lang="postcss">
// prettier-ignore
@import './sss/theme.sss'

html
    background-color: #e90d77

#app
    display: flex
    flex-direction: row
    text-align: center
    color: $primary
    font-family: $sans
    background-color: $secondary
    overflow-x: hidden
    height: 100%
    > main
        position: relative
        height: 100%
        > article
            height: 100%
            width: 100%
            flex-direction: column
</style>