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

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

@ -1,35 +1,83 @@
<template>
<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-container v-for="(item, index) in observations" v-bind:key="index" class="border bottom-buffer">
<b-row class="top-buffer">
<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>
</template>
<script>
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import Vue from "vue";
export default {
name: "observation",
data: function() {
return {
observations: [
{
type: "",
rating: 0,
strengths: "",
improvements: ""
type: null,
rating: null,
strengths: null,
improvements: null
}
]
};
},
methods: {
addAnotherObservation: function() {
console.log("Adding");
this.observations.push({
type: "",
rating: 0,
strengths: "",
improvements: ""
type: null,
rating: null,
strengths: null,
improvements: null
});
Vue.nextTick(function() {
window.scrollTo(
0,
document.body.scrollHeight || document.documentElement.scrollHeight
);
});
},
deleteObservation: function(index) {
@ -37,7 +85,23 @@ export default {
if (this.observations.length == 0) {
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>
<style>
.top-buffer {
margin-top: 10px;
}
.bottom-buffer {
margin-bottom: 10px;
}
</style>