templates/routes/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Accueil{% endblock %}
  5. {% block body %}
  6.     <div class="container-fluid">
  7.         <h1 style="text-align: center; color: #069; margin: 5%">Resultats des investigations geotechniques  et de recherche de point d’eau le long des axes routiers prioritaires</h1>
  8.         <div class="row">
  9.             <div class="col-sm-3">
  10.                 <!--h1>Emprunts index</h1-->
  12.                 <a class="menu_lien" href="{{ path('default') }}">Accueil</a> {#- 
  13.                 <a class="menu_lien" href="{{ path('routes_new') }}">Nouvel enregistrement</a>#}<br/><br/>
  15.                 <div style='overflow:scroll; height:700px;'>
  16.                     <table class="table" id="dtables">
  17.                         <thead>
  18.                             <tr>
  19.                                 <th>Nom</th>
  20.                                 <th>Coordonnées des Emp. et points d'eau</th>
  21.                             </tr>
  22.                         </thead>
  23.                         <tbody>
  24.                             {% for route in routes %}
  25.                                 <tr>
  26.                                     <td>
  27.                                         {{ route.nom }}<br/>
  28.                                         {%  if  route.fichiers is not empty %}
  29.                                             {% for  fichier in route.fichiers %}
  30.                                                 <a target="_blank" href="{{ asset('uploads/'~ fichier.nom) }}" title="Fichier enregistré">{{ fichier.rnom }}</a><br/>
  31.                                             {% endfor %}
  32.                                         {%  else %}
  33.                                             <span style="color:red">Aucun fichier enregistré</span>
  34.                                         {%  endif %}
  36.                                         <br/>
  38.                                         <a href="{{ path('routes_edit', {'id': route.id}) }}">Modifier</a>
  39.                                     </td>
  40.                                     <td style='width: 70%'>
  41.                                         {% if route.emprunts is not empty %}
  42.                                             <h6><u>Liste des emprunts</u></h6>
  43.                                                     {% for emprunt in route.emprunts %}
  44.                                                 <div><button class='btn btn-link select_elt'  id='{{ asset('map/#13/'~emprunt.latitude~'/'~ emprunt.longitude) }}'>{{ emprunt.nom }}</button></div>
  45.                                                 {% endfor %}
  46.                                             {% endif %}
  47.                                             {% if route.pointEaux is not empty %}
  48.                                             <h6><u>Liste des points d'eau</u></h6>
  49.                                                     {% for pointeau in route.pointEaux %}
  50.                                                 <div style="text-align: left"><button class='btn btn-link select_elt' id='{{ asset('map/#13/'~pointeau.latitude~'/'~ pointeau.longitude) }}'>{{ pointeau.nom }}</button></div>
  51.                                                 {% endfor %}
  52.                                             {% endif %}
  53.                                     </td>
  54.                                 </tr>
  55.                             {% else %}
  56.                                 <tr>
  57.                                     <td colspan="3">Aucun enregistrement</td>
  58.                                 </tr>
  59.                             {% endfor %}
  60.                         </tbody>
  61.                     </table>
  62.                 </div>
  63.             </div>
  64.             <div class="col-sm-9">
  65.                 <!--a href="{{ path('emprunts_index') }}">Liste des emprunts</a> - <a href="{{ path('point_eaux_index') }}">Liste des points d'eaux</a-->
  66. <div style="font-size: 120%"><span style="color: blue">Point bleu</span> pour les points d'eau - <span style="color: orange">Point orange</span> et <span style="color: red">point rouge</span> pour les emprunts lateriques en fonction des coordonnées UTM 29P et 30P</div>
  67.  <!--- 
  68.                 <div style="background-color:#00A096;" iddiv="box_1" class="mymagicoverbox"> Please click me ! </div>
  69.                 <div id="myfond_gris" opendiv=""></div>-->
  70.                 <div class="embed-responsive embed-responsive-16by9" style="border: 1px solid #999; margin-top: 15px"  >
  71.                     <iframe class="lazyload embed-responsive-item" src="{{ asset('map/#7/13/-7') }}" allowfullscreen loading="lazy"></iframe>
  72.                 </div>
  73.                 <!--div align="center">
  75.                     <div style="background-color:#00A096;" iddiv="box_1" class="mymagicoverbox">
  76.                         Please click me !
  77.                     </div>
  79.                     <div style="background-color:#F8B334;" iddiv="box_2" class="mymagicoverbox">
  80.                         And click me too...
  81.                     </div>
  83.                 </div>
  86.                 <div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;">
  87.                     Title of the first box !
  88.                     <div class="mymagicoverbox_fenetreinterieur" style="height:150px; ">
  90.                         <div align="center">
  91.                             <br>Hum... Are you really sure ?
  92.                             <br><br>
  95.                             <div style="width:100px" align="center" class="mymagicoverbox_fermer">NO I'M NOT</div>
  98.                         </div>
  99.                     </div>
  100.                 </div-->
  101.                 <br/><br/>
  102.             </div>
  103.         </div>
  104.     </div>
  107. {% endblock %}
  108. {% block javascripts %}
  109.     {{ parent() }}
  111.     <script type="text/javascript">
  112.         $(document).ready(function () {
  113.             $('.select_elt').on('click', function () {
  114.                 var url = $(this).attr('id');
  115.                 //alert(url)
  117.                 $('.embed-responsive-item').attr('src', url);
  119.                 $('#myfond_gris').fadeIn(300);
  120.                 var iddiv = $(this).attr("iddiv");
  121.                 $('#' + iddiv).fadeIn(300);
  122.                 $('#myfond_gris').attr('opendiv', iddiv);
  123.                 return false;
  125.             });
  127.         });
  128.     </script>
  129.     <script>
  130.         if ('loading' in HTMLIFrameElement.prototype) {
  131.             const iframes = document.querySelectorAll('iframe[loading="lazy"]');
  133.             iframes.forEach(iframe => {
  134.                 iframe.src = iframe.dataset.src;
  135.             });
  137.         } else {
  138.             // Dynamically import the LazySizes library
  139.             const script = document.createElement('script');
  140.             script.src =
  141.                     'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
  142.             document.body.appendChild(script);
  143.         }
  145.     </script>
  146.     <script>
  147.         $(document).ready(function () {
  149.             $(".mymagicoverbox").click(function ()
  150.             {
  151.                 $('#myfond_gris').fadeIn(300);
  152.                 var iddiv = $(this).attr("iddiv");
  153.                 $('#' + iddiv).fadeIn(300);
  154.                 $('#myfond_gris').attr('opendiv', iddiv);
  155.                 return false;
  156.             });
  158.             $('#myfond_gris, .mymagicoverbox_fermer').click(function ()
  159.             {
  160.                 var iddiv = $("#myfond_gris").attr('opendiv');
  161.                 $('#myfond_gris').fadeOut(300);
  162.                 $('#' + iddiv).fadeOut(300);
  163.             });
  165.         });
  166.     </script>
  167. {% endblock %}