{"version":3,"sources":["webpack:///./src/gmap/gmaps.js","webpack:///./src/views/TrainTracking.vue?6b7a","webpack:///src/views/TrainTracking.vue","webpack:///./src/views/TrainTracking.vue?b0f4","webpack:///./src/views/TrainTracking.vue"],"names":["resolveInitPromise","rejectInitPromise","API_KEY","CALLBACK_NAME","initialized","window","google","initPromise","Promise","resolve","reject","init","script","document","createElement","async","defer","src","concat","onerror","querySelector","appendChild","render","_vm","this","_h","$createElement","_c","_self","staticClass","ref","staticStyle","attrs","staticRenderFns","data","trainCoordinates","require","map","warpMap","created","initMap","methods","_initMap","_asyncToGenerator","regeneratorRuntime","mark","_callee","options","flightPath","_this","wrap","_context","prev","next","gmapsInit","sent","geocoder","maps","Geocoder","LatLng","zoom","center","lat","lng","streetViewControl","mapTypeControl","mapTypeId","MapTypeId","ROADMAP","fullscreenControl","gestureHandling","zoomControlOptions","position","ControlPosition","LEFT_CENTER","Map","$el","infoWindow","InfoWindow","path","strokeColor","fillColor","fillOpacity","rotation","strokeWeight","SymbolPath","FORWARD_CLOSED_ARROW","Polyline","editable","geodesic","strokeOpacity","draggable","event","addListener","e","console","log","vertex","train","latlng","time","Number","Time","infoHtml","Speed","moment","Date","format","hhmmss","Status","setContent","setPosition","open","setMap","stop","apply","arguments","pad","num","slice","secs","minutes","Math","floor","hours","markerClickFunction1","_this2","cancelBubble","returnValue","stopPropagation","preventDefault","component"],"mappings":"kHAAA,kCAEA,IAIIA,EACAC,EALEC,EAAU,0CACVC,EAAgB,gBAElBC,IAAgBC,OAAOC,OAKrBC,EAAc,IAAIC,SAAQ,SAACC,EAASC,GACxCV,EAAqBS,EACrBR,EAAoBS,KAGP,SAASC,IAItB,GAAIP,EAAa,OAAOG,EAExBH,GAAc,EAIdC,OAAOF,GAAiB,kBAAMH,EAAmBK,OAAOC,SAKxD,IAAMM,EAASC,SAASC,cAAc,UAOtC,OANAF,EAAOG,OAAQ,EACfH,EAAOI,OAAQ,EACfJ,EAAOK,IAAM,iEAAHC,OAAoEhB,EAAO,cAAAgB,OAAaf,GAClGS,EAAOO,QAAUlB,EACjBY,SAASO,cAAc,QAAQC,YAAYT,GAEpCL,I,yCCrCT,IAAIe,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,MAAM,CAACG,IAAI,WAAWC,YAAY,CAAC,OAAS,qBAAqB,UAAU,MAAMC,MAAM,CAAC,GAAK,aAAa,CAACL,EAAG,MAAM,CAACG,IAAI,MAAMC,YAAY,CAAC,OAAS,OAAO,MAAQ,QAAQC,MAAM,CAAC,GAAK,cACtTC,EAAkB,G,6ECeP,GACfC,KAAA,WACA,OACAC,iBAAAC,EAAA,QACA9B,OAAA,KACA+B,IAAA,KACAC,QAAA,OAGAC,QAAA,WACA,KAAAC,WAEAC,QAAA,CACAD,QAAA,eAAAE,EAAAC,eAAAC,mBAAAC,MAAA,SAAAC,IAAA,IAAAC,EAAAC,EAAAC,EAAA,YAAAL,mBAAAM,MAAA,SAAAC,GAAA,eAAAA,EAAAC,KAAAD,EAAAE,MAAA,cAAAF,EAAAE,KAAA,EACAC,iBAAA,YAAAhD,OAAA6C,EAAAI,KACA,KAAAC,SAAA,IAAAlD,OAAAmD,KAAAC,SACA,IAAApD,OAAAmD,KAAAE,OAAA,oBACAZ,EAAA,CACAa,KAAA,GACAC,OAAA,CAAAC,IAAA,iBAAAC,IAAA,aACAC,mBAAA,EACAC,gBAAA,EACAC,UAAA5D,OAAAmD,KAAAU,UAAAC,QACAC,mBAAA,EACAC,gBAAA,SACAC,mBAAA,CACAC,SAAAlE,OAAAmD,KAAAgB,gBAAAC,cAGA,KAAArC,IAAA,IAAA/B,OAAAmD,KAAAkB,IAAA,KAAAC,IAAAxD,cAAA,QAAA2B,GACA,KAAAT,QAAA,KAAAsC,IAAAxD,cAAA,aACA,KAAAyD,WAAA,IAAAvE,OAAAmD,KAAAqB,WAGA,CACAC,KAAA,wBACAC,YAAA,OACAC,UAAA,OACAC,YAAA,GAEA,CACAH,KAAA,4FACAC,YAAA,OACAG,SAAA,IAEA,CACAJ,KAAA,0BACAC,YAAA,OACAI,aAAA,GAGA,CACAL,KAAAzE,OAAAmD,KAAA4B,WAAAC,sBAGAtC,EAAA,IAAA1C,OAAAmD,KAAA8B,SAAA,CACAR,KAAA,KAAA5C,iBACAqD,UAAA,EACAC,UAAA,EACAT,YAAA,UACAU,cAAA,EACAN,aAAA,EACAO,WAAA,EAQAtD,UAkBA/B,OAAAmD,KAAAmC,MAAAC,YAAA7C,EAAA,kBAAA8C,GAEAC,QAAAC,IACA,wBACAF,EAAAG,OACAhD,EAAAd,iBAAA2D,EAAAG,SAEA,IAAAC,EAAAjD,EAAAd,iBAAA2D,EAAAG,QACA,GAAAC,EAAA,CACA,IAAAC,EAAA,IAAA7F,OAAAmD,KAAAE,OACAV,EAAAd,iBAAA2D,EAAAG,QAAAnC,IACAb,EAAAd,iBAAA2D,EAAAG,QAAAlC,KAEAqC,EAAAC,OAAAH,EAAAI,MACAC,EAAA,qBACAA,GAAA,WAAArF,OAAAgF,EAAApC,IAAA,QACAyC,GAAA,WAAArF,OAAAgF,EAAAnC,IAAA,QACAwC,GAAA,aAAArF,OAAAgF,EAAAM,MAAA,QACAD,GAAA,YAAArF,OAAAuF,IAAAP,EAAAQ,KAAA,UAAAC,OACA,cACA,KAAAzF,OAAA+B,EAAA2D,OAAAR,GAAA,QACAG,GAAA,cAAArF,OACA,KAAAgF,EAAAW,OACA,qCACA,8CAEAN,GAAA,SAEAtD,EAAA4B,WAAAiC,WAAAP,GACAtD,EAAA4B,WAAAkC,YAAAZ,GACAlD,EAAA4B,WAAAmC,KAAA/D,EAAAZ,SAQAW,EAAAiE,OAAA,KAAA5E,KAAA,yBAAAc,EAAA+D,UAAApE,EAAA,mCAAAJ,EAAAyE,MAAA,KAAAC,YAjHA,GAmHAC,IAAA,SAAAC,GACA,WAAAA,GAAAC,OAAA,IAEAX,OAAA,SAAAY,GACA,IAAAC,EAAAC,KAAAC,MAAAH,EAAA,IACAA,GAAA,GACA,IAAAI,EAAAF,KAAAC,MAAAF,EAAA,IAEA,OADAA,GAAA,GACA,GAAAvG,OAAA,KAAAmG,IAAAO,GAAA,KAAA1G,OAAA,KAAAmG,IAAAI,GAAA,KAAAvG,OAAA,KAAAmG,IAAAG,KAGAK,qBAAA,SAAA3B,EAAAC,GAAA,IAAA2B,EAAA,KACA,gBAAAhC,GACAA,EAAAiC,cAAA,EACAjC,EAAAkC,aAAA,EACAlC,EAAAmC,kBACAnC,EAAAmC,kBACAnC,EAAAoC,kBAGAnC,QAAAC,IAAA,cAAAE,GAEA,IAAAE,EAAAC,OAAAH,EAAAI,MACAC,EAAA,qBACAA,GAAA,WAAArF,OAAAgF,EAAApC,IAAA,QACAyC,GAAA,WAAArF,OAAAgF,EAAAnC,IAAA,QACAwC,GAAA,aAAArF,OAAAgF,EAAAM,MAAA,QACAD,GAAA,YAAArF,OAAAuF,IAAAP,EAAAQ,KAAA,UAAAC,OACA,cACA,KAAAzF,OAAA4G,EAAAlB,OAAAR,GAAA,QACAG,GAAA,cAAArF,OACA,KAAAgF,EAAAW,OACA,qCACA,8CAEAN,GAAA,SAEAuB,EAAAjD,WAAAiC,WAAAP,GACAuB,EAAAjD,WAAAkC,YAAAZ,GACA2B,EAAAjD,WAAAmC,KAAAc,EAAAzF,SCvLyX,I,YCOrX8F,EAAY,eACd,EACA7G,EACAW,GACA,EACA,KACA,KACA,MAIa,aAAAkG,E","file":"js/chunk-4723579a.167edbda.js","sourcesContent":["// Your personal API key.\n// Get it here: https://console.cloud.google.com/google/maps-apis\nconst API_KEY = 'AIzaSyBi5WW-e-1iYAXiRJ7j6V1P7LBAdXwR54Y' \nconst CALLBACK_NAME = `gmapsCallback`;\n\nlet initialized = !!window.google;\nlet resolveInitPromise;\nlet rejectInitPromise;\n// This promise handles the initialization\n// status of the google maps script.\nconst initPromise = new Promise((resolve, reject) => {\n  resolveInitPromise = resolve;\n  rejectInitPromise = reject;\n});\n\nexport default function init() {\n  // If Google Maps already is initialized\n  // the `initPromise` should be resolved\n  // eventually.\n  if (initialized) return initPromise;\n\n  initialized = true;\n  // The callback function is called by\n  // the Google Maps script if it is\n  // successfully loaded.\n  window[CALLBACK_NAME] = () => resolveInitPromise(window.google);\n\n  // We inject a new script tag into\n  // the `<head>` of our HTML to load\n  // the Google Maps script.\n  const script = document.createElement(`script`);\n  script.async = true;\n  script.defer = true;\n  script.src = `https://maps.googleapis.com/maps/api/js?libraries=drawing&key=${API_KEY}&callback=${CALLBACK_NAME}`;\n  script.onerror = rejectInitPromise;\n  document.querySelector(`head`).appendChild(script);\n\n  return initPromise;\n}","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"my-0\"},[_c('div',{ref:\"warp_map\",staticStyle:{\"height\":\"calc(100vh - 0rem)\",\"z-index\":\"30\"},attrs:{\"id\":\"warp_map\"}},[_c('div',{ref:\"map\",staticStyle:{\"height\":\"100%\",\"width\":\"100%\"},attrs:{\"id\":\"map\"}})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"my-0\">\n    <div\n      id=\"warp_map\"\n      ref=\"warp_map\"\n      style=\"height: calc(100vh - 0rem); z-index: 30\"\n    >\n      <div id=\"map\" ref=\"map\" style=\"height: 100%; width: 100%\"></div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport gmapsInit from \"@/gmap/gmaps\";\nimport moment from \"moment-timezone\";\n\nexport default {\n  data() {\n    return {\n      trainCoordinates: require(\"../milesSea/trainCoordinates.json\"),\n      google: null,\n      map: null,\n      warpMap: null,\n    };\n  },\n  created() {\n    this.initMap();\n  },\n  methods: {\n    async initMap() {\n      this.google = await gmapsInit();\n      this.geocoder = new google.maps.Geocoder();\n      const latlng = new google.maps.LatLng(10.18383, 100.60639);\n      const options = {\n        zoom: 12,\n        center: {lat: 13.8694133333333, lng: 100.5727065},\n        streetViewControl: false,\n        mapTypeControl: false,\n        mapTypeId: google.maps.MapTypeId.ROADMAP,\n        fullscreenControl: true,\n        gestureHandling: \"greedy\",\n        zoomControlOptions: {\n          position: google.maps.ControlPosition.LEFT_CENTER,\n        },\n      };\n      this.map = new google.maps.Map(this.$el.querySelector(\"#map\"), options);\n      this.warpMap = this.$el.querySelector(\"#warp_map\");\n      this.infoWindow = new google.maps.InfoWindow();\n    //   google.maps.event.trigger(this.map, \"resize\");\n\n      const symbolOne = {\n        path: \"M -2,0 0,-2 2,0 0,2 z\",\n        strokeColor: \"#F00\",\n        fillColor: \"#F00\",\n        fillOpacity: 1,\n      };\n      const symbolTwo = {\n        path: \"M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3\",\n        strokeColor: \"#00F\",\n        rotation: 45,\n      };\n      const symbolThree = {\n        path: \"M -2,-2 2,2 M 2,-2 -2,2\",\n        strokeColor: \"#292\",\n        strokeWeight: 4,\n      };\n\n      const lineSymbol = {\n        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,\n      };\n\n      const flightPath = new google.maps.Polyline({\n        path: this.trainCoordinates,\n        editable: true,\n        geodesic: true,\n        strokeColor: \"#B10000\",\n        strokeOpacity: 5.0,\n        strokeWeight: 2,\n        draggable: false,\n        // icons: [\n        //   {\n        //     icon: lineSymbol,\n        //     offset: \"100%\",\n        //     // repeat: \"100px\",\n        //   },\n        // ],\n        map: map,\n      });\n\n        // for (const trainCoordinate of this.trainCoordinates) {\n        //   const position = new google.maps.LatLng(trainCoordinate.lat, trainCoordinate.lng);\n        //   const marker = new google.maps.Marker({\n        //     position: { lat: trainCoordinate.lat, lng: trainCoordinate.lng },\n        //     icon: {\n        //       path: google.maps.SymbolPath.CIRCLE,\n        //       scale: 2.5,\n        //       strokeColor: \"#B10000\",\n        //     },\n        //     map: this.map,\n        //   });\n        //   const fn1 = this.markerClickFunction1(trainCoordinate, position);\n        //   google.maps.event.addListener(marker, \"click\", fn1);\n        // }\n\n      google.maps.event.addListener(flightPath, \"click\", (e) => {\n        // Check if click was on a vertex control point  mouseover\n        console.log(\n          \"this.trainCoordinates\",\n          e.vertex,\n          this.trainCoordinates[e.vertex]\n        );\n        const train = this.trainCoordinates[e.vertex];\n        if (train) {\n          const latlng = new google.maps.LatLng(\n            this.trainCoordinates[e.vertex].lat,\n            this.trainCoordinates[e.vertex].lng\n          );\n          const time = Number(train.Time);\n          let infoHtml = `<div class=\"info\">`;\n          infoHtml += `<p>lat: ${train.lat}</p>`;\n          infoHtml += `<p>lng: ${train.lng}</p>`;\n          infoHtml += `<p>speed: ${train.Speed}</p>`;\n          infoHtml += `<p>date: ${moment(train.Date, \"DDMMYY\").format(\n            \"DD/MM/YYYY\"\n          )} ${this.hhmmss(time)}</p>`;\n          infoHtml += `<p>status: ${\n            train.Status == \"A\"\n              ? '<b style=\"color: green\">Active</b>'\n              : '<b style=\"color: gray\">Inactive</b>'\n          }</p>`;\n          infoHtml += `</div>`;\n\n          this.infoWindow.setContent(infoHtml);\n          this.infoWindow.setPosition(latlng);\n          this.infoWindow.open(this.map);\n        }\n      });\n\n    //   google.maps.event.addListener(flightPath, \"mouseout\", (e)=>{\n    //     this.infoWindow.close();\n    //   });\n\n      flightPath.setMap(this.map);\n    },\n    pad(num) {\n      return (\"0\" + num).slice(-2);\n    },\n    hhmmss(secs) {\n      var minutes = Math.floor(secs / 60);\n      secs = secs % 60;\n      var hours = Math.floor(minutes / 60);\n      minutes = minutes % 60;\n      return `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(secs)}`;\n      // return pad(hours)+\":\"+pad(minutes)+\":\"+pad(secs); for old browsers\n    },\n    markerClickFunction1(train, latlng) {\n      return (e) => {\n        e.cancelBubble = true;\n        e.returnValue = false;\n        if (e.stopPropagation) {\n          e.stopPropagation();\n          e.preventDefault();\n        }\n\n        console.log(\"train >>>. \", train);\n\n        const time = Number(train.Time);\n        let infoHtml = `<div class=\"info\">`;\n        infoHtml += `<p>lat: ${train.lat}</p>`;\n        infoHtml += `<p>lng: ${train.lng}</p>`;\n        infoHtml += `<p>speed: ${train.Speed}</p>`;\n        infoHtml += `<p>date: ${moment(train.Date, \"DDMMYY\").format(\n        \"DD/MM/YYYY\"\n        )} ${this.hhmmss(time)}</p>`;\n        infoHtml += `<p>status: ${\n        train.Status == \"A\"\n            ? '<b style=\"color: green\">Active</b>'\n            : '<b style=\"color: gray\">Inactive</b>'\n        }</p>`;\n        infoHtml += `</div>`;\n\n        this.infoWindow.setContent(infoHtml);\n        this.infoWindow.setPosition(latlng);\n        this.infoWindow.open(this.map);\n      };\n    },\n  },\n};\n</script>\n\n<style></style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/@vue/cli-plugin-babel/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!./TrainTracking.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/@vue/cli-plugin-babel/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!./TrainTracking.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./TrainTracking.vue?vue&type=template&id=00cee7de\"\nimport script from \"./TrainTracking.vue?vue&type=script&lang=js\"\nexport * from \"./TrainTracking.vue?vue&type=script&lang=js\"\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"],"sourceRoot":""}