templates/tracking/_Tab_track_container.html.twig line 1

Open in your IDE?
  1. {# templates/tracking/_Tab_track_container.html.twig #}
  3. <style>
  4.     :root {
  5.         --afi-primary: #006E51;
  6.         --afi-success: #28a745;
  7.         --afi-danger: #e53e3e;
  8.         --afi-border: #edf2f7;
  9.     }
  11.     /* Conteneur Zigzag */
  12.     .timeline-zigzag {
  13.         position: relative;
  14.         padding: 20px 0;
  15.         margin-top: 30px;
  16.     }
  18.     .timeline-zigzag::before {
  19.         content: '';
  20.         position: absolute;
  21.         left: 50%; width: 3px; height: 100%;
  22.         background: linear-gradient(to bottom, var(--afi-success), #e9ecef);
  23.         transform: translateX(-50%);
  24.     }
  26.     .zigzag-item {
  27.         position: relative;
  28.         width: 50%;
  29.         padding: 10px 40px;
  30.         box-sizing: border-box;
  31.     }
  33.     .zigzag-item.left { left: 0; text-align: right; }
  34.     .zigzag-item.right { left: 50%; text-align: left; }
  36.     /* Points centraux */
  37.     .zigzag-dot {
  38.         position: absolute;
  39.         top: 20px;
  40.         width: 18px; height: 18px;
  41.         background: #fff;
  42.         border: 4px solid var(--afi-success);
  43.         border-radius: 50%;
  44.         z-index: 10;
  45.     }
  46.     .left .zigzag-dot { right: -10px; }
  47.     .right .zigzag-dot { left: -10px; }
  49.     /* Cartes */
  50.     .timeline-content {
  51.         background: #fff;
  52.         padding: 20px;
  53.         border-radius: 18px;
  54.         box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  55.         border: 1px solid var(--afi-border);
  56.         transition: 0.3s ease;
  57.         display: inline-block;
  58.         width: 100%;
  59.         text-align: left;
  60.     }
  62.     /* Style pour la DERNIÈRE sous-étape globale */
  63.     .latest-status-marker {
  64.         border: 2px solid var(--afi-success) !important;
  65.         background: rgba(40, 167, 69, 0.03);
  66.         animation: pulse-border 2s infinite;
  67.     }
  69.     @keyframes pulse-border {
  70.         0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); }
  71.         70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
  72.         100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
  73.     }
  75.     .sub-tracking-list {
  76.         padding-left: 15px;
  77.         border-left: 2px solid #f1f5f9;
  78.         margin-top: 12px;
  79.     }
  81.     .afi-comment {
  82.         font-size: 0.75rem;
  83.         color: var(--afi-danger);
  84.         font-weight: 600;
  85.         background: rgba(229, 62, 62, 0.05);
  86.         padding: 5px 10px;
  87.         border-radius: 6px;
  88.         margin-top: 5px;
  89.         display: inline-block;
  90.         font-style: italic;
  91.     }
  93.     /* Mobile Responsive */
  94.     @media (max-width: 768px) {
  95.         .timeline-zigzag::before { left: 20px; }
  96.         .zigzag-item { width: 100%; left: 0 !important; padding-left: 45px; padding-right: 10px; text-align: left !important; }
  97.         .zigzag-dot { left: 11px !important; }
  98.     }
  99. </style>
  101. <div class="container mt-4">
  102.     <div class="text-center mb-5">
  103.         <h1 class="font-weight-bold" style="color: #1a202c;">{{ programme_contenaire.numeroContenaire }}</h1>
  105.         {# Identification des derniers états pour le header[cite: 1, 2] #}
  106.         {% set sortedSuivis = programme_contenaire.suiviContenaires|sort((a, b) => a.dateOperation <=> b.dateOperation) %}
  107.         {% set lastBase = sortedSuivis|last %}
  109.         {# On cherche la sous-étape la plus récente de TOUT le projet #}
  110.         {% set allSubSuivis = [] %}
  111.         {% for ct in programme_contenaire.suiviContenaires %}
  112.             {% for ss in ct.getSousSuivis %}
  113.                 {% set allSubSuivis = allSubSuivis|merge([ss]) %}
  114.             {% endfor %}
  115.         {% endfor %}
  116.         {% set globalLatestSub = (allSubSuivis|sort((a, b) => a.createdAt <=> b.createdAt))|last %}
  118.         <div class="d-flex flex-column align-items-center">
  119.             <span class="badge badge-pill shadow-sm px-4 py-2 mb-2" style="background: #fff; border: 1px solid var(--afi-border);">
  120.                 <i class="fa fa-map-marker-alt text-primary mr-2"></i>
  121.                 {% if lastBase %}{{ lastBase.lieu }}{% else %}Origin Port{% endif %}
  122.             </span>
  123.             {% if globalLatestSub %}
  124.                 <div class="status-badge-hero px-3 py-1" style="background: var(--afi-primary); color: white; border-radius: 20px; font-size: 0.8rem; font-weight: bold;">
  125.                     CURRENT STATUS: {{ globalLatestSub.sousPosition.libelle|upper }}
  126.                 </div>
  127.             {% endif %}
  128.         </div>
  129.     </div>
  131.     <div class="timeline-zigzag">
  132.         {% for ct in programme_contenaire.suiviContenaires|sort((a, b) => b.dateOperation <=> a.dateOperation) %}
  133.             <div class="zigzag-item {{ loop.index0 is even ? 'left' : 'right' }}">
  134.                 <div class="zigzag-dot"></div>
  135.                 <div class="timeline-content">
  136.                     <div class="d-flex justify-content-between align-items-center mb-2">
  137.                         <strong class="text-uppercase" style="color: #1a202c;">{{ ct.lieu }}</strong>
  138.                         <small class="text-muted"><i class="far fa-calendar-alt"></i> {{ ct.dateOperation|date('M d, Y') }}</small>
  139.                     </div>
  141.                     <div class="sub-tracking-list">
  142.                         {% for ss in ct.getSousSuivis|sort((a, b) => b.createdAt <=> a.createdAt) %}
  143.                             <div class="sub-tracking-item py-1 {{ (globalLatestSub and ss.id == globalLatestSub.id) ? 'latest-status-marker p-2 rounded' : '' }}">
  144.                                 <div class="d-flex justify-content-between align-items-center">
  145.                                     <span style="font-size: 0.85rem; font-weight: 700;">
  146.                                         <i class="fa {{ (globalLatestSub and ss.id == globalLatestSub.id) ? 'fa-sync-alt fa-spin text-primary' : 'fa-check-circle text-success' }} mr-2"></i>
  147.                                         {{ ss.sousPosition.libelle }}
  148.                                     </span>
  149.                                     <small class="text-muted" style="font-size: 0.7rem;">{{ ss.createdAt|date('H:i') }}</small>
  150.                                 </div>
  152.                                 {% if ss.commentaire is defined and ss.commentaire %}
  153.                                     <div class="afi-comment">
  154.                                         <i class="fa fa-info-circle mr-1"></i> {{ ss.commentaire }}
  155.                                     </div>
  156.                                 {% endif %}
  157.                             </div>
  158.                         {% endfor %}
  159.                     </div>
  160.                 </div>
  161.             </div>
  162.         {% else %}
  163.             <div class="text-center py-5">
  164.                 <p class="text-muted italic">No tracking history found for this container.</p>
  165.             </div>
  166.         {% endfor %}
  167.     </div>
  168. </div>