Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

362 lines (292 sloc) 12.507 kb
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Recherche de tournoi de tennis FFT</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Rechercher un tournoi de tennis: sur une carte, c'est plus facile !">
<meta name="author" content="Eric Abouaf">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body { padding-top: 20px; padding-bottom: 40px; }
.container-narrow { margin: 0 auto; max-width: 700px; }
.container-narrow > hr { margin: 30px 0; }
#map_canvas { height: 500px; width: 700px;}
</style>
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="bootstrap/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="bootstrap/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="bootstrap/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="bootstrap/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="bootstrap/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<!-- For facebook comments -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=392924390784133";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="container-narrow">
<div class="masthead">
<h3 class="muted">Rechercher un tournoi de Tennis</h3>
</div>
<div class="row-fluid">
<div class="span12">
<ul class="nav nav-tabs">
<li><a href="#tab-preferences" data-toggle="tab">Préférences</a></li>
<li class="active"><a href="#tab-map" data-toggle="tab">Carte</a></li>
<li><a href="#tab-comments" data-toggle="tab">Commentaires</a></li>
<li><a href="#myModal" role="button" data-toggle="modal">À propos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab-preferences">
<form id='preferences-form'>
<fieldset>
<!--label>Votre classement</label>
<select name="classement">
<option>NC</option>
<option>40</option>
<option>30/5</option>
<option>30/4</option>
<option>30/3</option>
<option>30/2</option>
<option>30/1</option>
<option>30</option>
<option>15/5</option>
<option>15/4</option>
<option>15/3</option>
<option>15/2</option>
<option>15/1</option>
<option>15</option>
<option>5/6</option>
<option>4/6</option>
<option>3/6</option>
<option>2/6</option>
<option>1/6</option>
<option>0</option>
<option>-2/6</option>
<option>-4/6</option>
<option>-15</option>
<option>-30</option>
</select-->
<label>Épreuve</label>
<select name="nature">
<option>Simple Messieurs</option>
<option>Simple Dames</option>
<option>Double Mixte</option>
<option>Double Dames</option>
<option>Double Messieurs</option>
</select>
<label>Votre catégorie</label>
<select name="categorie">
<option>Senior</option>
<option>8 ans</option>
<option>9 ans</option>
<option>9/10 ans</option>
<option>10 ans</option>
<option>11 ans</option>
<option>11/12 ans</option>
<option>12 ans</option>
<option>13 ans</option>
<option>13/14 ans</option>
<option>15 an</option>
<option>15/16 ans</option>
<option>17/18 ans</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
<option>60</option>
<option>65</option>
<option>70D</option>
<option>70M</option>
<option>75M</option>
<option>75D</option>
<option>80M</option>
</select>
<br /><br />
<button type="submit" class="btn btn-primary">Rechercher</button>
</fieldset>
</form>
</div>
<div class="tab-pane active" id="tab-map">
<div id="map_canvas"></div>
</div>
<div class="tab-pane" id="tab-comments">
<div class="fb-comments" data-href="http://neyric.github.com/tournois-fft/" data-num-posts="20" data-width="470"></div>
</div>
</div><!-- tab-content end -->
</div><!-- span12 end -->
</div><!-- row-fluid end -->
<hr>
<div class="footer">
<p>&copy; Eric Abouaf 2012</p>
</div>
</div> <!-- /container -->
<!-- À Propos Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">À propos</h3>
</div>
<div class="modal-body">
<p>Cette application est open-source, le code est disponible sur <a href="https://github.com/neyric/tournois-fft">GitHub</a>.</p>
<h4>Vous pouvez aider :</h4>
<p>Certains tournois sont mal (voire très mal) situés sur la carte. Si vous en détectez, vous pouvez indiquer leur latitude/longitude dans les commentaires.</p>
<p>Je n'ai pas encore implémenté de filtre sur les classements.</p>
<h4>Autres idées :</h4>
<p>Afficher la liste des tournois visibles sur la carte, pour pouvoir l'imprimer.</p>
<p>Indiquer si le tournoi accepte l'inscription en ligne. (on a déjà l'info...)</p>
<p>Recherche des tournois en fonction des surfaces. (on a déjà l'info...)</p>
<p>-- <br />neyric</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
</div>
</div>
<script src="bootstrap/js/jquery-1.8.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="geo.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="scraper/tournois_futurs.js"></script>
<script>
var TournoiFinder = {
init: function () {
this.preferences = {
categorie: "Senior",
classement: "NC",
nature: "Simple Messieurs"
};
this.initEvents();
this.createMap();
var that = this;
this.tournois = tournois;
setTimeout(function() {
that.onMapChanged();
}, 1000);
},
initEvents: function() {
var that = this;
$('#preferences-form').submit(function() {
that.onPreferencesSubmit();
return false;
});
},
onPreferencesSubmit: function() {
var data = $('#preferences-form').serializeArray();
for(var i = 0 ; i < data.length; i++) {
this.preferences[data[i].name] = data[i].value;
}
$('.nav-tabs a[href=#tab-map]').tab('show') ;
this.onMapChanged();
},
filterPreferences: function(tournois) {
var results = [];
// TODO: classement !
for(var i = 0 ; i < tournois.length ; i++) {
var tournoi = tournois[i];
for(var j = 0 ; j < tournoi.epreuves.length; j++) {
if(tournoi.epreuves[j].categorie == this.preferences.categorie && tournoi.epreuves[j].nature == this.preferences.nature) {
results.push(tournois[i]);
break;
}
}
}
return results;
},
createMap: function () {
this.markers = [];
this.center = new google.maps.LatLng("48.841334", "2.3185184");
this.map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 12,
center: this.center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var that = this;
var mapChanged = function() {
that.center = that.map.getCenter();
that.onMapChanged();
};
google.maps.event.addListener(this.map, 'zoom_changed', mapChanged);
google.maps.event.addListener(this.map, 'dragend', mapChanged);
var that = this;
if (geo_position_js.init()) {
geo_position_js.getCurrentPosition(function (p) {
that.center = new google.maps.LatLng( p.coords.latitude, p.coords.longitude);
that.map.setCenter(that.center);
}, function () { });
}
},
onMapChanged: function() {
var bounds = this.map.getBounds();
// Filter visibles
var tournois = this.filterByBounds(bounds, this.filterPreferences(this.tournois) );
// Display markers
this.clearMarkers();
for(var i = 0 ; i < tournois.length ; i++) {
this.addMarker(tournois[i]);
}
},
filterByBounds: function(bounds, tournois) {
var results = [];
var ne = bounds.getNorthEast(),
sw = bounds.getSouthWest();
for(var i = 0 ; i < tournois.length ; i++) {
var loc = tournois[i].location;
if (loc.lat) {
var maxLat = Math.max(sw.lat(), ne.lat()),
minLat = Math.min(sw.lat(), ne.lat()),
maxLng = Math.max(sw.lng(), ne.lng()),
minLng = Math.min(sw.lng(), ne.lng())
if (loc.lat > minLat && loc.lat < maxLat &&
loc.lng > minLng && loc.lng < maxLng ) {
results.push(tournois[i]);
}
}
}
return results;
},
addMarker: function (tournoi) {
var myLatlng = new google.maps.LatLng(tournoi.location.lat,tournoi.location.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: this.map,
title: tournoi.club
});
var infowindow = new google.maps.InfoWindow({
content: tournoi.club+"<br /><a href='http://www.ei.applipub-fft.fr/eipublic/competition.do?dispatch=afficher&hoi_iid="+tournoi.hoi_iid+"' target='_new'>"+tournoi.competition+"</a><br />du "+tournoi.debut+" au "+tournoi.fin
});
var that = this;
google.maps.event.addListener(marker, 'click', function() {
if(that.openedMarker) {
that.openedMarker.close();
}
infowindow.open(that.map,marker);
that.openedMarker = infowindow;
});
this.markers.push(marker);
},
clearMarkers: function() {
for(var i = 0 ; i < this.markers.length; i++) {
this.markers[i].setMap(null);
delete this.markers[i];
}
this.markers = [];
}
};
$(document).ready(function(){
TournoiFinder.init();
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.