ajout de la pagination des résultats de recherche
This commit is contained in:
@@ -1,89 +1,153 @@
|
||||
<detail-view>
|
||||
<div if={ props.formation } class="detail-card">
|
||||
<h2>{ props.formation.nom }</h2>
|
||||
<div if={ props.formation } class="detail-page">
|
||||
<h2>Formation</h2>
|
||||
|
||||
<p><b>Établissement :</b> { props.formation.etablissement }</p>
|
||||
<p><b>Ville :</b> { props.formation.ville }</p>
|
||||
<p><b>Département :</b> { props.formation.departement } - { props.formation.departementLib }</p>
|
||||
<p><b>Académie :</b> { props.formation.academie }</p>
|
||||
<p><b>Région :</b> { props.formation.region }</p>
|
||||
<p><b>Contrat :</b> { props.formation.contrat }</p>
|
||||
<h1 class="formation-title">{ props.formation.etablissement } - { props.formation.nom }</h1>
|
||||
|
||||
<hr>
|
||||
<div class="formation-meta">
|
||||
<p><b>Ville :</b> { props.formation.ville }</p>
|
||||
<p><b>Département :</b> { props.formation.departement } { props.formation.departementLib }</p>
|
||||
<p><b>Académie :</b> { props.formation.academie }</p>
|
||||
<p>{ props.formation.contrat }</p>
|
||||
<p><b>Capacité :</b> { props.formation.capacite }</p>
|
||||
</div>
|
||||
|
||||
<h3>Formation</h3>
|
||||
<p><b>Filière :</b> { props.formation.filiere }</p>
|
||||
<p><b>Sélectivité :</b> { props.formation.selectivite }</p>
|
||||
<p><b>Capacité :</b> { props.formation.capacite }</p>
|
||||
<p><b>Candidats :</b> { props.formation.candidats }</p>
|
||||
<p><b>Admis :</b> { props.formation.admis }</p>
|
||||
<p><b>Taux d'accès :</b> { props.formation.tauxAcces }%</p>
|
||||
<div class="detail-grid">
|
||||
<div>
|
||||
<h2>Phase principale d'admission</h2>
|
||||
|
||||
<hr>
|
||||
<table class="detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bac</th>
|
||||
<th>Voeux</th>
|
||||
<th>Classés</th>
|
||||
<th>Propositions</th>
|
||||
<th>Acceptés</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Gén</td>
|
||||
<td>{ props.formation.voePPGeneral }</td>
|
||||
<td>{ props.formation.classesPPGeneral }</td>
|
||||
<td>{ props.formation.propositionsPPGeneral }</td>
|
||||
<td>{ props.formation.acceptesPPGeneral }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Techno</td>
|
||||
<td>{ props.formation.voePPTechno }</td>
|
||||
<td>{ props.formation.classesPPTechno }</td>
|
||||
<td>{ props.formation.propositionsPPTechno }</td>
|
||||
<td>{ props.formation.acceptesPPTechno }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pro</td>
|
||||
<td>{ props.formation.voePPPro }</td>
|
||||
<td>{ props.formation.classesPPPro }</td>
|
||||
<td>{ props.formation.propositionsPPPro }</td>
|
||||
<td>{ props.formation.acceptesPPPro }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Autres</td>
|
||||
<td>{ props.formation.voePPAutres }</td>
|
||||
<td>{ props.formation.classesPPAutres }</td>
|
||||
<td>{ props.formation.propositionsPPAutres }</td>
|
||||
<td>{ props.formation.acceptesPPAutres }</td>
|
||||
</tr>
|
||||
<tr class="total-row">
|
||||
<td>Total</td>
|
||||
<td>{ props.formation.voePPTotal }</td>
|
||||
<td>{ props.formation.classesPPTotal }</td>
|
||||
<td>{ props.formation.propositionsPPTotal }</td>
|
||||
<td>{ props.formation.acceptesPPTotal }</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Profil des admis</h3>
|
||||
<div class="timeline-box">
|
||||
<h3>Vitesse de remplissage</h3>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">Répartition des bacs</div>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div>
|
||||
<b>Ouverture 30 mai</b><br />
|
||||
{ props.formation.pctDebutPhase }%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="charts-css bar show-labels">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Général</th>
|
||||
<td style="--size: { props.formation.pctGeneral / 100 }">
|
||||
{ props.formation.pctGeneral }%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Technologique</th>
|
||||
<td style="--size: { props.formation.pctTechno / 100 }">
|
||||
{ props.formation.pctTechno }%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Professionnel</th>
|
||||
<td style="--size: { props.formation.pctPro / 100 }">
|
||||
{ props.formation.pctPro }%
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div>
|
||||
<b>16 juin</b><br />
|
||||
{ props.formation.pctDateBac }%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div>
|
||||
<b>11 juillet</b><br />
|
||||
{ props.formation.pctFinPhase }%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Mentions au bac</h3>
|
||||
<h2>Phase complémentaire d'admission</h2>
|
||||
|
||||
<table class="detail-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bac</th>
|
||||
<th>Voeux</th>
|
||||
<th>Classés</th>
|
||||
<th>Propositions</th>
|
||||
<th>Acceptés</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Gén</td>
|
||||
<td>{ props.formation.voePCGeneral }</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Techno</td>
|
||||
<td>{ props.formation.voePCTechno }</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pro</td>
|
||||
<td>{ props.formation.voePCPro }</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Autres</td>
|
||||
<td>{ props.formation.voePCAutres }</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="total-row">
|
||||
<td>Total</td>
|
||||
<td>{ props.formation.voePCTotal }</td>
|
||||
<td>{ props.formation.classesPCTotal }</td>
|
||||
<td>{ props.formation.acceptesPCTotal }</td>
|
||||
<td>{ props.formation.acceptesPCTotal }</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="chart-container">
|
||||
<table class="charts-css bar show-labels">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Sans mention</th>
|
||||
<td style="--size: { props.formation.pctSansMention / 100 }">
|
||||
{ props.formation.pctSansMention }%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>AB</th>
|
||||
<td style="--size: { props.formation.pctAB / 100 }">
|
||||
{ props.formation.pctAB }%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>B</th>
|
||||
<td style="--size: { props.formation.pctB / 100 }">
|
||||
{ props.formation.pctB }%
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>TB</th>
|
||||
<td style="--size: { props.formation.pctTB / 100 }">
|
||||
{ props.formation.pctTB }%
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button onclick={ () => props.onback() }>Retour</button>
|
||||
</div>
|
||||
</detail-view>
|
||||
Reference in New Issue
Block a user