Fixed stats graph being filled below line. Added page to show after successful observation submission.

backend/src/main/kotlin/uk/co/neviyn/observationdatabase/Api.kt

@@ -53,7 +53,8 @@ data class ChartDataset(
         val label: String,
         val backgroundColor: String,
         val borderColor: String,
-        val data: List<Double>
+        val data: List<Double>,
+        val fill: Boolean = false
 ){
     constructor(label: String, color: String, data: List<Double>): this(label, color, color, data)
 }

backend/src/main/kotlin/uk/co/neviyn/observationdatabase/Security.kt

@@ -10,9 +10,9 @@ import org.springframework.security.config.annotation.web.configuration.EnableWe
 import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter
 import org.springframework.security.config.http.SessionCreationPolicy
 import org.springframework.security.core.AuthenticationException
-import org.springframework.security.web.authentication.www.BasicAuthenticationEntryPoint
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder
 import org.springframework.security.crypto.password.PasswordEncoder
+import org.springframework.security.web.authentication.www.BasicAuthenticationEntryPoint
 import org.springframework.stereotype.Component
 import java.io.IOException
 import javax.servlet.ServletException

frontend/src/App.vue

@@ -6,6 +6,8 @@
             <b-collapse is-nav id="nav_collapse">
                 <b-navbar-nav>
                     <b-nav-item to="/">New Observation</b-nav-item>
+                    <b-nav-item to="/observations">View Observations</b-nav-item>
+                    <b-nav-item to="/stats">Graphs</b-nav-item>
                 </b-navbar-nav>
                 <!-- Right aligned nav items -->
                 <b-navbar-nav class="ml-auto">
@@ -31,12 +33,4 @@
         text-align: center;
         color: #2c3e50;
     }
-
-    #nav {
-        padding: 10px;
-    }
-
-    #nav a.router-link-exact-active {
-        color: #42b983;
-    }
 </style>

frontend/src/router.js

@@ -6,6 +6,7 @@ import Stats from "./views/Stats.vue";
 import NewSite from "./views/NewSite.vue";
 import NewTutor from "./views/NewTutor.vue";
 import ViewObservations from "./views/ViewObservations.vue";
+import ObservationComplete from "./views/ObservationComplete.vue";
 
 Vue.use(Router);
 
@@ -40,6 +41,11 @@ export default new Router({
             path: "/observations",
             name: "observations",
             component: ViewObservations
+        },
+        {
+            path: "/complete",
+            name: "complete",
+            component: ObservationComplete
         }
     ]
 });

frontend/src/views/Observation.vue

@@ -91,14 +91,14 @@
             </b-row>
         </b-form>
         <b-modal id="submissionModal"
-                 ref="modal"
+                 ref="submissionModal"
                  title="Enter password to confirm submission"
                  @ok="handleOk"
                  @shown="clearPassword">
             <form @submit.stop.prevent="handleSubmit">
                 <b-form-input type="password"
                               placeholder="Enter password"
-                              v-model="name"></b-form-input>
+                              v-model="submitPassword"></b-form-input>
             </form>
         </b-modal>
     </b-container>
@@ -209,23 +209,26 @@
             showModal() {
                 this.$refs.submissionModal.show();
             },
