Added date pickers to stats page.

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",

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"

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({

frontend/src/views/Stats.vue

@@ -11,6 +11,18 @@
           <v-icon name="exclamation-circle" /> Dismiss</button>
       </div>
     </b-modal>
+    <b-row>
+      <b-col>
+        <b-form-group label="From">
+          <date-picker v-model="startDate" :config="dateOptions" />
+        </b-form-group>
+      </b-col>
+      <b-col>
+        <b-form-group label="To">
+          <date-picker v-model="endDate" :config="dateOptions" />
+        </b-form-group>
+      </b-col>
+    </b-row>
     <stats-view v-if="chartData != null && chartData != {}" :data="chartData" :options="options" />
   </b-container>
 </template>
@@ -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: {