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

Add entry areas for observation data.

Browse Source
This commit is contained in:
neviyn 2018-09-20 12:13:38 +01:00
parent 294bf679a6
commit 07622febd3
1 changed files with 77 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,35 +1,83 @@
<template> <template>
<b-container> <b-container>
<b-container v-for="(item, index) in observations" v-bind:key="index" v-bind:type="item.type" v-bind:rating="item.rating" v-bind:strengths="item.strengths" v-bind:improvements="item.improvements"> <b-form @submit="onSubmit" id="submission-form" novalidate>
<b-button v-on:click="deleteObservation(index)">Delete</b-button> <b-container v-for="(item, index) in observations" v-bind:key="index" class="border bottom-buffer">
</b-container> <b-row class="top-buffer">
<b-button v-on:click="this.addAnotherObservation">Add Entry</b-button> <b-col cols="3">
<b-form-group label="Type">
<b-form-select v-model="observations[index].type" required>
<option value="">Please select an option</option>
<option value="MONITORING">Monitoring</option>
<option value="CONTROL">Control</option>
<option value="CONSERVATISM">Conservatism</option>
<option value="TEAMWORK">Teamwork</option>
<option value="KNOWLEDGE">Knowledge</option>
</b-form-select>
</b-form-group>
<b-form-group label="Rating">
<b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="observations[index].rating" required>
<b-form-radio value="1">1</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="4">4</b-form-radio>
<b-form-radio value="5">5</b-form-radio>
</b-form-radio-group>
</b-form-group>
</b-col>
<b-col>
<b-form-group label="Strengths">
<b-form-textarea v-model="observations[index].strengths" placeholder="Enter Strengths" :rows="3" :max-rows="6" required no-resize>
</b-form-textarea>
</b-form-group>
<b-form-group label="Areas of Improvement">
<b-form-textarea v-model="observations[index].improvements" placeholder="Enter Areas of Improvement" :rows="3" :max-rows="6" required no-resize>
</b-form-textarea>
</b-form-group>
</b-col>
</b-row>
<b-row class="bottom-buffer">
<b-col>
<b-button v-on:click="deleteObservation(index)">Delete</b-button>
</b-col>
</b-row>
</b-container>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button v-on:click="this.addAnotherObservation">Add Entry</b-button>
</b-form>
</b-container> </b-container>
</template> </template>
<script> <script>
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import Vue from "vue";
export default { export default {
name: "observation", name: "observation",
data: function() { data: function() {
return { return {
observations: [ observations: [
{ {
type: "", type: null,
rating: 0, rating: null,
strengths: "", strengths: null,
improvements: "" improvements: null
} }
] ]
}; };
}, },
methods: { methods: {
addAnotherObservation: function() { addAnotherObservation: function() {
console.log("Adding");
this.observations.push({ this.observations.push({
type: "", type: null,
rating: 0, rating: null,
strengths: "", strengths: null,
improvements: "" improvements: null
});
Vue.nextTick(function() {
window.scrollTo(
0,
document.body.scrollHeight || document.documentElement.scrollHeight
);
}); });
}, },
deleteObservation: function(index) { deleteObservation: function(index) {
@ -37,7 +85,23 @@ export default {
if (this.observations.length == 0) { if (this.observations.length == 0) {
this.addAnotherObservation(); this.addAnotherObservation();
} }
},
onSubmit: function(e) {
e.preventDefault();
e.stopPropagation();
var form = document.getElementById("submission-form");
console.log(form.checkValidity());
form.classList.add("was-validated");
} }
} }
}; };
</script> </script>
<style>
.top-buffer {
margin-top: 10px;
}
.bottom-buffer {
margin-bottom: 10px;
}
</style>