Started page to show list of observations

frontend/src/router.js

@@ -5,6 +5,7 @@ import Observation from "./views/Observation.vue";
 import Stats from "./views/Stats.vue";
 import NewSite from "./views/NewSite.vue";
 import NewTutor from "./views/NewTutor.vue";
+import ViewObservations from "./views/ViewObservations.vue";
 
 Vue.use(Router);
 
@@ -34,6 +35,11 @@ export default new Router({
       path: "/newtutor",
       name: "newTutor",
       component: NewTutor
+    },
+    {
+      path: "/observations",
+      name: "observations",
+      component: ViewObservations
     }
   ]
 });

frontend/src/views/ViewObservations.vue

@@ -0,0 +1,107 @@
+<template>
+  <b-container>
+    <b-row>
+      <b-col>
+        <b-form-group label="Site">
+          <b-form-select v-model="siteSelection" :options="siteOptions" style="text-align:center;" />
+        </b-form-group>
+      </b-col>
+      <b-col>
+        <b-form-group label="Who">
+          <b-form-input v-model="whom" type="text" style="text-align:center;"></b-form-input>
+        </b-form-group>
+      </b-col>
+      <b-col>
+        <b-form-group label="From">
+          <date-picker v-model="startDate" @dp-change="changeStartDate" value="startDate" :config="dateOptions" />
+        </b-form-group>
+      </b-col>
+      <b-col>
+        <b-form-group label="To">
+          <date-picker v-model="endDate" @dp-change="changeEndDate" value="endDate" :config="dateOptions" />
+        </b-form-group>
+      </b-col>
+      <b-col>
+        <b-button v-on:click="getFiltered()">Refresh</b-button>
+      </b-col>
+    </b-row>
+    <b-container v-if="observationData != null">
+      <b-row v-for="(observation, index) in observationData" v-bind:key="index">
+        <b-col cols="3">
+          <p>Category: {{ observation.type }}</p>
+          <p>Rating: {{ observation.rating }}</p>
+        </b-col>
+        <b-col>
+          <b-form-group label="Strengths">
+            <b-form-textarea :value="item.strengths" readonly>
+            </b-form-textarea>
+          </b-form-group>
+          <b-form-group label="Areas of Improvement">
+            <b-form-textarea :value="item.improvements" readonly>
+            </b-form-textarea>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-container>
+  </b-container>
+</template>
+
+<script>
+export default {
+  name: "viewobservations",
+  data: function() {
+    return {
+      startDate: moment().subtract(7, "days"),
+      endDate: moment(),
+      dateOptions: {
+        format: "DD/MM/YYYY",
+        useCurrent: false
+      },
+      siteSelection: null,
+      siteOptions: [],
+      tutorSelection: null,
+      tutorOptions: null,
+      whom: null,
+      observationData: null
+    };
+  },
+  mounted() {
+    Vue.axios
+      .get("/site/all")
+      .then(response => {
+        this.siteOptions = response.data;
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  },
+  methods: {
+    getFiltered: function() {
+      Vue.axios
+        .get("/observation", {
+          params: {
+            site: this.siteSelection,
+            tutor: this.tutorSelection,
+            startDate: moment(this.startDate).format("YYYY-MM-DD"),
+            endDate: moment(this.endDate).format("YYYY-MM-DD"),
+            whom: this.whom
+          }
+        })
+        .then(response => {
+          this.chartData = response.data;
+        })
+        .catch(error => {
+          this.errorStatus = error.response.status;
+          this.errorMessage = error.response.data;
+          this.$refs.errorModal.show();
+        });
+    },
+     changeStartDate: function(e) {
+       this.startDate = e.date;
+     },
+     changeEndDate: function(e) {
+       this.endDate = e.date;
+     }
+  }
+};
+</script>