From c2ffa8891232ee9327357cb9255b5c406a18deb7 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Thu, 21 Feb 2019 16:26:48 +0000
Subject: [PATCH] Added quick interval to observations view

---
 frontend/src/views/ViewObservations.vue | 172 ++++++++++++++++--------
 1 file changed, 115 insertions(+), 57 deletions(-)

diff --git a/frontend/src/views/ViewObservations.vue b/frontend/src/views/ViewObservations.vue
index 438f31c..2476593 100644
--- a/frontend/src/views/ViewObservations.vue
+++ b/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,80 +69,112 @@
             <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>
             <b-row v-for="(entry, index2) in observation.scenarios" v-bind:key="index2">
               <b-col class="border">
-              <b-row align-h="center">
-                <h3>{{ entry.title }}</h3>
-              </b-row>
-              <b-row>
-                <observation-entry
-                  :scenariofundamental="entry.monitoring"
-                  :description="'Monitoring'"
-                ></observation-entry>
-                <observation-entry
-                  :scenariofundamental="entry.controlProcedural"
-                  :description="'Control Procedural'"
-                ></observation-entry>
-              </b-row>
-              <b-row>
-                <observation-entry :scenariofundamental="entry.control" :description="'Control'"></observation-entry>
-                <observation-entry
-                  :scenariofundamental="entry.conservatism"
-                  :description="'Conservatism'"
-                ></observation-entry>
-              </b-row>
-              <b-row>
-                <observation-entry
-                  :scenariofundamental="entry.teamworkCommunications"
-                  :description="'Teamwork Communications'"
-                ></observation-entry>
-                <observation-entry
-                  :scenariofundamental="entry.teamworkLeadership"
-                  :description="'Teamwork Leadership'"
-                ></observation-entry>
-              </b-row>
-              <b-row>
-                <observation-entry
-                  :scenariofundamental="entry.teamworkWorkload"
-                  :description="'Teamwork Workload'"
-                ></observation-entry>
-                <observation-entry
-                  :scenariofundamental="entry.knowledge"
-                  :description="'Knowledge'"
-                ></observation-entry>
-              </b-row>
+                <b-row align-h="center">
+                  <h3>{{ entry.title }}</h3>
+                </b-row>
+                <b-row>
+                  <observation-entry
+                    :scenariofundamental="entry.monitoring"
+                    :description="'Monitoring'"
+                  ></observation-entry>
+                  <observation-entry
+                    :scenariofundamental="entry.controlProcedural"
+                    :description="'Control Procedural'"
+                  ></observation-entry>
+                </b-row>
+                <b-row>
+                  <observation-entry :scenariofundamental="entry.control" :description="'Control'"></observation-entry>
+                  <observation-entry
+                    :scenariofundamental="entry.conservatism"
+                    :description="'Conservatism'"
+                  ></observation-entry>
+                </b-row>
+                <b-row>
+                  <observation-entry
+                    :scenariofundamental="entry.teamworkCommunications"
+                    :description="'Teamwork Communications'"
+                  ></observation-entry>
+                  <observation-entry
+                    :scenariofundamental="entry.teamworkLeadership"
+                    :description="'Teamwork Leadership'"
+                  ></observation-entry>
+                </b-row>
+                <b-row>
+                  <observation-entry
+                    :scenariofundamental="entry.teamworkWorkload"
+                    :description="'Teamwork Workload'"
+                  ></observation-entry>
+                  <observation-entry
+                    :scenariofundamental="entry.knowledge"
+                    :description="'Knowledge'"
+                  ></observation-entry>
+                </b-row>
               </b-col>
             </b-row>
           </b-tab>
@@ -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">
-      Loading...
-    </b-container>
+    <b-container v-else-if="loading">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);
     }
   }
 };
@@ -245,7 +303,7 @@ export default {
   text-align: center;
 }
 .scorewarning {
-    background-color: red;
+  background-color: red;
 }
 .image-centered-text {
   position: absolute;