sasdasda

app/Http/Controllers/TestResultController.php

@@ -10,8 +10,11 @@ use App\InputValue;
 use App\Input;
 use App\Gallery;
 use App\Uploadable;
+use App\MedicalCenter;
 use Intervention\Image\ImageManagerStatic as Image;
 use Illuminate\Support\Facades\Storage;
+use App\TestType;
+use App\User;
 
 class TestResultController extends Controller
 {
@@ -185,10 +188,10 @@ class TestResultController extends Controller
           $input = $value->input;
           if ($input->type == 'Checkbox' || $input->type == 'Select') {
               $input_options = InputValue::where('test_result_id', $TestResult->id)->where('input_id', $input->id)->get()->pluck('option_id')->toArray();
-              $TestResult[$input->id] = $input_options;
+              $TestResult[$input->name] = $input_options;
           }
           else {
-              $TestResult[$input->id] = $value->value;
+              $TestResult[$input->name] = $value->value;
           }
         }
         if (count($TestResult->TitleImage)) {
@@ -331,4 +334,14 @@ class TestResultController extends Controller
         return \MessageResponse::success(trans('messages.success'), null, $TestResult);
     }
 
+    public function listFilterItems()
+    {
+        $MedicalCenter = MedicalCenter::select('name', 'id')->get()->toArray();
+        $TestType = TestType::select('name', 'id')->get()->toArray();
+        return \MessageResponse::data([
+            'MedicalCenters' => $MedicalCenter, 
+            'TestTypes' => $TestType
+            ]);
+    }
+
 }

public/js/vue/chunks/1.js

@@ -1,15 +1,99 @@
 (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],{
 
-/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=script&lang=js&":
+/***/ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Chart.vue?vue&type=script&lang=js&":
 /*!**************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=script&lang=js& ***!
+  !*** ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/vue/views/Statistics/Chart.vue?vue&type=script&lang=js& ***!
   \**************************************************************************************************************************************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _LineChart_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./LineChart.js */ "./resources/js/vue/views/Statistics/LineChart.js");
+/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "./node_modules/@babel/runtime/regenerator/index.js");
+/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _plugins_chart_BarChart_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @/plugins/chart/BarChart.js */ "./resources/js/vue/plugins/chart/BarChart.js");
+/* harmony import */ var _plugins_chart_PieChart_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/plugins/chart/PieChart.js */ "./resources/js/vue/plugins/chart/PieChart.js");
+/* harmony import */ var _services__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/services */ "./resources/js/vue/services/index.js");
+/* harmony import */ var _config_urls__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/config/urls */ "./resources/js/vue/config/urls.js");
+
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 //
 //
 //