-            hideModal() {
-                this.$refs.submissionModal.hide();
-                this.submitPassword = null;
-            },
             clearPassword() {
                 this.submitPassword = null
             },
             handleOk(evt) {
                 // Prevent modal from closing
                 evt.preventDefault();
-                if (this.password) {
+                if (this.submitPassword !== null) {
                     this.handleSubmit()
                 }
             },
             handleSubmit() {
                 var form = document.getElementById("submission-form");
                 if (form.checkValidity()) {
+                    let axiosConfig = {
+                        auth: {
+                            username: "admin",
+                            password: this.submitPassword
+                        }
+                    };
+                    var self = this;
                     Vue.axios
                         .post("/observation", {
                             site: this.site,
@@ -234,9 +237,9 @@
                             whom: this.whom,
                             type: this.type,
                             entries: JSON.parse(JSON.stringify(this.observations))
-                        })
+                        }, axiosConfig)
                         .then(function (response) {
-                            this.hideModal();
+                            self.$router.push("/complete");
                             console.log(response);
                         })
                         .catch(function (error) {

frontend/src/views/ObservationComplete.vue

@@ -0,0 +1,23 @@
+<template>
+    <b-container>
+        <h2>Submission Complete</h2>
+        <p>{{ type }}/{{ description }} has been submitted successfully.</p>
+        <b-button size="lg" variant="primary" to="/">
+            Start New Observation
+        </b-button>
+    </b-container>
+</template>
+
+<script>
+    import {mapState} from "vuex";
+    export default {
+        name: "ObservationComplete",
+        computed: {
+            ...mapState(["description", "type", "whom", "site", "tutors"])
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/Stats.vue

@@ -5,21 +5,23 @@
                 <h3 class="modal-title w-100">{{ errorStatus }}</h3>
             </div>
             <div class="d-block">
-        <br />
+                <br/>
-        <span style="font-size:20px;" v-html="errorMessage" />
+                <span style="font-size:20px;" v-html="errorMessage"/>
                 <button class="btn btn-warning" @click="$refs.errorModal.hide()">
-          <v-icon name="exclamation-circle" /> Dismiss</button>
+                    <v-icon name="exclamation-circle"/>
+                    Dismiss
+                </button>
             </div>
         </b-modal>
         <b-row>
             <b-col>
                 <b-form-group label="Site">
-          <b-form-select class="text-center" v-model="siteSelection" :options="siteOptions" />
+                    <b-form-select class="text-center" v-model="siteSelection" :options="siteOptions"/>
                 </b-form-group>
             </b-col>
             <b-col>
                 <b-form-group label="Tutor">
-          <b-form-select class="text-center" v-model="tutorSelection" :options="tutorOptions" />
+                    <b-form-select class="text-center" v-model="tutorSelection" :options="tutorOptions"/>
                 </b-form-group>
             </b-col>
             <b-col>
@@ -29,12 +31,13 @@
             </b-col>
             <b-col>
                 <b-form-group label="From">
-          <date-picker v-model="startDate" @dp-change="changeStartDate" value="startDate" :config="dateOptions" />
+                    <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" />
+                    <date-picker v-model="endDate" @dp-change="changeEndDate" value="endDate" :config="dateOptions"/>
                 </b-form-group>
             </b-col>
             <b-col>
@@ -43,24 +46,27 @@
         </b-row>
         <b-row>
             <b-col>
-        <stats-view v-if="chartData != null && chartData != {}" v-bind:chartData="chartData" :options="options" />
+                <stats-view v-if="chartData != null && chartData !== {}" v-bind:chartData="chartData"
+                            style="position: relative; height:80vh" :options="options"/>
             </b-col>
         </b-row>
     </b-container>
 </template>
 
 <script>
-import Vue from "vue";
+    import Vue from "vue";
-import StatsView from "../components/StatsView";
+    import StatsView from "../components/StatsView";
-var moment = require("moment");
+
-export default {
+    var moment = require("moment");
+    export default {
         name: "stats",
-  components: { StatsView },
+        components: {StatsView},
-  data: function() {
+        data: function () {
             return {
                 chartData: null,
                 options: {
                     responsive: true,
+                    maintainAspectRatio: false,
                     tooltips: {
                         mode: "index",
                         intersect: false
@@ -101,12 +107,12 @@ export default {
                 siteSelection: null,
                 siteOptions: [],
                 tutorSelection: null,
-      tutorOptions: null,
+                tutorOptions: [],
                 whom: null
             };
         },
         methods: {
-    getFilteredAverage: function() {
+            getFilteredAverage: function () {
                 Vue.axios
                     .post("/observations/chartdata", {
                         'site': this.siteSelection,
@@ -124,7 +130,7 @@ export default {
                         this.$refs.errorModal.show();
                     });
             },
-    getTutors: function() {
+            getTutors: function () {
                 if (this.siteSelection != null) {
                     Vue.axios
                         .get("/site/" + this.siteSelection + "/tutors")
@@ -133,15 +139,15 @@ export default {
                         });
                 }
             },
-    changeStartDate: function(e) {
+            changeStartDate: function (e) {
                 this.startDate = e.date;
             },
-    changeEndDate: function(e) {
+            changeEndDate: function (e) {
                 this.endDate = e.date;
             }
         },
         watch: {
-    siteSelection: function() {
+            siteSelection: function () {
                 this.tutorOptions = [];
                 this.tutorSelection = null;
                 this.getTutors();
@@ -160,5 +166,5 @@ export default {
                     this.$refs.errorModal.show();
                 });
         }
-};
+    };
 </script>