templates/debug/live.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4. <div class="page">
  5. <div class="container header-page">
  6. <div class="row animated fadeIn delay-0-2s mb-3 mb-lg-5 align-items-center header-button">
  7. <div class="col-6">
  8. <div class="">
  9. <h2><svg class="icon-network" style="width: 27px; position: relative; top: -5px;" xmlns="http://www.w3.org/2000/svg" width="35" height="27" fill="currentColor" class="bi bi-wifi" viewBox="0 0 16 16">
  10. <path d="M15.384 6.115a.485.485 0 0 0-.047-.736A12.444 12.444 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c2.507 0 4.827.802 6.716 2.164.205.148.49.13.668-.049z"/>
  11. <path d="M13.229 8.271a.482.482 0 0 0-.063-.745A9.455 9.455 0 0 0 8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065A8.46 8.46 0 0 1 8 7a8.46 8.46 0 0 1 4.576 1.336c.206.132.48.108.653-.065zm-2.183 2.183c.226-.226.185-.605-.1-.75A6.473 6.473 0 0 0 8 9c-1.06 0-2.062.254-2.946.704-.285.145-.326.524-.1.75l.015.015c.16.16.407.19.611.09A5.478 5.478 0 0 1 8 10c.868 0 1.69.201 2.42.56.203.1.45.07.61-.091l.016-.015zM9.06 12.44c.196-.196.198-.52-.04-.66A1.99 1.99 0 0 0 8 11.5a1.99 1.99 0 0 0-1.02.28c-.238.14-.236.464-.04.66l.706.706a.5.5 0 0 0 .707 0l.707-.707z"/>
  12. </svg> Live</h2>
  13. </div>
  15. </div>
  16. <div class="col-6 text-right">
  17. <div class="link-right">
  18. <button class="btn btn-secondary link-i-see d-none">Recept</button>
  19. </div>
  20. </div>
  21. <div class="col-12">
  22. <hr></hr>
  23. </div>
  24. </div>
  25. </div>
  26. <div class="container">
  28. <div class="row">
  29. <div class="col-12 col-md-6 col-lg-4 mb-3 mb-lg-0 col-xl-3 animated fadeIn delay-0-2s">
  30. <div class="card text-center" id="current-position">
  31. <div class="card-header">
  32. Current position
  33. </div>
  34. {% if currentPosition %}
  35. <div class="card-body">
  36. <h5 class="card-title"><span class="value">{{ currentPosition.datePrinted|date("d-m-Y H:i:s") }}</span></h5>
  37. <ul class="list-group list-group-flush">
  38. <li class="list-group-item latitude">Latitude : <div class="value">{{ currentPosition.latitude }}</div></li>
  39. <li class="list-group-item longitude">Longitude : <div class="value">{{ currentPosition.longitude }}</div></li>
  40. <li class="list-group-item"><a href="/debug/information/position" class="btn btn-primary mt-3">Get last positions</a></li>
  41. </ul>
  43. </div>
  44. <div class="card-footer text-muted">
  45. <span class="value">{{ currentAgo|raw }}</span> ago
  46. </div>
  47. {% else %}
  48. <div class="text-center">No data</div>
  49. {% endif %}
  50. </div>
  51. </div>
  53. <div class="col-12 col-md-6 col-lg-4 mb-3 mb-lg-0 col-xl-3 animated fadeIn delay-0-2s">
  54. <div class="card text-center" id="current-hobit">
  55. <div class="card-header">
  56. Last hobit
  57. </div>
  59. {% if lastHobit %}
  60. <div class="card-body">
  61. <h5 class="card-title"><span class="value">{{ lastHobit.startDateTime|date("d-m-Y H:i:s") }}</span></h5>
  62. <ul class="list-group list-group-flush">
  63. <li class="list-group-item latitude">Latitude : <div class="value">{{ lastHobit.data.latitude }}</div></li>
  64. <li class="list-group-item longitude">Longitude : <div class="value">{{ lastHobit.data.longitude }}</div></li>
  65. <li class="list-group-item end">End (or now) : <div class="value">{{ lastHobit.endDateTime|date("d-m-Y H:i:s") }}</div></li>
  66. </ul>
  68. </div>
  69. <div class="card-footer text-muted">
  70. <span class="value">{{ currentHobitAgo|raw }}</span> ago
  71. </div>
  72. {% else %}
  73. <div class="text-center">No data</div>
  74. {% endif %}
  75. </div>
  76. </div>
  78. <div class="col-12 col-md-6 col-lg-4 mb-3 mb-lg-0 col-xl-3 ">
  79. {% if newHobitAgo == false %}
  80. <div class="card text-center d-none animated fadeIn delay-0-2s" id="new-hobit">
  81. {% else %}
  82. <div class="card text-center animated fadeIn delay-0-2s" id="new-hobit">
  83. {% endif %}
  84. <div class="card-header">
  85. Scan hobit
  86. </div>
  87. <div class="card-body">
  88. <h5 class="card-title">
  89. <span class="value">
  90. {% if lastHobit %}
  91. Since {{ lastHobit.endDateTime|date("d-m-Y H:i:s") }}
  92. {% endif %}
  93. </span></h5>
  94. <div class="loader mt-lg-4">
  95. <div class="spinner-grow text-primary" role="status">
  96. <span class="visually-hidden">Loading...</span>
  97. </div>
  98. </div>
  99. </div>
  100. <div class="card-footer text-muted">
  101. <span class="value">{{ newHobitAgo|raw }}</span> ago
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  107. <div class="row mt-5">
  108. <div class="col-12">
  109. <h3 class="mb-3 animated fadeIn delay-0-2s">Last positions</h3>
  110. </div>
  111. </div>
  113. <div class="row">
  114. {% if positionGpsList %}
  115. {% set i = 1 %}
  116. {% set number = 1 %}
  117. {% for positionGps in positionGpsList %}
  118. <div class="col-12 col-md-6 col-lg-4 mb-3 mb-lg-5">
  119. <div class="card animated fadeIn delay-0-{{ i }}s" style="width: 100%;">
  120. <div class="card-body">
  121. <h5 class="card-title"><b>Position <span class="value">{{ number }}</span></b></h5>
  122. <div class="card-text line mb-1"><b>Date application : </b>{{ positionGps.datePrinted|date("d-m-Y H:i:s") }}</div>
  123. <div class="card-text line mb-1"><b>Date server : </b>{{ positionGps.dateCreatedByServer|date("d-m-Y H:i:s") }}</div>
  124. <div class="card-text line mb-1"><b>Latitude : </b>{{ positionGps.latitude }}</div>
  125. <div class="card-text line mb-1"><b>Longitude : </b>{{ positionGps.longitude }}</div>
  126. <a href="/debug/information/positions/{{ positionGps.datePrinted|date("Y-m-d") }}" class="btn btn-primary mt-3">All positions</a>
  127. </div>
  128. </div>
  129. </div>
  130. {% set i = i + 1 %}
  131. {% set number = number + 1 %}
  132. {% endfor %}
  133. {% else %}
  134. <div class="text-center animated fadeIn delay-0-4s" style="font-size: 30px;">No data...</div>
  135. {% endif %}
  137. </div>
  138. </div>
  139. </div>
  140. {% endblock %}
  142. {% block javascripts %}
  143. {{ parent() }}
  145. <script>
  147. window.onload=function() {
  148. var boucle = 1;
  149. setInterval(function(){
  150. $.get(
  151. '{{ path("information_live_refresh_debug") }}',
  152. {
  154. },
  155. function(data){
  157. if(data['data']['dataHere']){
  158. if(data['data']['currentPostition']['start'] != $("body #current-position .card-title .value").html()){
  159. $(".icon-network").removeClass("active");
  160. $(".icon-network").addClass("active");
  161. $(".link-i-see").removeClass("d-none");
  163. const soundEffect = new Audio();
  165. // onClick of first interaction on page before I need the sounds
  166. soundEffect.play();
  168. // later on when you actually want to play a sound at any point without user interaction
  169. soundEffect.src = '/alert.mp3';
  170. soundEffect.play();
  171. }
  173. //Current position
  174. $("body #current-position .card-title .value").html(data['data']['currentPostition']['start']);
  175. $("body #current-position .latitude .value").html(data['data']['currentPostition']['latitude']);
  176. $("body #current-position .longitude .value").html(data['data']['currentPostition']['longitude']);
  177. $("body #current-position .card-footer .value").html(data['data']['currentAgo']);
  179. //Current hobit
  180. $("body #current-hobit .card-title .value").html(data['data']['lastHobit']['start']);
  181. $("body #current-hobit .latitude .value").html(data['data']['lastHobit']['latitude']);
  182. $("body #current-hobit .longitude .value").html(data['data']['lastHobit']['longitude']);
  183. $("body #current-hobit .end .value").html(data['data']['lastHobit']['end']);
  184. $("body #current-hobit .card-footer .value").html(data['data']['currentHobitAgo']);
  186. //Current hobit
  187. if(data['data']['newHobitAgo'] != false){
  188. $("body #new-hobit .card-title .value").html(data['data']['currentPostition']['start']);
  189. $("body #new-hobit .card-footer .value").html(data['data']['newHobitAgo']);
  190. $("body #new-hobit").removeClass("d-none");
  191. }
  192. else{
  193. $("body #new-hobit").addClass("d-none");
  194. }
  195. }
  196. }
  197. );
  199. }, 1000);
  200. };
  202. $("body").on("click", ".link-i-see", function(){
  203. $(this).addClass("d-none");
  204. $(".icon-network").removeClass("active");
  205. });
  207. </script>
  209. {% endblock %}