@@ -18,51 +102,170 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 
+
+
+
 /* harmony default export */ __webpack_exports__["default"] = ({
   components: {
-    LineChart: _LineChart_js__WEBPACK_IMPORTED_MODULE_0__["default"]
+    BarChart: _plugins_chart_BarChart_js__WEBPACK_IMPORTED_MODULE_1__["default"],
+    PieChart: _plugins_chart_PieChart_js__WEBPACK_IMPORTED_MODULE_2__["default"]
   },
   data: function data() {
     return {
-      datacollection: null
+      datacollection: null,
+      fromMenu: '',
+      upToMenu: '',
+      verify: ['Verified', 'NotVerified'],
+      result: ['Accept', 'Failed'],
+      type: ['BarChart', 'PieChart'],
+      users: [],
+      medicalCenters: [],
+      testTypes: [],
+      form: {
+        medicalCenter: null,
+        user: null,
+        testType: null,
+        result: null,
+        verify: null,
+        type: 'PieChart',
+        fromPicker: '',
+        upToPicker: ''
+      },
+      chart: false
     };
   },
-  mounted: function mounted() {
+  created: function created() {
-    this.fillData();
+    this.load();
   },
   methods: {
-    fillData: function fillData() {
+    fillData: function fillData(options) {
       this.datacollection = {
-        labels: [this.getRandomInt(), this.getRandomInt()],
+        labels: options.labels,
+        // labels: [this.getRandomInt(), this.getRandomInt()],
         datasets: [{
-          label: 'Data One',
+          label: "Data One",
-          backgroundColor: '#f87979',
+          backgroundColor: ["#f87979", "#ccc"],
-          data: [this.getRandomInt(), this.getRandomInt()]
+          data: options.data // data: [this.getRandomInt(), this.getRandomInt()],
-        }, {
+
-          label: 'Data One',
-          backgroundColor: '#f87979',
-          data: [this.getRandomInt(), this.getRandomInt()]
         }]
       };
     },
-    getRandomInt: function getRandomInt() {
+    load: function () {
-      return Math.floor(Math.random() * (50 - 5 + 1)) + 5;
+      var _load = _asyncToGenerator(
+      /*#__PURE__*/
+      _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee() {
+        var result;
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return _services__WEBPACK_IMPORTED_MODULE_3__["ApiService"].get(_config_urls__WEBPACK_IMPORTED_MODULE_4__["urls"].listFilterItemsTestResult);
+
+              case 2:
+                result = _context.sent;
+
+                if (result && result.status == 200) {
+                  this.medicalCenters = result.data.data.MedicalCenters;
+                  this.testTypes = result.data.data.TestTypes;
                 }
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function load() {
+        return _load.apply(this, arguments);
+      }
+
+      return load;
+    }(),
+    fillUsers: function () {
+      var _fillUsers = _asyncToGenerator(
+      /*#__PURE__*/
+      _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee2() {
+        var result;
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return _services__WEBPACK_IMPORTED_MODULE_3__["ApiService"].get(_config_urls__WEBPACK_IMPORTED_MODULE_4__["urls"].listOpertorMedicalCenter(this.form.medicalCenter));
+
+              case 2:
+                result = _context2.sent;
+
+                if (result && result.status == 200) {
+                  this.users = result.data.data.users;
+                }
+
+              case 4:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function fillUsers() {
+        return _fillUsers.apply(this, arguments);
+      }
+
+      return fillUsers;
+    }(),
+    submitForm: function () {
+      var _submitForm = _asyncToGenerator(
+      /*#__PURE__*/
+      _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee3() {
+        var result;
+        return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return _services__WEBPACK_IMPORTED_MODULE_3__["ApiService"].post(_config_urls__WEBPACK_IMPORTED_MODULE_4__["urls"].statistics, this.form);
+
+              case 2:
+                result = _context3.sent;
+
+                if (result && result.status == 200) {
+                  this.fillData(result.data.data);
+                  this.chart = true;
+                }
+
+              case 4:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function submitForm() {
+        return _submitForm.apply(this, arguments);
+      }
+
+      return submitForm;
+    }()
   }
 });
 
 /***/ }),
 
-/***/ "./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=style&index=0&lang=css&":
+/***/ "./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Chart.vue?vue&type=style&index=0&lang=css&":
 /*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=style&index=0&lang=css& ***!
+  !*** ./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/vue/views/Statistics/Chart.vue?vue&type=style&index=0&lang=css& ***!
   \*********************************************************************************************************************************************************************************************************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
 // Module
-exports.push([module.i, "\n.small {\n  max-width: 600px;\n  margin:  150px auto;\n}\n", ""]);
+exports.push([module.i, "\n.small {\n  max-width: 600px;\n  margin: 150px auto;\n}\n.v-btn--floating {\n    padding: 0!important;\n}\n.theme--light.v-btn {\n    color: rgba(0,0,0,.87)!important;\n}\n.v-btn--floating, .v-btn--icon:before {\n    border-radius: 50%!important;\n}\n", ""]);
 
 
 
@@ -355,15 +558,15 @@ webpackContext.id = "./node_modules/moment/locale sync recursive ^\\.\\/.*$";
 
 /***/ }),
 
-/***/ "./node_modules/style-loader/index.js!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=style&index=0&lang=css&":
+/***/ "./node_modules/style-loader/index.js!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Chart.vue?vue&type=style&index=0&lang=css&":
 /*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=style&index=0&lang=css& ***!
+  !*** ./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/vue/views/Statistics/Chart.vue?vue&type=style&index=0&lang=css& ***!
   \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 
-var content = __webpack_require__(/*! !../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src??ref--5-2!../../../../../node_modules/vue-loader/lib??vue-loader-options!./Cahrt.vue?vue&type=style&index=0&lang=css& */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=style&index=0&lang=css&");
+var content = __webpack_require__(/*! !../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src??ref--5-2!../../../../../node_modules/vue-loader/lib??vue-loader-options!./Chart.vue?vue&type=style&index=0&lang=css& */ "./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Chart.vue?vue&type=style&index=0&lang=css&");
 
 if(typeof content === 'string') content = [[module.i, content, '']];
 
@@ -385,9 +588,9 @@ if(false) {}
 
 /***/ }),
 
-/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=template&id=e8fa5870&":
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Chart.vue?vue&type=template&id=1f4121cc&":
 /*!******************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=template&id=e8fa5870& ***!
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/vue/views/Statistics/Chart.vue?vue&type=template&id=1f4121cc& ***!
   \******************************************************************************************************************************************************************************************************************/
 /*! exports provided: render, staticRenderFns */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -402,23 +605,370 @@ var render = function() {
   var _c = _vm._self._c || _h
   return _c(
     "div",
-    { staticClass: "small" },
     [
-      _c("line-chart", { attrs: { "chart-data": _vm.datacollection } }),
-      _vm._v(" "),
       _c(
-        "button",
+        "v-form",
+        { ref: "form" },
+        [
+          _c(
+            "v-container",
+            { attrs: { "grid-list-xs": "" } },
+            [
+              _c(
+                "material-card",
+                { attrs: { color: "black", title: "Search Result" } },
+                [
+                  _c(
+                    "v-layout",
                     {
-          on: {
+                      staticClass: "px-5 my-3",
-            click: function($event) {
+                      attrs: {
-              return _vm.fillData()
+                        "align-center": "",
-            }
+                        "justify-center": "",
+                        wrap: ""
                       }
                     },
-        [_vm._v("Randomize")]
+                    [
+                      _c(
+                        "v-flex",
+                        { attrs: { xs12: "", sm4: "", md4: "" } },
+                        [
+                          _c("v-autocomplete", {
+                            staticClass: "pa-2",
+                            attrs: {
+                              items: _vm.medicalCenters,
+                              "item-text": "name",
+                              "item-value": "id",
+                              label: "Hospital",
+                              color: "black"
+                            },
+                            on: { change: _vm.fillUsers },
+                            model: {
+                              value: _vm.form.medicalCenter,
+                              callback: function($$v) {
+                                _vm.$set(_vm.form, "medicalCenter", $$v)
+                              },
+                              expression: "form.medicalCenter"
+                            }
+                          })
+                        ],
+                        1
+                      ),
+                      _vm._v(" "),
+                      _c(
+                        "v-flex",
+                        { attrs: { xs12: "", sm4: "", md4: "" } },
+                        [
+                          _c("v-autocomplete", {
+                            staticClass: "pa-2",
+                            attrs: {
+                              items: _vm.users,
+                              "item-text": "name",
+                              "item-value": "id",
+                              label: "User",
+                              color: "black"
+                            },
+                            model: {
+                              value: _vm.form.user,
+                              callback: function($$v) {
+                                _vm.$set(_vm.form, "user", $$v)
+                              },
+                              expression: "form.user"
+                            }
+                          })
+                        ],
+                        1
+                      ),
+                      _vm._v(" "),
+                      _c(
+                        "v-flex",
+                        { attrs: { xs12: "", sm4: "", md4: "" } },
+                        [
+                          _c("v-autocomplete", {
+                            staticClass: "pa-2",
+                            attrs: {
+                              items: _vm.testTypes,
+                              "item-text": "name",
+                              "item-value": "id",
+                              label: "TestType",
+                              color: "black"
+                            },
+                            model: {
+                              value: _vm.form.testType,
+                              callback: function($$v) {
+                                _vm.$set(_vm.form, "testType", $$v)
+                              },
+                              expression: "form.testType"
+                            }
+                          })
+                        ],
+                        1
+                      ),
+                      _vm._v(" "),
+                      _c(
+                        "v-flex",
+                        { attrs: { xs12: "", sm4: "", md4: "" } },
+                        [
+                          _c("v-autocomplete", {
+                            staticClass: "pa-2",
+                            attrs: {
+                              items: _vm.result,
+                              label: "Result",
+                              color: "black"
+                            },
+                            model: {
+                              value: _vm.form.result,
+                              callback: function($$v) {
+                                _vm.$set(_vm.form, "result", $$v)
+                              },
+                              expression: "form.result"
+                            }
+                          })
+                        ],
+                        1
+                      ),
+                      _vm._v(" "),
+                      _c(
+                        "v-flex",
+                        { attrs: { xs12: "", sm4: "", md4: "" } },
+                        [
+                          _c("v-autocomplete", {
+                            staticClass: "pa-2",
+                            attrs: {
+                              items: _vm.verify,
+                              label: "Verify",
+                              color: "black"
+                            },
+                            model: {
+                              value: _vm.form.verify,
+                              callback: function($$v) {
+                                _vm.$set(_vm.form, "verify", $$v)
+                              },
+                              expression: "form.verify"
+                            }
+                          })
+                        ],
+                        1
+                      ),
+                      _vm._v(" "),
+                      _c(
+                        "v-flex",
+                        { attrs: { xs12: "", sm4: "", md4: "" } },
+                        [
+                          _c("v-autocomplete", {
+                            staticClass: "pa-2",
+                            attrs: {
+                              items: _vm.type,
+                              label: "Type",
+                              color: "black"
+                            },
+                            model: {
+                              value: _vm.form.type,
+                              callback: function($$v) {
+                                _vm.$set(_vm.form, "type", $$v)
+                              },
+                              expression: "form.type"
+                            }
+                          })
+                        ],
+                        1
+                      ),
+                      _vm._v(" "),
+                      _c(
+                        "v-flex",
+                        { attrs: { xs12: "", sm6: "", md5: "" } },
+                        [
+                          _c(
+                            "v-menu",
+                            {
+                              attrs: {
+                                lazy: "",
+                                "close-on-content-click": true,
+                                transition: "v-scale-transition",
+                                "offset-y": ""
+                              },
+                              model: {
+                                value: _vm.fromMenu,
+                                callback: function($$v) {
+                                  _vm.fromMenu = $$v
+                                },
+                                expression: "fromMenu"
+                              }
+                            },
+                            [
+                              _c("v-text-field", {
+                                attrs: {
+                                  slot: "activator",
+                                  required: "",
+                                  label: "FromDate"
+                                },
+                                slot: "activator",
+                                model: {
+                                  value: _vm.form.fromPicker,
+                                  callback: function($$v) {
+                                    _vm.$set(_vm.form, "fromPicker", $$v)
+                                  },
+                                  expression: "form.fromPicker"
+                                }
+                              }),
+                              _vm._v(" "),
+                              _c("v-date-picker", {
+                                attrs: {
+                                  "no-title": "",
+                                  "date-format": function(date) {
+                                    return new Date(date).toDateString()
+                                  }
+                                },
+                                model: {
+                                  value: _vm.form.fromPicker,
+                                  callback: function($$v) {
+                                    _vm.$set(_vm.form, "fromPicker", $$v)
+                                  },
+                                  expression: "form.fromPicker"
+                                }
+                              })
+                            ],
+                            1
                           )
                         ],
                         1
+                      ),
+                      _vm._v(" "),
+                      _c(
+                        "v-flex",
+                        { attrs: { xs12: "", sm6: "", md5: "" } },
+                        [
+                          _c(
+                            "v-menu",
+                            {
+                              attrs: {
+                                lazy: "",
+                                "close-on-content-click": true,
+                                transition: "v-scale-transition",
+                                "offset-y": ""
+                              },
+                              model: {
+                                value: _vm.upToMenu,
+                                callback: function($$v) {
+                                  _vm.upToMenu = $$v
+                                },
+                                expression: "upToMenu"
+                              }
+                            },
+                            [
+                              _c("v-text-field", {
+                                attrs: {
+                                  slot: "activator",
+                                  required: "",
+                                  label: "UpToDate"
+                                },
+                                slot: "activator",
+                                model: {
+                                  value: _vm.form.upToPicker,
+                                  callback: function($$v) {
+                                    _vm.$set(_vm.form, "upToPicker", $$v)
+                                  },
+                                  expression: "form.upToPicker"
+                                }
+                              }),
+                              _vm._v(" "),
+                              _c("v-date-picker", {
+                                attrs: {
+                                  "no-title": "",
+                                  "date-format": function(date) {
+                                    return new Date(date).toDateString()
+                                  }
+                                },
+                                model: {
+                                  value: _vm.form.upToPicker,
+                                  callback: function($$v) {
+                                    _vm.$set(_vm.form, "upToPicker", $$v)
+                                  },
+                                  expression: "form.upToPicker"
+                                }
+                              })
+                            ],
+                            1
+                          )
+                        ],
+                        1
+                      ),
+                      _vm._v(" "),
+                      _c(
+                        "v-flex",
+                        {
+                          staticClass:
+                            "text-xs-center text-sm-center text-md-center",
+                          attrs: { xs12: "", md2: "", sm2: "" }
+                        },
+                        [
+                          _c(
+                            "v-btn",
+                            {
+                              staticClass:
+                                "WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black",
+                              staticStyle: { padding: "10px 60px" },
+                              on: { click: _vm.submitForm }
+                            },
+                            [
+                              _c(
+                                "v-icon",
+                                { staticClass: "black--text mr-2 caption" },
+                                [_vm._v("fas fa-chevron-right")]
+                              ),
+                              _vm._v(" "),
+                              _c("span", { staticClass: "black--text" }, [
+                                _vm._v("GO")
+                              ])
+                            ],
+                            1
+                          )
+                        ],
+                        1
+                      )
+                    ],
+                    1
+                  ),
+                  _vm._v(" "),
+                  !_vm.$route.params.testResult
+                    ? _c(
+                        "v-layout",
+                        {
+                          staticClass: "px-5 my-3",
+                          attrs: { row: "", wrap: "" }
+                        },
+                        [_c("v-divider")],
+                        1
+                      )
+                    : _vm._e()
+                ],
+                1
+              )
+            ],
+            1
+          )
+        ],
+        1
+      ),
+      _vm._v(" "),
+      _vm.chart
+        ? _c(
+            "div",
+            { staticClass: "small" },
+            [
+              _vm.form.type == "PieChart"
+                ? _c("pie-chart", {
+                    attrs: { "chart-data": _vm.datacollection }
+                  })
+                : _c("bar-chart", {
+                    attrs: { "chart-data": _vm.datacollection }
+                  })
+            ],
+            1
+          )
+        : _vm._e()
+    ],
+    1
   )
 }
 var staticRenderFns = []
@@ -428,18 +978,68 @@ render._withStripped = true
 
 /***/ }),
 
-/***/ "./resources/js/vue/views/Statistics/Cahrt.vue":
+/***/ "./resources/js/vue/plugins/chart/BarChart.js":
+/*!****************************************************!*\
+  !*** ./resources/js/vue/plugins/chart/BarChart.js ***!
+  \****************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var vue_chartjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue-chartjs */ "./node_modules/vue-chartjs/es/index.js");
+
+var reactiveProp = vue_chartjs__WEBPACK_IMPORTED_MODULE_0__["mixins"].reactiveProp;
+/* harmony default export */ __webpack_exports__["default"] = ({
+  extends: vue_chartjs__WEBPACK_IMPORTED_MODULE_0__["Bar"],
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted: function mounted() {
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
+    this.renderChart(this.chartData, this.options);
+  }
+});
+
+/***/ }),
+
+/***/ "./resources/js/vue/plugins/chart/PieChart.js":
+/*!****************************************************!*\
+  !*** ./resources/js/vue/plugins/chart/PieChart.js ***!
+  \****************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var vue_chartjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue-chartjs */ "./node_modules/vue-chartjs/es/index.js");
+
+var reactiveProp = vue_chartjs__WEBPACK_IMPORTED_MODULE_0__["mixins"].reactiveProp;
+/* harmony default export */ __webpack_exports__["default"] = ({
+  extends: vue_chartjs__WEBPACK_IMPORTED_MODULE_0__["Pie"],
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted: function mounted() {
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
+    this.renderChart(this.chartData, this.options);
+  }
+});
+
+/***/ }),
+
+/***/ "./resources/js/vue/views/Statistics/Chart.vue":
 /*!*****************************************************!*\
-  !*** ./resources/js/vue/views/Statistics/Cahrt.vue ***!
+  !*** ./resources/js/vue/views/Statistics/Chart.vue ***!
   \*****************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _Cahrt_vue_vue_type_template_id_e8fa5870___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Cahrt.vue?vue&type=template&id=e8fa5870& */ "./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=template&id=e8fa5870&");
