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"
|
<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");
|
||||||
name: "stats",
|
|
||||||
components: {StatsView},
|
export default {
|
||||||
data: function () {
|
name: "stats",
|
||||||
return {
|
components: { StatsView },
|
||||||
chartData: null,
|
data: function() {
|
||||||
options: {
|
return {
|
||||||
responsive: true,
|
chartData: null,
|
||||||
maintainAspectRatio: false,
|
options: {
|
||||||
tooltips: {
|
responsive: true,
|
||||||
mode: "index",
|
maintainAspectRatio: false,
|
||||||
intersect: false
|
tooltips: {
|
||||||
},
|
mode: "index",
|
||||||
hover: {
|
intersect: false
|
||||||
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
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
methods: {
|
hover: {
|
||||||
getFilteredAverage: function () {
|
mode: "nearest",
|
||||||
Vue.axios
|
intersect: true
|
||||||
.post("/observations/chartdata", {
|
},
|
||||||
'site': this.siteSelection,
|
scales: {
|
||||||
'tutor': this.tutorSelection,
|
xAxes: [
|
||||||
'startDate': moment(this.startDate).format("YYYY-MM-DD"),
|
{
|
||||||
'endDate': moment(this.endDate).format("YYYY-MM-DD"),
|
display: true,
|
||||||
'whom': this.whom
|
scaleLabel: {
|
||||||
})
|
display: true,
|
||||||
.then(response => {
|
labelString: "Date"
|
||||||
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: {
|
yAxes: [
|
||||||
siteSelection: function () {
|
{
|
||||||
this.tutorOptions = [];
|
display: true,
|
||||||
this.tutorSelection = null;
|
scaleLabel: {
|
||||||
this.getTutors();
|
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>
|
</script>
|
||||||
|
|||||||
@ -67,88 +67,99 @@
|
|||||||
</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(),
|
||||||
dateOptions: {
|
dateOptions: {
|
||||||
format: "DD/MM/YYYY",
|
format: "DD/MM/YYYY",
|
||||||
useCurrent: false
|
useCurrent: false
|
||||||
},
|
},
|
||||||
siteSelection: null,
|
siteSelection: null,
|
||||||
siteOptions: [],
|
siteOptions: [],
|
||||||
tutorSelection: null,
|
tutorSelection: null,
|
||||||
tutorOptions: [],
|
tutorOptions: [],
|
||||||
whom: null,
|
whom: null,
|
||||||
observationData: null,
|
observationData: null,
|
||||||
errorStatus: null,
|
errorStatus: null,
|
||||||
errorMessage: 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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
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>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user