{"version":3,"sources":["webpack:///./src/views/vesselTracking/vesselTrackingHistory.vue?d598","webpack:///./src/views/vesselTracking/vesselTrackingHistory.vue?ed73","webpack:///src/views/vesselTracking/vesselTrackingHistory.vue","webpack:///./src/views/vesselTracking/vesselTrackingHistory.vue?d8f4","webpack:///./src/views/vesselTracking/vesselTrackingHistory.vue","webpack:///./node_modules/@babel/runtime/helpers/builtin/es6/objectSpread.js","webpack:///./src/utils/index.js"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticClass","data","length","hide","playing","on","onPause","onPlay","onStop","onChange","model","value","callback","$$v","expression","_e","staticRenderFns","name","props","type","Array","default","Boolean","Function","dataLatLngHistory","vasselReport","Object","google","tickerTimer","vessel","percent","zoom","milesSea","require","infoWindow","undefined","computed","_objectSpread","mapState","loading","state","vesselHistory","watch","val","oldval","initGoogleMap","len","created","destroyed","mounted","methods","_initGoogleMap","_asyncToGenerator","regeneratorRuntime","mark","_callee","latlng","options","markerImage","wrap","_context","prev","next","gmapsInit","sent","geocoder","maps","Geocoder","LatLng","lat","lng","center","streetViewControl","mapTypeControl","mapTypeId","MapTypeId","ROADMAP","fullscreenControl","gestureHandling","zoomControl","map","Map","$el","querySelector","addGeoJson","setStyle","feature","color","getProperty","fillColor","strokeWeight","drawPosition","InfoWindow","createMarkerIcon","getVesselImg","createVasselMarker","setZoom","stop","apply","arguments","img","vassel","Marker","position","icon","zIndex","detail","fn1","markerClickFunction1","fn2","markerClickFunction2","fn3","markerClickFunction3","event","addListener","moveVessel","i","setMap","panTo","coords","_this$createMaker","createMaker","marker","push","drawLine","line","Polyline","path","geodesic","strokeColor","strokeOpacity","icons","fillOpacity","repeat","getDirection","direction","n","tpye","Math","ceil","true_heading","shipType","iconType","imgShip","imageUrl","concat","imgSize","size","MarkerImage","Size","Point","clearTickerTimer","isStop","clearTimeout","onTickerTimer","vm","setTimeout","displayLatlng","_this","e","cancelBubble","returnValue","stopPropagation","preventDefault","mmis","mmsi","mid","latitude","longitude","speed","speed_over_ground","hdg_cog","record_time","dateFormat","infoHtml","setContent","setPosition","open","latLng","_this2","vesselData","detailVesselStatus","_this3","close","component","target","source","ownKeys","keys","getOwnPropertySymbols","filter","sym","getOwnPropertyDescriptor","enumerable","forEach","key","date","d","Date","dformat","getDate","getMonth","getFullYear","join","getHours","getMinutes","getSeconds","mobileDevice","min","window","screen","width","height","navigator","userAgent","indexOf"],"mappings":"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","file":"js/chunk-0d8f758b.38f4d69e.js","sourcesContent":["export * from \"-!../../../node_modules/@vue/cli-service/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/lib/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!./vesselTrackingHistory.vue?vue&type=style&index=0&id=5255505f&prod&scoped=true&lang=css\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"vessel-tracking-history\"}},[_c('div',{staticClass:\"centerx history-container\"},[_c('div',{staticClass:\"mb-9\",attrs:{\"id\":\"map\"}}),(_vm.data.length > 1 && !_vm.hide)?_c('div',{staticClass:\"vx-row h-content\"},[(!_vm.playing)?_c('vs-button',{staticClass:\"h-btn\",attrs:{\"color\":\"primary\",\"type\":\"filled\",\"icon\":\"play_arrow\"},on:{\"click\":_vm.onPlay}}):_c('vs-button',{staticClass:\"h-btn\",attrs:{\"color\":\"primary\",\"type\":\"filled\",\"icon\":\"pause\"},on:{\"click\":_vm.onPause}}),_c('vs-button',{staticClass:\"h-btn\",attrs:{\"color\":\"danger\",\"type\":\"filled\",\"icon\":\"stop\"},on:{\"click\":_vm.onStop}}),_c('div',[_c('vs-slider',{staticClass:\"h-slider\",attrs:{\"max\":_vm.data.length - 1,\"color\":\"dark\"},on:{\"change\":_vm.onChange},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:\"value\"}})],1)],1):_vm._e()])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div id=\"vessel-tracking-history\">\n    <div class=\"centerx history-container\">\n      <div id=\"map\" class=\"mb-9\"></div>\n      <div v-if=\"data.length > 1 && !hide\" class=\"vx-row h-content\">\n        <vs-button\n          v-if=\"!playing\"\n          class=\"h-btn\"\n          color=\"primary\"\n          type=\"filled\"\n          icon=\"play_arrow\"\n          @click=\"onPlay\"\n        ></vs-button>\n        <vs-button v-else class=\"h-btn\" color=\"primary\" type=\"filled\" icon=\"pause\" @click=\"onPause\"></vs-button>\n        <vs-button class=\"h-btn\" color=\"danger\" type=\"filled\" icon=\"stop\" @click=\"onStop\"></vs-button>\n        <div>\n          <vs-slider\n            v-model=\"value\"\n            :max=\"data.length - 1\"\n            color=\"dark\"\n            class=\"h-slider\"\n            @change=\"onChange\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<script>\n/*global google*/\nimport gmapsInit from \"@/gmap/gmaps\";\nimport { dateFormat } from \"@/utils\";\nimport { mapState } from \"vuex\";\nexport default {\n  name: \"VesselTrackingHistory\",\n  props: {\n    data: {\n      type: Array,\n      default() {\n        return [];\n      }\n    },\n    hide: {\n      type: Boolean,\n      default: false\n    },\n    callback: {\n      type: Function,\n      default() {}\n    },\n    dataLatLngHistory: {\n      type: Array,\n      default() {\n        return [];\n      }\n    },\n    vasselReport: {\n      type: Object,\n      default() {\n        return {};\n      }\n    }\n  },\n  data() {\n    return {\n      value: 0,\n      google: null,\n      tickerTimer: null,\n      vessel: null,\n      percent: 1,\n      zoom: 5,\n      milesSea: require(\"../../milesSea/all.json\"),\n      playing: false,\n      infoWindow: undefined\n    };\n  },\n  computed: {\n    ...mapState({\n      // data: state => state.vesselHistory.data,\n      loading: state => state.vesselHistory.loading\n    })\n  },\n  watch: {\n    data(val, oldval) {\n      if (val.length != oldval.length) {\n        this.initGoogleMap();\n        const len = this.data.length - 1;\n        this.percent = 100 / len;\n      }\n    }\n  },\n  created() {\n    if (this.data.length > 0) {\n      this.initGoogleMap();\n    }\n  },\n  destroyed() {\n    this.onStop();\n  },\n  mounted() {\n    if (this.data.length > 0) {\n      const len = this.data.length - 1;\n      this.percent = 100 / len;\n    }\n  },\n  methods: {\n    async initGoogleMap() {\n      this.google = await gmapsInit();\n      this.geocoder = new google.maps.Geocoder();\n      var latlng = new google.maps.LatLng(this.data[0].lat, this.data[0].lng);\n      var options = {\n        zoom: this.zoom,\n        center: latlng,\n        streetViewControl: false,\n        mapTypeControl: false,\n        mapTypeId: google.maps.MapTypeId.ROADMAP,\n        fullscreenControl: true,\n        gestureHandling: \"greedy\",\n        zoomControl: true\n      };\n      this.map = new google.maps.Map(this.$el.querySelector(\"#map\"), options);\n      this.map.data.addGeoJson(this.milesSea);\n      this.map.data.setStyle(function(feature) {\n        var color = feature.getProperty(\"color\");\n        if (color == \"red\") {\n          color = \"red\";\n        } else if (color == \"green\") {\n          color = \"#10FD1E\";\n        } else if (color == \"blue\") {\n          color = \"#00BDFF\";\n        }\n        return {\n          fillColor: color,\n          strokeWeight: 0\n        };\n      });\n      this.drawPosition();\n      this.infoWindow = new google.maps.InfoWindow();\n\n      const markerImage = this.createMarkerIcon(\n        this.getVesselImg(this.data[0]),\n        50\n      );\n      this.vessel = this.createVasselMarker(this.data[0], latlng, markerImage);\n      this.map.setZoom(15);\n    },\n    createVasselMarker(data, latlng, img) {\n      const vassel = new google.maps.Marker({\n        position: latlng,\n        map: this.map,\n        icon: img,\n        zIndex: 999\n      });\n      const detail = { ...this.vasselReport, ...data };\n      const fn1 = this.markerClickFunction1(detail, latlng);\n      const fn2 = this.markerClickFunction2(detail, latlng);\n      const fn3 = this.markerClickFunction3(detail, latlng);\n      google.maps.event.addListener(vassel, \"mouseover\", fn1);\n      google.maps.event.addListener(vassel, \"click\", fn2);\n      google.maps.event.addListener(vassel, \"mouseout\", fn3);\n      return vassel;\n    },\n    onChange(value) {\n      this.moveVessel(value);\n      this.callback(value);\n    },\n    moveVessel(i) {\n      const latlng = new google.maps.LatLng(this.data[i].lat, this.data[i].lng);\n      // this.vessel.setPosition(latlng);\n      this.vessel.setMap(null);\n      const markerImage = this.createMarkerIcon(\n        this.getVesselImg(this.data[i]),\n        50\n      );\n      this.vessel = this.createVasselMarker(this.data[i], latlng, markerImage);\n\n      this.map.panTo(latlng);\n    },\n    drawPosition() {\n      const coords = [];\n      for (let i = 0; i < this.data.length; i++) {\n        const icon = this.createMarkerIcon(`/vesselIcon/icons/dot.png`);\n        const { position, marker } = this.createMaker(this.data[i], icon);\n        const fn1 = this.markerClickFunction1(this.data[i], position);\n        const fn2 = this.markerClickFunction2(this.data[i], position);\n        const fn3 = this.markerClickFunction3(this.data[i], position);\n        google.maps.event.addListener(marker, \"mouseover\", fn1);\n        google.maps.event.addListener(marker, \"click\", fn2);\n        google.maps.event.addListener(marker, \"mouseout\", fn3);\n        coords.push(position);\n      }\n      this.drawLine(coords);\n    },\n    createMaker(latlng, markerImage) {\n      const position = new google.maps.LatLng(latlng.lat, latlng.lng);\n      const marker = new google.maps.Marker({\n        position,\n        map: this.map,\n        icon: markerImage\n      });\n      return { marker, position };\n    },\n    drawLine(coords) {\n      const line = new google.maps.Polyline({\n        path: coords,\n        geodesic: true,\n        strokeColor: \"#000000\",\n        strokeOpacity: 1.0,\n        strokeWeight: 3,\n        icons: [\n          {\n            icon: {\n              path: \"M-2 -2 L 0 2 L2 -2 Z\",\n              strokeColor: \"#F00\",\n              fillColor: \"#F00\",\n              fillOpacity: 1,\n              strokeWeight: 1\n            },\n            repeat: \"50px\"\n          }\n        ]\n      });\n      line.setMap(this.map);\n    },\n    getDirection(direction) {\n      const n = direction % 10 ? 0 : 1;\n      const tpye = Math.ceil(direction / 10) + n;\n      return tpye > 36 ? 10 : tpye;\n    },\n    getVesselImg(data) {\n      const direction = data.true_heading;\n      const shipType = \"b\";\n      let iconType = data.icon;\n      let imgShip = \"other\";\n      if (iconType == \"tanker\") {\n        imgShip = \"tanker\";\n      } else if (iconType == \"other\") {\n        imgShip = \"other\";\n      } else if (iconType == \"passenger\") {\n        imgShip = \"passenger\";\n      } else if (iconType == \"cargo\") {\n        imgShip = \"cargo\";\n      } else if (iconType == \"fishing\") {\n        imgShip = \"fishing\";\n      } else if (iconType == \"EXCISE\") {\n        imgShip = \"excise\";\n      }\n      const imageUrl = `/vesselIcon/${imgShip}/${shipType}${this.getDirection(\n        direction\n      )}.png`;\n      return imageUrl;\n    },\n    createMarkerIcon(imageUrl, imgSize) {\n      const size = imgSize || 8;\n      var markerImage = new google.maps.MarkerImage(\n        imageUrl,\n        new google.maps.Size(size, size),\n        new google.maps.Point(0, 0),\n        new google.maps.Point(size / 2, size / 2),\n        new google.maps.Size(size, size)\n      );\n      return markerImage;\n    },\n    clearTickerTimer(isStop) {\n      if (this.tickerTimer) {\n        clearTimeout(this.tickerTimer);\n        this.tickerTimer = null;\n        this.playing = false;\n        if (isStop) {\n          this.value = 0;\n        }\n      }\n    },\n    onTickerTimer() {\n      const vm = this;\n      this.tickerTimer = setTimeout(() => {\n        vm.onTickerTimer();\n        if (vm.value + 1 <= vm.data.length - 1) {\n          vm.value += 1;\n        } else if (vm.value + 1 >= vm.data.length - 1) {\n          vm.clearTickerTimer(false);\n        }\n        vm.vessel;\n      }, 500);\n    },\n    onPlay() {\n      if (!this.tickerTimer) {\n        if (this.value == this.data.length - 1) {\n          this.value = 0;\n          this.moveVessel(this.value);\n        }\n        this.playing = true;\n        this.onTickerTimer();\n      }\n    },\n    onStop() {\n      this.value = 0;\n      this.moveVessel(this.value);\n      this.clearTickerTimer(true);\n    },\n    onPause() {\n      this.clearTickerTimer(false);\n    },\n    displayLatlng(latlng) {\n      return `${latlng.lat}, ${latlng.lng}`;\n    },\n    markerClickFunction1(vessel, 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        const mmis = vessel.mmsi;\n        const mid = vessel.name;\n        const lat = vessel.latitude || latlng.lat();\n        const lng = vessel.longitude || latlng.lng();\n        const speed = vessel.speed_over_ground;\n        const hdg_cog = vessel.true_heading || vessel.hdg_cog;\n        let record_time = undefined;\n        if (vessel.record_time) {\n          record_time = dateFormat(vessel.record_time);\n        }\n\n        let infoHtml = `<div class=\"info\">`;\n        infoHtml += mmis ? `<p> MMIS: ${mmis}` : \"\";\n        infoHtml += mid ? `<br> MID: ${mid}` : \"\";\n        infoHtml += `<p>latitude: ${lat}</p>`;\n        infoHtml += `<p>longitude: ${lng}</p>`;\n        infoHtml += mid ? `<p> true heading: ${hdg_cog}</p>` : \"\";\n        infoHtml += mid ? `<p> speed over ground: ${speed}</p>` : \"\";\n        infoHtml += record_time ? `<p>record_time: ${record_time}</p>` : \"\";\n        infoHtml += `</div>`;\n        this.infoWindow.setContent(infoHtml);\n        this.infoWindow.setPosition(latlng);\n        this.infoWindow.open(this.map);\n      };\n    },\n    markerClickFunction2(vessel, latLng) {\n      return e => {\n        e.cancelBubble = true;\n        e.returnValue = false;\n        if (e.stopPropagation) {\n          e.stopPropagation();\n          e.preventDefault();\n        }\n        this.vesselData = vessel;\n        this.detailVesselStatus = true;\n      };\n    },\n    markerClickFunction3(vessel, latLng) {\n      return e => {\n        e.cancelBubble = true;\n        e.returnValue = false;\n        if (e.stopPropagation) {\n          e.stopPropagation();\n          e.preventDefault();\n        }\n        this.infoWindow.close();\n      };\n    }\n  }\n};\n</script>\n<style scoped>\n.history-container {\n  margin: 8px;\n  padding: 16px;\n}\n#map {\n  padding: 16px;\n  position: relative;\n  width: 900px;\n  height: 400px;\n}\n.h-height {\n  height: 500px;\n}\n.h-list {\n  height: 200px;\n}\n.h-content {\n  padding: 8px;\n  align-items: start;\n  justify-content: center;\n}\n.h-ontop {\n  align-self: start;\n}\n.h-btn {\n  margin: 4px;\n}\n.h-slider {\n  margin-left: 8px;\n}\n</style>","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!./vesselTrackingHistory.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!./vesselTrackingHistory.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./vesselTrackingHistory.vue?vue&type=template&id=5255505f&scoped=true\"\nimport script from \"./vesselTrackingHistory.vue?vue&type=script&lang=js\"\nexport * from \"./vesselTrackingHistory.vue?vue&type=script&lang=js\"\nimport style0 from \"./vesselTrackingHistory.vue?vue&type=style&index=0&id=5255505f&prod&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  \"5255505f\",\n  null\n  \n)\n\nexport default component.exports","import defineProperty from \"./defineProperty\";\nexport default function _objectSpread(target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments[i] != null ? arguments[i] : {};\n    var ownKeys = Object.keys(source);\n\n    if (typeof Object.getOwnPropertySymbols === 'function') {\n      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {\n        return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n      }));\n    }\n\n    ownKeys.forEach(function (key) {\n      defineProperty(target, key, source[key]);\n    });\n  }\n\n  return target;\n}","export const dateFormat = (date) => {\n  const d = new Date(date);\n  const dformat =\n    [d.getDate(), d.getMonth() + 1, d.getFullYear()].join(\"/\") +\n    \" \" +\n    [d.getHours(), d.getMinutes(), d.getSeconds()].join(\":\");\n  return dformat;\n};\n\nexport const mobileDevice = () => {\n  return (\n    Math.min(window.screen.width, window.screen.height) <= 812 ||\n    navigator.userAgent.indexOf(\"Mobi\") > -1\n  );\n};\n"],"sourceRoot":""}