better loading check
This commit is contained in:
parent
0a3497a192
commit
1e946827c1
4 changed files with 1345 additions and 1218 deletions
119
\
Normal file
119
\
Normal 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>
|
16
src/App.vue
16
src/App.vue
|
@ -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 {
|
||||||
|
|
|
@ -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()
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue