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,6 +49,10 @@
<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>
@ -57,6 +61,8 @@
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";
import "vue-awesome/icons/search";
var moment = require("moment"); var moment = require("moment");
export default { export default {
@ -116,11 +122,11 @@
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;

View File

@ -67,11 +67,22 @@
</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 {