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

Started page to show list of observations

Browse Source
This commit is contained in:
neviyn 2018-09-27 15:39:48 +01:00
parent 7a6798a70a
commit 8a9a28c782
2 changed files with 113 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/router.js
View File

@ -5,6 +5,7 @@ import Observation from "./views/Observation.vue";
import Stats from "./views/Stats.vue";
import NewSite from "./views/NewSite.vue";
import NewTutor from "./views/NewTutor.vue";
import ViewObservations from "./views/ViewObservations.vue";
Vue.use(Router);
@ -34,6 +35,11 @@ export default new Router({
path: "/newtutor",
name: "newTutor",
component: NewTutor
},
{
path: "/observations",
name: "observations",
component: ViewObservations
}
]
});

107
frontend/src/views/ViewObservations.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<b-container>
<b-row>
<b-col>
<b-form-group label="Site">
<b-form-select v-model="siteSelection" :options="siteOptions" style="text-align:center;" />
</b-form-group>
</b-col>
<b-col>
<b-form-group label="Who">
<b-form-input v-model="whom" type="text" style="text-align:center;"></b-form-input>
</b-form-group>
</b-col>
<b-col>
<b-form-group label="From">
<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" />
</b-form-group>
</b-col>
<b-col>
<b-button v-on:click="getFiltered()">Refresh</b-button>
</b-col>
</b-row>
<b-container v-if="observationData != null">
<b-row v-for="(observation, index) in observationData" v-bind:key="index">
<b-col cols="3">
<p>Category: {{ observation.type }}</p>
<p>Rating: {{ observation.rating }}</p>
</b-col>
<b-col>
<b-form-group label="Strengths">
<b-form-textarea :value="item.strengths" readonly>
</b-form-textarea>
</b-form-group>
<b-form-group label="Areas of Improvement">
<b-form-textarea :value="item.improvements" readonly>
</b-form-textarea>
</b-form-group>
</b-col>
</b-row>
</b-container>
</b-container>
</template>
<script>
export default {
name: "viewobservations",
data: function() {
return {
startDate: moment().subtract(7, "days"),
endDate: moment(),
dateOptions: {
format: "DD/MM/YYYY",
useCurrent: false
},
siteSelection: null,
siteOptions: [],
tutorSelection: null,
tutorOptions: null,
whom: null,
observationData: null
};
},
mounted() {
Vue.axios
.get("/site/all")
.then(response => {
this.siteOptions = response.data;
})
.catch(error => {
console.log(error);
});
},
methods: {
getFiltered: function() {
Vue.axios
.get("/observation", {
params: {
site: this.siteSelection,
tutor: this.tutorSelection,
startDate: moment(this.startDate).format("YYYY-MM-DD"),
endDate: moment(this.endDate).format("YYYY-MM-DD"),
whom: this.whom
}
})
.then(response => {
this.chartData = response.data;
})
.catch(error => {
this.errorStatus = error.response.status;
this.errorMessage = error.response.data;
this.$refs.errorModal.show();
});
},
changeStartDate: function(e) {
this.startDate = e.date;
},
changeEndDate: function(e) {
this.endDate = e.date;
}
}
};
</script>