index.tpl 9.31 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="http://www.ousontlesvelib.ovh/stations">Suivre l'avancement de l'ouverture des stations &gt;&gt;</a><br />
42
            <a href="stats.php">Voir plus de statistiques &gt;</a><br />
43
            Carte : <a id="btn-carte-etat">Stations</a> | <a id="btn-carte-signalement">Signalement</a> | <a id="btn-carte-data">Actualisation des données</a>
44 45
        </div>
        <div id="carteArea"></div>
JonathanMM's avatar
JonathanMM committed
46 47 48 49 50 51 52 53 54 55
    </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>
56
        <option value="unAn">Un an - Période d'un jour</option>
57
    </select> - Graphique issu du site velib.nocle.fr
JonathanMM's avatar
JonathanMM committed
58 59 60 61
    <div id="chartArea">
        <canvas id="chartNbStations" height="500px" width="800px"></canvas>
        <canvas id="chartBikes" height="500px" width="800px"></canvas>
    </div>
62
    {include file="credits.tpl"}
JonathanMM's avatar
JonathanMM committed
63 64 65 66 67
    <h2>Stations</h2>
    Fitrer : État 
    <select id="filtreEtat">
        <option value="toutes">Toutes</option>
        <option value="ouverte" selected>Ouverte</option>
JonathanMM's avatar
JonathanMM committed
68
        <option value="fermee">Fermée</option>
JonathanMM's avatar
JonathanMM committed
69
        <option value="travaux">En travaux</option>
70 71 72 73 74
    </select> - 
    Position 
    <select id="filtrePosition">
        <option value="toutes" selected>Indifféramment</option>
        <option value="proximite">À proximité</option>
JonathanMM's avatar
JonathanMM committed
75 76 77 78 79 80 81 82 83 84 85
    </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>
86
                <th>Park+ (overflow)</th>
JonathanMM's avatar
JonathanMM committed
87 88
            </tr>
        </thead>
JonathanMM's avatar
JonathanMM committed
89
    </table>
JonathanMM's avatar
JonathanMM committed
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
    <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;
JonathanMM's avatar
JonathanMM committed
105 106 107
                case "fermee":
                    dt.column(3).search("Fermée").draw();
                    break;
JonathanMM's avatar
JonathanMM committed
108 109 110 111
                default:
                    dt.column(3).search("").draw();
                    break;
            }
112 113
        }

JonathanMM's avatar
JonathanMM committed
114 115 116 117 118 119 120 121 122 123
        $(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>';
                    }
                },{
124 125 126 127 128
                    data: 'name',
                    render: function(data, type, row, meta)
                    {
                        return '<a href="station.php?code='+row.code+'">'+data+'</a>';
                    }
JonathanMM's avatar
JonathanMM committed
129 130 131 132 133 134 135
                },{
                    data: 'dateOuverture',
                    render: function(data, type, row, meta)
                    {
                        if(data == 'Non ouvert')
                            return data;
                        var date = new Date(data);
JonathanMM's avatar
JonathanMM committed
136 137 138
                        if(type == 'sort') //Pour le tri, on fait en sorte que la valeur soit triable
                            return date.getFullYear() + '-' + putZero(date.getMonth()+1) + '-' + putZero(date.getDate());
                        
JonathanMM's avatar
JonathanMM committed
139 140 141
                        return putZero(date.getDate()) + '/' + putZero(date.getMonth()+1) + '/' + date.getFullYear();
                    }
                },{
142 143 144 145 146
                    data: 'state',
                    render: function(data, type, row, meta)
                    {
                        if(data == 'Operative' && row.nbEDock > 0)
                            return 'Ouverte';
JonathanMM's avatar
JonathanMM committed
147 148
                        else if(data == 'Close')
                            return 'Fermée';
149 150 151
                        else
                            return 'En travaux';
                    }
JonathanMM's avatar
JonathanMM committed
152 153 154 155 156 157 158 159
                },{
                    data: 'nbBike'
                },{
                    data: 'nbEbike'
                },{
                    data: 'nbFreeEDock',
                    render: function(data, type, row, meta)
                    {
160 161 162 163 164 165 166 167
                        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
168 169
                        return data+'/'+row.nbEDock;
                    }
170 171 172 173 174 175 176 177 178
                },{
                    data: 'overflow',
                    render: function(data, type, row, meta)
                    {
                        if(data == 'yes')
                            return 'oui';
                        else
                            return 'non';
                    }
JonathanMM's avatar
JonathanMM committed
179 180 181 182 183
                }],
                language: dtTraduction
            });
            filtreDataTable();
            $("#filtreEtat").change(filtreDataTable);
184
            $("#filtrePosition").change(filtrePosition);
185 186 187 188
            $('#btn-carte-etat').click(voirCarteEtat);
            $('#btn-carte-signalement').click(voirCarteSignalement);
            $('#btn-carte-data').click(voirCarteData);
            voirCarteEtat();
189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218
        });

        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();
        }
219

220
        function recupererCarte(url)
221
        {
222
            getData(url).then(function(svg) {
223 224 225
                $("#carteArea").html(svg);
            });
        }
226

227
        function voirCarteEtat()
228
        {
229 230 231 232 233 234 235 236 237 238 239
            recupererCarte('api.php?action=getCommunesCarte&idConso={$idConso}');
        }

        function voirCarteSignalement()
        {
            recupererCarte('api.php?action=getSignalementCarte&idConso={$idConso}');
        }

        function voirCarteData()
        {
            recupererCarte('api.php?action=getEtatCarte&idConso={$idConso}');
240
        }
JonathanMM's avatar
JonathanMM committed
241 242
    </script>
</div>
243
{include file="footer.tpl"}