User now prompted when no data returned to view, rather than just showing nothing.
This commit is contained in:
parent
bd2aa557b4
commit
9925a900c6
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user