neviyn/ObservationDatabase
1
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

Removed incorrect validation of tutor selections.

Browse Source
This commit is contained in:
neviyn 2018-10-08 12:27:31 +01:00
parent 9e198fdaa5
commit 462e86bd36
2 changed files with 298 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/views/Home.vue
View File

@ -65,8 +65,7 @@
<p v-if="site == null">Select a site first.</p> <p v-if="site == null">Select a site first.</p>
<v-icon name="spinner" spin v-if="loadingTutors"/> <v-icon name="spinner" spin v-if="loadingTutors"/>
<b-form-checkbox-group :value="tutors" @input="setTutors" <b-form-checkbox-group :value="tutors" @input="setTutors"
:options="tutorOptions" :options="tutorOptions"></b-form-checkbox-group>
required></b-form-checkbox-group>
</b-form-group> </b-form-group>
</b-col> </b-col>
</b-row> </b-row>
@ -144,10 +143,12 @@
console.log("submit"); console.log("submit");
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
let form = document.getElementById("submission-form"); var form = document.getElementById("submission-form");
if (form.checkValidity()) { if (form.checkValidity() && this.tutors.length > 0) {
console.log("valid");
this.$router.push("/observation"); this.$router.push("/observation");
} }
form.classList.add("was-validated");
} }
} }
}; };

166
frontend/src/views/Observation.vue
View File

