Fixed stats graph being filled below line. Added page to show after successful observation submission.
This commit is contained in:
parent
ed3b748469
commit
02ed4b8b08
@ -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)
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
@ -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) {
|
||||
|
||||
23
frontend/src/views/ObservationComplete.vue
Normal file
23
frontend/src/views/ObservationComplete.vue
Normal file
@ -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>
|
||||
@ -5,21 +5,23 @@
|
||||
<h3 class="modal-title w-100">{{ errorStatus }}</h3>
|
||||
</div>
|
||||
<div class="d-block">
|
||||
<br />
|
||||
<span style="font-size:20px;" v-html="errorMessage" />
|
||||
<br/>
|
||||
<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 StatsView from "../components/StatsView";
|
||||
var moment = require("moment");
|
||||
export default {
|
||||
import Vue from "vue";
|
||||
import StatsView from "../components/StatsView";
|
||||
|
||||
var moment = require("moment");
|
||||
export default {
|
||||
name: "stats",
|
||||
components: { StatsView },
|
||||
data: function() {
|
||||
components: {StatsView},
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user