Added quick interval to observations view

frontend/src/views/ViewObservations.vue

@@ -12,6 +12,29 @@
         </button>
       </div>
     </b-modal>
+    <b-row class="pb-2">
+      <b-col>
+        <b-button-group size="sm">
+          <b-button variant="dark">Quick Interval:</b-button>
+          <b-button
+            variant="outline-primary"
+            v-on:click="setInterval(1, 'w'); getFiltered()"
+          >1 Week</b-button>
+          <b-button
+            variant="outline-primary"
+            v-on:click="setInterval(1, 'M'); getFiltered()"
+          >1 Month</b-button>
+          <b-button
+            variant="outline-primary"
+            v-on:click="setInterval(3, 'M'); getFiltered()"
+          >3 Months</b-button>
+          <b-button
+            variant="outline-primary"
+            v-on:click="setInterval(1, 'y'); getFiltered()"
+          >1 Year</b-button>
+        </b-button-group>
+      </b-col>
+    </b-row>
     <observation-search-bar v-on:refresh="getFiltered()"></observation-search-bar>
     <b-container v-if="observationData != null && observationData.length > 0" fluid>
       <b-card no-body>
@@ -30,7 +53,8 @@
               {{ observation.type }} / {{ observation.observed }}
             </h2>
             <b-row align-h="center">
-              <h4>Observed by:
+              <h4>
+                Observed by:
                 <span v-bind:key="index" v-for="(tutor, index) in observation.tutors">
                   <i>
                     {{ tutor.name }}
@@ -45,35 +69,67 @@
             <br>
             <b-row class="mb-2">
               <b-col class="centered-image" v-if="observation.monitoring">
-                <img src="../assets/Monitoring.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.monitoring < 2.5 }">
+                <img
+                  src="../assets/Monitoring.svg"
+                  class="image-opacity"
+                  v-bind:class="{ scorewarning: observation.monitoring < 2.5 }"
+                >
                 <div class="image-centered-text">{{ observation.monitoring.toFixed(1) }}</div>
               </b-col>
               <b-col class="centered-image" v-if="observation.controlProcedural">
-                <img src="../assets/Control.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.controlProcedural < 2.5 }">
+                <img
+                  src="../assets/Control.svg"
+                  class="image-opacity"
+                  v-bind:class="{ scorewarning: observation.controlProcedural < 2.5 }"
+                >
                 <div class="image-centered-text">{{ observation.controlProcedural.toFixed(1) }}</div>
               </b-col>
               <b-col class="centered-image" v-if="observation.control">
-                <img src="../assets/Control.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.control < 2.5 }">
+                <img
+                  src="../assets/Control.svg"
+                  class="image-opacity"
+                  v-bind:class="{ scorewarning: observation.control < 2.5 }"
+                >
                 <div class="image-centered-text">{{ observation.control.toFixed(1) }}</div>
               </b-col>
               <b-col class="centered-image" v-if="observation.conservatism">
-                <img src="../assets/Conservatism.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.conservatism < 2.5 }">
+                <img
+                  src="../assets/Conservatism.svg"
+                  class="image-opacity"
+                  v-bind:class="{ scorewarning: observation.conservatism < 2.5 }"
+                >
                 <div class="image-centered-text">{{ observation.conservatism.toFixed(1) }}</div>
               </b-col>
               <b-col class="centered-image" v-if="observation.teamworkCommunications">
-                <img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.teamworkCommunications < 2.5 }">
+                <img
+                  src="../assets/Teamwork.svg"
+                  class="image-opacity"
+                  v-bind:class="{ scorewarning: observation.teamworkCommunications < 2.5 }"
+                >
                 <div class="image-centered-text">{{ observation.teamworkCommunications.toFixed(1) }}</div>
               </b-col>
               <b-col class="centered-image" v-if="observation.teamworkLeadership">
-                <img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.teamworkLeadership < 2.5 }">
+                <img
+                  src="../assets/Teamwork.svg"
+                  class="image-opacity"
+                  v-bind:class="{ scorewarning: observation.teamworkLeadership < 2.5 }"
+                >
                 <div class="image-centered-text">{{ observation.teamworkLeadership.toFixed(1) }}</div>
               </b-col>
               <b-col class="centered-image" v-if="observation.teamworkWorkload">
-                <img src="../assets/Teamwork.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.teamworkWorkload < 2.5 }">
+                <img
+                  src="../assets/Teamwork.svg"
+                  class="image-opacity"
+                  v-bind:class="{ scorewarning: observation.teamworkWorkload < 2.5 }"
+                >
                 <div class="image-centered-text">{{ observation.teamworkWorkload.toFixed(1) }}</div>
               </b-col>
               <b-col class="centered-image" v-if="observation.knowledge">
-                <img src="../assets/Knowledge.svg" class="image-opacity" v-bind:class="{ scorewarning: observation.knowledge < 2.5 }">
+                <img
+                  src="../assets/Knowledge.svg"
+                  class="image-opacity"
+                  v-bind:class="{ scorewarning: observation.knowledge < 2.5 }"
+                >
                 <div class="image-centered-text">{{ observation.knowledge.toFixed(1) }}</div>
               </b-col>
             </b-row>
@@ -126,9 +182,7 @@
       </b-card>
       <b-button class="mt-2" variant="success" @click="getCSV()">CSV Dump</b-button>
     </b-container>
-    <b-container v-else-if="loading">
+    <b-container v-else-if="loading">Loading...</b-container>
-      Loading...
-    </b-container>
     <b-container v-else>
       <b-row>
         <b-col>
@@ -144,7 +198,7 @@
 import Vue from "vue";
 import "vue-awesome/icons/search";
 import ObservationEntry from "../components/ObservationEntry.vue";
-import ObservationSearchBar from "../components/ObservationSearchBar"
+import ObservationSearchBar from "../components/ObservationSearchBar";
 
 var moment = require("moment");
 export default {
@@ -179,7 +233,7 @@ export default {
   },
   methods: {
     getFiltered: function() {
-      this.loading = true
+      this.loading = true;
       Vue.axios
         .post("/observations", {
           site: this.$store.state.search.site,
@@ -191,13 +245,13 @@ export default {
         })
         .then(response => {
           this.observationData = response.data;
-          this.loading = false
+          this.loading = false;
         })
         .catch(error => {
           this.errorStatus = error.response.status;
           this.errorMessage = error.response.data;
           this.$refs.errorModal.show();
-          this.loading = false
+          this.loading = false;
         });
     },
     getCSV: function() {
@@ -231,6 +285,10 @@ export default {
       } else {
         return data.substr(0, 20) + "...";
       }
+    },
+    setInterval: function(amount, timeType) {
+      this.endDate = moment();
+      this.startDate = moment().subtract(amount, timeType);
     }
   }
 };