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>
  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 %}
  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() {
  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 %}