@ -1,35 +1,37 @@
<template> <template>
<b-container> <b-container>
<h3> <h3>
<v-icon name="tag" scale="1.5" />{{type}}/{{description}}</h3> <v-icon name="tag" scale="1.5"/>
{{type}}/{{description}}
</h3>
<b-container class="sidebar"> <b-container class="sidebar">
<b-row align-v="center" class="sidebar-vert-padding"> <b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image"> <b-col class="centered-image">
<img src="../assets/Monitoring.svg" class="image-opacity" object-fill="contain" /> <img src="../assets/Monitoring.svg" class="image-opacity" object-fill="contain"/>
<div class="image-centered-text">{{ totals[0] }}</div> <div class="image-centered-text">{{ totals[0] }}</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row align-v="center" class="sidebar-vert-padding"> <b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image"> <b-col class="centered-image">
<img src="../assets/Control.svg" class="image-opacity" object-fill="contain" /> <img src="../assets/Control.svg" class="image-opacity" object-fill="contain"/>
<div class="image-centered-text">{{ totals[1] }}</div> <div class="image-centered-text">{{ totals[1] }}</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row align-v="center" class="sidebar-vert-padding"> <b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image"> <b-col class="centered-image">
<img src="../assets/Conservatism.svg" class="image-opacity" object-fill="contain" /> <img src="../assets/Conservatism.svg" class="image-opacity" object-fill="contain"/>
<div class="image-centered-text">{{ totals[2] }}</div> <div class="image-centered-text">{{ totals[2] }}</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row align-v="center" class="sidebar-vert-padding"> <b-row align-v="center" class="sidebar-vert-padding">
<b-col class="centered-image"> <b-col class="centered-image">
<img src="../assets/Teamwork.svg" class="image-opacity" object-fill="contain" /> <img src="../assets/Teamwork.svg" class="image-opacity" object-fill="contain"/>
<div class="image-centered-text">{{ totals[3] }}</div> <div class="image-centered-text">{{ totals[3] }}</div>
</b-col> </b-col>
</b-row> </b-row>
<b-row align-v="center"> <b-row align-v="center">
<b-col class="centered-image"> <b-col class="centered-image">
<img src="../assets/Knowledge.svg" class="image-opacity" object-fill="contain" /> <img src="../assets/Knowledge.svg" class="image-opacity" object-fill="contain"/>
<div class="image-centered-text">{{ totals[4] }}</div> <div class="image-centered-text">{{ totals[4] }}</div>
</b-col> </b-col>
</b-row> </b-row>
@ -49,7 +51,9 @@
</b-form-select> </b-form-select>
</b-form-group> </b-form-group>
<b-form-group label="Rating"> <b-form-group label="Rating">
<b-form-radio-group buttons button-variant="outline-info" size="lg" v-bind:value="item.rating" @change="changeRating(index, $event)" required> <b-form-radio-group buttons button-variant="outline-info" size="lg"
v-bind:value="item.rating" @change="changeRating(index, $event)"
required>
<b-form-radio value=1>1</b-form-radio> <b-form-radio value=1>1</b-form-radio>
<b-form-radio value=2>2</b-form-radio> <b-form-radio value=2>2</b-form-radio>
<b-form-radio value=3>3</b-form-radio> <b-form-radio value=3>3</b-form-radio>
@ -60,11 +64,13 @@
</b-col> </b-col>
<b-col> <b-col>
<b-form-group label="Strengths"> <b-form-group label="Strengths">
<b-form-textarea v-model="item.strengths" placeholder="Enter Strengths" :rows="3" :max-rows="6" required no-resize> <b-form-textarea v-model="item.strengths" placeholder="Enter Strengths" :rows="3"
:max-rows="6" required no-resize>
</b-form-textarea> </b-form-textarea>
</b-form-group> </b-form-group>
<b-form-group label="Areas of Improvement"> <b-form-group label="Areas of Improvement">
<b-form-textarea v-model="item.improvements" placeholder="Enter Areas of Improvement" :rows="3" :max-rows="6" required no-resize> <b-form-textarea v-model="item.improvements" placeholder="Enter Areas of Improvement"
:rows="3" :max-rows="6" required no-resize>
</b-form-textarea> </b-form-textarea>
</b-form-group> </b-form-group>
</b-col> </b-col>
@ -84,18 +90,30 @@
</b-col> </b-col>
</b-row> </b-row>
</b-form> </b-form>
<b-modal id="submissionModal"
ref="modal"
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>
</form>
</b-modal>
</b-container> </b-container>
</template> </template>
<script> <script>
import "bootstrap/dist/css/bootstrap.css"; import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css"; import "bootstrap-vue/dist/bootstrap-vue.css";
import "vue-awesome/icons/tag"; import "vue-awesome/icons/tag";
import { mapState } from "vuex"; import {mapState} from "vuex";
import Vue from "vue"; import Vue from "vue";
export default {
export default {
name: "observation", name: "observation",
data: function() { data: function () {
return { return {
observations: [ observations: [
{ {
@ -113,39 +131,39 @@ export default {
...mapState(["description", "type", "whom", "site", "tutors"]) ...mapState(["description", "type", "whom", "site", "tutors"])
}, },
methods: { methods: {
addAnotherObservation: function() { addAnotherObservation: function () {
this.observations.push({ this.observations.push({
type: null, type: null,
rating: null, rating: null,
strengths: null, strengths: null,
improvements: null improvements: null
}); });
Vue.nextTick(function() { Vue.nextTick(function () {
window.scrollTo( window.scrollTo(
0, 0,
document.body.scrollHeight || document.documentElement.scrollHeight document.body.scrollHeight || document.documentElement.scrollHeight
); );
}); });
}, },
deleteObservation: function(index) { deleteObservation: function (index) {
this.observations.splice(index, 1); this.observations.splice(index, 1);
if (this.observations.length == 0) { if (this.observations.length === 0) {
this.addAnotherObservation(); this.addAnotherObservation();
} }
this.updateTotals(); this.updateTotals();
}, },
changeType: function(index, ev) { changeType: function (index, ev) {
this.observations[index].type = ev; this.observations[index].type = ev;
this.updateTotals(); this.updateTotals();
}, },
changeRating: function(index, ev) { changeRating: function (index, ev) {
this.observations[index].rating = parseInt(ev); this.observations[index].rating = parseInt(ev);
this.updateTotals(); this.updateTotals();
}, },
updateTotals: function() { updateTotals: function () {
var iTotals = [0, 0, 0, 0, 0]; var iTotals = [0, 0, 0, 0, 0];
var counts = [0, 0, 0, 0, 0]; var counts = [0, 0, 0, 0, 0];
this.observations.forEach(function(element) { this.observations.forEach(function (element) {
if (element.rating > 0) { if (element.rating > 0) {
switch (element.type) { switch (element.type) {
case "MONITORING": case "MONITORING":
@ -172,30 +190,41 @@ export default {
} }
}); });
for (var i = 0; i < iTotals.length; i++) { for (var i = 0; i < iTotals.length; i++) {
if (counts[i] != 0) { if (counts[i] !== 0) {
this.totals[i] = (iTotals[i] / counts[i]).toFixed(1); this.totals[i] = (iTotals[i] / counts[i]).toFixed(1);
} else { } else {
this.totals[i] = 0; this.totals[i] = 0;
} }
} }
}, },
onSubmit: function(e) { onSubmit: function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
var form = document.getElementById("submission-form"); var form = document.getElementById("submission-form");
console.log({ if (form.checkValidity()) {
siteId: this.site, this.showModal();
tutorIds: this.tutors, }
observed: this.description, form.classList.add("was-validated");
whom: this.whom, },
type: this.type, showModal() {
monitoring: this.totals[0], this.$refs.submissionModal.show();
control: this.totals[1], },
conservatism: this.totals[2], hideModal() {
teamwork: this.totals[3], this.$refs.submissionModal.hide();
knowledge: this.totals[4], this.submitPassword = null;
rawData: JSON.parse(JSON.stringify(this.observations)) },
}); clearPassword() {
this.submitPassword = null
},
handleOk(evt) {
// Prevent modal from closing
evt.preventDefault();
if(this.password) {
this.handleSubmit()
}
},
handleSubmit() {
var form = document.getElementById("submission-form");
if (form.checkValidity()) { if (form.checkValidity()) {
Vue.axios Vue.axios
.post("/observation", { .post("/observation", {
@ -206,34 +235,31 @@ export default {
type: this.type, type: this.type,
entries: JSON.parse(JSON.stringify(this.observations)) entries: JSON.parse(JSON.stringify(this.observations))
}) })
.then(function(response) { .then(function (response) {
this.hideModal();
console.log(response); console.log(response);
}) })
.catch(function(error) { .catch(function (error) {
console.log(error); console.log(error);
}); });
} }
this.clearPassword();
form.classList.add("was-validated"); form.classList.add("was-validated");
},
showModal() {
this.$refs.submissionModal.show();
},
hideModal() {
this.$refs.submissionModal.hide();
this.submitPassword = null;
} }
} }
}; };
</script> </script>
<style> <style>
.top-buffer { .top-buffer {
margin-top: 10px; margin-top: 10px;
} }
.bottom-buffer {
.bottom-buffer {
margin-bottom: 10px; margin-bottom: 10px;
} }
.image-centered-text {
.image-centered-text {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -241,15 +267,18 @@ export default {
font-size: 50px; font-size: 50px;
color: white; color: white;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
} }
.image-opacity {
.image-opacity {
opacity: 0.5; opacity: 0.5;
} }
.centered-image {
.centered-image {
position: relative; position: relative;
text-align: center; text-align: center;
} }
.sidebar {
.sidebar {
width: 160px; /* Set the width of the sidebar */ width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */ position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */ z-index: 1; /* Stay on top */
@ -257,16 +286,19 @@ export default {
left: 0; left: 0;
overflow-x: hidden; /* Disable horizontal scroll */ overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px; padding-top: 20px;
} }
.sidebar-vert-padding {
.sidebar-vert-padding {
margin-bottom: 25%; margin-bottom: 25%;
} }
@media screen and (max-height: 500px) {
@media screen and (max-height: 500px) {
.sidebar { .sidebar {
top: 0; /* Stay at the top */ top: 0; /* Stay at the top */
} }
} }
img {
img {
height: 80px; height: 80px;
} }
</style> </style>