+/* harmony import */ var _Chart_vue_vue_type_template_id_1f4121cc___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Chart.vue?vue&type=template&id=1f4121cc& */ "./resources/js/vue/views/Statistics/Chart.vue?vue&type=template&id=1f4121cc&");
-/* harmony import */ var _Cahrt_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Cahrt.vue?vue&type=script&lang=js& */ "./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=script&lang=js&");
+/* harmony import */ var _Chart_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Chart.vue?vue&type=script&lang=js& */ "./resources/js/vue/views/Statistics/Chart.vue?vue&type=script&lang=js&");
-/* empty/unused harmony star reexport *//* harmony import */ var _Cahrt_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Cahrt.vue?vue&type=style&index=0&lang=css& */ "./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=style&index=0&lang=css&");
+/* empty/unused harmony star reexport *//* harmony import */ var _Chart_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Chart.vue?vue&type=style&index=0&lang=css& */ "./resources/js/vue/views/Statistics/Chart.vue?vue&type=style&index=0&lang=css&");
 /* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
 
 
@@ -450,9 +1050,9 @@ __webpack_require__.r(__webpack_exports__);
 /* normalize component */
 
 var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__["default"])(
-  _Cahrt_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _Chart_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
-  _Cahrt_vue_vue_type_template_id_e8fa5870___WEBPACK_IMPORTED_MODULE_0__["render"],
+  _Chart_vue_vue_type_template_id_1f4121cc___WEBPACK_IMPORTED_MODULE_0__["render"],
-  _Cahrt_vue_vue_type_template_id_e8fa5870___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
+  _Chart_vue_vue_type_template_id_1f4121cc___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
   false,
   null,
   null,
@@ -462,82 +1062,57 @@ var component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_
 
 /* hot reload */
 if (false) { var api; }
-component.options.__file = "resources/js/vue/views/Statistics/Cahrt.vue"
+component.options.__file = "resources/js/vue/views/Statistics/Chart.vue"
 /* harmony default export */ __webpack_exports__["default"] = (component.exports);
 
 /***/ }),
 
