station.tpl 5.7 KB
Newer Older
1
{include file='header.tpl'}
2 3 4 5 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 34 35 36 37 38
<header>
    <h1>Vélib Stats (site non officiel) - Station {$stationCodeDisplay}</h1>
    <nav>
        <a href="index.php">&lt; Retour à l'accueil</a>
    </nav>
</header>
<div id="content">
    <ul>
        <li>Code : {$stationCodeDisplay}</li>
        <li>Nom : {$stationNom}</li>
        <li>Date d'ouverture : {$stationDateOuverture}</li>
        <li>Adresse la plus proche (selon <a href="https://adresse.data.gouv.fr/" title="la Base Adresse Nationale">BAN</a>) : {$stationAdresse}</li>
        <li>Signalement des utilisateurs sur l'état de la station (dernière semaine) : 
        {if $signalementTotal eq 0}
            Aucun
        {else}
            {if $signalementOui gt 0}Fonctionne = {$signalementOui}; {/if}
            {if $signalementNon gt 0}Ne fonctionne pas = {$signalementNon}; {/if}
            Dernier signalement : {if $dernierSignalementType}Fonctionne{else}Ne fonctionne pas{/if} à {$dernierSignalementDate}.
        {/if}
        <button id="boutonFonctionneOui">La station fonctionne</button>
        <button id="boutonFonctionneNon">La station ne fonctionne pas</button>
        </li>
    </ul>
    <h2>Graphique</h2>
    <select id="typeGraphiqueSelect">
        <option value="Bike">Vélos disponibles</option>
        <option value="FreeDock">Bornes libres</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" selected>Un jour - Période de 15 minutes</option>
        <option value="septJours">Une semaine - Période d'une heure</option>
        <option value="unMois">Un mois - Période de six heures</option>
    </select>
    <span id="displayDetailsArea"><input type="checkbox" id="displayDetails" /><label for="displayDetails">Afficher les détails</label></span>
39
     - Graphique issu du site velib.nocle.fr
40 41 42 43 44 45 46 47 48 49 50 51 52
    <canvas id="chartBikes" width="1000" height="400"></canvas>
    {include file="credits.tpl"}
    <h2>Stats</h2>
    <table id="stats">
        <thead>
            <tr>
                <th>Date</th>
                <th>Vélos mécaniques dispo</th>
                <th>Vélos électriques dispo</th>
                <th>Bornes libres</th>
            </tr>
        </thead>
    </table>
53 54 55 56 57 58 59 60 61 62 63 64 65 66
    <h2>Stations à proximité</h2>
    <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>
    </table>
67 68 69 70 71
    <script type="text/javascript">
        var codeStation = {$stationCode};
    </script>
    <script type="application/javascript">
        $(document).ready( function () {
72
            var dt = $('#stats').DataTable({
73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
                ajax: 'api.php?action=getDataStation&codeStation={$stationCode}',
                columns: [{
                    data: 'date',
                    render: function(data, type, row, meta)
                    {
                        var date = new Date(data);
                        return putZero(date.getDate()) + '/' + putZero(date.getMonth()+1) + '/' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes();
                    }
                },{
                    data: 'nbBike'
                },{
                    data: 'nbEbike'
                },{
                    data: 'nbFreeEDock',
                    render: function(data, type, row, meta)
                    {
                        return data+'/'+row.nbEDock;
                    }
                }],
92 93 94 95 96 97 98
                language: dtTraduction,
                initComplete: function (settings, dataAjax)
                {
                    var data = dataAjax['data'];
                    if(data.length > 0)
                        chargerListeStationProximite(data[data.length - 1]['idConso']);
                }
99 100
            });
        } );
101 102 103 104 105 106 107 108 109 110 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 137 138 139 140 141 142

        function chargerListeStationProximite(idConso)
        {
            var dtStation = $('#stations').DataTable({
                ajax: 'api.php?action=getDataConso&idConso='+idConso+'&lat={$stationLat}&long={$stationLong}',
                columns: [{
                    data: 'codeStr',
                    render: function(data, type, row, meta)
                    {
                        return '<a href="station.php?code='+row.code+'">'+data+'</a>';
                    }
                },{
                    data: 'name',
                    render: function(data, type, row, meta)
                    {
                        return '<a href="station.php?code='+row.code+'">'+data+'</a>';
                    }
                },{
                    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
            });
        }
143 144
    </script>
</div>
145
{include file="footer.tpl"}