index.tpl 7.58 KB
Newer Older
1
{include file='header.tpl'}
2 3 4
<header>
    <h1>Vélib Stats (site non officiel)</h1>
</header>
JonathanMM's avatar
JonathanMM committed
5
<div id="content">
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
    <div id="statsCarteArea">
        <div id="statsConsoArea">
            <table id="statsConso">
                <tr>
                    <th colspan="2">Stations ouvertes</th>
                    <th colspan="2">Vélos disponibles</th>
                    <th colspan="2">Bornes</th>
                </tr>
                <tr>
                    <td>{$nbStation}</td>
                    <td>{$nbStationDetecte}</td>
                    <td>{$nbBike}</td>
                    <td>{$nbEbike}</td>
                    <td>{$nbFreeEDock}</td>
                    <td>{$nbEDock}</td>
                </tr>
                <tr>
                    <td><abbr title="Stations affichées comme étant ouverte">annoncées</abbr></td>
                    <td><abbr title="Stations avec un nombre de bornes positifs avec au moins un vélo ou une borne libre">détectées</abbr></td>
                    <td>mécaniques</td>
                    <td>électriques</td>
                    <td>libres</td>
                    <td>totales</td>
                </tr>
            </table>
            <i>Dernière mise à jour : {$dateDerniereConso}</i>
32 33 34 35 36 37 38 39 40
            <form method="GET" action="commune.php">
                <label for="insee">Filtrer par commune :</label> 
                <select name="insee">
                    {foreach $communes as $commune}
                        <option value="{$commune.insee}">{$commune.nom_complet}</option>
                    {/foreach}
                </select>
                <input type="submit" value="Filtrer" />
            </form>
41
            <a href="stats.php">Voir plus de statistiques &gt;</a>
42 43
        </div>
        <div id="carteArea"></div>
JonathanMM's avatar
JonathanMM committed
44 45 46 47 48 49 50 51 52 53
    </div>
    <select id="typeGraphiqueSelect" style="display: none">
        <option value="_double">Conso</option>
    </select>
    <select id="dureeGraphiqueSelect">
        <option value="instantanee">Une heure - Instantanée</option>
        <option value="troisHeures">Trois heures - Période de 5 minutes</option>
        <option value="unJour">Un jour - Période de 15 minutes</option>
        <option value="septJours" selected>Une semaine - Période d'une heure</option>
        <option value="unMois">Un mois - Période de six heures</option>
54
    </select> - Graphique issu du site velib.nocle.fr
JonathanMM's avatar
JonathanMM committed
55 56 57 58
    <div id="chartArea">
        <canvas id="chartNbStations" height="500px" width="800px"></canvas>
        <canvas id="chartBikes" height="500px" width="800px"></canvas>
    </div>
59
    {include file="credits.tpl"}
JonathanMM's avatar
JonathanMM committed
60 61 62 63 64 65
    <h2>Stations</h2>
    Fitrer : État 
    <select id="filtreEtat">
        <option value="toutes">Toutes</option>
        <option value="ouverte" selected>Ouverte</option>
        <option value="travaux">En travaux</option>
66 67 68 69 70
    </select> - 
    Position 
    <select id="filtrePosition">
        <option value="toutes" selected>Indifféramment</option>
        <option value="proximite">À proximité</option>
JonathanMM's avatar
JonathanMM committed
71 72 73 74 75 76 77 78 79 80 81 82 83
    </select>
    <table id="stations">
        <thead>
            <tr>
                <th>Code</th>
                <th>Nom</th>
                <th>Date d'ouverture</th>
                <th>Statut</th>
                <th>Vélos mécaniques dispo</th>
                <th>Vélos électriques dispo</th>
                <th>Bornes libres</th>
            </tr>
        </thead>
JonathanMM's avatar
JonathanMM committed
84
    </table>