-/***/ "./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=script&lang=js&":
+/***/ "./resources/js/vue/views/Statistics/Chart.vue?vue&type=script&lang=js&":
 /*!******************************************************************************!*\
-  !*** ./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=script&lang=js& ***!
+  !*** ./resources/js/vue/views/Statistics/Chart.vue?vue&type=script&lang=js& ***!
   \******************************************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../node_modules/babel-loader/lib??ref--4-0!../../../../../node_modules/vue-loader/lib??vue-loader-options!./Cahrt.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=script&lang=js&");
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../node_modules/babel-loader/lib??ref--4-0!../../../../../node_modules/vue-loader/lib??vue-loader-options!./Chart.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Chart.vue?vue&type=script&lang=js&");
-/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_babel_loader_lib_index_js_ref_4_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
 
 /***/ }),
 
-/***/ "./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=style&index=0&lang=css&":
+/***/ "./resources/js/vue/views/Statistics/Chart.vue?vue&type=style&index=0&lang=css&":
 /*!**************************************************************************************!*\
-  !*** ./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=style&index=0&lang=css& ***!
+  !*** ./resources/js/vue/views/Statistics/Chart.vue?vue&type=style&index=0&lang=css& ***!
   \**************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../node_modules/style-loader!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src??ref--5-2!../../../../../node_modules/vue-loader/lib??vue-loader-options!./Cahrt.vue?vue&type=style&index=0&lang=css& */ "./node_modules/style-loader/index.js!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=style&index=0&lang=css&");
