User now prompted when no data returned to view, rather than just showing nothing.

This commit is contained in:
neviyn 2018-10-10 10:22:55 +01:00
parent bd2aa557b4
commit 9925a900c6
2 changed files with 207 additions and 190 deletions

View File

@ -49,20 +49,26 @@
<stats-view v-bind:chartData="chartData" <stats-view v-bind:chartData="chartData"
style="position: relative; height:80vh" :options="options"/> style="position: relative; height:80vh" :options="options"/>
</b-col> </b-col>
<b-col v-else>
<v-icon name="search"></v-icon>
<p>No data found with the given search parameters.</p>
</b-col>
</b-row> </b-row>
</b-container> </b-container>
</template> </template>
<script> <script>
import Vue from "vue"; import Vue from "vue";
import StatsView from "../components/StatsView"; import StatsView from "../components/StatsView";
import "vue-awesome/icons/exclamation-circle"; import "vue-awesome/icons/exclamation-circle";
var moment = require("moment"); import "vue-awesome/icons/search";
export default { var moment = require("moment");
export default {
name: "stats", name: "stats",
components: {StatsView}, components: { StatsView },
data: function () { data: function() {
return { return {
chartData: null, chartData: null,
options: { options: {
@ -113,14 +119,14 @@
}; };
}, },
methods: { methods: {
getFilteredAverage: function () { getFilteredAverage: function() {
Vue.axios Vue.axios
.post("/observations/chartdata", { .post("/observations/chartdata", {
'site': this.siteSelection, site: this.siteSelection,
'tutor': this.tutorSelection, tutor: this.tutorSelection,
'startDate': moment(this.startDate).format("YYYY-MM-DD"), startDate: moment(this.startDate).format("YYYY-MM-DD"),
'endDate': moment(this.endDate).format("YYYY-MM-DD"), endDate: moment(this.endDate).format("YYYY-MM-DD"),
'whom': this.whom whom: this.whom
}) })
.then(response => { .then(response => {
this.chartData = response.data; this.chartData = response.data;
@ -131,7 +137,7 @@
this.$refs.errorModal.show(); this.$refs.errorModal.show();
}); });
}, },
getTutors: function () { getTutors: function() {
if (this.siteSelection != null) { if (this.siteSelection != null) {
Vue.axios Vue.axios
.get("/site/" + this.siteSelection + "/tutors") .get("/site/" + this.siteSelection + "/tutors")
@ -140,15 +146,15 @@
}); });
} }
}, },
changeStartDate: function (e) { changeStartDate: function(e) {
this.startDate = e.date; this.startDate = e.date;
}, },
changeEndDate: function (e) { changeEndDate: function(e) {
this.endDate = e.date; this.endDate = e.date;
} }
}, },
watch: { watch: {
siteSelection: function () { siteSelection: function() {
this.tutorOptions = []; this.tutorOptions = [];
this.tutorSelection = null; this.tutorSelection = null;
this.getTutors(); this.getTutors();
@ -162,7 +168,7 @@
this.siteOptions = response.data; this.siteOptions = response.data;
}) })
.catch(error => { .catch(error => {
if(error.response.status === 404){ if (error.response.status === 404) {
this.$router.push("/dberror"); this.$router.push("/dberror");
return; return;
} }
@ -171,5 +177,5 @@
this.$refs.errorModal.show(); this.$refs.errorModal.show();
}); });
} }
}; };
</script> </script>

View File

@ -67,16 +67,27 @@
</b-tabs> </b-tabs>
</b-card> </b-card>
</b-container> </b-container>
<b-container v-else>
<b-row>
<b-col>
<b-col v-else>
<v-icon name="search"></v-icon>
<p>No data found with the given search parameters.</p>
</b-col>
</b-col>
</b-row>
</b-container>
</b-container> </b-container>
</template> </template>
<script> <script>
import Vue from "vue"; import Vue from "vue";
import "vue-awesome/icons/search";
var moment = require("moment"); var moment = require("moment");
export default { export default {
name: "viewobservations", name: "viewobservations",
data: function () { data: function() {
return { return {
startDate: moment().subtract(7, "days"), startDate: moment().subtract(7, "days"),
endDate: moment(), endDate: moment(),
@ -101,7 +112,7 @@
this.siteOptions = response.data; this.siteOptions = response.data;
}) })
.catch(error => { .catch(error => {
if(error.response.status === 404){ if (error.response.status === 404) {
this.$router.push("/dberror"); this.$router.push("/dberror");
return; return;
} }
@ -109,7 +120,7 @@
}); });
}, },
methods: { methods: {
getFiltered: function () { getFiltered: function() {
Vue.axios Vue.axios
.post("/observations", { .post("/observations", {
site: this.siteSelection, site: this.siteSelection,
@ -127,13 +138,13 @@
this.$refs.errorModal.show(); this.$refs.errorModal.show();
}); });
}, },
changeStartDate: function (e) { changeStartDate: function(e) {
this.startDate = e.date; this.startDate = e.date;
}, },
changeEndDate: function (e) { changeEndDate: function(e) {
this.endDate = e.date; this.endDate = e.date;
}, },
getTutors: function () { getTutors: function() {
if (this.siteSelection != null) { if (this.siteSelection != null) {
Vue.axios Vue.axios
.get("/site/" + this.siteSelection + "/tutors") .get("/site/" + this.siteSelection + "/tutors")
@ -144,11 +155,11 @@
} }
}, },
watch: { watch: {
siteSelection: function () { siteSelection: function() {
this.tutorOptions = []; this.tutorOptions = [];
this.tutorSelection = null; this.tutorSelection = null;
this.getTutors(); this.getTutors();
} }
} }
}; };
</script> </script>