better loading check

This commit is contained in:
Paul Wilde 2023-03-24 13:42:22 +00:00
parent 0a3497a192
commit 1e946827c1
4 changed files with 1345 additions and 1218 deletions

119
\ Normal file
View file

@ -0,0 +1,119 @@
<template>
<MyNav :user="user" :site_info="site_info" v-if="!isLoading" />
<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>
</template>
<script>
import axios from 'axios'
export default {
name: 'App',
components: {
},
emits: ["ready"],
data() {
return {
isLoading: false,
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: {
checkIfReady(){
if (this.site_info.name != "") {
this.$emit("ready")
}
},
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
console.log(this.site_info)
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)
}).finally(() => {
this.checkIfReady()
})
},
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>

View file

@ -1,6 +1,6 @@
<template> <template>
<CMCApp :class="{ fadein : !isLoading }" v-if="!isLoading" /> <CMCApp @ready="isReady" :class="{ fadein : !isLoading }" />
<LoadingScreen :isLoading="isLoading" /> <LoadingScreen :isLoading="isLoading" />
</template> </template>
<script> <script>
import CMCApp from './CMCApp.vue' import CMCApp from './CMCApp.vue'
@ -15,16 +15,16 @@ export default {
CMCApp, CMCApp,
LoadingScreen LoadingScreen
}, },
mounted(){ methods: {
setTimeout(() => { isReady() {
this.isLoading = false; this.isLoading = false
},1500); }
} },
} }
</script> </script>
<style> <style>
.fadein { .fadein {
animation: fadein 1s forwards; animation: fadein 1s forwards;
} }
@keyframes fadein { @keyframes fadein {

View file

@ -1,14 +1,14 @@
<template> <template>
<v-app> <v-app>
<MyNav :user="user" :site_info="site_info" /> <MyNav :user="user" :site_info="site_info" v-if="!isLoading" />
<v-main class="ma-4"> <v-main class="ma-4">
<v-banner v-if="!site_info.backend_connected" <v-banner v-if="!site_info.backend_connected"
icon="mdi-exclamation" icon="mdi-exclamation"
color="error" color="error"
text="Cannot connect to the data service. Please contact support." > text="Cannot connect to the data service. Please contact support." >
</v-banner> </v-banner>
<router-view :site_info="site_info" :user_info="user_info"></router-view> <router-view :site_info="site_info" :user_info="user_info"></router-view>
</v-main> </v-main>
</v-app> </v-app>
</template> </template>
@ -19,10 +19,12 @@ import axios from 'axios'
export default { export default {
name: 'App', name: 'App',
components: { components: {
MyNav, MyNav
}, },
emits: ["ready"],
data() { data() {
return { return {
isLoading: true,
site_info: { site_info: {
name: "", name: "",
features: {}, features: {},
@ -47,6 +49,14 @@ export default {
} }
}, },
methods: { methods: {
checkIfReady(){
if (this.site_info.name != "") {
setTimeout(() => {
this.isLoading = false
this.$emit("ready")
},1000)
}
},
checkLoginStatus() { checkLoginStatus() {
let url = this.$api_url + "/users/check_login" let url = this.$api_url + "/users/check_login"
console.log("Checking login status...") console.log("Checking login status...")
@ -78,6 +88,7 @@ export default {
.get(this.$api_url + "/info") .get(this.$api_url + "/info")
.then(response => { .then(response => {
this.site_info = response.data this.site_info = response.data
console.log(this.site_info)
this.site_info.backend_connected = true this.site_info.backend_connected = true
}) })
.catch(error => { .catch(error => {
@ -87,6 +98,8 @@ export default {
setTimeout(() => { setTimeout(() => {
this.getSiteInfo() this.getSiteInfo()
},5000) },5000)
}).finally(() => {
this.checkIfReady()
}) })
}, },

2395
yarn.lock

File diff suppressed because it is too large Load diff