templates/reutilisation.html.twig line 1

Open in your IDE?
  1. {% extends 'baseQuveo.html.twig' %}
  3. {# {% block stylesheets %}
  4. <meta charset="utf-8">
  5. {% endblock %} #}
  7. {% block body %}
  9.   <script>
  10.       
  11.       
  12.     // Code JavaScript pour afficher/masquer le texte
  13.     function toggleContent(button, content) {
  14.       button.addEventListener("click", function() {
  15.         if (content.style.display === "none" || content.style.display === "") {
  16.           content.style.display = "block";
  17.           button.textContent = "▲"; // Flèche vers le haut
  18.         } else {
  19.           content.style.display = "none";
  20.           button.textContent = "▼"; // Flèche vers le bas
  21.         }
  22.       });
  23.     }
  24.   </script>
  25. {#<div style="margin-left: 20px; margin-right: 20px;">#}
  26. <div class="w-75 mx-auto">
  27.     
  28.     <br>
  29.     <p class="h4">Calculez le taux de réutilisation de vos eaux pluviales :</p>    
  30.     <br>
  32.     {{ form_start(form) }}
  33.     {{ form_errors(form) }}
  34.             {{ form_label(form.nomDuProjet, 'Nom du projet') }}
  35.             {{ form_widget(form.nomDuProjet, {'attr': {'value': fichePluvio.nomDuProjet}}) }}
  36.     <div class="form-row">
  37.         <div class="form-group col-md-4">
  38.             {{ form_label(form.anneesCalculees, 'Années à calculer') }}
  39.             {{ form_widget(form.anneesCalculees, {'attr': {'value': fichePluvio.anneesCalculees}}) }}</div>
  40.         <div class="form-group col-md-3">
  41.             {{ form_label(form.stationAPI, 'Station météo') }}
  42.             {{ form_widget(form.stationAPI, {'attr': {'value': fichePluvio.stationAPI}}) }}</div>
  43.     </div>
  44.     <div class="form-row">
  45.         <div class="form-group col-md-4">
  46.             {{ form_label(form.climat, 'Climat') }}
  47.             {{ form_widget(form.climat, {'attr': {'value': fichePluvio.climat}}) }}</div>
  48.         <div class="form-group col-md-3">
  49.             {{ form_label(form.stationmeteo, 'Station météo') }}
  50.             {{ form_widget(form.stationmeteo, {'attr': {'value': fichePluvio.stationMeteo}}) }}</div>
  51.     </div>
  52.     <div class="form-row">
  53.                 <div class="form-group col-md-4">            
  54.             {{ form_label(form.nomSurface, 'Nom de la surface 1') }}
  55.             {{ form_widget(form.nomSurface, {'attr': {'value': fichePluvio.nomSurface}}) }}</div>
  56.         <div class="form-group col-md-3">            
  57.             {{ form_label(form.surfaceRecuperee, 'Surface de toiture récupérée en m²') }}
  58.             {{ form_widget(form.surfaceRecuperee, {'attr': {'value': fichePluvio.surfaceRecuperee}}) }}</div>
  59.         <div class="form-group col-md-3">
  60.             {{ form_label(form.rendementToiture, 'Type de toiture') }}
  61.             {{ form_widget(form.rendementToiture, {'attr': {'value': fichePluvio.rendementToiture}}) }}</div>
  62.                     <div class="form-group col-md-1">
  63.                     <img src="{{ asset('img/information.png') }}" height="18" title="Kt est le coefficient de rendement de la toiture (La gestion durable de l'eau - CSTB 2009)">
  64.                     </a></div>
  65.     </div>
  66.             
  67.         <div>
  68.         <button type="button" id="toggleButton1" style="font-size: 12px;">▼</button>
  69.         <label for="toggleButton1">Ajouter d'autres toitures:</label>
  70.         </div>
  72.     <div id="texte1" style="display: none;">
  73.     <div class="form-row">
  74.                         <div class="form-group col-md-4">            
  75.             {{ form_label(form.nomSurface2, 'Nom de la surface 2') }}
  76.             {{ form_widget(form.nomSurface2, {'attr': {'value': fichePluvio.nomSurface2}}) }}</div>
  77.         <div class="form-group col-md-3">            
  78.             {{ form_label(form.surfaceRecuperee2, 'Surface n°2 de toiture récupérée') }}
  79.             {{ form_widget(form.surfaceRecuperee2, {'attr': {'value': fichePluvio.surfaceRecuperee2}}) }}</div>
  80.         <div class="form-group col-md-3">
  81.             {{ form_label(form.rendementToiture2, 'Type de toiture n°2') }}
  82.             {{ form_widget(form.rendementToiture2, {'attr': {'value': fichePluvio.rendementToiture2}}) }}</div>
  83.     </div>
  84.     <div class="form-row">
  85.                         <div class="form-group col-md-4">            
  86.             {{ form_label(form.nomSurface3, 'Nom de la surface 3') }}
  87.             {{ form_widget(form.nomSurface3, {'attr': {'value': fichePluvio.nomSurface3}}) }}</div>
  88.         <div class="form-group col-md-3">            
  89.             {{ form_label(form.surfaceRecuperee3, 'Surface n°3 de toiture récupérée') }}
  90.             {{ form_widget(form.surfaceRecuperee3, {'attr': {'value': fichePluvio.surfaceRecuperee3}}) }}</div>
  91.         <div class="form-group col-md-3">
  92.             {{ form_label(form.rendementToiture3, 'Type de toiture n°3') }}
  93.             {{ form_widget(form.rendementToiture3, {'attr': {'value': fichePluvio.rendementToiture3}}) }}</div>
  94.     </div>
  95.     </div>
  96.     <div>
  97.       <button type="button" id="toggleButton2" style="font-size: 12px;">▼</button>
  98.       <label for="toggleButton2">Usage pour les WC :</label>
  99.     </div>
  101.     <div id="texte2" style="display: none;">   
  102.         <div class="form-row">
  103.             <div class="form-group col-md-3">
  104.                 {{ form_label(form.nbreUtilisateur, 'Nombre d\'utilisateur moyen journalier') }}
  105.                 {{ form_widget(form.nbreUtilisateur, {'attr': {'value': fichePluvio.nbreUtilisateur}}) }}</div>
  106.             <div class="form-group col-md-3">
  107.                  {{ form_label(form.volumeParUtilisation, 'Volume par jour par utilisateur (L/jr)') }}
  108.                 {{ form_widget(form.volumeParUtilisation, {'attr': {'value': fichePluvio.volumeParUtilisation}}) }}</div>
  109.             <div class="form-group col-md-2">
  110.                 {{ form_label(form.scenarioUtilisation, 'Scénario d\'utilisation') }}
  111.                 {{ form_widget(form.scenarioUtilisation, {'attr': {'value': fichePluvio.scenarioUtilisation}}) }}</div>
  112.             <div class="form-group col-md-3">
  113.                 {{ form_label(form.tauxRaccordement, 'Taux de WC raccordés en %') }}
  114.                 {{ form_widget(form.tauxRaccordement, {'attr': {'value': fichePluvio.tauxRaccordement}}) }}</div>
  115.         </div>
  116.     </div>
  117.         
  118.     <div>
  119.       <button type="button" id="toggleButton3" style="font-size: 12px;">▼</button>
  120.       <label for="toggleButton3">Usage pour l'arrosage :</label>
  121.     </div>
  122.     <div id="texte3" style="display: none;">
  123.         <div class="form-row">
  124.             <div class="form-group col-md-3">
  125.                 {{ form_label(form.ru, 'Type de sol') }}
  126.                 {{ form_widget(form.ru, {'attr': {'value': fichePluvio.ru}}) }}</div>
  127.             <div class="form-group col-md-3">
  128.                 {{ form_label(form.typePlante, 'Type de plantes') }}
  129.                 {{ form_widget(form.typePlante) }}
  130.                 {#            {{ form_widget(form.typePlante, {'attr': {'value': fichePluvio.typePlante}}) }}
  131.                 #}        </div>
  132.             <div class="form-group col-md-3">
  133.                 {{ form_label(form.profondeurTerre, 'Profondeur de la terre') }}
  134.                 {{ form_widget(form.profondeurTerre, {'attr': {'value': fichePluvio.profondeurTerre}}) }}</div>
  135.             <div class="form-group col-md-3">
  136.                 {{ form_label(form.sArrosage, 'Surface arrosée en m²') }}
  137.                 {{ form_widget(form.sArrosage, {'attr': {'value': fichePluvio.sArrosage}}) }}
  138.             </div>
  139.         </div>
  140.     </div>
  141.     
  142.     <div>
  143.       <button type="button" id="toggleButton4" style="font-size: 12px;">▼</button>
  144.       <label for="toggleButton4">Autres besoins :</label>
  145.     </div>
  146.     <div id="texte4" style="display: none;">
  147.     <div class="form-row">
  148.         <div class="form-group col-md-3">
  149.             {{ form_label(form.besoinEau, 'Autre besoin en eau en litres par jour :') }}
  150.             {{ form_widget(form.besoinEau, {'attr': {'value': fichePluvio.besoinEau}}) }}</div> 
  151.         <div class="form-group col-md-1">
  152.             <img src="{{ asset('img/information.png') }}" height="18" title="Lavage du sol, remplissage de camionnettes autolaveuses... Si le besoin varie suivant les jours, séparez les données par un point-virgule. Les données seront répétées. Exemple : une suite de 7 chiffres '4;0;9;0;0;0;0' pour une suite hebdomadaire">
  153.             </a>
  154.         </div>
  155.     </div>
  156.     </div>        
  158.             
  159.             <div>
  160.       <button type="button" id="toggleButton5" style="font-size: 12px;">▼</button>
  161.       <label for="toggleButton5">Analyse économique :</label>
  162.             </div>
  164.             <div id="texte5" style="display: none;">
  165.                 <div class="form-row" style="background:#f8f9fa">
  166.                 </div>
  167.                 <div class="form-row" style="background:#f8f9fa">
  168.                     <div class="form-group col-md-3">
  170.                         {{ form_label(form.coutEau, 'Coût de l\'eau épargnée en €/m3') }}
  171.                         {{ form_widget(form.coutEau, {'attr': {'value': fichePluvio.coutEau}}) }}
  172.                     </div>
  175.                     <div class="form-group col-md-6">
  177.                         {{ form_label(form.coutPompe, 'Forfait pour le coût de la pompe et du double réseau en €') }}
  178.                         {{ form_widget(form.coutPompe, {'attr': {'value': fichePluvio.coutPompe}}) }}
  180.                     </div>
  181.                 </div>
  182.                 <div class="form-row" style="background:#f8f9fa">
  183.                     <div class="form-group col-md-2">
  184.                         Volumes et coûts de cuve à interpoler :
  186.                     </div>
  187.                     <div class="form-group col-md-2">
  188.                         {{ form_label(form.choixVolume, 'Volume n°1 en litres') }}
  189.                         {{ form_widget(form.choixVolume, {'attr': {'value': fichePluvio.choixVolume}}) }}
  191.                     </div>
  192.                     <div class="form-group col-md-2">
  193.                         {{ form_label(form.coutVolume, 'Coût du volume n°1') }}
  194.                         {{ form_widget(form.coutVolume, {'attr': {'value': fichePluvio.coutVolume}}) }}
  196.                     </div>
  197.                     <div class="form-group col-md-2">
  198.                         {{ form_label(form.choixVolume2, 'Volume n°2 en litres') }}
  199.                         {{ form_widget(form.choixVolume2, {'attr': {'value': fichePluvio.choixVolume2}}) }}
  201.                     </div>
  202.                     <div class="form-group col-md-2">
  203.                         {{ form_label(form.coutVolume2, 'Coût du volume n°2') }}
  204.                         {{ form_widget(form.coutVolume2, {'attr': {'value': fichePluvio.coutVolume2}}) }}
  206.                     </div>
  207.                 </div>
  208.             </div>
  209.           <div class="form-group col-md-4">
  210.             {{ form_label(form.certivea, 'L\'operation est-elle certifiée HQE par Certivéa \?') }}
  211.             {{ form_widget(form.certivea, {'attr': {'value': fichePluvio.certivea}}) }}
  212.         </div>          
  213. <script>
  214. if ({{ fichePluvio.nbreUtilisateur }}0 > 0) {
  215.     document.getElementById("texte2").style.display = "block";
  216.     document.getElementById("toggleButton2").textContent = "▲";
  217. } else {
  218.     document.getElementById("texte2").style.display = "none";
  219.     document.getElementById("toggleButton2").textContent = "▼";
  220. }
  222. if ({{ fichePluvio.surfaceRecuperee2 }}0 > 0) {
  223.     document.getElementById("texte1").style.display = "block";
  224.     document.getElementById("toggleButton1").textContent = "▲";
  225. } else {
  226.     document.getElementById("texte1").style.display = "none";
  227.     document.getElementById("toggleButton1").textContent = "▼";
  228. }
  230. if ({{ fichePluvio.sArrosage }}0 > 0) {
  231.     document.getElementById("texte3").style.display = "block";
  232.     document.getElementById("toggleButton3").textContent = "▲";
  233. } else {
  234.     document.getElementById("texte3").style.display = "none";
  235.     document.getElementById("toggleButton3").textContent = "▼";
  236. }
  238. let besoinEau = parseFloat('{{ fichePluvio.besoinEau|split(";")|first|default(0) }}');
  240. if (besoinEau > 0) {
  241.     document.getElementById("texte4").style.display = "block";
  242.     document.getElementById("toggleButton4").textContent = "▲";
  243. } else {
  244.     document.getElementById("texte4").style.display = "none";
  245.     document.getElementById("toggleButton4").textContent = "▼";
  246. }
  249. // Code JavaScript for afficher le texte lorsque la case est cochée
  250. toggleContent(document.getElementById("toggleButton1"), document.getElementById("texte1"));
  251. toggleContent(document.getElementById("toggleButton2"), document.getElementById("texte2"));
  252. toggleContent(document.getElementById("toggleButton3"), document.getElementById("texte3"));
  253. toggleContent(document.getElementById("toggleButton4"), document.getElementById("texte4"));
  254. toggleContent(document.getElementById("toggleButton5"), document.getElementById("texte5"));
  256. </script>
  257.            {% if  graphParametrique %}     
  258. <BR>
  259. <BR>
  261. <p class="h4">Résultats de l'étude :</p>
  262.             
  263. <BR>
  264. <BR>           
  265.             
  267.         <div id="chartParamatrique" style="height: 370px; width: 100%;"></div>
  268.     {% endif %}
  270.      {% if  graphParametrique %}
  271.     <br><br> 
  272.     <table class='table table-striped table-hover table-sm text-center'>
  273.         <thead>
  274.         <tr>
  275.         <th>Volume de la cuve en Litres</th>
  276.         <th >Taux d'autonomie en %</th>
  277.         <th >Quantitée réutilisée moyenne en m3/an</th>
  278.         <th >Complément annuel moyen m3/an</th>
  279.         <th >Trop plein moyen en m3/an</th>
  280.         <th >Gain financier moyen annuel en €/an</th>
  281.         <th >Coût de la cuve + réseau estimée en €HT</th>
  282.         <th >Temps de retour brut en années</th>
  283.         </tr>
  284.     </thead>  
  285.     <tbody>
  286.         {% for Volume in tableauParametrique %}
  287.             <tr>
  288.                 {% for data in Volume %}
  289.                     <td>
  290.                         {{ data }}
  291.                     </td>
  292.                 {% endfor %}
  293.             </tr>
  294.         {% endfor %}
  295.     </tbody>
  296. </table>
  297.             <br><br> 
  298.         <table class='table table-striped table-hover table-sm text-center'>
  299.             <thead>
  300.             <tr>
  301.             <th>Pluviométrie moyenne en mm/an</th>
  302.             <th >Besoin total en eau en m3/an</th>
  303.             <th >Arrosage en mm/an</th>
  304.             </tr>
  305.         </thead>  
  306.         <tbody>
  307.             <tr>
  308.                 <td>
  309.                     {{ tableauSynthese.pluviometrieMoyenne }}
  310.                 </td>
  311.                 <td>
  312.                     {{ tableauSynthese.besoinAnnuel }}
  313.                 </td>
  314.                 <td>
  315.                     {{ tableauSynthese.besoinArrosage }}
  316.                 </td>
  317.             </tr>
  318.         </tbody>
  319.     </table>
  320.                 
  321.     <BR>
  322.     <BR>  
  323.     <p class="h5">Obtenez les graphiques jour par jour en choisisssant le volume de la cuve. 
  324.         Un optimum de volume peut être au fléchissement de la courbe du taux de couverture.</p>
  325.     <BR>
  326.     <div class="form-row mt-4" {% if not show_complement %}style="display:none"{% endif %}>
  327.         <div class="form-group col-md-4" >
  328.             {{ form_row(form.volumeCuve, {'label': 'Volume de la cuve choisi en Litres (optionnel) :'}) }}</div>
  329.         <div class="form-group col-md-1 align-self-center d-flex justify-content-center"> OU </div>
  330.         <div class="form-group col-md-4">{{ form_row(form.tauxObjectif, {'label': 'Taux couverture souhaité en %'}) }}</div>
  331.     </div>
  333.     <div class="form-row mt-4">
  334.         <div class="form-group col-md-2">
  335.         {%if show_complement %}
  336.             {{ form_row(form.analyser, {'label': 'Compléter et/ou actualiser l\'analyse'}) }}
  337. {#            <a class="btn btn-primary" href="{{ path('CopieCalcul') }}" role="button">Faire une copie du calcul</a>
  338.             <a class="btn btn-primary" href="{{ path('NouveauCalcul') }}" role="button">Nouveau calcul</a>#}
  339.             {% else %}
  340.             {{ form_row(form.analyser ) }}
  341.             {% endif %}
  342.         </div>
  343.     </div>
  344.     {% else %}
  345.         <div class="form-row mt-4" {% if not show_complement %}style="display:none"{% endif %}>
  346.             <div class="form-group col-md-4">
  347.                 {{ form_row(form.volumeCuve, {'label': 'Volume de la cuve choisi en Litres (optionnel) :'}) }}</div>
  348.             <div class="form-group col-md-1 align-self-center d-flex justify-content-center"> OU</div>
  349.             <div class="form-group col-md-4">{{ form_row(form.tauxObjectif, {'label': 'Taux couverture souhaité en %'}) }}</div>
  350.         </div>
  352.         <div class="form-row mt-4">
  353.             <div class="form-group col-md-2">
  354.                 {% if show_complement %}oo
  355.                     {{ form_row(form.analyser, {'label': 'Compléter et/ou actualiser l\'analyse'}) }}
  356.                 {% else %}
  357.                     {{ form_row(form.analyser ) }}
  358.                 {% endif %}
  359.             </div>
  360.         </div>
  361.     {% endif %}
  362.     
  363. {{ form_rest(form) }}
  364. {{ form_end(form) }}
  366.     <br><br> 
  368.     <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>   
  369.     {% if  volumeCuveUser %}
  370.         
  371.         Détails pour le volume choisi : {{ volumeCuveUser }} Litres:
  372.         <BR>
  373.         <BR>
  374.         <div id="chartPie" style="height: 370px; width: 100%;"></div>
  375.         <div id="chartPluviometrie" style="height: 100px; width: 100%;"></div><br><br>
  376.         <div id="chartContainer" style="height: 370px; width: 100%;"></div><br><br>
  377.         <div id="chartBarres" style="height: 370px; width: 100%;"></div><br><br>
  379.         
  382.     {% endif %}
  385.    
  388. {% if allowPDF %}
  389. <a class="btn btn-success btnPDF" >Télécharger le bilan en PDF</a>
  390. {% endif %}
  395. <br><br>
  396. {#
  397. {% if  graphParametrique %} Tableau de vérification
  398. <br><br> 
  399. <table class='table table-striped table-hover table-sm'>
  400.     <thead>
  401.     <th>jour</th>
  402.     <th >pluieDuJour</th>
  403.     <th >RFUJournalier</th>
  404.     <th >ETP</th>
  405.     <th >ConsoPlanteJournalier</th>
  406.     <th >besoinArrosageJournalier</th>
  407.     <th >besoinEauJournalier</th>
  408.     <th >volumeEauToiture</th>
  409.     <th >volumeEau</th>
  410.     <th >bilanEau</th>
  411.     <th >manqueEau)</th>
  412. </thead>  
  413. <tbody>
  414.     {% for jour in tableau %}
  415.         <tr>
  416.             {% for data in jour %}
  417.                 <td>
  418.                     {{ data }}
  419.                 </td>
  420.             {% endfor %}
  421.         </tr>
  422.     {% endfor %}
  423. </tbody>
  424. </table>
  426. {% endif %}#}
  428. <script>
  429.     //let myForm = document.getElementById('form');
  430.         document.querySelectorAll('form select').forEach(elem => {
  431.         elem.addEventListener('submit', function(e){ e.preventDefault(); });
  432.     });
  435.     function showFile(blob){
  436.         // It is necessary to create a new blob object with mime-type explicitly set
  437.         // otherwise only Chrome works like it should
  438.         var newBlob = new Blob([blob], {type: "application/pdf"})
  440.         // IE doesn't allow using a blob object directly as link href
  441.         // instead it is necessary to use msSaveOrOpenBlob
  442.         if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  443.             window.navigator.msSaveOrOpenBlob(newBlob);
  444.             return;
  445.         }
  447.         // For other browsers:
  448.         // Create a link pointing to the ObjectURL containing the blob.
  449.         const data = window.URL.createObjectURL(newBlob);
  450.         var link = document.createElement('a');
  451.         link.href = data;
  452.         link.download="bilan.pdf";
  453.         link.click();
  454.         setTimeout(function(){
  455.             // For Firefox it is necessary to delay revoking the ObjectURL
  456.             window.URL.revokeObjectURL(data);
  457.         }, 100);
  458.     }
  460.     const pdfLink="{{ path('RetutilisationBilanPdf',{'idFiche' : idPluvio}) }}";
  461.     const btnPDF = document.querySelector('.btnPDF');
  462.     if (btnPDF) {
  464. // On click convert charts to png and download pdf
  465.         btnPDF.addEventListener('click', () => {
  467.             // create new FormData object
  468.             const formData = new FormData();
  469.             // append form data to formData object
  470.         formData.append('idFiche', {{ idPluvio }});
  471.             // Convert charts to png
  472.         const charts = document.querySelectorAll('.canvasjs-chart-container');
  473.         var index=0;
  475.         charts.forEach(container => {
  476.             chart = container.querySelector('canvas');
  477.             console.log(chart);
  478.                 const img = chart.toDataURL("image/png");
  479.                 // add Img from chart to formData
  480.             formData.append('img['+(index++)+']', img);
  482.             });
  483.             // Send multipart formData to server
  484.             fetch(pdfLink, {
  485.                 method: 'POST',
  486.             body: formData
  487.         }).then(r => r.blob())
  488.             .then(showFile)
  490.         });
  493.     }
  497.     function generatePDF() {
  498.         var doc = new jsPDF();
  499.         doc.fromHTML(document.getElementById('content'), 15, 15, {
  500.             'width': 170
  501.         });
  502.         doc.save('sample-file.pdf');
  503.     }
  505. </script>
  507. <script>
  508.     var renderedImages = [];
  509.     window.onload = function () {
  511.         {% if graphParametrique %}
  512.     var chart = new CanvasJS.Chart("chartParamatrique", {
  513.     animationEnabled: true,
  514.             zoomEnabled: true,
  515.             theme: "light2",
  516.             title: {
  517.             text: "Etude paramétrique de la taille de la cuve"
  518.             },
  519.             axisX: {
  520.             title: "Nombre de litres",
  521.                     titleFontColor: "#4F81BC",
  522.                     includeZero: true,
  523.                     valueFormatString: "# ###L",
  524.             },
  525.             axisY: {
  526.             title: "Taux de couverture des besoins",
  527.                     titleFontColor: "#4F81BC",
  528.                     includeZero: true,
  529.                     suffix: "%"
  530.             },
  531.             axisY2: {
  532.             title: "Temps de retour",
  533.                     titleFontColor: "#4F81BC",
  534.                     includeZero: true,
  535.                     suffix: " ans"
  536.             },
  537.             toolTip: {
  538.             shared: true
  539.             },
  540.             data: [{
  541.             indexLabelFontColor: "darkSlateGray",
  542.                     name: "Taux de couverture",
  543.                     type: "line",
  544.                     markerSize: 0,
  545.                     showInLegend: true,
  546.                     xValueFormatString: "Volume cuve : # ###L",
  547.                     yValueFormatString: "# '%'",
  548.                     dataPoints: [
  549.     {{ graphParametrique }}
  550.                         ]
  551.                 },
  552.                 {
  553.                 indexLabelFontColor: "red",
  554.                         name: "Selection utilisateur",
  555.                         type: "line",
  556.                         markerSize: 12,
  557.                         showInLegend: true,
  558.                         yValueFormatString: "Couverture à #'%'",
  559.                         dataPoints: [
  560.     {{ graphParametriqueUserJson }}
  561.                         ]},
  562.                 {
  563.                 type: "line",
  564.                         name: "Temps de retour",
  565.                         axisYType: "secondary",
  566.                         markerSize: 0,
  567.                         showInLegend: true,
  568.                         yValueFormatString: "0.0 ans",
  569.                         dataPoints:[
  570.     {{ graphTempsDeRetour }}
  571.                         ]
  572.                 }
  574.                 ]
  575.         });
  576.         chart.render();
  577.         renderedImages.push(chart.exportChart({format: "png",toDataURL: true}));
  578.         {% endif %}
  580.         {% if graphJourParJour %}
  581.         {% endif %}
  582.         {% if  volumeCuveUser %}
  583.         var chart1 = new CanvasJS.Chart("chartContainer", {
  584.         animationEnabled: true,
  585.                 zoomEnabled: true,
  586.                 theme: "light2",
  587.                 title: {
  588.                 text: "Niveau de la cuve de la première année"
  589.                 },
  590.                 axisX: {
  591.                 title: "Jour dans l'année",
  592.                         titleFontColor: "#4F81BC",
  593.                         includeZero: true,
  594.                         suffix: ""
  595.                 },
  596.                 axisY: {
  597.                 title: "Nombre de litres",
  598.                         titleFontColor: "#4F81BC",
  599.                         includeZero: true,
  600.                         scaleBreaks: {
  601.                         autoCalculate: true
  602.                         },
  603.                         suffix: " L",
  604.                         maximum:{{graphJourParJour.maximum}}
  605.                 },
  606.                 data: [
  607.                 {
  608.                 indexLabelFontColor: "red",
  609.                         name: "Trop plein de la cuve",
  610.                         type: "area",
  611.                         showInLegend: true,
  612.                         color: "#DF7970",
  613.                         yValueFormatString: "# ##0 L",
  614.                         xValueFormatString: "J#",
  615.                         dataPoints: [
  616.     {{ graphJourParJour.tropPlein }}
  617.                         ]
  618.                 },
  619.                 {
  620.                 indexLabelFontColor: "green",
  621.                         name: "Complément eau de ville",
  622.                         type: "area",
  623.                         showInLegend: true,
  624.                         color:"#51CDA0",
  625.                         yValueFormatString: "# ##0 L",
  626.                         xValueFormatString: "J#",
  627.                         dataPoints: [
  628.     {{ graphJourParJour.manqueEau }}
  629.                         ]
  630.                 },
  631.                 {indexLabelFontColor: "darkSlateGray",
  632.                         name: "Volume d'eau dans la cuve",
  633.                         type: "area",
  634.                         showInLegend: true,
  635.                         color: "#6D78AD",
  636.                         yValueFormatString: "# ##0 L",
  637.                         xValueFormatString: "J#",
  638.                         dataPoints: [
  639.     {{ graphJourParJour.volumeEau }}
  640.                         ]
  641.                 }
  644.                 ]
  645.         });
  646.         chart1.render();
  647.         renderedImages.push(chart1.exportChart({format: "png",toDataURL: true}));
  648.         {% endif %}
  649.         {% if  volumeCuveUser %}
  650.         var chart3 = new CanvasJS.Chart("chartBarres", {
  651.         animationEnabled: true,
  652.                 zoomEnabled: true,
  653.                 theme: "light2",
  654.                 title: {
  655.                 text: "Répartition des besoins jour par jour sur la première année"
  656.                 },
  657.                 axisX: {
  658.                 title: "Jour dans l'année",
  659.                         titleFontColor: "#4F81BC",
  660.                         includeZero: true,
  661.                         suffix: ""
  662.                 },
  663.                 axisY: {
  664.                 title: "Nombre de litres",
  665.                         titleFontColor: "#4F81BC",
  666.                         includeZero: true,
  667.                         suffix: " L"
  668.                 },
  669.                 data: [{
  670.                 indexLabelFontColor: "green",
  671.                         name: "Eau de pluie réutilisée",
  672.                         type: "stackedColumn",
  673.                         yValueFormatString: "# ##0 L",
  674.                         xValueFormatString: "J#",
  675.                         showInLegend: true,
  676.                         dataPoints: [
  677.     {{ graphJourParJour.apportCuve }}
  678.                         ]
  679.                 },
  680.                 {
  681.                 indexLabelFontColor: "darkSlateGray",
  682.                         name: "Complément eau de ville",
  683.                         showInLegend: true,
  684.                         type: "stackedColumn",
  685.                         yValueFormatString: "# ##0 L",
  686.                         xValueFormatString: "J#",
  687.                         dataPoints: [
  688.     {{ graphJourParJour.manqueEauPositif }}
  689.                         ]
  690.                 }
  692.                 ]
  693.         });
  694.         chart3.render();
  695.         renderedImages.push(chart3.exportChart({format: "png",toDataURL: true}));
  696.         {% endif %}
  697.         {% if  volumeCuveUser %}
  698.         var chart2 = new CanvasJS.Chart("chartPluviometrie", {
  699.         animationEnabled: true,
  700.                 theme: "light2",
  701.                 title: {
  702.                 text: "Pluviometrie"
  703.                 },
  704.                 axisX: {
  705.     {#        minimum: new Date(2015, 01, 25),
  706.                     maximum: new Date(2017, 02, 15),
  707.                     valueFormatString: "MMM YY"#}
  708.                                 },
  709.                                 axisY: {
  710.                                 title: "mm par jour",
  711.                                         titleFontColor: "#4F81BC",
  712.                                         includeZero: true,
  713.                                         suffix: ""
  714.                                 },
  715.                                 data: [{
  716.                                 indexLabelFontColor: "darkSlateGray",
  717.                                         name: "views",
  718.                                         type: "area",
  719.                                         yValueFormatString: "0.0",
  720.                                         dataPoints: [
  721.     {{ graphJourParJour.pluviometrie }}
  722.                         ]
  723.                 }]
  724.         });
  725.         chart2.render();
  726.         renderedImages.push(chart2.exportChart({format: "png",toDataURL: true}));
  727.         {% endif %}
  728.         {% if  volumeCuveUser %}
  729.         var chartpie = new CanvasJS.Chart("chartPie", {
  730.         animationEnabled: true,
  731.                 theme: "light2",
  732.                 title: {
  733.                 text: "Répartition des besoins"
  734.                 },
  735.                 data: [{
  736.                 type: "pie",
  737.                         startAngle: 240,
  738.                         yValueFormatString: "0.0%",
  739.                         indexLabel: "{label} {y}",
  740.                         dataPoints: [
  741.                         {y:{{graphTarte.tauxArrosage}}, label: "Arrosage ({{graphTarte.Arrosage}} m3/an) :"},
  742.                         {y:{{graphTarte.tauxWc}}, label: "WC ({{graphTarte.Wc}} m3/an) :"},
  743.                         {y:{{graphTarte.tauxAutres}}, label: "Autres ({{graphTarte.Autres}} m3/an) :"},
  744.                         ]
  745.                 }]
  746.         });
  747.         chartpie.render();
  748.         renderedImages.push(chartpie.exportChart({format: "png",toDataURL: true}));
  749.         {% endif %}
  751.         }
  752. </script>
  754. <script>
  755. document.addEventListener("DOMContentLoaded", function() {
  756.     let anneesInput = document.querySelector("#{{ form.anneesCalculees.vars.id }}");
  757.     let climatDiv = document.querySelector(".form-group.col-md-4:has(#{{ form.climat.vars.id }})");
  758.     let stationMeteoDiv = document.querySelector(".form-group.col-md-3:has(#{{ form.stationmeteo.vars.id }})");
  759.     let stationAPIDiv = document.querySelector(".form-group.col-md-3:has(#{{ form.stationAPI.vars.id }})");
  761.     function updateVisibility() {
  762.         let anneesValue = anneesInput.value.trim(); // Récupère la valeur sélectionnée (1 ou 2)
  764.         if (anneesValue === "1") { 
  765.             // Si l'utilisateur sélectionne "2020 à 2024"
  766.             climatDiv.style.display = "none";
  767.             stationMeteoDiv.style.display = "none";
  768.             stationAPIDiv.style.display = "block";
  769.         } else if (anneesValue === "2") { 
  770.             // Si l'utilisateur sélectionne "2017 à 2022"
  771.             stationAPIDiv.style.display = "none";
  772.             climatDiv.style.display = "block";
  773.             stationMeteoDiv.style.display = "block";
  774.         } else {
  775.             // Tout afficher si aucune valeur correspondante
  776.             climatDiv.style.display = "block";
  777.             stationMeteoDiv.style.display = "block";
  778.             stationAPIDiv.style.display = "block";
  779.         }
  780.     }
  782.     // Appliquer les règles au chargement de la page
  783.     updateVisibility();
  785.     // Met à jour lors d'un changement dans le select
  786.     anneesInput.addEventListener("change", updateVisibility);
  787. });
  788. </script>
  793. </div>
  794. {% endblock %}