templates/homepage.html.twig line 1

Open in your IDE?
  1. {% extends 'baseSyntherm.html.twig' %}
  3. {% block stylesheets %}
  4.     <link href="{{ asset('dropzone-5.7.0/dist/dropzone.css') }}" rel="stylesheet" type="text/css"/>
  5.     <script src="{{ asset('dropzone-5.7.0/dist/dropzone.js') }}" type="text/javascript"></script>
  6. {% endblock %}
  8. {#{% form_theme affichage 'form_div_layout.html.twig' %}#}
  10. {% block title %}
  11.     SOBRO XML
  12. {% endblock %}
  15. {% block body %}
  17.     <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  18.     <br>
  19.     <div class="alert alert-warning justify-content-center" role="alert">
  20.                 Bienvenue sur l'application SOBRO XML. Cet outil analyse différents indicateurs à partir des fichiers XML issus du calcul RT2012 et RE2020
  21.     tels que la compacité ou le taux de brassage global et compare avec le reste de la base de donnée. <br>
  22.    
  23.         </div>
  24.     <br>
  25.     <br>
  27.     {#    {{ form(affichage) }}#}
  29.     {{ form_start(affichage) }}
  30.     <div class="form-row align-items-end ">
  31.         <div class="form-group col-3 sm">
  32.             {{ form_label(affichage.usage) }}
  33.             {{ form_widget(affichage.usage) }}
  34.         </div>
  35.         <div class="form-group col-3 sm">
  36.             {{ form_label(affichage.zoneClimatique) }}
  37.             {{ form_widget(affichage.zoneClimatique) }}
  38.         </div>
  39.         <div class="form-group col-3 sm">
  40.             {{ form_label(affichage.abscisse) }}
  41.             {{ form_widget(affichage.abscisse) }}
  42.         </div>
  43.         <div class="form-group col-3 sm">
  44.             {{ form_label(affichage.ordonnee) }}
  45.             {{ form_widget(affichage.ordonnee) }}
  46.         </div>
  47.         {{ form_end (affichage) }}
  48.     </div>
  50.     <!-- Chart Placement[2] -->
  53.     <div id="myChart">
  54.     </div>
  56.     {% if alert is not null %}
  57.         <div class="alert alert-warning justify-content-center" role="alert">
  58.             {{ alert }}
  59.         </div>
  60.     {% endif %}
  61.     {% if alertUtilisateur is not null %}
  62.         <div class="alert alert-warning justify-content-center" role="alert">
  63.             {{ alertUtilisateur }}
  64.         </div>
  65.     {% endif %}
  67.         {#{{ form_start(monForm) }}
  68.     <div class="form-row ">
  69.         <div class="form-group-sm col-md-6">
  70.             {{ form(monForm.fichier) }}
  71.         </div>
  72.         <div class="form-group-sm col-md-4">
  73.             {{ form_end (monForm) }}
  74.         </div>
  75.     </div>#}
  76.         
  77.             <br>
  78.     
  79.     Cliquez sur le nom du projet pour plus de détails :
  80.          <br>
  81.         
  82.     {% if listFicheBatiment is not null %}
  83.         <table class='table table-striped table-hover table-sm'>
  84.             <thead>
  85.             <th>Nom du projet</th>
  86.             <th >Usage</th>
  87.             <th >Ville</th>
  88.             <th >Bbio Chaud Annuel</th>
  89.             <th >Compacité (m2env /m²SHONRT)</th>
  90.             <th >Taux de brassage d'air (vol/h)</th>
  91.             <th >Uw moyen (W/m²/K)</th>
  92.             <th >Part des baies au sud</th>
  93.             <th >Taux de vitrage (m2vitr /m²SHONRT)</th>
  94.         </thead>          
  95.         <tbody>
  96.             {% for ficheAct in listFicheBatiment %}
  97.                 {% if ficheAct is not null %}
  98.                     <tr>
  99.                         <td>
  100.                             <a href="{{ path('fiche_batiment_analyse', {'id': ficheAct.id}) }}">    {{ ficheAct.nomDuProjetCourt }} </a>
  101.                         </td>
  102.                         <td>
  103.                             {{ ficheAct.nomUsageCourt }}
  104.                         </td>
  105.                         <td>
  106.                             {{ ficheAct.ville }}
  107.                         </td>
  108.                         <td>
  109.                             {{ ficheAct.bbiochaudannuel }}
  110.                         </td>
  111.                         <td>
  112.                             {{ ficheAct.compacite }}
  113.                         </td>
  114.                         <td>
  115.                             {{ ficheAct.tauxBrassageBBIO }}
  116.                         </td>
  117.                         <td>
  118.                             {{ ficheAct.uwMoyen }}
  119.                         </td>
  120.                         <td>
  121.                             {{ ficheAct.partBaiesSudBatiment }}%
  122.                         </td>
  123.                         <td>
  124.                             {{ ficheAct.tauxVitrage }}
  125.                         </td>
  126.                     </tr>
  127.                 {% endif %}
  128.             {% endfor %}
  129.         </tbody>
  130.     </table>
  131.     {{ knp_pagination_render(listFicheBatiment) }}
  132.     {% if is_granted('IS_AUTHENTICATED') %}
  133.         <a class="btn btn-primary" href="{{ path('export_xlsx') }}">
  134.             <i class="fas fa-download"></i> Exporter en XLSX
  135.         </a>
  136.         <br/>
  137.     {% endif %}
  139. {% endif %}
  140.     Faites une recherche "*.xml" dans votre dossier de projets et déplacez-les ici :
  141.     <br>
  142.     <form method="POST"
  143.           action="{{ path("upload-dropzone") }}"
  144.       class="dropzone"
  145.       id="my-awesome-dropzone"></form>
  146.         
  147.     <br>
  148.     <div class="row">
  149.         <a class="col-12 btn btn-primary" href="{{ path('homepage') }}">Analyser vos fichiers XML</a>
  150.     </div>
  151. <br>
  152. {% if app.user is null %}
  153.     <div class="alert alert-info">
  154.         Vous pouvez conservez les données de vos fichiers XML, pour ce faire si vous n'avez pas encore de compte utilisateur, vous devez procéder à votre <a href="{{ path('user_security_inscription') }}" title="Inscription">inscription</a> ou bien vous <a href="{{ path('user_security_login') }}" title="Connexion">connecter</a> avec vos identifiants.
  155.     </div>
  156. {% endif %}
  158. <script>
  160.     document.querySelectorAll('form select').forEach(elem => {
  161.         elem.addEventListener('change', function(){ document.querySelector('form').submit(); });
  162.     });
  164.     let myConfig = {
  165.         type: 'scatter',
  166.         plot: {
  167.             tooltip: {
  168.                 text:
  169.                     'BBIO = %v <BR> Uw moyen =  %data-uwmoyen W/m².K <BR> Q4 = %data-qpasurf m3/h/m² <BR> taux de vitrage = %data-tauxdevitrage m²v/m²shon',
  170.                     'html-mode': true
  171.                 }
  172.             },
  173.             scaleX: {
  174.                 label: {
  175.                     text: '{{ abscisse }}',
  176.                     fontSize: 14,
  177.                 },
  178.             },
  179.             scaleY: {
  180.                 label: {
  181.                     text: '{{ ordonnee }}',
  182.                     fontSize: 14,
  183.                 }
  184.             },
  185.             series: [
  186.                 {
  187.                     values: {{ graphiqueJsonAll['data'] }},
  188.                     dataTauxdevitrage: {{ graphiqueJsonAll['taux_de_vitrage'] }},
  189.                     dataUwmoyen: {{ graphiqueJsonAll['uw_moyen'] }},
  190.                     dataQpasurf: {{ graphiqueJsonAll['q_4_pasurf'] }},
  191.                     dataIdFiche: {{ graphiqueJsonAll['ids'] }},
  192.                     dataType:"other"
  193.                 }
  194.                 {% if listFicheBatiment is not null %}
  195.                     {% if alertUtilisateur is null %}
  196.                         ,
  197.                         {
  198.                             values:{{ graphiqueJsonUser['data'] }},
  199.                             text:"Projets utilisateur",
  200.                             dataTauxdevitrage: {{ graphiqueJsonUser['taux_de_vitrage'] }},
  201.                             dataUwmoyen: {{ graphiqueJsonUser['uw_moyen'] }},
  202.                             dataQpasurf: {{ graphiqueJsonUser['q_4_pasurf'] }},
  203.                             dataIdFiche: {{ graphiqueJsonUser['ids'] }},
  204.                             dataType:"user"
  205.                         }
  206.                     {% endif %}
  207.                 {% endif %}
  208.                 ]
  209.             };
  212.         {#zingchart.bind('myChart', 'node_click', function(e) {
  213.             console.log(e);
  214.             console.log(e["data-type"]);
  215.             if (e["data-type"] == "user") {
  216.                 window.location.href = Routing.generate('fiche_batiment_analyse', {'id' : e["data-id-fiche"]});
  217.             }
  218.         });
  220.         zingchart.bind('myChart', 'plot_click', function(e) {
  221.             console.log(e);
  222.             console.log(e["data-type"]);
  223.             if (e["data-type"] == "user") {
  224.                 window.location.href = Routing.generate('fiche_batiment_analyse', {'id' : e["data-id-fiche"]});
  225.             }
  226.         });#}
  228.         // Render Method[3]
  229.         zingchart.render({
  230.         id: 'myChart',
  231.             data: myConfig,
  232.             height: 550,
  233.             width: '100%',
  234.         });
  235.         
  236.         zingchart.node_click = function(p) {
  237.             {% if is_granted('ROLE_ADMIN') %}
  238.                 window.location.href = Routing.generate('fiche_batiment_analyse', {'id' : p["data-id-fiche"]});
  239.             {% else %}
  240.                 if (p["data-type"] == "user") {
  241.                     window.location.href = Routing.generate('fiche_batiment_analyse', {'id' : p["data-id-fiche"]});
  242.                 }
  243.             {% endif %}
  244.         };
  245.     
  246.          // Gère la dropzone
  247.          Dropzone.options.myAwesomeDropzone = {
  248.             paramName: "fichier", // The name that will be used to transfer the file
  249.             maxFilesize: 20, // MB
  250. {#            acceptedFiles: ".xml",".zip"#}
  251.          };
  253.          // var nodesAll = zingchart.exec('myChart', 'getseriesvalues', { plotindex: 0 });
  254.          // nodesAll.forEach(element => console.log(element));
  256.          zingchart.exec(1, 'removenode');
  257.     </script>  
  259. {% endblock %}