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