psw/cmc_fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

add data connection error

Browse source
This commit is contained in:
Paul Wilde 2023-03-17 16:02:55 +00:00
parent b80bba3d3d
commit 710eadc49b
3 changed files with 38 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/CMCApp.vue
View file

@ -2,7 +2,12 @@
<v-app> <v-app>
<MyNav :user="user" :site_info="site_info" /> <MyNav :user="user" :site_info="site_info" />
<v-main class="ma-4"> <v-main class="ma-4">
<router-view :site_info="site_info" :user_info="user_info"></router-view> <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-main>
</v-app> </v-app>
</template> </template>
@ -19,8 +24,9 @@ export default {
data() { data() {
return { return {
site_info: { site_info: {
name: "Loading...", name: "",
features: {} features: {},
backend_connected: false
}, },
user: { user: {
first_name: "", first_name: "",
@ -67,10 +73,21 @@ export default {
}, },
async getSiteInfo() { async getSiteInfo() {
console.log("Trying to get site Info...")
axios axios
.get(this.$api_url + "/info") .get(this.$api_url + "/info")
.then(response => {this.site_info = response.data}) .then(response => {
.catch(error => (console.log(error))) 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() { async getUserInfo() {

8
src/components/MyNav.vue
View file

@ -7,9 +7,9 @@
<v-menu> <v-menu>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-btn <v-btn
variant="text" variant="text"
v-if="user.logged_in" v-if="user.logged_in"
v-bind="props"> v-bind="props">
Hi {{ user.first_name }} Hi {{ user.first_name }}
</v-btn> </v-btn>
</template> </template>
@ -70,7 +70,7 @@ export default{
} else { } else {
this.items = [] this.items = []
} }
} },
}, },
computed: { computed: {
user_items() { user_items() {

14
src/views/LoginPage.vue
View file

@ -4,7 +4,7 @@
id="login-box" id="login-box"
title="Welcome!" title="Welcome!"
subtitle="Please Log In"> subtitle="Please Log In">
<v-form> <v-form :disabled="!my_site_info.backend_connected">
<v-responsive class="mx-auto" max-width="475"> <v-responsive class="mx-auto" max-width="475">
<v-text-field label="Username" <v-text-field label="Username"
@keyup.enter="submitLogin" @keyup.enter="submitLogin"
@ -14,7 +14,7 @@
@keyup.enter="submitLogin" @keyup.enter="submitLogin"
v-model="user.password" clearable v-model="user.password" clearable
type="password"></v-text-field> type="password"></v-text-field>
<v-btn color="blue" :loading="logging_in" @click="submitLogin">Login</v-btn> <v-btn :disabled="!my_site_info.backend_connected" color="blue" :loading="logging_in" @click="submitLogin">Login</v-btn>
<v-banner v-if="show_error" color="error" icon="mdi-exclamation-thick" theme="dark"> <v-banner v-if="show_error" color="error" icon="mdi-exclamation-thick" theme="dark">
<v-banner-text>{{ error_message }}</v-banner-text> <v-banner-text>{{ error_message }}</v-banner-text>
</v-banner> </v-banner>
@ -27,9 +27,13 @@
import axios from 'axios' import axios from 'axios'
export default { export default {
props: {
site_info: {}
},
name: 'LoginPage', name: 'LoginPage',
data() { data() {
return { return {
my_site_info: this.site_info,
user: { user: {
email: "", email: "",
password: "" password: ""
@ -40,6 +44,12 @@ export default {
logging_in: false logging_in: false
} }
}, },
watch: {
'site_info.backend_connected'(new_val) {
console.log(new_val)
this.my_site_info.backend_connected = new_val
}
},
methods: { methods: {
submitLogin() { submitLogin() {
this.error_message = "" this.error_message = ""