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

Updated Home to using store.

Browse Source
This commit is contained in:
neviyn 2018-09-17 13:00:51 +01:00
parent 15c5e6d39c
commit eb0c5abc7b
1 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,69 +3,69 @@
<h1>Training Observations</h1> <h1>Training Observations</h1>
<b-row align-h="center"> <b-row align-h="center">
<b-col> <b-col>
<b-form-group label="Site"> <b-form-group label="Site">
<b-form-select :value="site" @input="setSite" :options="siteOptions"></b-form-select> <b-form-select :value="site" @input="setSite" :options="siteOptions"></b-form-select>
</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="Description"> <b-form-group label="Description">
<b-form-input :value="description" @input="setDescription" type="text"></b-form-input> <b-form-input :value="description" @input="setDescription" type="text"></b-form-input>
</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-form-group label="Type">
<b-form-select :value="type" @input="setType"> <b-form-select :value="type" @input="setType">
<option :value=null>Select a training type</option> <option :value=null>Select a training type</option>
<option value="INITIAL">INITIAL</option> <option value="INITIAL">INITIAL</option>
<option value="CONTINUING">CONTINUING</option> <option value="CONTINUING">CONTINUING</option>
</b-form-select> </b-form-select>
</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="Tutor(s)"> <b-form-group label="Tutor(s)">
<p v-if="site == null">Select a site first.</p> <p v-if="site == null">Select a site first.</p>
<v-icon name="spinner" spin v-if="loadingTutors"/> <v-icon name="spinner" spin v-if="loadingTutors" />
<b-form-checkbox-group :value="tutors" @input="setTutors" :options="tutorOptions"></b-form-checkbox-group> <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-button>Start</b-button> <b-button>Start</b-button>
</b-col> </b-col>
</b-row> </b-row>
</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 { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from "vuex";
export default { export default {
name: "home", name: "home",
data () { data() {
return { return {
siteOptions: [], siteOptions: [],
tutorOptions: [], tutorOptions: [],
loadingTutors: false loadingTutors: false
} };
}, },
mounted () { mounted() {
Vue.axios.get("/api/site/all").then((response) => { Vue.axios.get("/api/site/all").then(response => {
this.siteOptions = response.data; this.siteOptions = response.data;
}) });
}, },
computed: { computed: {
...mapState(["site", "description", "type", "tutors"]) ...mapState(["site", "description", "type", "tutors"])
}, },
watch: { watch: {
site: function () { site: function() {
this.loadingTutors = true; this.loadingTutors = true;
this.tutorOptions = []; this.tutorOptions = [];
this.tutors = []; this.tutors = [];
@ -74,12 +74,12 @@ export default {
}, },
methods: { methods: {
...mapMutations(["setSite", "setDescription", "setType", "setTutors"]), ...mapMutations(["setSite", "setDescription", "setType", "setTutors"]),
getTutors: function () { getTutors: function() {
if(this.site != null){ if (this.site != null) {
Vue.axios.get("/api/tutor/site/" + this.site).then((response) => { Vue.axios.get("/api/tutor/site/" + this.site).then(response => {
this.tutorOptions = response.data; this.tutorOptions = response.data;
this.loadingTutors = false; this.loadingTutors = false;
}) });
} }
} }
} }