Passed
Pull Request — master (#173)
by PoUpA
02:20
created

pokemon.maps.js ➔ ... ➔ $(ꞌ#liveSelectorꞌ).click   A

Complexity

Conditions 1
Paths 1

Size

Total Lines 8

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 1
c 0
b 0
f 0
nc 1
nop 0
dl 0
loc 8
rs 9.4285
1
/** global: google */
2
/** global: pokemon_id */
3
var map, heatmap;
4
var pokemonMarkers = [];
5
var updateLiveTimeout;
6
7
var ivMin = 80;
8
var ivMax = 100;
9
10
function initMap() {
11
	
12
	$.getJSON( "core/json/variables.json", function( jsondata ) {
13
14
		var variables = jsondata;
15
16
		var lattitude = Number(variables['system']['map_center_lat']);
17
		var longitude = Number(variables['system']['map_center_long']);
18
		var zoom_level = Number(variables['system']['zoom_level']);
19
		var pokeimg_suffix=jsondata['system']['pokeimg_suffix'];
20
21
		map = new google.maps.Map(document.getElementById('map'), {
22
			center: {lat: lattitude, lng: longitude},
23
			zoom: zoom_level,
24
			zoomControl: true,
25
			scaleControl: false,
26
			scrollwheel: true,
27
			disableDoubleClickZoom: false,
28
		});
29
		
30
		map.set('styles',[
31
			{
32
				"featureType":"all",
33
				"elementType":"labels.text.fill",
34
				"stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]
35
			},
36
			{
37
				"featureType":"all",
38
				"elementType":"labels.text.stroke",
39
				"stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]
40
			},
41
			{
42
				"featureType":"all",
43
				"elementType":"labels.icon",
44
				"stylers":[{"visibility":"off"}]
45
			},
46
			{
47
				"featureType":"administrative",
48
				"elementType":"geometry.fill",
49
				"stylers":[{"color":"#fefefe"},{"lightness":20}]
50
			},
51
			{
52
				"featureType":"administrative",
53
				"elementType":"geometry.stroke",
54
				"stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]
55
			},
56
			{
57
				"featureType":"landscape",
58
				"elementType":"geometry",
59
				"stylers":[{"color":"#f5f5f5"},{"lightness":20}]
60
			},
61
			{
62
				"featureType":"poi",
63
				"elementType":"geometry",
64
				"stylers":[{"color":"#f5f5f5"},{"lightness":21}]
65
			},
66
			{
67
				"featureType":"poi.park",
68
				"elementType":"geometry",
69
				"stylers":[{"color":"#dedede"},{"lightness":21}]
70
			},
71
			{
72
				"featureType":"poi.park",
73
				"elementType":"geometry.fill",
74
				"stylers":[{"color":"#c2ffd7"}]
75
			},
76
			{
77
				"featureType":"road.highway",
78
				"elementType":"geometry.fill",
79
				"stylers":[{"color":"#ffffff"},{"lightness":17}]},
80
			{
81
				"featureType":"road.highway",
82
				"elementType":"geometry.stroke",
83
				"stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},
84
			{
85
				"featureType":"road.arterial",
86
				"elementType":"geometry",
87
				"stylers":[{"color":"#ffffff"},{"lightness":18}]},
88
			{
89
				"featureType":"road.local",
90
				"elementType":"geometry",
91
				"stylers":[{"color":"#ffffff"},{"lightness":16}]},
92
			{
93
				"featureType":"transit",
94
				"elementType":"geometry",
95
				"stylers":[{"color":"#f2f2f2"},{"lightness":19}]},
96
			{
97
				"featureType":"water",
98
				"elementType":"geometry",
99
				"stylers":[{"color":"#e9e9e9"},{"lightness":17}]},
100
			{
101
				"featureType":"water",
102
				"elementType":"geometry.fill",
103
				"stylers":[{"color":"#b3d8f9"}]
104
			}
105
		]);
106
		initHeatmap();
107
		initSelector(pokeimg_suffix);
108
		});
109
110
}
111
112
function initSelector(pokeimg_suffix){
113
	$('#heatmapSelector').click(function(){
114
		hideLive();
115
		showHeatmap();
116
		$('#heatmapSelector').addClass('active');
117
		$('#liveSelector').removeClass('active');
118
	});
119
	$('#liveSelector').click(function(){
120
		hideHeatmap();
121
		initLive(pokeimg_suffix);
122
		
123
		
124
		$('#liveSelector').addClass('active');
125
		$('#heatmapSelector').removeClass('active');
126
	});
127
}
128
129
function initLive(pokeimg_suffix){
130
	showLive();
131
	$("#liveFilterSelector").rangeSlider({
132
		bounds:{
133
			min: 0,
134
			max: 100
135
		},
136
		defaultValues:{
137
			min: ivMin,
138
			max: ivMax
139
		}
140
	});
141
	
142
	$("#liveFilterSelector").bind("valuesChanged",function(e, data){
143
		clearTimeout(updateLiveTimeout);
144
		removePokemonMarkerByIv(data.values.min,data.values.max);
145
		ivMin = data.values.min;
146
		ivMax = data.values.max;
147
		updateLive(pokeimg_suffix);
148
	});
149
	updateLive(pokeimg_suffix);
150
	
151
}
152
153
function initHeatmap(){
154
	$.ajax({
155
		'async': true,
156
		'type': "GET",
157
		'global': false,
158
		'dataType': 'json',
159
		'url': "core/process/aru.php",
160
		'data': {
161
			'request': "",
162
			'target': 'arrange_url',
163
			'method': 'method_target',
164
			'type' : 'pokemon_slider_init'
165
		}
166
	}).done(function(bounds){
167
		initHeatmapData(bounds);
168
	});
169
	
170
}
171
172
function initHeatmapData(bounds){
173
	var boundMin = new Date(bounds.min.replace(/-/g, "/"));
174
	var boundMax = new Date(bounds.max.replace(/-/g, "/"));
175
	var selectorMax = boundMax;
176
	var selectorMin = boundMin;
177
178
	var maxMinus2Weeks = new Date(selectorMax.getTime() - 2 * 7 * 24 * 60 * 60 * 1000);
179
	if(selectorMin < maxMinus2Weeks){
180
		selectorMin = maxMinus2Weeks;
181
	}
182
	$("#timeSelector").dateRangeSlider({
183
		bounds:{
184
			min: boundMin,
185
			max: boundMax
186
		},
187
		defaultValues:{
188
			min: selectorMin,
189
			max: selectorMax
190
		}
191
	});
192
	createHeatmap();
193
194
}
195
196
function createHeatmap() {
197
	
198
	heatmap = new google.maps.visualization.HeatmapLayer({
199
		data: [],
200
		map: map
201
	});
202
203
	var gradient = [
204
		'rgba(0, 255, 255, 0)',
205
		'rgba(0, 255, 255, 1)',
206
		'rgba(0, 191, 255, 1)',
207
		'rgba(0, 127, 255, 1)',
208
		'rgba(0, 63, 255, 1)',
209
		'rgba(0, 0, 255, 1)',
210
		'rgba(0, 0, 223, 1)',
211
		'rgba(0, 0, 191, 1)',
212
		'rgba(0, 0, 159, 1)',
213
		'rgba(0, 0, 127, 1)',
214
		'rgba(63, 0, 91, 1)',
215
		'rgba(127, 0, 63, 1)',
216
		'rgba(191, 0, 31, 1)',
217
		'rgba(255, 0, 0, 1)'
218
	];
219
	heatmap.set('gradient', gradient);
220
	heatmap.setMap(map);
221
	$("#timeSelector").bind("valuesChanged",function(){updateHeatmap()});
222
	$("#timeSelector").dateRangeSlider("min"); // will trigger valuesChanged
223
}
224
225
function updateHeatmap() {
226
	var dateMin = $("#timeSelector").dateRangeSlider("min");
227
	var dateMax = $("#timeSelector").dateRangeSlider("max");
228
	$("#loaderContainer").show();
229
	$.ajax({
230
		'async': true,
231
		'type': "GET",
232
		'global': false,
233
		'dataType': 'json',
234
		'url': "core/process/aru.php",
235
		'data': {
236
			'request': "",
237
			'target': 'arrange_url',
238
			'method': 'method_target',
239
			'type' : 'pokemon_heatmap_points',
240
			'pokemon_id' : pokemon_id,
241
			'start' : Math.floor(dateMin.getTime()/1000),
242
			'end' : Math.floor(dateMax.getTime()/1000)
243
		}
244
	}).done(function(points){
245
		var googlePoints = [];
246
		for (var i = 0; i < points.length; i++) {
247
			googlePoints.push(new google.maps.LatLng(points[i].latitude,points[i].longitude))
248
		}
249
		var newPoints = new google.maps.MVCArray(googlePoints);
250
		heatmap.set('data', newPoints);
251
		$("#loaderContainer").hide();
252
	});
253
}
254
255
function hideHeatmap() {
256
	$("#timeFilterContainer").hide();
257
	heatmap.set('map', null);
258
}
259
260
function showHeatmap() {
261
	$("#timeFilterContainer").show();
262
	heatmap.set('map', map);
263
	hideLive();
264
}
265
266
function hideLive() {
267
	$("#liveFilterContainer").hide();
268
	clearTimeout(updateLiveTimeout);
269
	clearPokemonMarkers();
270
}
271
272
function showLive() {
273
	hideHeatmap();
274
	clearTimeout(updateLiveTimeout);
275
	$("#liveFilterContainer").show();
276
	
277
}
278
279
function updateLive(pokeimg_suffix){
280
	$.ajax({
281
		'async': true,
282
		'type': "POST",
283
		'global': false,
284
		'dataType': 'json',
285
		'url': "core/process/aru.php",
286
		'data': {
287
			'request': "",
288
			'target': 'arrange_url',
289
			'method': 'method_target',
290
			'type' : 'pokemon_live',
291
			'pokemon_id' : pokemon_id,
292
			'inmap_pokemons' : extractEncountersId(),
293
			'ivMin' : ivMin,
294
			'ivMax' : ivMax
295
		}
296
	}).done(function(pokemons){
297
		for (var i = 0; i < pokemons.length; i++) {
298
			addPokemonMarker(pokemons[i],pokeimg_suffix)
299
		}
300
		updateLiveTimeout=setTimeout(function(){ updateLive(pokeimg_suffix) },5000);
301
	});
302
}
303
304
function addPokemonMarker(pokemon,pokeimg_suffix) {
305
	var image = {
306
		url:'core/pokemons/'+pokemon.pokemon_id+pokeimg_suffix,
307
		scaledSize: new google.maps.Size(32, 32),
308
		origin: new google.maps.Point(0,0),
309
		anchor: new google.maps.Point(16, 16),
310
		labelOrigin : new google.maps.Point(16, 36)
311
	};
312
	var ivPercent = ((100/45)*(parseInt(pokemon.individual_attack)+parseInt(pokemon.individual_defense)+parseInt(pokemon.individual_stamina))).toFixed(2);
313
	var marker = new google.maps.Marker({
314
		position: {lat: parseFloat(pokemon.latitude), lng:parseFloat(pokemon.longitude)},
315
		map: map,
316
		icon: image,
317
		label:{
318
			color:getIvColor(ivPercent),
319
			text:ivPercent+"%"
320
		},
321
		encounterId: pokemon.encounter_id,
322
		ivPercent: ivPercent
323
	});
324
	var ivFormatted = ((100/45)*(parseInt(pokemon.individual_attack)+parseInt(pokemon.individual_defense)+parseInt(pokemon.individual_stamina))).toFixed(2);
325
	var contentString = '<div>'+
326
			'<h4> '+pokemon.name+' #'+pokemon.pokemon_id+' IV: '+ivFormatted+'% </h4>'+
327
			'<div id="bodyContent">'+
328
				'<p class="disappear_time_display text-center">'+pokemon.disappear_time_real+'<span class="disappear_time_display_timeleft"></span></p>'+
329
				
330
				'<p></p>'+
331
				'<div class="progress" style="height: 6px; width: 120px; margin-bottom: 10px; margin-top: 2px; margin-left: auto; margin-right: auto">'+
332
					'<div title="Attack IV: '+pokemon.individual_attack+'" class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="'+pokemon.individual_attack+'" aria-valuemin="0" aria-valuemax="45" style="width: '+(((100/15)*pokemon.individual_attack)/3)+'%">'+
333
						'<span class="sr-only">Attack IV: '+pokemon.individual_attack+'</span>'+
334
					'</div>'+
335
					'<div title="Defense IV: '+pokemon.individual_defense+'" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="'+pokemon.individual_defense+'" aria-valuemin="0" aria-valuemax="45" style="width: '+(((100/15)*pokemon.individual_defense)/3)+'%">'+
336
						'<span class="sr-only">Defense IV: '+pokemon.individual_defense+'</span>'+
337
					'</div>'+
338
					'<div title="Stamina IV: '+pokemon.individual_stamina+'" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="'+pokemon.individual_stamina+'" aria-valuemin="0" aria-valuemax="45" style="width: '+(((100/15)*pokemon.individual_stamina)/3)+'%">'+
339
						'<span class="sr-only">Stamina IV: '+pokemon.individual_stamina+'</span>'+
340
					'</div>'+
341
				'</div>'+
342
				'<p class="text-center">('+pokemon.individual_attack+"/"+pokemon.individual_defense+"/"+pokemon.individual_stamina+')</p>'+
343
			'</div>'+
344
		'</div>';
345
346
	var infoWindow = new google.maps.InfoWindow({
347
		content: contentString
348
	});
349
	infoWindow.isClickOpen = false;
350
	marker.addListener('click', function() {
351
		infoWindow.isClickOpen = true;
352
		infoWindow.open(map, this);
353
	});
354
	google.maps.event.addListener(infoWindow,'closeclick',function(){
355
		this.isClickOpen = false;
356
	});
357
	marker.addListener('mouseover', function() {
358
		infoWindow.open(map, this);
359
	});
360
361
	// assuming you also want to hide the infowindow when user mouses-out
362
	marker.addListener('mouseout', function() {
363
		if(infoWindow.isClickOpen === false){
364
			infoWindow.close();
365
		}
366
	});
367
	pokemonMarkers.push(marker);
368
	var now = new Date().getTime();
369
	var endTime = new Date(pokemon.disappear_time_real.replace(/-/g, "/")).getTime();
370
	
371
	setTimeout(function(){ removePokemonMarker(pokemon.encounter_id) },endTime-now);
372
}
373
374
375
function getIvColor(ivPercent){
376
	var ivColor="rgba(0, 0, 0, 0)";
377
	if(ivPercent>80){
378
		ivColor="rgba(0, 0, 255, 0.70)";
379
	}
380
	if(ivPercent>90){
381
		ivColor="rgba(246, 178, 107,  0.90)";
382
	}
383
	if(ivPercent>99){
384
		ivColor="rgba(255, 0, 0, 1)";
385
	}
386
	return ivColor;
387
}
388
389
function clearPokemonMarkers() {
390
	for (var i = 0; i < pokemonMarkers.length; i++) {
391
		pokemonMarkers[i].setMap(null);
392
	}
393
	pokemonMarkers = [];
394
}
395
function removePokemonMarker(encounter_id) {
396
	for (var i = 0; i < pokemonMarkers.length; i++) {
397
		if(pokemonMarkers[i].encounterId == encounter_id){
398
			pokemonMarkers[i].setMap(null);
399
			pokemonMarkers.splice(i,1);
400
			break;
401
		}
402
		
403
	}
404
	
405
}
406
407
function removePokemonMarkerByIv(ivMin,ivMax) {
408
	var cleanMarkers=[];
409
	for (var i = 0; i < pokemonMarkers.length; i++) {
410
		if(pokemonMarkers[i].ivPercent < ivMin || pokemonMarkers[i].ivPercent > ivMax){
411
			pokemonMarkers[i].setMap(null);
412
		}
413
		else{
414
			cleanMarkers.push(pokemonMarkers[i]);
415
		}
416
		
417
	}
418
	pokemonMarkers = cleanMarkers;
419
}
420
421
function extractEncountersId(){
422
	var inmapEncounter = [];
423
	for (var i = 0; i < pokemonMarkers.length; i++) {
424
		inmapEncounter[i]=pokemonMarkers[i].encounterId;
425
	}
426
	
427
	return inmapEncounter;
428
}