User now prompted when no data returned to view, rather than just showing nothing.
This commit is contained in:
parent
bd2aa557b4
commit
9925a900c6
@ -49,127 +49,133 @@
|
||||
<stats-view v-bind:chartData="chartData"
|
||||
style="position: relative; height:80vh" :options="options"/>
|
||||
</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-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import StatsView from "../components/StatsView";
|
||||
import "vue-awesome/icons/exclamation-circle";
|
||||
var moment = require("moment");
|
||||
import Vue from "vue";
|
||||
import StatsView from "../components/StatsView";
|
||||
import "vue-awesome/icons/exclamation-circle";
|
||||
import "vue-awesome/icons/search";
|
||||
|
||||
export default {
|
||||
name: "stats",
|
||||
components: {StatsView},
|
||||
data: function () {
|
||||
return {
|
||||
chartData: null,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false
|
||||
},
|
||||
hover: {
|
||||
mode: "nearest",
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Date"
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Average Score"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
errorStatus: null,
|
||||
errorMessage: null,
|
||||
startDate: moment().subtract(7, "days"),
|
||||
endDate: moment(),
|
||||
dateOptions: {
|
||||
format: "DD/MM/YYYY",
|
||||
useCurrent: false
|
||||
},
|
||||
siteSelection: null,
|
||||
siteOptions: [],
|
||||
tutorSelection: null,
|
||||
tutorOptions: [],
|
||||
whom: null
|
||||
};
|
||||
var moment = require("moment");
|
||||
|
||||
export default {
|
||||
name: "stats",
|
||||
components: { StatsView },
|
||||
data: function() {
|
||||
return {
|
||||
chartData: null,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false
|
||||
},
|
||||
methods: {
|
||||
getFilteredAverage: function () {
|
||||
Vue.axios
|
||||
.post("/observations/chartdata", {
|
||||
'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();
|
||||
});
|
||||
},
|
||||
getTutors: function () {
|
||||
if (this.siteSelection != null) {
|
||||
Vue.axios
|
||||
.get("/site/" + this.siteSelection + "/tutors")
|
||||
.then(response => {
|
||||
this.tutorOptions = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
changeStartDate: function (e) {
|
||||
this.startDate = e.date;
|
||||
},
|
||||
changeEndDate: function (e) {
|
||||
this.endDate = e.date;
|
||||
hover: {
|
||||
mode: "nearest",
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Date"
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
siteSelection: function () {
|
||||
this.tutorOptions = [];
|
||||
this.tutorSelection = null;
|
||||
this.getTutors();
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Average Score"
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getFilteredAverage();
|
||||
Vue.axios
|
||||
.get("/site")
|
||||
.then(response => {
|
||||
this.siteOptions = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
if(error.response.status === 404){
|
||||
this.$router.push("/dberror");
|
||||
return;
|
||||
}
|
||||
this.errorStatus = error.response.status;
|
||||
this.errorMessage = error.response.data;
|
||||
this.$refs.errorModal.show();
|
||||
});
|
||||
]
|
||||
}
|
||||
},
|
||||
errorStatus: null,
|
||||
errorMessage: null,
|
||||
startDate: moment().subtract(7, "days"),
|
||||
endDate: moment(),
|
||||
dateOptions: {
|
||||
format: "DD/MM/YYYY",
|
||||
useCurrent: false
|
||||
},
|
||||
siteSelection: null,
|
||||
siteOptions: [],
|
||||
tutorSelection: null,
|
||||
tutorOptions: [],
|
||||
whom: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getFilteredAverage: function() {
|
||||
Vue.axios
|
||||
.post("/observations/chartdata", {
|
||||
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();
|
||||
});
|
||||
},
|
||||
getTutors: function() {
|
||||
if (this.siteSelection != null) {
|
||||
Vue.axios
|
||||
.get("/site/" + this.siteSelection + "/tutors")
|
||||
.then(response => {
|
||||
this.tutorOptions = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
changeStartDate: function(e) {
|
||||
this.startDate = e.date;
|
||||
},
|
||||
changeEndDate: function(e) {
|
||||
this.endDate = e.date;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
siteSelection: function() {
|
||||
this.tutorOptions = [];
|
||||
this.tutorSelection = null;
|
||||
this.getTutors();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getFilteredAverage();
|
||||
Vue.axios
|
||||
.get("/site")
|
||||
.then(response => {
|
||||
this.siteOptions = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.response.status === 404) {
|
||||
this.$router.push("/dberror");
|
||||
return;
|
||||
}
|
||||
this.errorStatus = error.response.status;
|
||||
this.errorMessage = error.response.data;
|
||||
this.$refs.errorModal.show();
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -67,88 +67,99 @@
|
||||
</b-tabs>
|
||||
</b-card>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import Vue from "vue";
|
||||
import "vue-awesome/icons/search";
|
||||
|
||||
var moment = require("moment");
|
||||
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: [],
|
||||
whom: null,
|
||||
observationData: null,
|
||||
errorStatus: null,
|
||||
errorMessage: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
Vue.axios
|
||||
.get("/site")
|
||||
.then(response => {
|
||||
this.siteOptions = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
if(error.response.status === 404){
|
||||
this.$router.push("/dberror");
|
||||
return;
|
||||
}
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getFiltered: function () {
|
||||
Vue.axios
|
||||
.post("/observations", {
|
||||
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.observationData = 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;
|
||||
},
|
||||
getTutors: function () {
|
||||
if (this.siteSelection != null) {
|
||||
Vue.axios
|
||||
.get("/site/" + this.siteSelection + "/tutors")
|
||||
.then(response => {
|
||||
this.tutorOptions = response.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
siteSelection: function () {
|
||||
this.tutorOptions = [];
|
||||
this.tutorSelection = null;
|
||||
this.getTutors();
|
||||
}
|
||||
}
|
||||
var moment = require("moment");
|
||||
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: [],
|
||||
whom: null,
|
||||
observationData: null,
|
||||
errorStatus: null,
|
||||
errorMessage: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
Vue.axios
|
||||
.get("/site")
|
||||
.then(response => {
|
||||
this.siteOptions = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.response.status === 404) {
|
||||
this.$router.push("/dberror");
|
||||
return;
|
||||
}
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getFiltered: function() {
|
||||
Vue.axios
|
||||
.post("/observations", {
|
||||
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.observationData = 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;
|
||||
},
|
||||
getTutors: function() {
|
||||
if (this.siteSelection != null) {
|
||||
Vue.axios
|
||||
.get("/site/" + this.siteSelection + "/tutors")
|
||||
.then(response => {
|
||||
this.tutorOptions = response.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
siteSelection: function() {
|
||||
this.tutorOptions = [];
|
||||
this.tutorSelection = null;
|
||||
this.getTutors();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user