JonathanMM's avatar
JonathanMM committed
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
    <script type="text/javascript">
    var codeStation = -1;
    </script>
    <script type="application/javascript">
        function filtreDataTable()
        {
            var valeur = $("#filtreEtat").val();
            var dt = $('#stations').DataTable();
            switch (valeur) {
                case "ouverte":
                    dt.column(3).search("Ouverte").draw();
                    break;
                case "travaux":
                    dt.column(3).search("En travaux").draw();
                    break;
                default:
                    dt.column(3).search("").draw();
                    break;
            }
104 105
        }

JonathanMM's avatar
JonathanMM committed
106 107 108 109 110 111 112 113 114 115
        $(document).ready( function () {
            var dt = $('#stations').DataTable({
                ajax: 'api.php?action=getDataConso&idConso={$idConso}',
                columns: [{
                    data: 'codeStr',
                    render: function(data, type, row, meta)
                    {
                        return '<a href="station.php?code='+row.code+'">'+data+'</a>';
                    }
                },{
116 117 118 119 120
                    data: 'name',
                    render: function(data, type, row, meta)
                    {
                        return '<a href="station.php?code='+row.code+'">'+data+'</a>';
                    }
JonathanMM's avatar
JonathanMM committed
121 122 123 124 125 126 127 128 129 130
                },{
                    data: 'dateOuverture',
                    render: function(data, type, row, meta)
                    {
                        if(data == 'Non ouvert')
                            return data;
                        var date = new Date(data);
                        return putZero(date.getDate()) + '/' + putZero(date.getMonth()+1) + '/' + date.getFullYear();
                    }
                },{
131 132 133 134 135 136 137 138
                    data: 'state',
                    render: function(data, type, row, meta)
                    {
                        if(data == 'Operative' && row.nbEDock > 0)
                            return 'Ouverte';
                        else
                            return 'En travaux';
                    }
JonathanMM's avatar
JonathanMM committed
139 140 141 142 143 144 145 146
                },{
                    data: 'nbBike'
                },{
                    data: 'nbEbike'
                },{
                    data: 'nbFreeEDock',
                    render: function(data, type, row, meta)
                    {
147 148 149 150 151 152 153 154
                        if(type == 'sort') //Pour le tri, on utilise le nombre de bornes libres directement
                        {
                            if(data < 10)
                                return '00' + data.toString();
                            if(data < 100)
                                return '0' + data.toString();
                            return data;
                        }
JonathanMM's avatar
JonathanMM committed
155 156 157 158 159 160 161
                        return data+'/'+row.nbEDock;
                    }
                }],
                language: dtTraduction
            });
            filtreDataTable();
            $("#filtreEtat").change(filtreDataTable);
162
            $("#filtrePosition").change(filtrePosition);
163
            recupererCarte();
164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
        });

        function filtrePosition()
        {
            var valeur = $("#filtrePosition").val();
            if(valeur == 'proximite')
                obtenirLocalisation();
            else
                resetLocalisation();
        }

        function obtenirLocalisation()
        {
            if (navigator.geolocation)
                navigator.geolocation.getCurrentPosition(traiterLocalisation);
            else
                alert("Votre navigateur ne supporte pas la fonction localisation");
        }

        function traiterLocalisation(position)
        {
            var dt = $('#stations').DataTable();
            dt.ajax.url('api.php?action=getDataConso&idConso={$idConso}&lat='+position.coords.latitude+'&long='+position.coords.longitude).load();
        }

        function resetLocalisation()
        {
            var dt = $('#stations').DataTable();
            dt.ajax.url('api.php?action=getDataConso&idConso={$idConso}').load();
        }
194 195 196 197 198 199 200

        function recupererCarte()
        {
            getData('api.php?action=getCommunesCarte&idConso={$idConso}').then(function(svg) {
                $("#carteArea").html(svg);
            });
        }
JonathanMM's avatar
JonathanMM committed
201 202
    </script>
</div>
203
{include file="footer.tpl"}