+/* harmony import */ var _node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../node_modules/style-loader!../../../../../node_modules/css-loader/dist/cjs.js??ref--5-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src??ref--5-2!../../../../../node_modules/vue-loader/lib??vue-loader-options!./Chart.vue?vue&type=style&index=0&lang=css& */ "./node_modules/style-loader/index.js!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Chart.vue?vue&type=style&index=0&lang=css&");
-/* harmony import */ var _node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__);
-/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
+/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));
- /* harmony default export */ __webpack_exports__["default"] = (_node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); 
+ /* harmony default export */ __webpack_exports__["default"] = (_node_modules_style_loader_index_js_node_modules_css_loader_dist_cjs_js_ref_5_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_5_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); 
 
 /***/ }),
 
-/***/ "./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=template&id=e8fa5870&":
+/***/ "./resources/js/vue/views/Statistics/Chart.vue?vue&type=template&id=1f4121cc&":
 /*!************************************************************************************!*\
-  !*** ./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=template&id=e8fa5870& ***!
+  !*** ./resources/js/vue/views/Statistics/Chart.vue?vue&type=template&id=1f4121cc& ***!
   \************************************************************************************/
 /*! exports provided: render, staticRenderFns */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_template_id_e8fa5870___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../node_modules/vue-loader/lib??vue-loader-options!./Cahrt.vue?vue&type=template&id=e8fa5870& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Cahrt.vue?vue&type=template&id=e8fa5870&");
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_template_id_1f4121cc___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../node_modules/vue-loader/lib??vue-loader-options!./Chart.vue?vue&type=template&id=1f4121cc& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/vue/views/Statistics/Chart.vue?vue&type=template&id=1f4121cc&");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_template_id_e8fa5870___WEBPACK_IMPORTED_MODULE_0__["render"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_template_id_1f4121cc___WEBPACK_IMPORTED_MODULE_0__["render"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Cahrt_vue_vue_type_template_id_e8fa5870___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Chart_vue_vue_type_template_id_1f4121cc___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
 
 
 
