From 906bf90fd3659cbcd9341bd32b0acd8c9a2d4aba Mon Sep 17 00:00:00 2001 From: Nathan Cannon Date: Tue, 25 Sep 2018 14:21:51 +0100 Subject: [PATCH] Added date pickers to stats page. --- frontend/package-lock.json | 27 +++++++++++++++++++++++++++ frontend/package.json | 2 ++ frontend/src/main.js | 3 +++ frontend/src/views/Stats.vue | 20 +++++++++++++++++++- 4 files changed, 51 insertions(+), 1 deletion(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 73679f5..b3dd7ce 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9313,6 +9313,14 @@ "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz", "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=" }, + "moment-timezone": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.4.1.tgz", + "integrity": "sha1-gfWYw61eIs2teWtn7NjYjQ9bqgY=", + "requires": { + "moment": ">= 2.6.0" + } + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -10214,6 +10222,17 @@ "sha.js": "^2.4.8" } }, + "pc-bootstrap4-datetimepicker": { + "version": "4.17.50", + "resolved": "https://registry.npmjs.org/pc-bootstrap4-datetimepicker/-/pc-bootstrap4-datetimepicker-4.17.50.tgz", + "integrity": "sha512-76y2McdmiGWdgwPUim72/otNcDUva05B/VoyJVgIRv2dd+g4GO9gPfvvPvCH4LXyKNvtAzKHQSTSyC+4PKq/FQ==", + "requires": { + "bootstrap": "^4.0.0-beta.2", + "jquery": "^1.8.3 || ^2.0 || ^3.0", + "moment": "^2.10", + "moment-timezone": "^0.4.0" + } + }, "performance-now": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", @@ -14424,6 +14443,14 @@ "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.3.tgz", "integrity": "sha512-F4njDY6yqETynPh4iA/x3ohHuL6eNp4Jnn30VU//L7mrq3x7PwaHAoKrT++XjbKLjjNOZevTAGNyYXrdYEC90A==" }, + "vue-bootstrap-datetimepicker": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/vue-bootstrap-datetimepicker/-/vue-bootstrap-datetimepicker-5.0.1.tgz", + "integrity": "sha512-jao7sWXHgKzjbOio97u7kEfB/FJMWJ5rhsc4q8iNTOLCULfSJ5m3AZ2qZh62dNcMA4/uuTW6m6tONYIith/2XQ==", + "requires": { + "pc-bootstrap4-datetimepicker": "^4.17.50" + } + }, "vue-chartjs": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-3.4.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index d2bf4f9..86ac678 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,9 +14,11 @@ "chart.js": "^2.7.2", "font-awesome": "^4.7.0", "jquery": "^3.3.1", + "moment": "^2.22.2", "vue": "^2.5.17", "vue-awesome": "^3.1.2", "vue-axios": "^2.1.3", + "vue-bootstrap-datetimepicker": "^5.0.1", "vue-chartjs": "^3.4.0", "vue-router": "^3.0.1", "vuex": "^3.0.1" diff --git a/frontend/src/main.js b/frontend/src/main.js index 27ad172..a02ace2 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -7,12 +7,15 @@ import VueAxios from "vue-axios"; import BootstrapVue from "bootstrap-vue"; import "bootstrap/dist/css/bootstrap.css"; import "bootstrap-vue/dist/bootstrap-vue.css"; +import datePicker from "vue-bootstrap-datetimepicker"; +import "pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css"; import Icon from "vue-awesome/components/Icon"; Vue.config.productionTip = false; axios.defaults.baseUrl = "http://localhost:8090/api"; Vue.use(VueAxios, axios); Vue.use(BootstrapVue); +Vue.use(datePicker); Vue.component("v-icon", Icon); new Vue({ diff --git a/frontend/src/views/Stats.vue b/frontend/src/views/Stats.vue index 164b8de..5538f05 100644 --- a/frontend/src/views/Stats.vue +++ b/frontend/src/views/Stats.vue @@ -11,6 +11,18 @@ Dismiss + + + + + + + + + + + + @@ -26,7 +38,13 @@ export default { chartData: null, options: null, errorStatus: null, - errorMessage: null + errorMessage: null, + startDate: new Date(), + endDate: new Date(), + dateOptions: { + format: "DD/MM/YYYY", + useCurrent: false + } }; }, methods: {