templates/computing/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Calculs{% endblock %}
  5. {% block body %}
  6. <div class="row">
  7.     <div class="col-12">
  8.         <div class="card">
  9.             <div class="card-body">
  10.             <h2>Detail du calcul</h2>
  12.             <table class="table">
  13.                 <tbody>
  14.                     <tr>
  15.                         <th>Titre</th>
  16.                         <td>{{ computing.Title }}</td>
  17.                     </tr>
  18.                     <tr>
  19.                         <th>Addresse d'origine</th>
  20.                         <td>{{ computing.Addresse }}</td>
  21.                     </tr>
  22.                     <tr>
  23.                         <th>Lon</th>
  24.                         <td>{{ computing.lon }}</td>
  25.                     </tr>
  26.                     <tr>
  27.                         <th>Lat</th>
  28.                         <td>{{ computing.lat }}</td>
  29.                     </tr>
  30.                     <tr>
  31.                         <th>Date choisie</th>
  32.                         <td>{% if computing.departureDateTime is not null %}{{ computing.departureDateTime.format('d M à H:i') }}{% endif %}</td>
  33.                     </tr>
  34.                     <tr>
  35.                         <th>Status</th>
  36.                         <td>{{ computing.getStatusTextInfo }}</td>
  37.                     </tr>
  38.                 </tbody>
  39.             </table>
  41.             </div>
  42.         </div>
  43.         <div class="card">
  44.             <div class="card-body">
  45.                 
  46.             <br/>
  47.                 <h2>Général</h2>
  48.             <br/>
  50.                 <div class="col-lg-6">
  51.                     <div class="card">
  52.                         <div class="card-body">
  53.                             <h4 class="card-title mb-4">Comparatif des temps</h4>
  55.                             <div id="column_chart" class="apex-charts" dir="ltr"></div>
  56.                         </div>
  57.                     </div>
  58.                     <!--end card-->
  59.                 </div>
  61.                 <div class="col-lg-6">
  62.                     <div class="card">
  63.                         <div class="card-body">
  65.                             <h4 class="card-title mb-4">Fichiers</h4>
  66.                              <a href="{{ path('app_computing_export_excell' , {'id': computing.id}) }}" class="btn btn-primary">Export Excell</a>
  68.                         </div>
  69.                     </div>
  70.                     <!--end card-->
  71.                 </div>
  74.                 <script>
  75.                     $( document ).ready(function() {
  76.                         var options = {
  77.                             series: [{
  78.                                 name: 'Marche',
  79.                                 data: [{{ moyennes.aller.walking }}]
  80.                             },
  81.                             {
  82.                                 name: 'Vélo',
  83.                                 data: [{{ moyennes.aller.bicycling }} ]
  84.                             },                                {
  85.                                 name: 'Transport',
  86.                                 data: [{{ moyennes.aller.transit }}]
  87.                             },                                {
  88.                                 name: 'Voiture',
  89.                                 data: [{{ moyennes.aller.driving }}]
  90.                             },
  91.                             ],
  92.                             chart: {
  93.                                 type: 'bar',
  94.                                 height: 350
  95.                             },
  96.                             plotOptions: {
  97.                                 bar: {
  98.                                     horizontal: false,
  99.                                     columnWidth: '15%',
  100.                                     endingShape: 'rounded'
  101.                                 },
  102.                             },
  103.                             dataLabels: {
  104.                                 enabled: false
  105.                             },
  106.                             stroke: {
  107.                                 show: true,
  108.                                 width: 2,
  109.                                 colors: ['transparent']
  110.                             },
  111.                             xaxis: {
  112.                                 categories: ['Aller'],
  113.                             },
  114.                             yaxis: {
  115.                                 title: {
  116.                                     text: 'Temps en min'
  117.                                 }
  118.                             },
  119.                             fill: {
  120.                                 opacity: 1
  121.                             },
  122.                             tooltip: {
  123.                                 y: {
  124.                                     formatter: function (val) {
  125.                                         return  val + " min"
  126.                                     }
  127.                                 }
  128.                             }
  129.                         };
  131.                         var chart = new ApexCharts(document.querySelector("#column_chart"), options);
  132.                         chart.render();
  133.                     });
  134.                 </script>
  135.             </div>
  136.         </div>
  137.         <div class="card">
  138.             <div class="card-body">
  139.                 <h2>Détail par adresses</h2>
  140.             <br/>
  142.                 <table id="datatable-buttons"
  143.                        class="table table-striped table-bordered dt-responsive nowrap"
  144.                        style="border-collapse: collapse; border-spacing: 0; width: 100%; font-size:11px">
  145.                 <thead>
  146.                     <tr>
  147.                         <th>Adresse</th>
  148.                         <th colspan="2">Aller Marche</th>
  149.                         <th colspan="2">Aller Vélo</th>
  150.                         <th colspan="2">Aller Transport</th>
  151.                         <th colspan="2">Aller Voiture</th>
  152.                         {#<th colspan="2">Retour Marche</th>
  153.                         <th colspan="2">Retour Vélo</th>
  154.                         <th colspan="2">Retour Transport</th>
  155.                         <th colspan="2">Retour Voiture</th>#}
  156.                     </tr>
  158.                 </thead>
  159.                 <tbody>
  160.                 {% for timing in timings %}
  162.                     <tr>
  163.                         <th>{{ timing.address_name }}</th>
  164.                         <th>{{ timing.aller.timing.walking }}</th>
  165.                         <th>{{ timing.aller.distance.walking }} </th>
  167.                         <th>{{ timing.aller.timing.bicycling }}</th>
  168.                         <th>{{ timing.aller.distance.bicycling }}</th>
  170.                         <th>{{ timing.aller.timing.transit }}</th>
  171.                         <th>{{ timing.aller.distance.transit }}</th>
  173.                         <th>{{ timing.aller.timing.driving }}</th>
  174.                         <th>{{ timing.aller.distance.driving }}</th>
  176.                         {#
  177.                         <th>{{ timing.retour.timing.walking }}</th>
  178.                         <th>{{ timing.retour.distance.walking }} </th>
  180.                         <th>{{ timing.retour.timing.bicycling }}</th>
  181.                         <th>{{ timing.retour.distance.bicycling }}</th>
  183.                         <th>{{ timing.retour.timing.transit }}</th>
  184.                         <th>{{ timing.retour.distance.transit }}</th>
  186.                         <th>{{ timing.retour.timing.driving }}</th>
  187.                         <th>{{ timing.retour.distance.driving }}</th>#}
  188.                     </tr>
  190.                 {% endfor %}
  192.                 </tbody>
  193.             </table>
  195.                 <br/>
  196.             <a href="{{ path('app_computing_index') }}" class="btn btn-primary">Retour à la liste</a>
  197.             </div>
  198.         </div>
  199.     </div>
  200. </div>
  201. {% endblock %}