neviyn/ObservationDatabase
1
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Added error message/display if getting site list fails.

Browse Source
This commit is contained in:
neviyn 2018-09-21 10:11:57 +01:00
parent c05ab535ba
commit d7b018638f
1 changed files with 78 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/src/views/Home.vue
View File

@ -1,53 +1,74 @@
<template>
<b-container class="home" align-h="center">
<h1>Training Observations</h1>
<b-form @submit="onSubmit" id="submission-form" novalidate>
<b-row align-h="center">
<b-col>
<b-form-group label="Site">
<b-form-select :value="site" @input="setSite" :options="siteOptions" style="text-align:center;"></b-form-select>
</b-form-group>
</b-col>
</b-row>
<b-row align-h="center">
<b-col>
<b-form-group label="Description">
<b-form-input :value="description" @input="setDescription" type="text" style="text-align:center;"></b-form-input>
</b-form-group>
</b-col>
</b-row>
<b-row align-h="center">
<b-col>
<b-form-group label="Type">
<b-form-select :value="type" @input="setType" style="text-align:center;">
<option :value=null>Select a training type</option>
<option value="INITIAL">INITIAL</option>
<option value="CONTINUING">CONTINUING</option>
</b-form-select>
</b-form-group>
</b-col>
</b-row>
<b-row align-h="center">
<b-col>
<b-form-group label="Tutor(s)">
<p v-if="site == null">Select a site first.</p>
<v-icon name="spinner" spin v-if="loadingTutors" />
<b-form-checkbox-group :value="tutors" @input="setTutors" :options="tutorOptions"></b-form-checkbox-group>
</b-form-group>
</b-col>
</b-row>
<b-row align-h="center">
<b-col>
<b-button type="submit" size="lg" variant="primary">Start</b-button>
</b-col>
</b-row>
</b-form>
<b-modal ref="errorModal" class="text-center" centered hide-header hide-footer>
<div class="modal-header">
<h3 class="modal-title w-100">{{ errorStatus }}</h3>
</div>
<div class="d-block">
<br />
<span style="font-size:20px;" v-html="errorMessage" />
<button class="btn btn-warning" @click="$refs.errorModal.hide()">
<v-icon name="exclamation-circle" /> Dismiss</button>
</div>
</b-modal>
<b-container v-if="errorMessage">
<b-alert variant="danger" show>An error occurred, refresh and try again.</b-alert>
</b-container>
<b-container v-if="!loaded && !errorMessage">
<v-icon name="spinner" spin scale="2" />
<br /><br />
<p>Loading Site Data</p>
</b-container>
<b-container v-if="loaded">
<b-form @submit="onSubmit" id="submission-form" novalidate>
<b-row align-h="center">
<b-col>
<b-form-group label="Site">
<b-form-select :value="site" @input="setSite" :options="siteOptions" style="text-align:center;"></b-form-select>
</b-form-group>
</b-col>
</b-row>
<b-row align-h="center">
<b-col>
<b-form-group label="Description">
<b-form-input :value="description" @input="setDescription" type="text" style="text-align:center;"></b-form-input>
</b-form-group>
</b-col>
</b-row>
<b-row align-h="center">
<b-col>
<b-form-group label="Type">
<b-form-select :value="type" @input="setType" style="text-align:center;">
<option :value=null>Select a training type</option>
<option value="INITIAL">INITIAL</option>
<option value="CONTINUING">CONTINUING</option>
</b-form-select>
</b-form-group>
</b-col>
</b-row>
<b-row align-h="center">
<b-col>
<b-form-group label="Tutor(s)">
<p v-if="site == null">Select a site first.</p>
<v-icon name="spinner" spin v-if="loadingTutors" />
<b-form-checkbox-group :value="tutors" @input="setTutors" :options="tutorOptions"></b-form-checkbox-group>
</b-form-group>
</b-col>
</b-row>
<b-row align-h="center">
<b-col>
<b-button type="submit" size="lg" variant="primary">Start</b-button>
</b-col>
</b-row>
</b-form>
</b-container>
</b-container>
</template>
<script>
import Vue from "vue";
import "vue-awesome/icons/spinner";
import "vue-awesome/icons/exclamation-circle";
import { mapState, mapMutations } from "vuex";
export default {
name: "home",
@ -55,13 +76,24 @@ export default {
return {
siteOptions: [],
tutorOptions: [],
loadingTutors: false
loadingTutors: false,
loaded: false,
errorMessage: null,
errorStatus: null
};
},
mounted() {
Vue.axios.get("/api/site/all").then(response => {
this.siteOptions = response.data;
});
Vue.axios
.get("/api/site/all")
.then(response => {
this.siteOptions = response.data;
this.loaded = true;
})
.catch(error => {
this.errorStatus = error.response.status;
this.errorMessage = error.response.data;
this.$refs.errorModal.show();
});
},
computed: {
...mapState(["site", "description", "type", "tutors"])