cmc_fe/src/CMCApp.vue

<template>
    <v-app>
        <MyNav :user="user" :site_info="site_info" />
        <v-main class="ma-4">
            <v-banner v-if="!site_info.backend_connected" 
                      icon="mdi-exclamation" 
                      color="error"
                      text="Cannot connect to the data service. Please contact support." >
            </v-banner>
                <router-view :site_info="site_info" :user_info="user_info"></router-view>
        </v-main>
    </v-app>
</template>

<script>
import MyNav from './components/MyNav.vue'
import axios from 'axios'

export default {
    name: 'App',
    components: {
        MyNav,
    },
    data() {
        return {
            site_info: {
                name: "",
                features: {},
                backend_connected: false
            },
            user: {
                first_name: "",
                last_name: "",
                email: "",
                token: "",
                logged_in: false
            },
            user_info: {}
        }
    },
    watch: {
        'user.logged_in'(val) {
            console.log("Login status is " + val)
        },
        'site_info.name'() {
            document.title = this.site_info.name
        }
    },
    methods: {
        checkLoginStatus() {
            let url = this.$api_url + "/users/check_login"
            console.log("Checking login status...")
            axios
                .post(url)
                .then(resp => {
                    this.user.logged_in = resp.data.logged_in
                    this.user.first_name = resp.data.user.first_name
                    if (this.user.logged_in) {
                        console.log("Logged in.")
                        if (window.location.pathname == "/login") {
                            this.$router.push("/")
                        }
                        this.getUserInfo()
                    } else {
                        console.log("Not logged in.")
                        this.$router.push("/login")
                    }
                })
                .catch(error => {
                    console.log("Error checking login status..." + error)
                    this.$router.push("/login")
                })

        },
        async getSiteInfo() {
            console.log("Trying to get site Info...")
            axios
                .get(this.$api_url + "/info")
                .then(response => {
                    this.site_info = response.data
                    this.site_info.backend_connected = true
                })
                .catch(error => {
                    this.site_info.name = "Error getting data connection"
                    this.site_info.backend_connected = false
                    console.log(error)
                    setTimeout(() => {
                        this.getSiteInfo()
                    },5000)
                })

        },
        async getUserInfo() {
            let url = this.$api_url + "/users/info"
            console.log(url)
            axios.get(url)
                .then(resp => {
                    this.user_info = resp.data
                })
                .catch(err => {
                    console.log(err)
                })
        }
    },
    created() {
        this.getSiteInfo()
        if (window.location.pathname != "/login") {
            this.checkLoginStatus()
        }
    }

}
</script>