Moved data required for submission to vuex store.

Fixed Bootstrap imports.

frontend/package-lock.json

@@ -8498,6 +8498,11 @@
         "topo": "3.x.x"
       }
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-beautify": {
       "version": "1.8.6",
       "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.8.6.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
     "axios": "^0.18.0",
     "bootstrap-vue": "^2.0.0-rc.11",
     "font-awesome": "^4.7.0",
+    "jquery": "^3.3.1",
     "vue": "^2.5.17",
     "vue-awesome": "^3.1.2",
     "vue-axios": "^2.1.3",

frontend/src/main.js

@@ -5,6 +5,8 @@ import store from "./store";
 import axios from 'axios';
 import VueAxios from 'vue-axios';
 import BootstrapVue from 'bootstrap-vue';
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
 import Icon from 'vue-awesome/components/Icon';
 
 Vue.config.productionTip = false;

frontend/src/store.js

@@ -4,7 +4,25 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
+  state: {
+    site: null,
+    tutors: [],
+    description: null,
+    type: null
+  },
+  mutations: {
+    setSite(state, newSite) {
+      state.site = newSite;
+    },
+    setTutors(state, newTutors) {
+      state.tutors = newTutors;
+    },
+    setDescription(state, newDescription) {
+      state.description = newDescription;
+    },
+    setType(state, newType){
+      state.type = newType;
+    }
+  },
   actions: {}
 });

frontend/src/views/Home.vue

@@ -3,17 +3,17 @@
     <h1>Training Observations</h1>
     <b-row>
       <b-form-group label="Site">
-        <b-form-select v-model="site" :options="siteOptions"></b-form-select>
+        <b-form-select :value="site" @input="setSite" :options="siteOptions"></b-form-select>
       </b-form-group>
     </b-row>
     <b-row>
       <b-form-group label="Description">
-        <b-form-input v-model="description" type="text"></b-form-input>
+        <b-form-input :value="description" @input="setDescription" type="text"></b-form-input>
       </b-form-group>
     </b-row>
     <b-row>
       <b-form-group label="Type">
-        <b-form-select v-model="type">
+        <b-form-select :value="type" @input="setType">
           <option :value=null>Select a training type</option>
           <option value="INITIAL">INITIAL</option>
           <option value="CONTINUING">CONTINUING</option>
@@ -24,23 +24,23 @@
       <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 v-model="tutors" :options="tutorOptions"></b-form-checkbox-group>
+        <b-form-checkbox-group :value="tutors" @input="setTutors" :options="tutorOptions"></b-form-checkbox-group>
       </b-form-group>
     </b-row>
+    <b-row>
+      <b-button >Start</b-button>
+    </b-row>
   </b-container>
 </template>
 
 <script>
 import Vue from 'vue'
 import 'vue-awesome/icons/spinner';
+import { mapState, mapMutations } from 'vuex'
 export default {
   name: "home",
   data () {
     return {
-      site: null,
-      description: null,
-      type: null,
-      tutors: [],
       siteOptions: [],
       tutorOptions: [],
       loadingTutors: false
@@ -51,6 +51,9 @@ export default {
       this.siteOptions = response.data;
     })
   },
+  computed: {
+    ...mapState(["site", "description", "type", "tutors"])
+  },
   watch: {
     site: function () {
       this.loadingTutors = true;
@@ -60,6 +63,7 @@ export default {
     }
   },
   methods: {
+    ...mapMutations(["setSite", "setDescription", "setType", "setTutors"]),
     getTutors: function () {
       if(this.site != null){
         Vue.axios.get("/api/tutor/site/" + this.site).then((response) => {