11{% extends 'layout.html' %}
2+ {% block import %}
3+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js " integrity ="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA== " crossorigin ="anonymous "> </ script >
4+ {% endblock %}
25{% block content %}
36< ul class ="nav nav-pills mb-3 " id ="pills-tab " role ="tablist ">
47 {% for parcours in parcours_data %}
710 </ li >
811 {% endfor %}
912</ ul >
13+ < script >
14+ var socket = io ( '/edition/parcours' , { auth : { 'edition_id' :{ { edition_data. id } } , 'event_id' :{ { event_data. id } } } } ) ;
15+
16+ function create_not_started ( data , div , node ) {
17+ let id = data . dossard + '-' + data . time_stamp
18+ let time = new Date ( data . time_stamp * 1000 )
19+
20+ data . time_stamp = `${ time . getDate ( ) } .${ time . getMonth ( ) + 1 } ${ time . getHours ( ) } :${ time . getMinutes ( ) } :${ time . getSeconds ( ) } `
21+ let html =
22+ `<div class="card-header">
23+ <p class="mb-0">
24+ ${ data . dossard } ${ data . name }
25+ </p>
26+ <button class="
27+ </div>`
28+
29+ if ( ! node ) {
30+ let node = document . createElement ( 'div' )
31+ node . innerHTML = html
32+
33+ node . classList . add ( 'mb-2' )
34+ node . classList . add ( 'card' )
35+ node . classList . add ( 'bg-info' )
36+
37+ if ( div . children . length == 0 ) {
38+ div . appendChild ( node )
39+ } else {
40+ div . insertBefore ( node , div . children [ 0 ] )
41+ }
42+ } else {
43+ node . classList . remove ( 'bg-primary' )
44+ node . classList . remove ( 'bg-danger' )
45+ node . classList . remove ( 'bg-warning' )
46+ node . classList . add ( 'bg-info' )
47+ node . innerHTML = html
48+ }
49+ }
50+
51+ function create_passage ( data , div , node = null ) {
52+ let id = data . dossard + '-' + data . time_stamp
53+ let time = new Date ( data . time_stamp * 1000 )
54+
55+ data . time_stamp = `${ time . getDate ( ) } .${ time . getMonth ( ) + 1 } ${ time . getHours ( ) } :${ time . getMinutes ( ) } :${ time . getSeconds ( ) } `
56+ let html =
57+ `<div class="card-header">
58+ <p class="mb-0">
59+ ${ data . dossard } ${ data . name }
60+ <br>
61+ ${ data . time_stamp }
62+ </p>
63+ <button class="btn" onclick="toggleDetails('${ id } ', this)">
64+ <span class="icon" id="icon-${ id } "><i class="fas fa-chevron-right"></i></span>
65+ </button>
66+ </div>
67+ <div id="detail-${ id } " class="collapse">
68+ <div class="card-body">
69+ <table>
70+ <tbody>`
71+ data . parcours . forEach ( passage => {
72+ html +=
73+ `<tr>
74+ <th class="text-center pe-1"> <i class="` + ( passage . current ?'fa-solid fa-circle fa-l' :'fa-regular fa-circle fa-xs' ) + `"></i></th>
75+ <td class="pe-3">${ passage . stand . name } </td>
76+ <td class="pe-3">` +
77+ ( passage . succes == true ?passage . delta :( passage . succes == false ?'<i class="fa-solid fa-xmark"></i>' :'' ) ) +
78+ `</td>
79+ <td>
80+ ${ passage . dist != null ?passage . dist + ' km' :'' }
81+ </td>
82+ </tr>`
83+ } ) ;
84+ html += `</tbody>
85+ </table>
86+ </div>
87+ </div>`
88+
89+ let color = data . finish ?data . all_right ?'bg-success' :'bg-warning' :'bg-danger'
90+ if ( ! node ) {
91+ let node = document . createElement ( 'div' )
92+ node . innerHTML = html
93+
94+
95+ node . classList . add ( 'mb-2' )
96+ node . classList . add ( 'card' )
97+ node . classList . add ( color )
98+
99+ if ( div . children . length == 0 ) {
100+ div . appendChild ( node )
101+ } else {
102+ div . insertBefore ( node , div . children [ 0 ] )
103+ }
104+ } else {
105+ node . classList . remove ( 'bg-primary' )
106+ node . classList . remove ( 'bg-danger' )
107+ node . classList . remove ( 'bg-warning' )
108+ node . classList . add ( color )
109+ node . innerHTML = html
110+ }
111+ }
112+
113+ function toggleDetails ( detailId , button ) {
114+ const detailDiv = document . getElementById ( `detail-${ detailId } ` ) ;
115+ const icon = document . getElementById ( `icon-${ detailId } ` ) ;
116+
117+ detailDiv . classList . toggle ( 'show' ) ; // Toggle the 'show' class for smooth transition
118+ icon . innerHTML = detailDiv . classList . contains ( 'show' ) ?
119+ '<i class="fas fa-chevron-down"></i>' :
120+ '<i class="fas fa-chevron-right"></i>' ; // Change icon based on state
121+ }
122+
123+ </ script >
10124< div class ="tab-content " id ="pills-tabContent ">
11125 {% for parcours in parcours_data %}
12- < div class ="tab-pane fade {% if loop.index0==0 %}show active{% endif %} " id ="pills-{{ parcours.id }} " role ="tabpanel " aria-labelledby ="pills-{{ parcours.id }}-tab ">
13- ...
126+ < div id =" pills-{{ parcours.id }} " class ="tab-pane fade {% if loop.index0==0 %}show active{% endif %} " id ="pills-{{ parcours.id }} " role ="tabpanel " aria-labelledby ="pills-{{ parcours.id }}-tab ">
127+
14128 </ div >
129+ < script >
130+ socket . emit ( 'get_parcours_passage' , { { parcours. id } } , function ( data ) {
131+ div = document . getElementById ( "pills-{{ parcours.id }}" )
132+ data . forEach ( function ( passage ) {
133+ if ( passage . started ) {
134+ create_passage ( passage , div )
135+ } else {
136+ create_not_started ( passage , div )
137+ }
138+ } )
139+ } )
140+ </ script >
15141 {% endfor %}
16142</ div >
17143{% endblock %}
0 commit comments