index.tpl 6.4 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 32 33
    <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>
        </div>
        <div id="carteArea"></div>
JonathanMM's avatar
JonathanMM committed
34 35 36 37 38 39 40 41 42 43
    </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>
44
    </select> - Graphique issu du site velib.nocle.fr
JonathanMM's avatar
JonathanMM committed
45 46 47 48
    <div id="chartArea">
        <canvas id="chartNbStations" height="500px" width="800px"></canvas>
        <canvas id="chartBikes" height="500px" width="800px"></canvas>
    </div>
49
    {include file="credits.tpl"}
JonathanMM's avatar
JonathanMM committed
50 51 52 53 54 55
    <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>
56 57 58 59 60
    </select> - 
    Position 
    <select id="filtrePosition">
        <option value="toutes" selected>Indifféramment</option>
        <option value="proximite">À proximité</option>
JonathanMM's avatar
JonathanMM committed
61 62 63 64 65 66 67 68 69 70 71 72 73
    </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
74
    </table>
JonathanMM's avatar
JonathanMM committed
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
    <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;
            }
94 95
        }

JonathanMM's avatar
JonathanMM committed
96 97 98 99 100 101 102 103 104 105
        $(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>';
                    }
                },{
106 107 108 109 110
                    data: 'name',
                    render: function(data, type, row, meta)
                    {
                        return '<a href="station.php?code='+row.code+'">'+data+'</a>';
                    }
JonathanMM's avatar
JonathanMM committed
111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
                },{
                    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();
                    }
                },{
                    data: 'state'
                },{
                    data: 'nbBike'
                },{
                    data: 'nbEbike'
                },{
                    data: 'nbFreeEDock',
                    render: function(data, type, row, meta)
                    {
                        return data+'/'+row.nbEDock;
                    }
                }],
                language: dtTraduction
            });
            filtreDataTable();
            $("#filtreEtat").change(filtreDataTable);
137
            $("#filtrePosition").change(filtrePosition);
138
            recupererCarte();
139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
        });

        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();
        }
169 170 171 172 173 174 175

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