API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 19th, 2017
168
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>PokemonGO - SELESTAT</title>
  7. <link href="jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" type="text/css">
  8. <link rel="stylesheet" href="/static/css/leaflet.css">
  9.  
  10. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  11. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  12. <script>
  13. $( function() {
  14. $( "#popup" ).dialog();
  15.  
  16. $( "#progressbar" ).progressbar({
  17. value: 20
  18. });
  19. } );
  20. </script>
  21. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  22. <style>
  23. .map {
  24. position: absolute;
  25. width: 100%;
  26. height: 100%;
  27. top: 0;
  28. left: 0;
  29. z-index: 100;
  30. }
  31. .report {
  32. z-index: 1000;
  33. position: absolute;
  34. top: 10px;
  35. left: 60px;
  36. padding: 10px;
  37. box-sizing: border-box;
  38. background-color: #fff;
  39. background-size: 24px 24px;
  40. background-position: 4px 4px;
  41. background-repeat: no-repeat;
  42. text-align: center;
  43. width: 200px;
  44. height: 38px;
  45. border-radius: 4px;
  46. box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  47. cursor: pointer;
  48. }
  49. .meteo {
  50. z-index: 1000;
  51. bottom: 75px;
  52. position: absolute;
  53. left: 50px;
  54. text-align: center;
  55. width: 32px;
  56. height: 32px;
  57. cursor: pointer;
  58. }
  59. .box {
  60. z-index: 1000;
  61. position: absolute;
  62. bottom: 30px;
  63. left: 10px;
  64. padding: 10px;
  65. box-sizing: border-box;
  66. background-color: #fff;
  67. background-size: 24px 24px;
  68. background-position: 4px 4px;
  69. background-repeat: no-repeat;
  70. text-align: center;
  71. width: 32px;
  72. height: 32px;
  73. border-radius: 4px;
  74. box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  75. cursor: pointer;
  76. }
  77.  
  78. .twitter {
  79. background-image: url(/static/img/twitter.png);
  80. bottom: 70px
  81. }
  82. .my-location {
  83. background-image: url(/static/img/my-location.png);
  84. bottom: 190px
  85. }
  86. .discord {
  87. background-image: url(/static/img/discord.png);
  88. bottom: 150px
  89. }
  90. .don {
  91. background-image: url(/static/img/don.png)
  92. }
  93. .fb {
  94. background-image: url(/static/img/fb.png);
  95. bottom: 110px
  96. }
  97. .my-location:hover {
  98. background-color: #f4f4f4;
  99. }
  100. .fort-icon {
  101. border-radius: 12px;
  102. padding: 2px;
  103. background: #fff;
  104. box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  105. }
  106. .leaflet-control-layers-toggle {
  107. background-image: url(/static/img/layers.png);
  108. }
  109. </style>
  110. </head>
  111. <body>
  112. <h1>PokeSelestat arrive, patientez.</h1>
  113.  
  114. <div id="popup" title="PokéSélestat">
  115. <div class="news">
  116. <h3>Les nouveautés : </h3>
  117. <p>Modification des notifications du compte twitter. </p>
  118. <p>Changement d'adresse du site : http://selestat.livepokemap.fr/ . </p>
  119. <p>Mise en place d'un discord</p>
  120. <p>Mise en place d'un lien de don.</p>
  121. <h4>Barre de progression des dons par rapport au coût mensuel :</h4>
  122. <div id="progressbar"></div>
  123. </div>
  124. </div>
  125.  
  126.  
  127. <div id="main-map" class="map"></div>
  128.  
  129.  
  130.  
  131. <a class="box twitter" href="https://twitter.com/PokeSelestat" target="_blank"></a>
  132. <a class="box my-location"></a>
  133. <a class="box don" href="https://www.paypal.me/mryohann" target="blank"></a>
  134. <a class="box discord" href="https://discord.gg/MQ79sdR" target="blank"></a>
  135. <a class="box fb" href="https://www.facebook.com/groups/1601387136827050/" target="blank"></a>
  136. <a class="report" href="http://selestat.livepokemap.fr/report">RAPPORT DE SPAWN</a>
  137. <div class="meteo" id="cont_Njc0NjJ8MXw1fDV8MXxGRkZGRkZ8MXwwMDAwMDB8Y3wx"><div id="spa_Njc0NjJ8MXw1fDV8MXxGRkZGRkZ8MXwwMDAwMDB8Y3wx"><a id="a_Njc0NjJ8MXw1fDV8MXxGRkZGRkZ8MXwwMDAwMDB8Y3wx" href="http://www.meteocity.com/france/selestat_v67462/" target="_blank" style="color:#333;text-decoration:none;">Météo Sélestat</a></div><script type="text/javascript" src="http://widget.meteocity.com/js/Njc0NjJ8MXw1fDV8MXxGRkZGRkZ8MXwwMDAwMDB8Y3wx"></script></div>
  138.  
  139. <script src="/static/js/jquery-3.1.1.min.js"></script>
  140. <script src="/static/js/leaflet.js"></script>
  141. <script>
  142. var PokemonIcon = L.Icon.extend({
  143. options: {
  144. iconSize: [30, 30],
  145. popupAnchor: [0, -15]
  146. }
  147. });
  148. var FortIcon = L.Icon.extend({
  149. options: {
  150. iconSize: [20, 20],
  151. popupAnchor: [0, -10],
  152. className: 'fort-icon'
  153. }
  154. });
  155. var WorkerIcon = L.Icon.extend({
  156. options: {
  157. iconSize: [20, 20],
  158. className: 'worker-icon',
  159. iconUrl: '/static/img/pokeball.png'
  160. }
  161. });
  162. var NotificationIcon = L.Icon.extend({
  163. options: {
  164. iconSize: [35, 35],
  165. className: 'notification-icon',
  166. iconUrl: '/static/img/masterball.png'
  167. }
  168. });
  169. var PokestopIcon = L.Icon.extend({
  170. options: {
  171. iconSize: [20, 20],
  172. className: 'pokestop-icon',
  173. iconUrl: '/static/img/pokestop.png'
  174. }
  175. });
  176.  
  177. function getMarkers () {
  178. return new Promise(function (resolve, reject) {
  179. $.get('/data', function (response) {
  180. resolve(response);
  181. });
  182. });
  183. }
  184.  
  185. var markers = {};
  186. var overlays = {
  187. Pokemon: L.layerGroup([]),
  188. Trash: L.layerGroup([]),
  189. Gyms: L.layerGroup([]),
  190. Pokestops: L.layerGroup([]),
  191. Workers: L.layerGroup([]),
  192. Spawns: L.layerGroup([]),
  193. ScanArea: L.layerGroup([])
  194. };
  195.  
  196. function getPopupContent (item) {
  197. var diff = (item.expires_at - new Date().getTime() / 1000);
  198. var minutes = parseInt(diff / 60);
  199. var seconds = parseInt(diff - (minutes * 60));
  200. var expires_at = minutes + 'm ' + seconds + 's';
  201. return '<b>#' + item.pokemon_id + ' ' + item.name + '</b> ' + expires_at;
  202. }
  203.  
  204. function getOpacity (item) {
  205. var diff = (item.expires_at - new Date().getTime() / 1000);
  206. if (diff > 600) {
  207. return 1;
  208. }
  209. return 0.5 + diff / 600;
  210. }
  211.  
  212. function PokemonMarker (raw) {
  213. var icon = new PokemonIcon({iconUrl: '/static/icons/' + raw.pokemon_id + '.png'});
  214. var marker = L.marker([raw.lat, raw.lon], {icon: icon, opacity: 1});
  215. marker.raw = raw;
  216. markers[raw.id] = marker;
  217. marker.on('popupopen',function popupopen (event) {
  218. event.popup.setContent(getPopupContent(event.target.raw));
  219. event.target.popupInterval = setInterval(function () {
  220. event.popup.setContent(getPopupContent(event.target.raw));
  221. }, 1000);
  222. });
  223. marker.on('popupclose', function (event) {
  224. clearInterval(event.target.popupInterval);
  225. });
  226. marker.setOpacity(getOpacity(marker.raw));
  227. marker.opacityInterval = setInterval(function () {
  228. var diff = marker.raw.expires_at - new Date().getTime() / 1000;
  229. if (diff > 0) {
  230. marker.setOpacity(getOpacity(marker.raw));
  231. } else {
  232. if (marker.raw.trash) {
  233. marker.removeFrom(overlays.Trash);
  234. } else {
  235. marker.removeFrom(overlays.Pokemons);
  236. }
  237. marker.removeFrom(map);
  238. markers[marker.raw.id] = undefined;
  239. clearInterval(marker.opacityInterval);
  240. }
  241. }, 1000);
  242. marker.bindPopup();
  243. return marker;
  244. }
  245.  
  246. function FortMarker (raw) {
  247. var icon = new FortIcon({iconUrl: '/static/forts/' + raw.team + '.png'});
  248. var marker = L.marker([raw.lat, raw.lon], {icon: icon, opacity: 1});
  249. marker.raw = raw;
  250. markers[raw.id] = marker;
  251. marker.on('popupopen',function popupopen (event) {
  252. var pokemonName;
  253. if (raw.team === 0) {
  254. event.popup.setContent('An empty Gym!');
  255. } else {
  256. event.popup.setContent('Prestige: <b>' + raw.prestige + '</b><br>Guarding Pokemon:<br><b>' + '#' + raw.pokemon_id + ' ' + raw.pokemon_name + '</b>');
  257. }
  258. });
  259. marker.bindPopup();
  260. return marker;
  261. }
  262.  
  263. function WorkerMarker (raw) {
  264. if (raw.sent_notification === true) {
  265. var icon = new NotificationIcon();
  266. } else {
  267. var icon = new WorkerIcon();
  268. }
  269. var marker = L.marker([raw.lat, raw.lon], {icon: icon});
  270. marker.raw = raw;
  271. markers[raw.worker_no] = marker;
  272. marker.bindPopup('<b>Worker ' + raw.worker_no + '</b><br>time: ' + raw.time + '<br>speed: ' + raw.speed + '<br>total seen: ' + raw.total_seen + '<br>visits: ' + raw.visits + '<br>seen here: ' + raw.seen_here);
  273. return marker;
  274. }
  275.  
  276. function addMarkersToMap (data, map) {
  277. // Pokemons
  278. data.forEach(function (item) {
  279. var marker = null;
  280. if (item.type === 'pokemon') {
  281. // Already placed? No need to do anything, then
  282. if (item.id in markers) {
  283. return;
  284. }
  285. marker = PokemonMarker(item);
  286. if (item.trash) {
  287. marker.addTo(overlays.Trash);
  288. } else {
  289. marker.addTo(overlays.Pokemon);
  290. }
  291. } else if (item.type === 'fort') {
  292. // No change since last time? Then don't do anything
  293. var existing = markers[item.id];
  294. if (typeof existing !== 'undefined') {
  295. if (existing.raw.sighting_id === item.sighting_id) {
  296. return;
  297. }
  298. existing.removeFrom(overlays.Gyms);
  299. markers[item.id] = undefined;
  300. }
  301. marker = FortMarker(item);
  302. marker.addTo(overlays.Gyms);
  303. } else if (item.type === 'worker') {
  304. var existing = markers[item.worker_no];
  305. if (typeof existing !== 'undefined') {
  306. existing.removeFrom(overlays.Workers);
  307. markers[item.worker_no + 'c'].removeFrom(overlays.Workers);
  308. }
  309. circle = L.circle([item.lat, item.lon], 70, {weight: 2})
  310. markers[item.worker_no + 'c'] = circle;
  311. marker = WorkerMarker(item);
  312. marker.addTo(overlays.Workers);
  313. circle.addTo(overlays.Workers);
  314. } else if (item.type === 'pokestop') {
  315. var icon = new PokestopIcon();
  316. var marker = L.marker([item.lat, item.lon], {icon: icon});
  317. marker.raw = item;
  318. marker.bindPopup('<b>Pokestop ' + item.external_id + '</b>');
  319. marker.addTo(overlays.Pokestops);
  320. } else if (item.type === 'spawn') {
  321. var circle = L.circle([item.lat, item.lon], 5, {weight: 2});
  322. var popup = '<b>Spawn ' + item.spawn_id + '</b><br/>time: ';
  323. var time = '??';
  324. if (item.despawn_time != null) {
  325. time = item.despawn_time;
  326. }
  327. else {
  328. circle.setStyle({color: '#f03'})
  329. }
  330. popup += time + '<br/>duration: ';
  331. popup += item.duration == null ? '30mn' : item.duration + 'mn';
  332. circle.bindPopup(popup);
  333. circle.addTo(overlays.Spawns);
  334. } else if (item.type === 'scanarea'){
  335. var polygon = L.polyline(item.coords).addTo(overlays.ScanArea);
  336. }
  337. });
  338. }
  339.  
  340. function refresh () {
  341. getMarkers().then(function (data) {
  342. addMarkersToMap(data, map);
  343. });
  344. }
  345.  
  346. function getSpawnPoints() {
  347. new Promise(function (resolve, reject) {
  348. $.get('/spawnpoints', function (response) {
  349. resolve(response);
  350. });
  351. }).then(function (data) {
  352. addMarkersToMap(data, map);
  353. });
  354. }
  355.  
  356. function getPokestops() {
  357. new Promise(function (resolve, reject) {
  358. $.get('/pokestops', function (response) {
  359. resolve(response);
  360. });
  361. }).then(function (data) {
  362. addMarkersToMap(data, map);
  363. });
  364. }
  365.  
  366.  
  367. function getScanAreaCoords() {
  368. new Promise(function (resolve, reject) {
  369. $.get('/scan_coords', function (response) {
  370. resolve(response);
  371. });
  372. }).then(function (data) {
  373. addMarkersToMap(data, map);
  374. });
  375. }
  376.  
  377. var map = L.map('main-map', {preferCanvas: true}).setView([{{ map_center[0] }}, {{ map_center[1] }}], 13);
  378.  
  379. overlays.Pokemon.addTo(map);
  380. var control = L.control.layers(null, overlays).addTo(map);
  381. L.tileLayer('{{ map_provider_url }}', {
  382. opacity: 0.75,
  383. attribution: '{{ map_provider_attribution|safe }}'
  384. }).addTo(map);
  385. map.whenReady(function () {
  386. $('.my-location').on('click', function () {
  387. map.locate({ enableHighAccurracy: true, setView: true });
  388. });
  389.  
  390. setInterval(refresh, 30000);
  391. refresh();
  392. getSpawnPoints();
  393. getPokestops();
  394. getScanAreaCoords();
  395. });
  396. </script>
  397. </body>
  398. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!