templates/core/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Bienvenue {{ parent() }}{% endblock %}
  5. {% block separator %}{% endblock %}
  7. {% block notification %} 
  9.   {% for message in app.session.flashbag.get('app_user_register_success') %}
  10.         <div class="alert alert-primary">
  11.             <i class="fa fa-check"></i>{{ message }}
  12.             <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  13.                 <span aria-hidden="true" class="text-primary">&times;</span>
  14.             </button>
  15.         </div>
  16.   {% endfor %} 
  19. {% for message in app.session.flashbag.get('account_valid') %}
  20. <div class="alert alert-primary">
  21.     <i class="fa fa-check"></i>{{ message }}
  22.     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  23.         <span aria-hidden="true" class="text-primary">&times;</span>
  24.     </button>
  25. </div>
  26. {% endfor %} 
  28. {% endblock %}
  30. {% block body %}
  31.   <link rel="stylesheet" href="leaflet/leaflet.css"  crossorigin="">
  32.   <!-- DataTables -->
  33.   <link rel="stylesheet" href="datatables/datatables.min.css">
  35.   <link rel="stylesheet" href="/css/maps2.css"> 
  36.     
  37.         
  38.         <div class="card-deck mb-3">
  39.             <div class="card h-lg-100 overflow-hidden">
  40.                 <div class="card-body p-3">
  41.                 <div class="row">
  44.                     <div class="col-lg-3 col-xl-3 pr-lg-0 mb-3">
  45.                        
  46.                         <div class="row pr-lg-1">
  48.                         <div class="col-md-12 col-xxl-12 mb-3 pl-md-2 pr-xxl-2">
  49.                           <div class="card h-md-100">
  50.                           <div class="bg-holder d-none d-lg-block bg-card" style="background-image:url( {{ asset('falcon/pages/assets/img/illustrations/corner-4.png') }} );"></div>
  51.                             <div class="row">
  53.                             <div class="col-md-12">
  54.                               <div class="pb-0" style="padding:0.1rem 0.5rem !important">
  55.                                 <h6 class="mb-0 mt-2 d-flex align-items-center"># Alertes Signalées<span class="ml-1 text-400" data-toggle="tooltip" data-placement="top" title="" data-original-title="Calculated according to last week's sales"><!-- <span class="far fa-question-circle" data-fa-transform="shrink-1"></span> --></span></h6>
  56.                               </div>
  57.                               <div class="card-body d-flex align-items-end" style="padding:0 0.5rem !important">
  58.                                 <div class="row flex-grow-1">
  59.                                   <div class="col" style="margin-bottom:0.5rem !important">
  60.                                     <div class="display-3 fs-4 mb-2 font-weight-normal text-sans-serif text-warning">
  61.                                       <img src="{{ asset('dashboard/alert_icon.png') }}" alt="" width="20" />
  62.                                       {{numberAlerts}}
  63.                                     </div>
  64.                                     <a class="font-weight-semi-bold fs--1 text-nowrap" href="{{path('ehtools_alert_register')}}" >Voir plus<span class="fas fa-angle-right ml-1" data-fa-transform="down-1"></span></a>
  65.                                   </div>
  66.                                 </div>
  67.                               </div>
  68.                             </div>
  71.                             {#<div class="col-md-5">
  72.                               <div class="card-header pb-0" style="padding:0.1rem 0.5rem !important">
  73.                                 <h6 class="mb-0 mt-2 d-flex align-items-center"># Evalu<span class="ml-1 text-400" data-toggle="tooltip" data-placement="top" title="" data-original-title="Calculated according to last week's sales"><!-- <span class="far fa-question-circle" data-fa-transform="shrink-1"></span> --></span></h6>
  74.                               </div>
  75.                               <div class="card-body d-flex align-items-end" style="padding:0 0.5rem !important">
  76.                                 <div class="row flex-grow-1">
  77.                                   <div class="col" style="margin-bottom:0.5rem !important">
  78.                                     <div class="display-4 fs-2 mb-2 font-weight-normal text-sans-serif text-warning">
  79.                                       {{numberAlerts}}
  80.                                     </div>
  81.                                     </div>
  82.                                 </div>
  83.                               </div>
  84.                             </div> #}
  86.                             
  88.                           </div>
  90.                           </div>
  91.                         </div>
  94.                       </div>
  95.                             
  96.                      <div class="row pr-lg-2">
  97.                           <div class="col-lg-12 col-xl-12 pr-lg-2 mb-3 text-left" id="graph_1">
  98.                               <h6 class="graph_titre_1">Statut des alertes <span></span></h6>
  99.                               <div id="graph_legend">
  100.                                 <div class="case"> <div style="background:#4f91cd"></div> Evaluation terminée  </div>
  101.                                 <div class="case"> <div style="background:#E56A54"></div> En attente </div>
  102.                               </div>
  103.                               <canvas id="chart-data_1" height="100"></canvas>
  104.                           </div>
  105.                       </div>      
  106.                             
  107.                       <div class="row pr-lg-2">
  108.                           <div class="col-lg-12 col-xl-12 pr-lg-2 mb-3 text-left" id="graph_2" >
  109.                               <h6 class="graph_titre_2">
  111.                               {% if adminID == "CD" %}
  112.                                 # Alertes par Territoire 
  113.                               {% elseif adminID == "CF" %}
  114.                                 # Alertes par S-Prefecture
  115.                               {% elseif adminID == "BF" %}
  116.                                 # Alertes par Territoire 
  117.                               {% endif %}
  118.                               
  119.                               <span></span></h6>
  120.                               <div id="graph_legend">
  121.                                 <div class="case"> <div style="background:#4f91cd"></div> Evaluées  </div>
  122.                                 <div class="case"> <div style="background:#E56A54"></div> Non evaluées </div>
  123.                               </div>
  124.                               <div class="chart_2_scroll chat-content-scroll-area scrollbar">
  125.                               <canvas id="chart-data_2" height="100"></canvas>
  126.                               </div>
  127.                           </div>
  128.                       </div>
  129.                       
  130.                       
  131.                         
  132.                         
  133.                     </div>
  136.                     <div class="col-lg-9 col-xl-9 pr-lg-2 mb-2">
  138.                       <div id="map" >
  139.                         <div class="leaflet-control-container">
  140.                           <div class="leaflet-top leaflet-left">
  141.                             <div id="map_globe">
  142.                               {#<img src="{{ asset('dashboard/g_rdc.png') }}" alt="" width="45" />#}
  143.                             </div>
  144.                             <div class="leaflet-control-zoom leaflet-bar leaflet-control">
  145.                               {# <a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a>
  146.                               <a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">−</a> #}
  147.                             </div>
  148.                           </div> 
  149.                         </div>
  150.                       </div>  
  151.                             <!-- /.box-body-->
  153.                             {% if adminID == "CD" %}
  154.                                 <div class='map-overlay' id='features'><h5>Rép. Dém. du Congo</h5><div id='pd'><p>Survolez les zones de santé !</p></div></div>
  155.                             {% elseif adminID == "CF" %}
  156.                                 <div class='map-overlay' id='features'><h5>Rép. Centrafricaine</h5><div id='pd'><p>Survolez les sous-prefectures !</p></div></div>
  157.                             {% elseif adminID == "BF" %}
  158.                                 <div class='map-overlay' id='features'><h5>Burkina Faso</h5><div id='pd'><p>Survolez les zones de santé !</p></div></div>
  159.                             {% endif %}
  161.                             <!--<div class='map-overlay' id='features'><h5>Rép. Dém. du Congo</h5><div id='pd'><p>Survolez les zones de santé !</p></div></div>-->
  162.                             <div class='map-overlay' id='legend'></div>
  163.                     </div> 
  165.                     
  166.                 </div>
  168.                 <div class="row pr-lg-1">
  170.                     <div class="col-lg-3 col-xl-3 pr-lg-0 mb-0">
  171.                         
  172.                         <div class="col-md-12 col-xxl-12 mb-3 pl-md-0">
  173.                           <div class="card h-md-100">
  174.                           <div class="bg-holder d-none d-lg-block bg-card" style="background-image:url( {{ asset('falcon/pages/assets/img/illustrations/corner-4.png') }} );"></div>
  175.                             <div class="row">
  177.                             <div class="col-md-12">
  178.                               <div class="pb-0" style="padding:0.1rem 0.5rem !important">
  179.                                 <h6 class="mb-0 mt-2 d-flex align-items-center"># Personnes déplacées<span class="ml-1 text-400" data-toggle="tooltip" data-placement="top" title="" data-original-title="Calculated according to last week's sales"><!-- <span class="far fa-question-circle" data-fa-transform="shrink-1"></span> --></span></h6>
  180.                               </div>
  181.                               <div class="card-body d-flex align-items-end" style="padding:0 0.5rem !important">
  182.                                 <div class="row flex-grow-1">
  183.                                   <div class="col" style="margin-bottom:0.5rem !important">
  184.                                     <div class="display-4 fs-3 mb-2 font-weight-normal text-sans-serif text-info">
  185.                                       <img src="{{ asset('dashboard/pers_moved.png') }}" alt="" width="20" />
  186.                                       <!-- 5.2M -->
  187.                                       {# {{numberPersMoved}} #}
  188.                                    
  189.                                        {{numberPersMovedFx}}
  191.                                     </div>
  192.                                     {#<a class="font-weight-semi-bold fs--1 text-nowrap" href="{{path('ehtools_movement_register_deplace')}}" >Voir plus<span class="fas fa-angle-right ml-1" data-fa-transform="down-1"></span></a>#} 
  193.                                      <a href="{{numberPersMovedAr.link}}" target="_blank"> Voir plus<span class="fas fa-angle-right ml-1" data-fa-transform="down-1"></span>
  194.                                   </div>
  195.                                 </div>
  196.                               </div>
  197.                             </div>
  199.                           </div>
  201.                           </div>
  202.                         </div>
  203.                         
  204.                         
  205.                         <div class="col-md-12 col-xxl-12 mb-3 pl-md-0">
  206.                           <div class="card h-md-100">
  207.                           <div class="bg-holder d-none d-lg-block bg-card" style="background-image:url( {{ asset('falcon/pages/assets/img/illustrations/corner-4.png') }} );"></div>
  208.                             <div class="row">
  210.                             <div class="col-md-12">
  211.                               <div class="pb-0" style="padding:0.1rem 0.5rem !important">
  212.                                 <h6 class="mb-0 mt-2 d-flex align-items-center"># Personnes Retournées<span class="ml-1 text-400" data-toggle="tooltip" data-placement="top" title="" data-original-title="Calculated according to last week's sales"><!-- <span class="far fa-question-circle" data-fa-transform="shrink-1"></span> --></span></h6>
  213.                               </div>
  214.                               <div class="card-body d-flex align-items-end" style="padding:0 0.5rem !important">
  215.                                 <div class="row flex-grow-1">
  216.                                   <div class="col" style="margin-bottom:0.5rem !important">
  217.                                     <div class="display-4 fs-3 mb-2 font-weight-normal text-sans-serif text-info">
  218.                                       <img src="{{ asset('dashboard/pers_return.png') }}" alt="" width="20" />
  219.                                       {#{numberPersReturn}#}
  220.                             
  221.                                        {{numberPersReturnFx}}   
  222.                                      
  223.                                     </div>
  224.                                      {#<a class="font-weight-semi-bold fs--1 text-nowrap" href="{{path('ehtools_movement_register_retour')}}" >Voir plus<span class="fas fa-angle-right ml-1" data-fa-transform="down-1"></span></a>#} 
  225.                                     
  226.                                       <a href="{{numberPersReturnAr.link}}" target="_blank"> Voir plus<span class="fas fa-angle-right ml-1" data-fa-transform="down-1"></span>
  227.                                     </a> 
  228.                                   </div>
  229.                                 </div>
  230.                               </div>
  231.                             </div>
  233.                           </div>
  235.                           </div>
  236.                         </div>
  238.                       </div>
  239.                           
  240.                     <div class="col-lg-9 col-xl-9 pr-lg-2 mb-3 text-left" {% if adminID == "CD" %} id="graph_3" {% endif %} >
  241.                         <h6 class="graph_titre_3">Evolution des Mouvements de la population (24 derniers mois)<span></span></h6>
  242.                         <div id="graph_legend">
  243.                           <div class="case"> <div style="background:#4f91cd"></div> Pers. déplacées  </div>
  244.                           <div class="case"> <div style="background:#E56A54"></div> Pers. retournées  </div>
  245.                         </div>
  246.                         {% if adminID == "CD" %}
  247.                         <canvas id="chart-data_3"  height="50"></canvas>
  248.                         {% endif %}
  249.                     </div>
  250.                 </div>
  252.                 </div>
  253.             </div>
  254.         </div>
  255.         
  256.           <div class="card-deck mb-3">
  257.             <div class="card h-lg-100 overflow-hidden">
  258.               <div class="card-body p-2">
  259.                 <table class="table table-sm table-dashboard no-wrap mb-0 fs--1 w-100" id="dash_table">
  260.                   <thead class="bg-light">
  261.                     <tr class="text-900">
  262.                       <th id="titre_table" >
  263.                       {% if adminID == "CD" %}
  264.                         Province
  265.                       {% elseif adminID == "CF" %}
  266.                         Prefecture
  267.                       {% elseif adminID == "BF" %}
  268.                         Province
  269.                       {% endif %}
  270.                       </th>
  271.                       <th class="text-left" style="width: 16%"> Alertes <span class="badge rounded-pill badge-soft-warning">{{numberAlerts}}</span></th>
  272.                       <th class="text-left" style="width: 16%"> P. Déplacées <span class="badge rounded-pill badge-soft-info"> {{numberPersMovedFx}}</span> </th>
  273.                       <th class="text-left" style="width: 16%"> P. Retournées <span class="badge rounded-pill badge-soft-info"> {{numberPersReturnFx}}</span> </th>
  274.                       <th class="text-left" style="width: 16%"> P. Ciblées <span class="badge rounded-pill badge-soft-info"></span> </th>
  275.                       <th class="text-left" style="width: 16%"> Acteurs {#<span class="badge rounded-pill badge-soft-info">180{numberActor}</span>#} </th>
  276.                     </tr>
  277.                   </thead>
  278.                   <tbody id="dashboard_table"></tbody>
  279.                 </table>
  280.               </div>
  281.             </div>
  282.           </div> 
  283.      
  284. {% endblock %}
  286. {% block javascripts %}
  287.     {{ parent() }}
  288.     <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  289.       <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
  291.     <script src="datatables/datatables.min.js"></script>
  293.     <link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
  294.     <script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
  296.     <script>
  297.     var admin_id = "{{ adminID }}";
  298.     </script>
  300.     <script src="/js/script-maps2.js" type="text/javascript"></script>
  301.     
  302. {% endblock %}