{"version":3,"sources":["webpack:///./src/page/lms/LMS3030.vue?7c37","webpack:///src/page/lms/LMS3030.vue","webpack:///./src/page/lms/LMS3030.vue?974e","webpack:///./src/page/lms/LMS3030.vue","webpack:///./src/page/lms/LMS3030.vue?813a"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","_v","_m","staticRenderFns","extends","PageBase","name","data","charts","visitDates","visitCounts","methods","loadData","me","getStats","then","getRegionaalStats","getVisitStats","onRegionIdChanged","query","regionId","go","route","drawSummaryChart","drawVisitChart","labels","datasets","scales","y","beginAtZero","ticks","stepSize","plugins","legend","display","title","text","font","size","lineHeight","padding","top","bottom","aspectRatio","push","chart","drawCharts","forEach","destroy","mounted","dom","on","window","regions","lams","unshift","regionFullName","summaryDateRange","beforeDestroy","off","component"],"mappings":"kHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,UAAU,CAACE,YAAY,qBAAqB,CAACF,EAAG,MAAM,CAACE,YAAY,yCAAyC,CAACF,EAAG,KAAK,CAACE,YAAY,6BAA6B,CAACF,EAAG,KAAK,CAACA,EAAG,WAAW,CAACG,MAAM,CAAC,GAAK,MAAM,CAACP,EAAIQ,GAAG,WAAW,GAAGJ,EAAG,KAAK,CAACA,EAAG,OAAO,CAACG,MAAM,CAAC,eAAe,SAAS,CAACP,EAAIQ,GAAG,uBAAuBR,EAAIS,GAAG,IAAI,MAC5ZC,EAAkB,CAAC,WAAa,IAAIV,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,kCAAkC,CAACF,EAAG,SAAS,CAACE,YAAY,MAAMC,MAAM,CAAC,GAAK,sB,4DC+E9M,GACEI,QAASC,EAAX,KACEC,KAAM,UAENC,KAJF,WAKI,MAAO,CAGLC,OAAQ,GAURC,WAAY,GACZC,YAAa,KAIjBC,QAAS,CACPC,SADJ,WAEM,IAAN,OACA,WAEMC,EAAGC,WAAWC,MACpB,YACQ,EAAR,YAUQ,EAAR,qCACU,OAAV,gDAGQ,EAAR,sCAAU,OAAV,gBAEQ,EAAR,gBAEA,YACQ,EAAR,YACQ,EAAR,iBAyBID,SApDJ,WAqDM,IAAN,OACA,WAEA,KAMM,OACN,EACA,gBAEA,kBAGQ,OAFA,EAAR,YACQ,EAAR,SACA,KAEA,mBACQ,EAAR,YACQ,EAAR,iBAKIE,kBA9EJ,WA+EM,OAAO,OAAb,OAAa,CAAb,sBAGIC,cAlFJ,WAmFM,OAAO,OAAb,OAAa,CAAb,oBAKIC,kBAxFJ,SAwFA,GACM,IAAN,GACQZ,KAAM,UACNa,MAAO,CACLC,SAAUA,IAGd1B,KAAK2B,GAAGC,IAQVC,iBAvGJ,aA0LIC,eA1LJ,WA2LM,IAAN,OAEA,GACQC,OAAQZ,EAAGJ,WACXiB,SAAU,CAClB,CACU,MAAV,QACU,KAAV,cACU,gBAAV,0BAEU,YAAV,UACU,YAAV,EAEU,qBAAV,UAEU,MAAV,EACU,QAAV,MAKA,GACQC,OAAQ,CACNC,EAAG,CACDC,aAAa,EACbC,MAAO,CACLC,SAAU,KAKhBC,QAAS,CACPC,OAAQ,CACNC,SAAS,GAGXC,MAAO,CACLD,SAAS,EACTE,KAAM,gBACNC,KAAM,CACJC,KAAM,GACNC,WAAY,GAEdC,QAAS,CACPC,IAAK,GACLC,OAAQ,MAKdC,YAAa,KAGrB,qCACMjD,KAAKc,OAAOoC,KAAKC,IAGnBC,WApPJ,WAqPM,IAAN,OAEMjC,EAAGL,OAAOuC,SAAQ,SAAxB,GACQF,EAAMG,UACNH,EAAQ,QAGVhC,EAAGW,mBAQPyB,QA3RF,WA4RI,IAAJ,OAEIpC,EAAGqC,IAAIC,GAAGC,OAAQ,SAAUvC,EAAGiC,YAE/BjC,EAAGwC,QAAUC,EAAjB,gBACIzC,EAAGwC,QAAQE,QAAQ,CACjBnC,SAAU,EACVoC,eAAgB,0BAGlB3C,EAAG4C,iBAAmBH,EAA1B,OACIzC,EAAGD,YAGL8C,cA1SF,WA2SIhE,KAAKwD,IAAIS,IAAIP,OAAQ,SAAU1D,KAAKoD,cC3XwT,I,wBCQ5Vc,EAAY,eACd,EACApE,EACAW,GACA,EACA,KACA,WACA,MAIa,aAAAyD,E,6CCnBf,yBAAqf,EAAG,G","file":"js/lms3030.aa9a1b1f.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:\"lms3030-container\"},[_c('div',{staticClass:\"lms3030 white border-main shadow-dark\"},[_c('Ul',{staticClass:\"crumbs text-charcoal mb-2\"},[_c('li',[_c('sym-link',{attrs:{\"to\":\"/\"}},[_vm._v(\"Home\")])],1),_c('li',[_c('span',{attrs:{\"aria-current\":\"page\"}},[_vm._v(\"Site Visitors\")])])]),_vm._m(0)],1)])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"w-100 pos-relative border-main\"},[_c('canvas',{staticClass:\"p-2\",attrs:{\"id\":\"visits-chart\"}})])}]\n\nexport { render, staticRenderFns }","// Site Visitor\r\n\r\n<template>\r\n  <section class=\"lms3030-container\">\r\n    <div class=\"lms3030 white border-main shadow-dark\">\r\n      <Ul class=\"crumbs text-charcoal mb-2\">\r\n        <li><sym-link to=\"/\">Home</sym-link></li>\r\n        <li><span aria-current=\"page\">Site Visitors</span></li>\r\n      </Ul>\r\n      <!-- <sym-card class=\"lams\" headerClass=\"p-1 pl-2\">\r\n        <div slot=\"header\" class=\"reg-stat justify-between align-items-center\">\r\n          <p class=\"reg-stat-title serif bold\">Regional Stats</p>\r\n          <sym-combo\r\n            v-model=\"regionId\"\r\n            :input-width=\"62\"\r\n            display-field=\"regionFullName\"\r\n            :datasource=\"regions\"\r\n            @changed=\"onRegionIdChanged\"\r\n          ></sym-combo>\r\n        </div>\r\n      </sym-card> -->\r\n\r\n      <!-- <sym-tabs id=\"tabs\" v-model=\"activeTabIndex\" @changed=\"onActiveTabIndexChanged\">\r\n        <sym-tab title=\" IVAS\" icon=\"cube\">\r\n          <div class=\"table-scroll-wrapper\"> -->\r\n      <!-- <sym-card class=\"lams-light mb-2 border-main\" bodyClass=\"p-2\">\r\n        <p class=\"reg-summary-title serif bold text-charcoal\">Summary ● All Regions</p>\r\n      </sym-card> -->\r\n\r\n      <!-- <div class=\"chart-container mb-3\">\r\n              <div class=\"w-100 pos-relative border-main\">\r\n                <canvas id=\"all-regions-chart\" class=\"p-2\"></canvas>\r\n              </div> -->\r\n\r\n      <div class=\"w-100 pos-relative border-main\">\r\n        <canvas id=\"visits-chart\" class=\"p-2\"></canvas>\r\n      </div>\r\n    </div>\r\n    <!-- </div> -->\r\n    <!-- </sym-tab> -->\r\n\r\n    <!-- <sym-tab title=\" PLA\" icon=\"copy\">\r\n          <div class=\"table-scroll-wrapper\">\r\n            <sym-card class=\"lams-light mb-2 border-main\" bodyClass=\"p-2\">\r\n              <p class=\"reg-summary-title serif bold text-charcoal\">Summary ● All PLA</p>\r\n            </sym-card>\r\n\r\n            <div class=\"chart-container mb-3\">\r\n              <div class=\"w-100 pos-relative border-main\">\r\n                <canvas id=\"all-regions-chart\" class=\"p-2\"></canvas>\r\n              </div>\r\n\r\n              <div class=\"w-100 pos-relative border-main\">\r\n                <canvas id=\"visits-chart\" class=\"p-2\"></canvas>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </sym-tab>\r\n      </sym-tabs> -->\r\n\r\n    <!-- <button\r\n        type=\"button\"\r\n        class=\"primary text-center w-100 lg-1 shadow mt-2 mb-2\"\r\n        @click=\"goBack()\"\r\n      >\r\n        <i class=\"fa fa-arrow-left mr-2\"></i> Back\r\n      </button>\r\n    </div> -->\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport { get } from \"../../js/http\";\r\n\r\nimport * as lams from \"../../js/lams\";\r\n\r\nimport { drawLineChart } from \"../../js/graph\"; //drawBarChart\r\n\r\nimport PageBase from \"../PageBase.vue\";\r\n\r\nexport default {\r\n  extends: PageBase,\r\n  name: \"lms3030\",\r\n\r\n  data() {\r\n    return {\r\n      // regionId: 0,\r\n      // regions: [],\r\n      charts: [],\r\n\r\n      // summaryDateRange: \"\",\r\n      // offices: [],\r\n      // submittedCounts: [],\r\n      // approvedCounts: [],\r\n      // pendingCounts: [],\r\n      // rejectedCounts: [],\r\n      // cancelledCounts: [],\r\n      // activeTabIndex: 0,\r\n      visitDates: [],\r\n      visitCounts: [],\r\n    };\r\n  },\r\n\r\n  methods: {\r\n    loadData() {\r\n      const me = this,\r\n        wait = me.wait();\r\n\r\n      me.getStats().then(\r\n        (data) => {\r\n          me.stopWait(wait);\r\n\r\n          // regional summary\r\n          // me.offices = data.stats.map((o) => o.boardCode);\r\n          // me.submittedCounts = data.stats.map((o) => o.submittedCount);\r\n          // me.approvedCounts = data.stats.map((o) => o.approvedCount);\r\n          // me.rejectedCounts = data.stats.map((o) => o.rejectedCount);\r\n          // me.pendingCounts = data.stats.map((o) => o.pendingCount);\r\n          // me.cancelledCounts = data.stats.map((o) => o.cancelledCount);\r\n          // // site visits\r\n          me.visitDates = data.visits.map((o) => {\r\n            return me.core.toDateFormat(o.visitDate, true, \"dd MMM\");\r\n          });\r\n\r\n          me.visitCounts = data.visits.map((o) => o.visitCount);\r\n\r\n          me.drawCharts();\r\n        },\r\n        (fault) => {\r\n          me.stopWait(wait);\r\n          me.showFault(fault);\r\n        }\r\n      );\r\n    },\r\n    // getTargetPath() {\r\n    //   return {\r\n    //     name: this.$options.name,\r\n    //     query: {\r\n    //       activeTab: this.activeTabIndex,\r\n    //     },\r\n    //   };\r\n    // },\r\n    // syncValues(p, q) {\r\n    //   const me = this;\r\n\r\n    //   if (\"activeTab\" in q) {\r\n    //     let index = parseInt(q.activeTab);\r\n    //     if (!isNaN(index)) {\r\n    //       me.activeTabIndex = index;\r\n    //     }\r\n    //   }\r\n    // },\r\n\r\n    // API calls\r\n\r\n    getStats() {\r\n      const me = this,\r\n        wait = me.wait();\r\n\r\n      let data = {};\r\n\r\n      // return me\r\n      //   .getRegionaalStats()\r\n      //   .then((stats) => {\r\n      //     data.stats = stats;\r\n      return (\r\n        me\r\n          .getVisitStats()\r\n          // })\r\n          .then((visits) => {\r\n            me.stopWait(wait);\r\n            data.visits = visits;\r\n            return data;\r\n          })\r\n          .catch((fault) => {\r\n            me.stopWait(wait);\r\n            me.showFault(fault);\r\n          })\r\n      );\r\n    },\r\n\r\n    getRegionaalStats() {\r\n      return get(\"api/stats/regions\");\r\n    },\r\n\r\n    getVisitStats() {\r\n      return get(\"api/stats/visit\");\r\n    },\r\n\r\n    // event handlers\r\n\r\n    onRegionIdChanged(regionId) {\r\n      let route = {\r\n        name: \"lms3010\",\r\n        query: {\r\n          regionId: regionId,\r\n        },\r\n      };\r\n      this.go(route);\r\n    },\r\n    // onActiveTabIndexChanged() {\r\n    //   this.reload();\r\n    // },\r\n\r\n    // helpers\r\n\r\n    drawSummaryChart() {\r\n      // const me = this;\r\n      // const mq = window.matchMedia(\"(max-width: 600px)\");\r\n      // let aspectRatio = 1.4;\r\n      // if (mq.matches) {\r\n      //   aspectRatio = 1;\r\n      // }\r\n      //   let chartData = {\r\n      //     labels: me.offices,\r\n      //     datasets: [\r\n      //       {\r\n      //         label: \"Submitted\",\r\n      //         data: me.submittedCounts,\r\n      //         backgroundColor: \"#3cba9f\",\r\n      //       },\r\n      //       {\r\n      //         label: \"Approved\",\r\n      //         data: me.approvedCounts,\r\n      //         backgroundColor: \"#507cc4\",\r\n      //       },\r\n      //       {\r\n      //         label: \"Pending\",\r\n      //         data: me.pendingCounts,\r\n      //         backgroundColor: \"#c49d50\",\r\n      //       },\r\n      //       // {\r\n      //       //   label: 'Rejected',\r\n      //       //   data: me.rejectedCounts,\r\n      //       //   backgroundColor: '#c45850'\r\n      //       // },\r\n      //       {\r\n      //         label: \"Cancelled\",\r\n      //         data: me.cancelledCounts,\r\n      //         backgroundColor: \"#c45850\",\r\n      //       },\r\n      //     ],\r\n      //   };\r\n      //   let options = {\r\n      //     scales: {\r\n      //       x: {\r\n      //         ticks: {\r\n      //           font: {\r\n      //             size: 14,\r\n      //             weight: 700,\r\n      //           },\r\n      //         },\r\n      //       },\r\n      //       y: {\r\n      //         beginAtZero: true,\r\n      //       },\r\n      //     },\r\n      //     plugins: {\r\n      //       title: {\r\n      //         display: true,\r\n      //         text: \"Regional Statistics\",\r\n      //         font: {\r\n      //           size: 20,\r\n      //           lineHeight: 1,\r\n      //         },\r\n      //       },\r\n      //       subtitle: {\r\n      //         display: true,\r\n      //         text: me.summaryDateRange,\r\n      //         font: {\r\n      //           size: 16,\r\n      //         },\r\n      //         padding: {\r\n      //           bottom: 0,\r\n      //         },\r\n      //       },\r\n      //       legend: {\r\n      //         labels: {\r\n      //           boxWidth: 20,\r\n      //         },\r\n      //       },\r\n      //     },\r\n      //   // aspectRatio: 1.4\r\n      //   aspectRatio: aspectRatio,\r\n      // };\r\n      //   let chart = drawBarChart(\"all-regions-chart\", chartData, options);\r\n      //   this.charts.push(chart);\r\n    },\r\n\r\n    drawVisitChart() {\r\n      const me = this;\r\n\r\n      let chartData = {\r\n        labels: me.visitDates,\r\n        datasets: [\r\n          {\r\n            label: \"Total\",\r\n            data: me.visitCounts,\r\n            backgroundColor: \"rgb(195, 230, 203, 0.4)\",\r\n\r\n            borderColor: \"#28a745\",\r\n            borderWidth: 2,\r\n            // pointBackgroundColor: '#28a745',\r\n            pointBackgroundColor: \"#fefefe\",\r\n\r\n            fill: true,\r\n            tension: 0.6,\r\n          },\r\n        ],\r\n      };\r\n\r\n      let options = {\r\n        scales: {\r\n          y: {\r\n            beginAtZero: true,\r\n            ticks: {\r\n              stepSize: 1,\r\n            },\r\n          },\r\n        },\r\n\r\n        plugins: {\r\n          legend: {\r\n            display: false,\r\n          },\r\n\r\n          title: {\r\n            display: true,\r\n            text: \"Site Visitors\",\r\n            font: {\r\n              size: 20,\r\n              lineHeight: 1,\r\n            },\r\n            padding: {\r\n              top: 10,\r\n              bottom: 70,\r\n            },\r\n          },\r\n        },\r\n\r\n        aspectRatio: 1.8,\r\n      };\r\n\r\n      let chart = drawLineChart(\"visits-chart\", chartData, options);\r\n      this.charts.push(chart);\r\n    },\r\n\r\n    drawCharts() {\r\n      const me = this;\r\n\r\n      me.charts.forEach((chart) => {\r\n        chart.destroy();\r\n        chart = null;\r\n      });\r\n\r\n      me.drawVisitChart();\r\n\r\n      // setTimeout(() => {\r\n      //   me.drawSummaryChart();\r\n      // }, 600);\r\n    },\r\n  },\r\n\r\n  mounted() {\r\n    const me = this;\r\n\r\n    me.dom.on(window, \"resize\", me.drawCharts);\r\n\r\n    me.regions = lams.getRegionList().slice(0);\r\n    me.regions.unshift({\r\n      regionId: 0,\r\n      regionFullName: \"--- Select Region ---\",\r\n    });\r\n\r\n    me.summaryDateRange = lams.getCurrentYearCoverage();\r\n    me.loadData();\r\n  },\r\n\r\n  beforeDestroy() {\r\n    this.dom.off(window, \"resize\", this.drawCharts);\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.lms3030-container {\r\n  display: flex;\r\n\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.lms3030 {\r\n  width: 80%;\r\n  padding: 1rem 2rem;\r\n  border-radius: 0.375rem;\r\n}\r\n\r\n.reg-stat-title,\r\n.reg-summary-title {\r\n  font-size: 1.125rem;\r\n  margin-bottom: 0;\r\n  padding-left: 0.125rem;\r\n}\r\n\r\n.reg-stat {\r\n  display: flex;\r\n}\r\n\r\n.reg-stat >>> .form-control {\r\n  margin-bottom: 0;\r\n}\r\n\r\n.chart-container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 0.5rem;\r\n  grid-auto-flow: dense;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .lms3030 {\r\n    width: 90%;\r\n    padding: 2rem;\r\n  }\r\n}\r\n\r\n@media (max-width: 800px) {\r\n  .chart-container {\r\n    display: block;\r\n  }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n  .lms3030-container {\r\n    padding-top: 0;\r\n    padding-bottom: 0;\r\n  }\r\n\r\n  .lms3030 {\r\n    width: 100%;\r\n    padding: 1rem;\r\n    border-radius: 0;\r\n  }\r\n\r\n  .reg-stat {\r\n    display: block;\r\n  }\r\n\r\n  .reg-stat-title,\r\n  .reg-summary-title {\r\n    font-size: 1rem;\r\n  }\r\n\r\n  .reg-stat-title {\r\n    margin-top: 0.25rem;\r\n    margin-bottom: 0.25rem;\r\n  }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n  .lms3030 {\r\n    padding: 0.5rem;\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LMS3030.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LMS3030.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LMS3030.vue?vue&type=template&id=6908623c&scoped=true&\"\nimport script from \"./LMS3030.vue?vue&type=script&lang=js&\"\nexport * from \"./LMS3030.vue?vue&type=script&lang=js&\"\nimport style0 from \"./LMS3030.vue?vue&type=style&index=0&id=6908623c&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"6908623c\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LMS3030.vue?vue&type=style&index=0&id=6908623c&scoped=true&lang=css&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LMS3030.vue?vue&type=style&index=0&id=6908623c&scoped=true&lang=css&\""],"sourceRoot":""}