4141
4242 <template >
4343 <div class =" -mt-12" id =" map-wrapper" >
44- <div class =" flex flex-wrap mb-2" >
45- <input type =" text"
46- class =" form-control w-56 rounded border block mobile:w-full px-4 py-2 bg-gray-200 dark:bg-gray-600"
47- :placeholder =" t('map.track_placeholder')" v-model =" tracking.id" />
48- <select
49- class =" block w-44 ml-2 px-4 py-2 bg-gray-200 dark:bg-gray-600 border rounded mobile:w-full mobile:m-0 mobile:mt-1"
50- v-model =" tracking.type" >
51- <option value =" server_" >{{ t('map.track_server') }}</option >
52- <option value =" " >{{ t('map.track_steam') }}</option >
53- <option value =" player_" >{{ t('map.track_character') }}</option >
54- </select >
44+ <div class =" flex flex-wrap justify-between mb-2 w-map max-w-full" >
45+ <div class =" flex flex-wrap" >
46+ <input type =" text"
47+ class =" form-control w-56 rounded border block mobile:w-full px-4 py-2 bg-gray-200 dark:bg-gray-600"
48+ :placeholder =" t('map.track_placeholder')" v-model =" tracking.id" />
49+ <select
50+ class =" block w-44 ml-2 px-4 py-2 bg-gray-200 dark:bg-gray-600 border rounded mobile:w-full mobile:m-0 mobile:mt-1"
51+ v-model =" tracking.type" >
52+ <option value =" server_" >{{ t('map.track_server') }}</option >
53+ <option value =" " >{{ t('map.track_steam') }}</option >
54+ <option value =" player_" >{{ t('map.track_character') }}</option >
55+ </select >
56+ <button
57+ class =" px-5 py-2 ml-2 font-semibold text-white rounded bg-primary dark:bg-dark-primary mobile:block mobile:w-full mobile:m-0 mobile:mt-1"
58+ @click =" trackId(tracking.type + tracking.id)" >
59+ {{ t('map.do_track') }}
60+ </button >
61+ </div >
5562 <button
5663 class =" px-5 py-2 ml-2 font-semibold text-white rounded bg-primary dark:bg-dark-primary mobile:block mobile:w-full mobile:m-0 mobile:mt-1"
57- @click =" trackId(tracking.type + tracking.id)" >
58- {{ t('map.do_track') }}
64+ @click =" advancedTracking = !advancedTracking"
65+ :title =" advancedTracking ? t('global.enabled') : t('global.disabled')"
66+ >
67+ {{ t('map.advanced_track') }}
68+ <i class =" fas fa-check ml-1" v-if =" advancedTracking" ></i >
69+ <i class =" fas fa-times ml-1" v-else ></i >
5970 </button >
6071 </div >
61- <div class =" relative" >
72+ <div class =" relative w-map max-w-full " >
6273 <div id =" map" class =" w-map max-w-full relative h-max" ></div >
6374 <pre class =" bg-opacity-70 bg-white coordinate-attr absolute bottom-0 left-0 cursor-pointer z-1k"
6475 v-if =" clickedCoords" ><span @click =" copyText($event, clickedCoords)" >{{ clickedCoords }}</span > / <span
6576 @click =" copyText($event, coordsCommand)" >{{ t('map.command') }}</span ></pre >
77+ <pre
78+ class =" w-map-gauge bg-opacity-70 bg-white absolute bottom-attr2 right-0 z-1k p-2 text-gray-800 text-xs"
79+ v-if =" advancedTracking && trackedPlayer"
80+ >{{ tracking.data.advanced }}</pre >
81+ <div
82+ class =" w-map-gauge bg-opacity-70 bg-white absolute bottom-attr right-0 z-1k px-2 pt-2 pb-1 flex"
83+ :class =" {'hidden' : !advancedTracking || !trackedPlayer}"
84+ >
85+ <div class =" relative w-map-other-gauge" >
86+ <img src =" /images/height-indicator.png" style =" height : 90px " alt =" Height indicator" />
87+ <div
88+ class =" font-bold absolute border-b-2 border-gray-700 left-8 text-gray-700 w-map-height-ind text-right text-xxs leading-3"
89+ :style =" 'bottom: ' + tracking.data.alt + '%;'"
90+ >
91+ {{ tracking.data.altitude }}
92+ </div >
93+ </div >
94+ <vue-speedometer
95+ class =" inline-block"
96+ :value =" tracking.data.speed"
97+ labelFontSize =" 12px"
98+ :ringWidth =" 20"
99+ :height =" 90"
100+ :width =" 120"
101+ startColor =" #90EF90"
102+ endColor =" #fa1e43"
103+ :minValue =" 0"
104+ :maxValue =" 360"
105+ :segments =" 4"
106+ currentValueText =" ${value}mph"
107+ valueTextFontSize =" 14px"
108+ :needleHeightRatio =" 0.7"
109+ />
110+ </div >
66111 </div >
67112 <div class =" flex flex-wrap" >
68113 <div v-if =" afkPeople" class =" pt-4 mr-4" >
@@ -88,6 +133,7 @@ import {GestureHandling} from "leaflet-gesture-handling";
88133import " leaflet-rotatedmarker" ;
89134import ' leaflet-fullscreen' ;
90135import custom_icons from " ../../data/vehicles.json" ;
136+ import VueSpeedometer from " vue-speedometer" ;
91137
92138const Rainbow = require (' rainbowvis.js' );
93139
@@ -156,6 +202,7 @@ export default {
156202 layout: Layout,
157203 components: {
158204 VSection,
205+ VueSpeedometer,
159206 },
160207 props: {
161208 servers: {
@@ -199,8 +246,15 @@ export default {
199246 },
200247 tracking: {
201248 id: ' ' ,
202- type: ' server_'
249+ type: ' server_' ,
250+ data: {
251+ speed: 0 ,
252+ alt: 0 ,
253+ altitude: ' 0m' ,
254+ advanced: ' Loading...'
255+ }
203256 },
257+ advancedTracking: false ,
204258 cayoCalibrationMode: false // Set this to true to recalibrate the cayo perico map
205259 };
206260 },
@@ -488,6 +542,7 @@ export default {
488542 }
489543
490544 const id = " player_" + player .character .id ,
545+ originalCoords = Math .round (player .coords .x ) + ' ' + Math .round (player .coords .y ) + ' ' + Math .round (player .coords .z ),
491546 coords = _this .convertCoords (player .coords ),
492547 heading = _this .mapNumber (- player .heading , - 180 , 180 , 0 , 360 ) - 180 ,
493548 isDriving = ' vehicle' in player && player .vehicle && player .vehicle .driving ,
@@ -605,6 +660,20 @@ export default {
605660 duration: 0.1
606661 });
607662
663+ _this .tracking .data .speed = Math .round (speed * 2.236936 );
664+
665+ const feet = Math .round (player .coords .z * 3.281 );
666+
667+ _this .tracking .data .alt = (feet / 5000 ) * 100 ;
668+ _this .tracking .data .alt = _this .tracking .data .alt > 99 ? 99 : _this .tracking .data .alt ;
669+ _this .tracking .data .altitude = feet + ' ft' ;
670+
671+ _this .tracking .data .advanced = [
672+ player .character .fullName + ' (' + player .source + ' )' ,
673+ ' Coords: ' + originalCoords,
674+ ' Vehicle: ' + (player .vehicle ? player .vehicle .model : ' n/a' )
675+ ].join (" \n " );
676+
608677 if (_this .firstRefresh ) {
609678 _this .openPopup = id;
610679 }
0 commit comments