Added UI for adding a tutor.

frontend/src/router.js

@@ -4,6 +4,7 @@ import Home from "./views/Home.vue";
 import Observation from "./views/Observation.vue";
 import Stats from "./views/Stats.vue";
 import NewSite from "./views/NewSite.vue";
+import NewTutor from "./views/NewTutor.vue";
 
 Vue.use(Router);
 
@@ -28,6 +29,11 @@ export default new Router({
       path: "/newsite",
       name: "newSite",
       component: NewSite
+    },
+    {
+      path: "/newtutor",
+      name: "newTutor",
+      component: NewTutor
     }
   ]
 });

frontend/src/views/NewSite.vue

@@ -1,15 +1,15 @@
 <template>
   <b-container>
     <h2>New Site</h2>
-    <b-form @submit="onSubmit">
+    <b-form @submit="onSubmit" id="submission-form">
-      <b-form-group id="submission-form" label="Site Name">
+      <b-form-group horizontal label="Site Name">
         <b-form-input v-model="siteName" type="text" />
       </b-form-group>
       <b-button type="submit" size="lg" variant="primary">Submit</b-button>
     </b-form>
     <br />
     <b-alert :show="dismissCountDown" dismissible fade :variant="alertVariant" @dismissed="dismissCountDown=0" @dismiss-count-down="countDownChanged">
-      {{ alertText}}
+      {{ alertText }}
     </b-alert>
   </b-container>
 </template>

frontend/src/views/NewTutor.vue

@@ -0,0 +1,78 @@
+<template>
+  <b-container>
+    <h2>New Tutor</h2>
+    <b-form @submit="onSubmit" id="submission-form">
+      <b-form-group horizontal label="Site">
+        <b-form-select v-model="siteSelection" :options="siteOptions" style="text-align:center;" />
+      </b-form-group>
+      <b-form-group horizontal label="Tutor Name">
+        <b-form-input v-model="tutorName" type="text" />
+      </b-form-group>
+      <b-button type="submit" size="lg" variant="primary">Submit</b-button>
+    </b-form>
+    <br />
+    <b-alert :show="dismissCountDown" dismissible fade :variant="alertVariant" @dismissed="dismissCountDown=0" @dismiss-count-down="countDownChanged">
+      {{ alertText }}
+    </b-alert>
+  </b-container>
+</template>
+
+<script>
+import Vue from "vue";
+export default {
+  name: "newTutor",
+  data() {
+    return {
+      siteOptions: [],
+      siteSelection: null,
+      tutorName: null,
+      dismissSecs: 5,
+      dismissCountDown: 0,
+      alertVariant: "info",
+      alertText: ""
+    };
+  },
+  mounted() {
+    Vue.axios
+      .get("/api/site/all")
+      .then(response => {
+        this.siteOptions = response.data;
+      })
+      .catch(error => {
+        this.alertText = error.response.data;
+        this.alertVariant = "danger";
+      });
+  },
+  methods: {
+    countDownChanged: function(dismissCountDown) {
+      this.dismissCountDown = dismissCountDown;
+    },
+    showAlert: function() {
+      this.dismissCountDown = this.dismissSecs;
+    },
+    onSubmit: function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var form = document.getElementById("submission-form");
+      if (form.checkValidity()) {
+        Vue.axios
+          .post("/api/tutor", {
+            sideId: this.siteSelection,
+            name: this.tutorName
+          })
+          .then(response => {
+            this.alertVariant = "success";
+            this.alertText = "Successfully added " + response.data.name;
+            this.showAlert();
+          })
+          .catch(error => {
+            this.alertVariant = "danger";
+            this.alertText = "Failed to add Site";
+            this.showAlert();
+            console.log(error);
+          });
+      }
+    }
+  }
+};
+</script>