{"version":3,"sources":["webpack:///./src/views/Helexium/SuperAdmin/Map.vue","webpack:///src/views/Helexium/SuperAdmin/Map.vue","webpack:///./src/views/Helexium/SuperAdmin/Map.vue?4421","webpack:///./src/views/Helexium/SuperAdmin/Map.vue?3a0d","webpack:///./src/assets/images/vehiculo1.png"],"names":["render","_vm","this","_c","_self","attrs","staticClass","staticStyle","scopedSlots","_u","key","fn","_l","listaServicios","it","servicioId","_v","_s","placa","$moment","tz","fecha","format","conductor","nombres","apellidos","proxy","model","value","placaSeleccionada","callback","$$v","expression","on","$event","obtenerCoordenadasPlaca","seleccionaPlaca","zoom","center","url","attribution","ref","customIcon","markerLatLng","polylinePath","polylineOptions","coordinates","item","id","lat","lng","staticRenderFns","components","LMap","LTileLayer","LMarker","LIconDefault","LPolyline","data","L","icon","iconUrl","require","iconSize","iconAnchor","popupAnchor","color","weight","persona","empresaId","mounted","JSON","parse","localStorage","getItem","empresa","getServicios","methods","res","$store","dispatch","path","length","error","iniciar","$nextTick","addPopup","moveMarker","marker","$refs","markerRef","mapObject","bindPopup","autoClose","openPopup","duration","i","startLatLng","getLatLng","targetLatLng","latLng","startTime","Date","getTime","progress","setLatLng","setPopupContent","push","sleep","ms","Promise","resolve","setTimeout","component","module","exports"],"mappings":"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","file":"js/chunk-6084637f.ee4743b9.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('b-container',{attrs:{\"fluid\":\"\"}},[_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-12\"},[_c('div',{staticClass:\"d-flex justify-content-left\"},[_c('b-form-select',{staticStyle:{\"width\":\"50%\"},attrs:{\"text-field\":\"placa.placa\",\"value-field\":\"id\"},scopedSlots:_vm._u([{key:\"first\",fn:function(){return _vm._l((_vm.listaServicios),function(it){return _c('b-form-select-option',{key:it.servicioId,attrs:{\"value\":it}},[_vm._v(_vm._s(it.servicioId + \" | \" + it.placa.placa + \" | \" + _vm.$moment.tz(it.fecha, \"America/Bogota\").format(\" DD-MM-YYYY HH:mm\") + \" | \" + it.conductor.nombres + \" \" + it.conductor.apellidos))])})},proxy:true}]),model:{value:(_vm.placaSeleccionada),callback:function ($$v) {_vm.placaSeleccionada=$$v},expression:\"placaSeleccionada\"}}),_c('vs-button',{attrs:{\"gradient\":\"\",\"primary\":\"\"},on:{\"click\":function($event){return _vm.obtenerCoordenadasPlaca()}}},[_vm._v(\"OBTENER DATOS\")]),_c('vs-button',{attrs:{\"gradient\":\"\",\"primary\":\"\"},on:{\"click\":function($event){return _vm.seleccionaPlaca()}}},[_vm._v(\"INICIAR RUTA\")])],1)])]),_c('div',{staticClass:\"row mt-2\"},[_c('div',{staticClass:\"col-md-8\"},[_c('l-map',{staticStyle:{\"height\":\"400px\"},attrs:{\"zoom\":_vm.zoom,\"center\":_vm.center}},[_c('l-icon-default'),_c('l-tile-layer',{attrs:{\"url\":_vm.url,\"attribution\":_vm.attribution}}),_c('l-marker',{ref:\"markerRef\",attrs:{\"icon\":_vm.customIcon,\"lat-lng\":_vm.markerLatLng}}),_c('l-polyline',{attrs:{\"lat-lngs\":_vm.polylinePath,\"options\":_vm.polylineOptions}})],1)],1),_c('div',{staticClass:\"col-md-4\"},[_c('div',{staticClass:\"mt-0\",staticStyle:{\"overflow-y\":\"scroll\",\"height\":\"400px\"}},[_c('table',{staticClass:\"table table-bordered table-responsive-md table-striped text-center\",attrs:{\"id\":\"pendientesJefe\"}},[_c('thead',[_c('tr',[_c('th',[_vm._v(\"Fecha\")]),_c('th',[_vm._v(\"Latitud\")]),_c('th',[_vm._v(\"Longitud\")])])]),_c('tbody',_vm._l((_vm.coordinates),function(item){return _c('tr',{key:item.id},[_c('td',[_vm._v(_vm._s(_vm.$moment.tz(item.fecha, \"America/Costa_Rica\").format(\"DD-MM-YYYY HH:mm\")))]),_c('td',[_vm._v(_vm._s(item.lat))]),_c('td',[_vm._v(_vm._s(item.lng))])])}),0)])])])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-container fluid>\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <div class=\"d-flex justify-content-left\">\r\n          <b-form-select text-field=\"placa.placa\" value-field=\"id\" style=\"width: 50%\" v-model=\"placaSeleccionada\">\r\n            <template #first>\r\n              <!-- <b-form-select-option  selected :value=\"null\" disabled>-- selecciona una placa --</b-form-select-option> -->\r\n              <b-form-select-option v-for=\"it of listaServicios\" :key=\"it.servicioId\" :value=\"it\">{{\r\n                it.servicioId +\r\n                \" | \" +\r\n                it.placa.placa +\r\n                \" | \" +\r\n                $moment.tz(it.fecha, \"America/Bogota\").format(\" DD-MM-YYYY HH:mm\") +\r\n                \" | \" +\r\n                it.conductor.nombres +\r\n                \" \" +\r\n                it.conductor.apellidos\r\n              }}</b-form-select-option>\r\n            </template>\r\n          </b-form-select>\r\n\r\n          <vs-button gradient primary @click=\"obtenerCoordenadasPlaca()\">OBTENER DATOS</vs-button>\r\n          <vs-button gradient primary @click=\"seleccionaPlaca()\">INICIAR RUTA</vs-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row mt-2\">\r\n      <div class=\"col-md-8\">\r\n        <l-map style=\"height: 400px\" :zoom=\"zoom\" :center=\"center\">\r\n          <l-icon-default />\r\n          <l-tile-layer :url=\"url\" :attribution=\"attribution\" />\r\n          <l-marker :icon=\"customIcon\" :lat-lng=\"markerLatLng\" ref=\"markerRef\"></l-marker>\r\n          <l-polyline :lat-lngs=\"polylinePath\" :options=\"polylineOptions\"></l-polyline>\r\n        </l-map>\r\n      </div>\r\n      <div class=\"col-md-4\">\r\n        <div class=\"mt-0\" style=\"overflow-y: scroll; height: 400px\">\r\n          <table id=\"pendientesJefe\" class=\"table table-bordered table-responsive-md table-striped text-center\">\r\n            <thead>\r\n              <tr>\r\n                <th>Fecha</th>\r\n                <th>Latitud</th>\r\n                <th>Longitud</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr v-for=\"item in coordinates\" :key=\"item.id\">\r\n                <td>{{ $moment.tz(item.fecha, \"America/Costa_Rica\").format(\"DD-MM-YYYY HH:mm\") }}</td>\r\n                <td>{{ item.lat }}</td>\r\n                <td>{{ item.lng }}</td>\r\n              </tr>\r\n            </tbody>\r\n          </table>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </b-container>\r\n</template>\r\n\r\n<script>\r\nimport { LMap, LTileLayer, LMarker, LIconDefault, LPolyline } from \"vue2-leaflet\";\r\nimport L from \"leaflet\";\r\nimport \"leaflet/dist/leaflet.css\";\r\n\r\nexport default {\r\n  components: {\r\n    LMap,\r\n    LTileLayer,\r\n    LMarker,\r\n    LIconDefault,\r\n    LPolyline,\r\n  },\r\n  data() {\r\n    return {\r\n      url: \"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\",\r\n      attribution: '&copy; <a target=\"_blank\" href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors',\r\n      zoom: 16,\r\n      center: [4.7279077, -74.062912],\r\n      markerLatLng: [4.7279077, -74.062912],\r\n      customIcon: L.icon({\r\n        iconUrl: require(\"@/assets/images/vehiculo1.png\"),\r\n        iconSize: [50, 50],\r\n        iconAnchor: [16, 16],\r\n        popupAnchor: [10, -32],\r\n      }),\r\n      coordinates: [\r\n        // [4.7279077, -74.062912],\r\n        // [4.7286456, -74.0667592],\r\n        // [4.7293151, -74.0673967],\r\n        // [4.7293098, -74.0673919],\r\n        // [4.7292511, -74.0676391],\r\n        // [4.7296193, -74.0689143],\r\n        // [4.7241644, -74.0730205],\r\n        // [4.7208569, -74.074729],\r\n        // [4.7160998, -74.0729646],\r\n        // [4.7266615, -74.0706394],\r\n        // [4.7293207, -74.0691661],\r\n      ],\r\n      polylinePath: [], // Para almacenar las coordenadas de la línea\r\n      polylineOptions: {\r\n        color: \"red\",\r\n        weight: 6,\r\n      },\r\n      persona: {},\r\n      empresaId: {},\r\n      listaServicios: [],\r\n      placaSeleccionada: {},\r\n    };\r\n  },\r\n  mounted() {\r\n    this.persona = JSON.parse(localStorage.getItem(\"setPersonaAct\"));\r\n    this.empresaId = this.persona.empresa.id;\r\n    this.getServicios();\r\n    // this.moveMarker();\r\n  },\r\n  methods: {\r\n    async obtenerCoordenadasPlaca() {\r\n      try {\r\n        let res = await this.$store.dispatch(\"hl_get\", {\r\n          path: \"Vehiculo/CoordenadasPorServicio/\" + this.placaSeleccionada.servicioId,\r\n        });\r\n        console.log(res);\r\n        if (res.length > 0) {\r\n          this.coordinates = res;\r\n        } else {\r\n          this.coordinates = [];\r\n        }\r\n      } catch (error) {\r\n        this.coordinates = [];\r\n        console.log(\"err\", error);\r\n      }\r\n    },\r\n    async seleccionaPlaca() {\r\n      console.log(this.placaSeleccionada);\r\n      await this.obtenerCoordenadasPlaca();\r\n      if (this.coordinates.length > 0) {\r\n        this.center = [this.coordinates[0].lat, this.coordinates[0].lng];\r\n        this.markerLatLng = [this.coordinates[0].lat, this.coordinates[0].lng];\r\n        this.iniciar();\r\n      }\r\n    },\r\n    async getServicios() {\r\n      try {\r\n        let res = await this.$store.dispatch(\"hl_get\", {\r\n          path: \"Vehiculo/ServiciosPorEmpresa/\" + this.empresaId,\r\n        });\r\n        console.log(res);\r\n        if (res.length > 0) {\r\n          this.listaServicios = res;\r\n        } else {\r\n          this.listaServicios = [];\r\n        }\r\n      } catch (error) {\r\n        this.listaServicios = [];\r\n        console.log(\"err\", error);\r\n      }\r\n    },\r\n    iniciar() {\r\n      this.zoom = 16;\r\n      this.$nextTick(() => {\r\n        this.addPopup();\r\n\r\n        this.moveMarker();\r\n      });\r\n    },\r\n    addPopup() {\r\n      const marker = this.$refs.markerRef.mapObject;\r\n\r\n      if (!marker) {\r\n        console.error(\"No se pudo obtener la referencia del marcador.\");\r\n        return;\r\n      }\r\n\r\n      marker.bindPopup(\"123\", { autoClose: false }).openPopup();\r\n    },\r\n    async moveMarker() {\r\n      const marker = this.$refs.markerRef.mapObject;\r\n\r\n      if (!marker) {\r\n        console.error(\"No se pudo obtener la referencia del marcador.\");\r\n        return;\r\n      }\r\n\r\n      const duration = 2000; // Duración de la animación en milisegundos\r\n\r\n      for (let i = 0; i < this.coordinates.length; i++) {\r\n        const startLatLng = marker.getLatLng();\r\n        const targetLatLng = L.latLng(this.coordinates[i]);\r\n\r\n        const startTime = new Date().getTime();\r\n\r\n        while (new Date().getTime() - startTime <= duration) {\r\n          const progress = (new Date().getTime() - startTime) / duration;\r\n          const lat = startLatLng.lat + progress * (targetLatLng.lat - startLatLng.lat);\r\n          const lng = startLatLng.lng + progress * (targetLatLng.lng - startLatLng.lng);\r\n\r\n          marker.setLatLng([lat, lng]);\r\n          this.center = [lat, lng];\r\n\r\n          marker.setPopupContent(\"lat:\" + lat + \" / lng:\" + lng + \" /\" + this.$moment.tz(this.coordinates[i].fecha, \"America/Bogota\").format(\" DD-MM-YYYY HH:mm:ss\"));\r\n          this.polylinePath.push([lat, lng]);\r\n\r\n          await this.sleep(16); // Esperar 16 milisegundos (aproximadamente 60 FPS)\r\n        }\r\n      }\r\n    },\r\n    sleep(ms) {\r\n      return new Promise((resolve) => setTimeout(resolve, ms));\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style></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!./Map.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!./Map.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Map.vue?vue&type=template&id=47dbd7d8\"\nimport script from \"./Map.vue?vue&type=script&lang=js\"\nexport * from \"./Map.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","module.exports = __webpack_public_path__ + \"img/vehiculo1.9a6d770c.png\";"],"sourceRoot":""}