-/***/ }),
-
-/***/ "./resources/js/vue/views/Statistics/LineChart.js":
-/*!********************************************************!*\
-  !*** ./resources/js/vue/views/Statistics/LineChart.js ***!
-  \********************************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var vue_chartjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue-chartjs */ "./node_modules/vue-chartjs/es/index.js");
-
-var reactiveProp = vue_chartjs__WEBPACK_IMPORTED_MODULE_0__["mixins"].reactiveProp;
-/* harmony default export */ __webpack_exports__["default"] = ({
-  extends: vue_chartjs__WEBPACK_IMPORTED_MODULE_0__["Line"],
-  mixins: [reactiveProp],
-  props: ['options'],
-  mounted: function mounted() {
-    // this.chartData is created in the mixin.
-    // If you want to pass options please create a local options object
-    this.renderChart(this.chartData, this.options);
-  }
-});
-
 /***/ })
 
 }]);

public/js/vue/chunks/19.js

@@ -115,7 +115,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 //
 //
 //
-//
 
 
 
@@ -126,6 +125,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         sortable: false,
         text: "AutoClaveId",
         value: "name"
+      }, {
+        sortable: false,
+        text: "Test Type",
+        value: "TestType"
       }, {
         sortable: false,
         text: "Hospital",
@@ -481,6 +484,12 @@ var render = function() {
                                   [_vm._v(_vm._s(item.autoclave_id))]
                                 ),
                                 _vm._v(" "),
+                                _c(
+                                  "td",
+                                  { staticClass: "title font-weight-light" },
+                                  [_vm._v(_vm._s(item.test_type.name))]
+                                ),
+                                _vm._v(" "),
                                 _c(
                                   "td",
                                   { staticClass: "title font-weight-light" },

public/js/vue/chunks/2.js

@@ -219,7 +219,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 exports = module.exports = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
 // Module
-exports.push([module.i, "\n.WM-ActionButton[data-v-1346f0a2] {\r\n  padding: 8px 22px;\n}\r\n", ""]);
+exports.push([module.i, "\n.WM-ActionButton[data-v-1346f0a2] {\n  padding: 8px 22px;\n}\n", ""]);
 
 
 

public/js/vue/chunks/3.js

@@ -210,7 +210,7 @@ __webpack_require__.r(__webpack_exports__);
 
 exports = module.exports = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
 // Module
-exports.push([module.i, "\n.WM-Border[data-v-7eb32e4a] {\r\n    border: 1px solid;\n}\n.WM-Border-Black[data-v-7eb32e4a] {\r\n  border-color: #2f353b !important;\n}\n.WM-Border-Gray[data-v-7eb32e4a] {\r\n  border-color: #aaa !important;\n}\n.WM-Color-LightGrey[data-v-7eb32e4a] {\r\n  background-color : #F5F5F5;\n}\n.WM-Relative[data-v-7eb32e4a] {\r\n    position: relative;\n}\n.v-btn--top.v-btn--absolute.v-btn--small[data-v-7eb32e4a] {\r\n    top: -25px !important;\n}\r\n", ""]);
+exports.push([module.i, "\n.WM-Border[data-v-7eb32e4a] {\n    border: 1px solid;\n}\n.WM-Border-Black[data-v-7eb32e4a] {\n  border-color: #2f353b !important;\n}\n.WM-Border-Gray[data-v-7eb32e4a] {\n  border-color: #aaa !important;\n}\n.WM-Color-LightGrey[data-v-7eb32e4a] {\n  background-color : #F5F5F5;\n}\n.WM-Relative[data-v-7eb32e4a] {\n    position: relative;\n}\n.v-btn--top.v-btn--absolute.v-btn--small[data-v-7eb32e4a] {\n    top: -25px !important;\n}\n", ""]);
 
 
 

public/js/vue/chunks/5.js

@@ -562,7 +562,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 exports = module.exports = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
 // Module
-exports.push([module.i, "\n.WM-Border-Gray[data-v-5cc5a650] {\r\n  border-color: #aaa !important;\n}\n.WM-Color-LightGrey[data-v-5cc5a650] {\r\n  background-color: #f5f5f5;\n}\n.v-btn--top.v-btn--absolute.v-btn--small[data-v-5cc5a650] {\r\n  top: -25px !important;\n}\n.v-btn--bottom.v-btn--absolute.v-btn--small[data-v-5cc5a650] {\r\n  bottom: -24px !important;\n}\r\n", ""]);
+exports.push([module.i, "\n.WM-Border-Gray[data-v-5cc5a650] {\n  border-color: #aaa !important;\n}\n.WM-Color-LightGrey[data-v-5cc5a650] {\n  background-color: #f5f5f5;\n}\n.v-btn--top.v-btn--absolute.v-btn--small[data-v-5cc5a650] {\n  top: -25px !important;\n}\n.v-btn--bottom.v-btn--absolute.v-btn--small[data-v-5cc5a650] {\n  bottom: -24px !important;\n}\n", ""]);
 
 
 

public/js/vue/chunks/6.js

@@ -271,7 +271,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 exports = module.exports = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js")(false);
 // Module
-exports.push([module.i, "\n.WM-ActionButton[data-v-b1f1b72e] {\r\n    padding: 8px 22px;\n}\r\n", ""]);
+exports.push([module.i, "\n.WM-ActionButton[data-v-b1f1b72e] {\n    padding: 8px 22px;\n}\n", ""]);
 
 
 

public/mix-manifest.json

@@ -1,3 +1,3 @@
 {
-    "/js/vue/app.js": "/js/vue/app.js?id=541824ac617d2e12995b"
+    "/js/vue/app.js": "/js/vue/app.js?id=0f184de07733875457f3"
 }

resources/js/vue/config/urls.js

@@ -32,6 +32,7 @@ const urls = {
         }
         return "/TestResults?page=" + page;
     },
+    listFilterItemsTestResult : `/TestResults/ListFilterItems`,
     verifyTestResult : function(id) {
         return `/TestResults/Verify/${id}`;
     },

resources/js/vue/styles/material-dashboard/_buttons.scss

@@ -5,7 +5,7 @@
   font-weight: $font-weight-base !important;
   height: auto;
   line-height: $line-height-base;
-  color: $white !important;
+  // color: $white !important;
   cursor: pointer;
   border-radius: $border-radius-base;
 

resources/js/vue/views/Statistics/Chart.vue

@@ -1,14 +1,88 @@
 <template>
-  <div class="small">
+  <div>
-    <pie-chart :chart-data="datacollection"></pie-chart>
+    <v-form ref="form">
-    <bar-chart :chart-data="datacollection"></bar-chart>
+      <v-container grid-list-xs>
-    <button @click="fillData()">Randomize</button>
+        <material-card color="black" title="Search Result">
+          <v-layout align-center justify-center wrap class="px-5 my-3">
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="medicalCenters" item-text="name" item-value="id" v-model="form.medicalCenter" @change="fillUsers" label="Hospital" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="users" item-text="name" item-value="id" v-model="form.user" label="User" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="testTypes" item-text="name" item-value="id" v-model="form.testType" label="TestType" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="result" v-model="form.result" label="Result" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="verify" v-model="form.verify" label="Verify" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="type" v-model="form.type" label="Type" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm6 md5>
+              <v-menu
+                lazy
+                :close-on-content-click="true"
+                transition="v-scale-transition"
+                offset-y
+                v-model="fromMenu"
+              >
+                <v-text-field required slot="activator" label="FromDate" v-model="form.fromPicker"></v-text-field>
+                <v-date-picker
+                  no-title
+                  v-model="form.fromPicker"
+                  :date-format="date => new Date(date).toDateString()"
+                ></v-date-picker>
+              </v-menu>
+            </v-flex>
+            <v-flex xs12 sm6 md5>
+              <v-menu
+                lazy
+                :close-on-content-click="true"
+                transition="v-scale-transition"
+                offset-y
+                v-model="upToMenu"
+              >
+                <v-text-field required slot="activator" label="UpToDate" v-model="form.upToPicker"></v-text-field>
+                <v-date-picker
+                  no-title
+                  v-model="form.upToPicker"
+                  :date-format="date => new Date(date).toDateString()"
+                ></v-date-picker>
+              </v-menu>
+            </v-flex>
+            <v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-center">
+              <v-btn
+                class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
+                style="padding:10px 60px;"
+                @click="submitForm"
+              >
+                <v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
+                <span class="black--text">GO</span>
+              </v-btn>
+            </v-flex>
+          </v-layout>
+          <v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult">
+            <v-divider></v-divider>
+          </v-layout>
+        </material-card>
+      </v-container>
+    </v-form>
+    <div v-if="chart" class="small">
+      <pie-chart v-if="form.type == 'PieChart'" :chart-data="datacollection"></pie-chart>
+      <bar-chart v-else :chart-data="datacollection"></bar-chart>
+    </div>
   </div>
 </template>
 
 <script>
-  import BarChart from '@/plugins/chart/BarChart.js'
+import BarChart from "@/plugins/chart/BarChart.js";
-  import PieChart from '@/plugins/chart/PieChart.js'
+import PieChart from "@/plugins/chart/PieChart.js";
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
 
 export default {
   components: {
@@ -17,30 +91,68 @@
   },
   data() {
     return {
-        datacollection: null
+      datacollection: null,
-      }
+      fromMenu: '',
+      upToMenu: '',
+      verify: ['Verified', 'NotVerified'],
+      result: ['Accept', 'Failed'],
+      type: ['BarChart', 'PieChart'],
+      users: [],
+      medicalCenters: [],
+      testTypes: [],
+      form: {
+        medicalCenter: null,
+        user: null,
+        testType: null,
+        result: null,
+        verify: null,
+        type: 'PieChart',
+        fromPicker: '',
+        upToPicker: '',
       },
-    mounted () {
+      chart: false
-      this.fillData()
+    };
+  },
+  created() {
+    this.load();
   },
   methods: {
-      fillData () {
+    fillData(options) {
       this.datacollection = {
-          labels: [this.getRandomInt(), this.getRandomInt()],
+        labels: options.labels,
+        // labels: [this.getRandomInt(), this.getRandomInt()],
         datasets: [
           {
-              label: 'Data One',
+            label: "Data One",
-              backgroundColor: ['#f87979', '#ccc'],
+            backgroundColor: ["#f87979", "#ccc"],
-              data: [this.getRandomInt(), this.getRandomInt()]
+            data: options.data,
+            // data: [this.getRandomInt(), this.getRandomInt()],
           }
         ]
+      };
+    },
+    async load() {
+      const result = await ApiService.get(urls.listFilterItemsTestResult);
+      if (result && result.status == 200) {
+        this.medicalCenters = result.data.data.MedicalCenters;
+        this.testTypes = result.data.data.TestTypes;
       }
     },
-      getRandomInt () {
+    async fillUsers() {
-        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      const result = await ApiService.get(urls.listOpertorMedicalCenter(this.form.medicalCenter));
+      if (result && result.status == 200) {
+        this.users = result.data.data.users;
       } 
+    },
+    async submitForm() {
+      const result = await ApiService.post(urls.statistics, this.form);
+      if (result && result.status == 200) {
+        this.fillData(result.data.data)
+        this.chart = true;
       } 
+    },
   }
+};
 </script>
 
 <style>
@@ -48,4 +160,13 @@
   max-width: 600px;
   margin: 150px auto;
 }
+.v-btn--floating {
+    padding: 0!important;
+}
+.theme--light.v-btn {
+    color: rgba(0,0,0,.87)!important;
+}
+.v-btn--floating, .v-btn--icon:before {
+    border-radius: 50%!important;
+}
 </style>

resources/js/vue/views/TestResult/List.vue

@@ -40,9 +40,8 @@
                             </template>
                             <template slot="items" slot-scope="{ item }">
                                 <td class="headline font-weight-light">{{ item.autoclave_id }}</td>
-                                <td
+                                <td class="title font-weight-light">{{ item.test_type.name }}</td>
-                                    class="title font-weight-light"
+                                <td class="title font-weight-light" >{{ item.user.medical_center.name }}</td>
-                                >{{ item.user.medical_center.name }}</td>
                                 <td class="title font-weight-light">{{ item.user.name }}</td>
                                 <td class="title font-weight-light">{{ item.result }}</td>
                                 <td class="title font-weight-light">{{ item.created_at }}</td>
@@ -102,6 +101,11 @@ export default {
                 text: "AutoClaveId",
                 value: "name"
             },
+            {
+                sortable: false,
+                text: "Test Type",
+                value: "TestType"
+            },
             {
                 sortable: false,
                 text: "Hospital",

routes/api.php

@@ -23,6 +23,7 @@ Route::group(['namespace' => 'Api'],function () {
 });
 
 Route::middleware('auth:api')->group(function () {
+    Route::get('/TestResults/ListFilterItems', 'TestResultController@listFilterItems');
     Route::post('/TestResults/Verify/{TestResult}', 'TestResultController@verifyTestResult');
     Route::get('TestTypes/ListNames', 'TestTypeController@listNames');
     Route::post('/TestTypes/Barcode/{TestType}', 'TestTypeController@generateBarcode');