{"version":3,"sources":["webpack:///./src/views/Branch/Tank_report/index.vue?f942","webpack:///src/views/Branch/Tank_report/index.vue","webpack:///./src/views/Branch/Tank_report/index.vue?ed13","webpack:///./src/views/Branch/Tank_report/index.vue","webpack:///./src/views/Branch/Tank_report/index.vue?9e3c"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","staticStyle","style","backgroundImage","backgroundUrl","backgroundPosition","backgroundRepeat","backgroundSize","attrs","_v","_s","$t","maxDate","$root","$i18n","locale","customShortcuts","$store","getters","getDatePickerColor","model","value","callback","$$v","dateRange","expression","tankReportsSplineOption","showLoader","$d","Date","startDate","endDate","directives","name","rawName","ref","refreshGrid","pageSettings","toolbar","search","toolbarClick","usedLang","staticRenderFns","$","components","MasterLayout","TableLoader","Highcharts","VueApexCharts","provide","grid","data","key","label","cardBackgroundUrl","pluginStartDate","pluginEndDate","start","end","branch","branchId","pageSizes","pageCount","pageSize","operator","ignoreCase","chart","type","title","text","subtitle","xAxis","categories","crosshair","yAxis","min","plotOptions","column","pointPadding","borderWidth","series","created","document","path","window","beforeDestroy","watch","mounted","searchFun","methods","getTankReports","get","configObject","then","response","volumeSoldarr","volumeFilledArr","parseFloat","cats","element","dataSource","catch","error","convertThousand","toFixed","toString","replace","component"],"mappings":"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","file":"js/chunk-f0e4b6d2.7efd5227.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('MasterLayout',[_c('div',{staticClass:\"fuelbalance_first_row\"},[_c('div',{staticClass:\"vr__bg\",staticStyle:{\"flex\":\"0 0 96.5%\",\"border-radius\":\"15px\"},style:([\n          {\n            backgroundImage: (\"linear-gradient(rgb(12, 4, 31 , 0.7), rgb(12, 4, 31 , 0.7)), url(\" + _vm.backgroundUrl + \")\"),\n            backgroundPosition: 'center',\n            backgroundRepeat: 'no-repeat',\n            backgroundSize: 'cover',\n          } ])},[_c('div',{staticClass:\"row align-items-center\",staticStyle:{\"height\":\"100%\"}},[_c('div',{staticClass:\"col-md-8\"},[_c('div',{staticClass:\"transaction_period_text text-center branch__sales__text\",staticStyle:{\"font-size\":\"22px\",\"min-height\":\"200px\"}},[_c('h3',{staticClass:\"our__branches__banner__title\"},[_c('img',{staticClass:\"mr-3\",attrs:{\"src\":require(\"@/assets/img/tanks_icon.png\")}}),_vm._v(\"\\n                \"+_vm._s(_vm.$t(\"text.tankReport.title\"))+\"\\n              \")])])]),_vm._v(\" \"),_c('div',{staticClass:\"col-md-3 drop_down_input_group\"},[_c('div',{staticClass:\"drop_down_section mt-2 mr-2\"},[_c('div',{staticClass:\"drop_down_div align-items-center tank-report-dropdown\"},[_c('vue-ctk-date-time-picker',{attrs:{\"max-date\":_vm.maxDate,\"range\":true,\"autoClose\":true,\"locale\":this.$root.$i18n.locale,\"custom-shortcuts\":_vm.customShortcuts,\"color\":_vm.$store.getters.getDatePickerColor,\"format\":\"DDMMYYYY\",\"formatted\":\"DD/MM/YYYY\",\"label\":_vm.$t('text.calendar.dateRange')},model:{value:(_vm.dateRange),callback:function ($$v) {_vm.dateRange=$$v},expression:\"dateRange\"}})],1)])])])])]),_vm._v(\" \"),_c('div',{staticClass:\"section-2 mt-3\"},[_c('section',[_c('div',{staticClass:\"dashboard__table__section mt-3\"},[_c('div',{staticClass:\"branch__sales__text_header\"},[_c('highcharts',{attrs:{\"options\":_vm.tankReportsSplineOption}}),_vm._v(\" \"),_c('TableLoader',{attrs:{\"showLoader\":_vm.showLoader}})],1)])])]),_vm._v(\" \"),_c('div',{staticClass:\"section-2 mt-3\"},[_c('section',[_c('div',{staticClass:\"dashboard__table__section mt-3\"},[_c('div',{staticClass:\"branch__sales__text_header\"},[_c('div',{staticClass:\"row top_section_row\",staticStyle:{\"border-radius\":\"20px\"}},[_c('div',{staticClass:\"col-md-8\"},[_c('span',{staticClass:\"sec_text_color\"},[_vm._v(\"\\n                  \"+_vm._s(_vm.$t(\"text.tankReport.reportBetween\"))+\"\\n                  \"+_vm._s(_vm.$d(new Date(_vm.startDate), \"short\", this.$root.$i18n.locale))+\"\\n                  \"+_vm._s(_vm.$t(\"text.and.text\"))+\"\\n                  \"+_vm._s(_vm.$d(new Date(_vm.endDate), \"short\", this.$root.$i18n.locale))+\"\\n                \")])]),_vm._v(\" \"),_c('div',{staticClass:\"col-md-4 text-right\"})]),_vm._v(\" \"),_c('ejs-grid',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.showLoader),expression:\"!showLoader\"}],ref:\"dataGrid\",attrs:{\"created\":_vm.refreshGrid,\"allowPaging\":true,\"allowSorting\":true,\"pageSettings\":_vm.pageSettings,\"toolbar\":_vm.toolbar,\"searchSettings\":_vm.search,\"allowExcelExport\":true,\"allowPdfExport\":true,\"toolbarClick\":_vm.toolbarClick,\"locale\":_vm.usedLang}},[_c('e-columns',[_c('e-column',{attrs:{\"width\":\"40\",\"field\":\"index\",\"headerText\":\"#\"}}),_vm._v(\" \"),_c('e-column',{attrs:{\"field\":\"tankName\",\"width\":\"180\",\"headerText\":_vm.$t('text.tankReport.tankName')}}),_vm._v(\" \"),_c('e-column',{attrs:{\"format\":\"N2\",\"field\":\"volumeSold\",\"width\":\"180\",\"headerText\":_vm.$t('text.tankReport.saleVolume')}}),_vm._v(\" \"),_c('e-column',{attrs:{\"format\":\"N2\",\"field\":\"volumeFilled\",\"width\":\"180\",\"headerText\":_vm.$t('text.tankReport.volumeRefilled')}}),_vm._v(\" \"),_c('e-column',{attrs:{\"format\":\"N2\",\"field\":\"openingDip\",\"width\":\"180\",\"headerText\":_vm.$t('text.tankReport.openingVolume')}}),_vm._v(\" \"),_c('e-column',{attrs:{\"format\":\"N2\",\"field\":\"closingDip\",\"width\":\"180\",\"headerText\":_vm.$t('text.tankReport.closingVolume')}})],1)],1),_vm._v(\" \"),_c('TableLoader',{attrs:{\"showLoader\":_vm.showLoader}})],1)])])])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <MasterLayout>\r\n      <div class=\"fuelbalance_first_row\">\r\n        <div\r\n          class=\"vr__bg\"\r\n          style=\"flex: 0 0 96.5%; border-radius: 15px\"\r\n          :style=\"[\r\n            {\r\n              backgroundImage: `linear-gradient(rgb(12, 4, 31 , 0.7), rgb(12, 4, 31 , 0.7)), url(${backgroundUrl})`,\r\n              backgroundPosition: 'center',\r\n              backgroundRepeat: 'no-repeat',\r\n              backgroundSize: 'cover',\r\n            },\r\n          ]\"\r\n        >\r\n          <div class=\"row align-items-center\" style=\"height: 100%\">\r\n            <div class=\"col-md-8\">\r\n              <div\r\n                class=\"transaction_period_text text-center branch__sales__text\"\r\n                style=\"font-size: 22px; min-height: 200px\"\r\n              >\r\n                <h3 class=\"our__branches__banner__title\">\r\n                  <img src=\"@/assets/img/tanks_icon.png\" class=\"mr-3\" />\r\n                  {{ $t(\"text.tankReport.title\") }}\r\n                </h3>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-3 drop_down_input_group\">\r\n              <div class=\"drop_down_section mt-2 mr-2\">\r\n                <div\r\n                  class=\"drop_down_div align-items-center tank-report-dropdown\"\r\n                >\r\n                  <vue-ctk-date-time-picker\r\n                    v-model=\"dateRange\"\r\n                    :max-date=\"maxDate\"\r\n                    :range=\"true\"\r\n                    :autoClose=\"true\"\r\n                    :locale=\"this.$root.$i18n.locale\"\r\n                    :custom-shortcuts=\"customShortcuts\"\r\n                    :color=\"$store.getters.getDatePickerColor\"\r\n                    format=\"DDMMYYYY\"\r\n                    formatted=\"DD/MM/YYYY\"\r\n                    :label=\"$t('text.calendar.dateRange')\"\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"section-2 mt-3\">\r\n        <section>\r\n          <div class=\"dashboard__table__section mt-3\">\r\n            <div class=\"branch__sales__text_header\">\r\n              <highcharts\r\n                :options=\"tankReportsSplineOption\"\r\n                class=\"\"\r\n              ></highcharts>\r\n              <TableLoader :showLoader=\"showLoader\" />\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </div>\r\n      <div class=\"section-2 mt-3\">\r\n        <section>\r\n          <div class=\"dashboard__table__section mt-3\">\r\n            <div class=\"branch__sales__text_header\">\r\n              <div class=\"row top_section_row\" style=\"border-radius: 20px\">\r\n                <div class=\"col-md-8\">\r\n                  <span class=\"sec_text_color\">\r\n                    {{ $t(\"text.tankReport.reportBetween\") }}\r\n                    {{\r\n                      $d(new Date(startDate), \"short\", this.$root.$i18n.locale)\r\n                    }}\r\n                    {{ $t(\"text.and.text\") }}\r\n                    {{\r\n                      $d(new Date(endDate), \"short\", this.$root.$i18n.locale)\r\n                    }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"col-md-4 text-right\">\r\n                  <!-- <button class=\"show_more_button remove_text_decoration\"  @click=\"downloadWithCSS\">\r\n                        Download Sales Report\r\n                  </button>-->\r\n                </div>\r\n              </div>\r\n              <ejs-grid\r\n                v-show=\"!showLoader\"\r\n                ref=\"dataGrid\"\r\n                :created=\"refreshGrid\"\r\n                :allowPaging=\"true\"\r\n                :allowSorting=\"true\"\r\n                :pageSettings=\"pageSettings\"\r\n                :toolbar=\"toolbar\"\r\n                :searchSettings=\"search\"\r\n                :allowExcelExport=\"true\"\r\n                :allowPdfExport=\"true\"\r\n                :toolbarClick=\"toolbarClick\"\r\n                :locale=\"usedLang\"\r\n              >\r\n                <e-columns>\r\n                  <e-column width=\"40\" field=\"index\" headerText=\"#\"></e-column>\r\n                  <e-column\r\n                    field=\"tankName\"\r\n                    width=\"180\"\r\n                    :headerText=\"$t('text.tankReport.tankName')\"\r\n                  ></e-column>\r\n                  <e-column\r\n                    format=\"N2\"\r\n                    field=\"volumeSold\"\r\n                    width=\"180\"\r\n                    :headerText=\"$t('text.tankReport.saleVolume')\"\r\n                  ></e-column>\r\n                  <e-column\r\n                    format=\"N2\"\r\n                    field=\"volumeFilled\"\r\n                    width=\"180\"\r\n                    :headerText=\"$t('text.tankReport.volumeRefilled')\"\r\n                  ></e-column>\r\n                  <e-column\r\n                    format=\"N2\"\r\n                    field=\"openingDip\"\r\n                    width=\"180\"\r\n                    :headerText=\"$t('text.tankReport.openingVolume')\"\r\n                  ></e-column>\r\n                  <e-column\r\n                    format=\"N2\"\r\n                    field=\"closingDip\"\r\n                    width=\"180\"\r\n                    :headerText=\"$t('text.tankReport.closingVolume')\"\r\n                  ></e-column>\r\n                </e-columns>\r\n              </ejs-grid>\r\n              <TableLoader :showLoader=\"showLoader\" />\r\n            </div>\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </MasterLayout>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport MasterLayout from \"@/views/Branch/MasterLayout.vue\";\r\nimport backgroundUrl from \"@/assets/img/BecomeDealer.png\";\r\nimport cardBackgroundUrl from \"@/assets/img/Group393.svg\";\r\nimport configObject from \"@/config\";\r\nimport TableLoader from \"@/components/tableLoader/index\";\r\nimport { VueApexCharts } from \"apexcharts\";\r\nimport { Chart } from \"highcharts-vue\";\r\n\r\nimport {\r\n  Page,\r\n  Sort,\r\n  Toolbar,\r\n  Search,\r\n  ExcelExport,\r\n  PdfExport,\r\n  Resize,\r\n} from \"@syncfusion/ej2-vue-grids\";\r\nimport JQuery from \"jquery\";\r\nlet $ = JQuery;\r\n\r\nexport default {\r\n  name: \"Tank Reports\",\r\n  components: {\r\n    MasterLayout,\r\n    TableLoader,\r\n    Highcharts: Chart,\r\n    VueApexCharts,\r\n  },\r\n  provide: {\r\n    grid: [Page, Sort, Toolbar, Search, ExcelExport, PdfExport, Resize],\r\n  },\r\n  data() {\r\n    return {\r\n      usedLang: this.$store.getters.getLanguage,\r\n      maxDate: this.$moment(new Date()).format(\"YYYY-MM-DD\"),\r\n      customShortcuts: [\r\n        { key: \"Today\", label: this.$t(\"text.calendar.today\"), value: \"day\" },\r\n        {\r\n          key: \"yesterday\",\r\n          label: this.$t(\"text.calendar.yesterday\"),\r\n          value: \"-day\",\r\n        },\r\n        {\r\n          key: \"last7Days\",\r\n          label: this.$t(\"text.calendar.last7Days\"),\r\n          value: 7,\r\n        },\r\n        {\r\n          key: \"lastWeek\",\r\n          label: this.$t(\"text.calendar.lastWeek\"),\r\n          value: \"-isoWeek\",\r\n        },\r\n        {\r\n          key: \"last30Days\",\r\n          label: this.$t(\"text.calendar.last30Days\"),\r\n          value: 30,\r\n        },\r\n        {\r\n          key: \"lastMonth\",\r\n          label: this.$t(\"text.calendar.lastMonth\"),\r\n          value: \"-month\",\r\n        },\r\n      ],\r\n      backgroundUrl,\r\n      cardBackgroundUrl,\r\n      startDate: this.$moment().subtract(7, \"days\").format(\"MMMM D, YYYY\"),\r\n      endDate: this.$moment().format(\"MMMM D, YYYY\"),\r\n      pluginStartDate: this.$moment().subtract(7, \"days\").format(\"D-M-YYYY\"),\r\n      pluginEndDate: this.$moment().format(\"D-M-YYYY\"),\r\n      dateRange: { start: this.pluginStartDate, end: this.pluginEndDate },\r\n      showLoader: false,\r\n      branch: {},\r\n      branchId: null,\r\n      pageSettings: {\r\n        pageSizes: [10, 20, 50, 100, 200],\r\n        pageCount: 4,\r\n        pageSize: 10,\r\n      },\r\n      toolbar: [\"ExcelExport\", \"PdfExport\", \"Search\"],\r\n      search: { operator: \"contains\", ignoreCase: true },\r\n      tankReportsSplineOption: {\r\n        chart: {\r\n          type: \"column\",\r\n        },\r\n        title: {\r\n          text: this.$t(\"text.tankReport.title\"),\r\n        },\r\n        subtitle: {\r\n          // text: 'Source: WorldClimate.com'\r\n        },\r\n        xAxis: {\r\n          categories: [],\r\n          crosshair: true,\r\n        },\r\n        yAxis: {\r\n          min: 0,\r\n          title: {\r\n            text: this.$t(\"text.tankReport.totalVolume\"),\r\n          },\r\n        },\r\n        plotOptions: {\r\n          column: {\r\n            pointPadding: 0.2,\r\n            borderWidth: 0,\r\n          },\r\n        },\r\n        series: [],\r\n      },\r\n    };\r\n  },\r\n  created() {\r\n    document.title = \"Tanks Reports:: Epump Retail Outlet\";\r\n    this.showLoader = true;\r\n    this.$eventHub.$on(\"branch\", (branch) => {\r\n      this.branch = branch;\r\n      document.title = `Tanks Reports:: ${branch.name} Retail Outlet`;\r\n    });\r\n    this.dateRange.start = this.pluginStartDate;\r\n    this.dateRange.end = this.pluginEndDate;\r\n    if (localStorage.getItem(\"userDetails\") === \"null\") {\r\n      this.$router.push({ path: \"/\" });\r\n    } else if (configObject.authConfig() === null) {\r\n      window.location.reload();\r\n    }\r\n  },\r\n  beforeDestroy() {},\r\n\r\n  watch: {\r\n    branch: function (newBranch, oldBranch) {\r\n      if (newBranch.id) {\r\n        if (this.$route.query.branchId) {\r\n          this.branchId = this.branch.id;\r\n          if (this.branchId !== null) {\r\n            this.getTankReports();\r\n          }\r\n        } else {\r\n          if (this.branch.id) {\r\n            this.branchId = this.branch.id;\r\n          }\r\n          if (this.branchId !== null) {\r\n            this.getTankReports();\r\n          }\r\n        }\r\n      }\r\n    },\r\n    dateRange: function (newRange, oldRange) {\r\n      if (newRange.start !== null && newRange.end !== null) {\r\n        this.startDate = this.$moment(newRange.start, \"DD-MM-YYYY\").format(\r\n          \"MMMM D, YYYY\"\r\n        );\r\n        this.endDate = this.$moment(newRange.end, \"DD-MM-YYYY\").format(\r\n          \"MMMM D, YYYY\"\r\n        );\r\n\r\n        this.getTankReports();\r\n      }\r\n    },\r\n  },\r\n  mounted() {\r\n    $(\".e-input\").keyup(function (e) {\r\n      searchFun(e);\r\n    });\r\n    function searchFun(event) {\r\n      var grid = document.getElementsByClassName(\"e-grid\")[0].ej2_instances[0];\r\n      var value = event.target.value;\r\n      grid.search(value);\r\n    }\r\n  },\r\n  methods: {\r\n    refreshGrid() {\r\n      this.$refs.dataGrid.refresh();\r\n    },\r\n    toolbarClick(args) {\r\n      switch (args.item.text) {\r\n        case \"PDF Export\":\r\n          this.$refs.dataGrid.pdfExport();\r\n          break;\r\n        case \"Excel Export\":\r\n          this.$refs.dataGrid.excelExport();\r\n          break;\r\n      }\r\n    },\r\n    getTankReports() {\r\n      this.axios\r\n        .get(\r\n          `${configObject.apiBaseUrl}/Branch/TankSales/${this.branchId}?startDate=${this.startDate}&endDate=${this.endDate}`,\r\n          configObject.authConfig()\r\n        )\r\n        .then((response) => {\r\n          this.showLoader = false;\r\n          let index = 0;\r\n\r\n          let series = [];\r\n          var volumeSoldarr = [\r\n            { name: this.$t(\"text.tankReport.volumeSold\"), data: [] },\r\n          ];\r\n          var volumeFilledArr = [\r\n            { name: this.$t(\"text.tankReport.volumeFilled\"), data: [] },\r\n          ];\r\n          let cats = [];\r\n\r\n          response.data.forEach((el) => {\r\n            volumeSoldarr[0].data.push(parseFloat(el.volumeSold.toFixed(2)));\r\n            volumeFilledArr[0].data.push(\r\n              parseFloat(el.volumeFilled.toFixed(2))\r\n            );\r\n            cats.push(el.tankName);\r\n          });\r\n\r\n          this.tankReportsSplineOption.series = [\r\n            ...volumeSoldarr,\r\n            ...volumeFilledArr,\r\n          ];\r\n          this.tankReportsSplineOption.xAxis.categories = cats;\r\n\r\n          response.data.forEach((element) => {\r\n            element.index = ++index;\r\n          });\r\n\r\n          this.$refs.dataGrid.ej2Instances.setProperties({\r\n            dataSource: response.data,\r\n          });\r\n          this.refreshGrid();\r\n        })\r\n        .catch((error) => {});\r\n    },\r\n    convertThousand(request) {\r\n      if (!isFinite(request)) {\r\n        return \"0.00\";\r\n      }\r\n      return request\r\n        .toFixed(2)\r\n        .toString()\r\n        .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style>\r\n@media screen and (max-width: 768px) {\r\n  .drop_down_div.align-items-center.tank-report-dropdown {\r\n    margin-top: -76px;\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=4f2c5cb5&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=4f2c5cb5&prod&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  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&id=4f2c5cb5&prod&lang=css&\""],"sourceRoot":""}