templates/analytic/index.html.twig line 1

Open in your IDE?
  1. {% extends 'Layouts/layout.html.twig' %}
  3. {% block title %} Retabit Platform {% endblock %}
  5. {% block content %}
  6. <div class="container">
  8.     <div class="row align-items-center justify-content-center">
  10.         <div class="col-12 px-5 pe-0">
  11.             <div class="row align-items-center justify-content-start">
  12.                 <div class="col-12 col-sm-6">
  13.                     <h1 class="mb-3">{% trans %}Analiza el estado actual de los edificios residenciales de un municipio{% endtrans %}</h1>
  14.                     <select id="municipio" class="form-select-perso" autocomplete="off" placeholder="Selecciona municipio">
  15.                         {% for muni in municipios %}
  16.                             <option value="{{ muni.adminunit }}" 
  17.                                 {% if loop.first %}
  18.                                 selected
  19.                                 {% endif %}
  20.                             >{{ muni.adminunitname }}</option>
  21.                         {% endfor %}
  22.                     </select>
  23.                     <div class="mt-3">
  24.                         <button class="btn btn-primary" onclick="go()">{% trans %}Comienza{% endtrans %}</button>
  25.                     </div>
  26.                     
  27.                 </div>
  28.                 <div class="col-12 col-sm-6" style="contain: content;">
  29.                     <img src="{{ asset('img/bk_descubre.jpg') }}" alt="Retabit descubre" class="float-end">
  30.                 </div>
  31.             </div>
  33.         </div>
  35.     </div>
  37. </div>
  38. <div class="container-fluid bk_blue">
  39.     <div class="container">
  40.         <div class="row align-items-center justify-content-center">
  41.             <div class="col-12 text-center p-5">
  42.                 <h3 class="text-white mb-0">{% trans %}RETABIT integra datos de diversas fuentes para analizar el parque residencial, considerando factores ambientales, socioeconómicos y urbanos que influyen en la rehabilitación sostenible de los edificios{% endtrans %}</h3>
  43.             </div>
  44.         </div>
  45.     </div>
  46.     
  47. </div>
  48. <div class="container">
  50.     <div class="row align-items-center justify-content-center">
  52.         <div class="col-12 pe-5 p-5">
  53.             <div class="row align-items-center justify-content-start">
  54.                 <div class="col-12 mb-3">
  55.                     <h3>{% trans %}Análisis disponibles{% endtrans %}</h3>
  56.                     <div class="row align-items-top justify-content-start">
  57.                     {% for item in analytic_filters %}
  58.                         <div class="col-4 mb-1 p-2 d-flex">
  59.                             <div class="p-4 w-100 bk_box">
  60.                                 <h5 class="fw-bold">
  61.                                     {% if app.request.locale == "ca" %}
  62.                                         {{ item.name_ca }}
  63.                                     {% elseif app.request.locale == "en" %}
  64.                                         {{ item.name_en }}
  65.                                     {% else %}
  66.                                         {{ item.name }}
  67.                                     {% endif %}                                    
  68.                                 </h5>
  69.                                 <p> {% if app.request.locale == "ca" %}
  70.                                         {{ item.descripcion_ca }}
  71.                                     {% elseif app.request.locale == "en" %}
  72.                                         {{ item.descripcion_en }}
  73.                                     {% else %}
  74.                                         {{ item.descripcion }}
  75.                                     {% endif %}
  76.                                 </p>
  77.                             </div>
  78.                         </div>
  79.                     {% endfor %}
  80.                     {# {% for item in kpismulti %}
  81.                         <div class="col-4 mb-1 p-1 d-flex " >
  82.                             <div class="box one p-2 w-100">
  83.                                 <h4>{{item.name|capitalize}}</h4>
  84.                                 <p>{{item.info}}</p>
  85.                             </div>
  86.                         </div>
  87.                     {% endfor %} #}
  88.                     </div>
  89.                 </div>
  91.             </div>
  92.         </div>
  93.         
  94.     </div>
  96. </div>
  98. <style>
  99. .ts-control::after{
  100.     content: '';
  101.     width: 30px;
  102.     height: 30px;
  103.     top: 10px;
  104.     right: 0px;
  105.     position: absolute;
  106.     display: inline-block;
  107.     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  108.     background-size: 60%;
  109.     background-repeat: no-repeat;
  110. }
  111. .ts-dropdown-content{
  112.     max-height: 300px !important;
  113. }
  114. </style>
  117. <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
  118. <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  119. <script type="text/javascript">
  121.     let base_url = '{{base_url}}';
  122.     {# console.log(base_url); #}
  124.     new TomSelect('#municipio',{
  125.         plugins: ['dropdown_input'],
  126.     });
  128.     {# new TomSelect('#municipio_project',{
  129.         plugins: ['dropdown_input'],
  130.     }); #}
  132.     function go(){
  133.         let dato = document.getElementById("municipio").value;
  134.         let dir =  window.location.href;
  135.         let url = base_url + '/explora/' + dato;
  136.         window.location.href = url;            
  137.     }
  139. </script>
  141. {% endblock %}