templates/debug/hobit.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.     <div class="page">
  5.         <div class="container">
  6.             <div class="row animated fadeIn delay-0-2s">
  7.                 <div class="col-12 mb-3 mb-lg-5">
  8.                     <div class="">
  9.                         <h2>Magic hobit</h2>
  10.                     </div>
  12.                     <div class="">
  13.                         {% if debugAndFlush %}
  14.                             <p>Debug and flush : Yes</p>
  15.                         {% else %}
  16.                             <p>Debug and flush : No</p>
  17.                         {% endif %}
  18.                     </div>
  20.                     <hr></hr>
  21.                 </div>
  22.             </div>
  23.         </div>
  25.         {% if tabHobit %}
  26.             {% if debugAndFlush %}
  27.                 <div class="container">
  28.                     <div class="row">
  29.                         {% set i = 3 %}
  30.                         {% set number = 1 %}
  32.                         {% for hobit in tabHobit %}
  33.                             <div class="col-12 col-lg-4 mb-3 mb-lg-5">
  34.                                 <div class="card animated fadeIn delay-0-{{ i }}s" style="width: 100%;">
  35.                                     <div class="card-img-top animated fadeIn delay-0-8s" style='text-align:center;'><iframe
  36.                                             width='100%'
  37.                                             height='300'
  38.                                             frameborder='0' style='border:0'
  39.                                             src='https://www.google.com/maps/embed/v1/place?key=AIzaSyAmbx9RsGi01srCnH_-2TVdH26TpjwvFDs
  40.                                 &q={{ hobit['data'].latitude }},{{ hobit['data'].longitude }}' 
  41.                                             allowfullscreen>
  42.                                           </iframe>
  43.                                     </div>
  44.                                     <div class="card-body">
  45.                                         <h5 class="card-title">Hobit {{ number }}</h5>
  46.                                         <p class="card-text">Date start : {{ hobit['startDateTime']|date("d/m/Y H:i") }}</p>
  47.                                         <p class="card-text">Date end : {{ hobit['endDateTime']|date("d/m/Y H:i") }}</p>
  48.                                         <p class="card-text">Latitude : {{ hobit['data'].latitude }}</p>
  49.                                         <p class="card-text">Longitude : {{ hobit['data'].longitude }}</p>
  50.                                         <p class="card-text">Number : {{ hobit['number'] }}</p>
  51.                                     </div>
  52.                                 </div>
  53.                             </div>
  54.                             {% set i = i + 1 %}
  55.                             {% set number = number + 1 %}
  56.                         {% endfor %} 
  57.                     </div>
  58.                 </div>
  59.             {% else %}
  60.                 <div class="container">
  61.                     <div class="row">
  62.                         {% set number = 1 %}
  63.                         {% for hobit in tabHobit %}
  64.                             <div class="col-12 col-lg-6">
  65.                                 <div class="accordion" id="accordionExample">
  67.                                     <div class="accordion-item">
  69.                                         <div class="title">
  70.                                             {% if hobit['activityType'] == "still" %}
  71.                                                 <i class="fas fa-chair"></i>
  72.                                             {% elseif hobit['activityType'] == "on_foot" %}
  73.                                                 <i class="fas fa-walking"></i>
  74.                                             {% elseif hobit['activityType'] == "on_bicycle" %}
  75.                                                 <i class="fas fa-bicycle"></i>
  76.                                             {% elseif hobit['activityType'] == "in_vehicle" %}
  77.                                                 <i class="fas fa-car"></i>
  78.                                             {% endif %}
  80.                                             {{ hobit['activityType'] }}
  81.                                         </div>
  83.                                         {% if hobit["data"] is defined and hobit["data"].latitude and hobit["data"].longitude %}
  84.                                             <div>
  85.                                                 <iframe
  86.                                                     width='100%'
  87.                                                     height='300'
  88.                                                     frameborder='0' style='border:0'
  89.                                                     src='https://www.google.com/maps/embed/v1/place?key=AIzaSyAmbx9RsGi01srCnH_-2TVdH26TpjwvFDs
  90.                                                         &q={{ hobit["data"].latitude }},{{ hobit["data"].longitude }}' 
  91.                                                     allowfullscreen>
  92.                                                 </iframe>
  93.                                             </div>
  94.                                         {% else %}
  95.                                             <div data-positions='{{ hobit['positions']|json_encode()|raw }}' id="map-multi-{{ number }}" class="animated fadeIn delay-0-8s map-multi" style="width: 100%; height: 300px;"></div>
  96.                                         {% endif %}
  98.                                         <div>
  99.                                             <button class="accordion-button button black mt-3 mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#tab-{{ number }}-main" aria-expanded="true" aria-controls="collapseOne">Open</button>
  100.                                         </div>
  102.                                         <div id="tab-{{ number }}-main" class="accordion-collapse collapse" aria-labelledby="tab-{{ number }}-main-label" data-bs-parent="#accordionExample">
  103.                                           <div class="accordion-body">
  104.                                             <div class="line"><strong>Start date time : </strong><code>{{ hobit['startDateTime']|date("d/m/Y H:i", "Europe/Paris") }}</code></div>
  105.                                             <div class="line"><strong>Start date time server : </strong><code>{{ hobit['startDateTimeServer']|date("d/m/Y H:i", "Europe/Paris") }}</code></div>
  106.                                             <div class="line"><strong>End date time hobbit : </strong><code>{{ hobit['endDateTime']|date("d/m/Y H:i", "Europe/Paris") }}</code></div> 
  107.                                 
  108.                                             <div class="line"><strong>Type activity : </strong><code>{{ dump(hobit['activityType']) }}</code></div>
  109.                                             {% if hobit['id'] is defined %}
  110.                                                 <div class="line"><strong>Id : </strong><code>{{ dump(hobit['id']) }}</code></div>
  111.                                             {% endif %}
  113.                                             <div class="line"><strong>Data : </strong><code>{{ dump(hobit) }}</code></div>
  114.                                           </div>
  115.                                         </div>
  116.                                     </div>
  117.                                     {% set number = number + 1 %}
  118.                             
  119.                                 </div>
  120.                             </div>
  121.                         {% endfor %}
  122.                     </div>
  123.                 </div>
  125.             {% endif %}
  127.         {% else %}
  128.             <div class="text-center animated fadeIn delay-0-4s" style="font-size: 30px;">No data...</div>
  129.         {% endif %}
  130.     </div>
  132. {% endblock %}
  134. {% block javascripts %}
  135.     {{ parent() }}
  138.     <script>
  140.         $(window).on('load', function() {
  141.         
  142.             $(".map-multi").each(function( index ) {
  143.                 console.log(JSON.parse($(this).attr("data-positions")));
  144.                 initMap($(this).attr("id"));
  145.             });
  147.             function initMap(idMap) {
  149.                 var positions = JSON.parse($("#" + idMap).attr("data-positions"));
  151.                 //var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  152.                 var mapOptions = {
  153.                   zoom: 16,
  154.                   center: new google.maps.LatLng(positions[0]['dataGps']['latitude'],positions[0]['dataGps']['longitude'])
  155.                 }
  156.                 var map = new google.maps.Map(document.getElementById(idMap), mapOptions);
  158.                 var markers = [];
  160.                 positions.forEach(function(element) {
  161.                     markers.push(new google.maps.Marker({
  162.                         position: new google.maps.LatLng(element['dataGps']['latitude'], element['dataGps']['longitude']),
  163.                         //title: element[2] + " - " + element[0] + " - " + element[1]
  164.                     }));
  165.                 });
  167.                 // To add the marker to the map, call setMap();
  168.                 //markers[0].setMap(map);
  169.                 //marker2.setMap(map);
  171.                 markers.forEach(function(element) {
  172.                     element.setMap(map);
  173.                 });
  174.             }
  175.         });
  177.     </script>
  179. {% endblock %}