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,5 +1,5 @@
<template>
<CMCApp :class="{ fadein : !isLoading }" v-if="!isLoading" />
<CMCApp @ready="isReady" :class="{ fadein : !isLoading }" />
<LoadingScreen :isLoading="isLoading" />
</template>
<script>
@ -15,11 +15,11 @@ export default {
CMCApp,
LoadingScreen
},
mounted(){
setTimeout(() => {
this.isLoading = false;
},1500);
methods: {
isReady() {
this.isLoading = false
}
},
}
</script>
<style>

View file

@ -1,6 +1,6 @@
<template>
<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-banner v-if="!site_info.backend_connected"
icon="mdi-exclamation"
@ -19,10 +19,12 @@ import axios from 'axios'
export default {
name: 'App',
components: {
MyNav,
MyNav
},
emits: ["ready"],
data() {
return {
isLoading: true,
site_info: {
name: "",
features: {},
@ -47,6 +49,14 @@ export default {
}
},
methods: {
checkIfReady(){
if (this.site_info.name != "") {
setTimeout(() => {
this.isLoading = false
this.$emit("ready")
},1000)
}
},
checkLoginStatus() {
let url = this.$api_url + "/users/check_login"
console.log("Checking login status...")
@ -78,6 +88,7 @@ export default {
.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 => {
@ -87,6 +98,8 @@ export default {
setTimeout(() => {
this.getSiteInfo()
},5000)
}).finally(() => {
this.checkIfReady()
})
},

2395
yarn.lock

File diff suppressed because it is too large Load diff