1<style>
2 .container-calendario-financiero-historico {
3 min-height: 400px;
4 }
5</style>
6<#assign AssetCategoryLocalServiceUtil = staticUtil["com.liferay.asset.kernel.service.AssetCategoryLocalServiceUtil"]>
7<#assign AssetCategoryPropertyLocalServiceUtil = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService")>
8<#assign listadoCategorias = [] />
9<#if entries?has_content>
10 <#list entries as curVocabulary>
11 <#assign categories = curVocabulary.getCategories() />
12 <#if categories?has_content>
13 <#list categories?sort_by("modifiedDate")?reverse as category>
14 <#assign categoryAsset = AssetCategoryLocalServiceUtil.getAssetCategory(category.categoryId)/>
15 <#if categoryAsset??>
16 <#assign categoryProperty = AssetCategoryPropertyLocalServiceUtil.getCategoryProperty(category.categoryId, "orden")/>
17 <#assign listadoCategorias = listadoCategorias + [ {"sortField":categoryProperty.value?number, "categoryId":category.categoryId, "name": category.name, "description": category.description} ] />
18 </#if>
19 </#list>
20 </#if>
21 </#list>
22</#if>
23<div class="bg-hide-years d-block d-lg-none"></div>
24<div class="container-gs gap-10p container-scroll d-flex justify-content-right clasificacion-filtro py-0">
25 <#if listadoCategorias??>
26 <#list listadoCategorias?sort_by("sortField")?reverse as category>
27 <#assign categoryURL = renderResponse.createRenderURL() />
28
29 ${categoryURL.setParameter("resetCur", "true")}
30 ${categoryURL.setParameter("categoryId", category.categoryId?string)}
31
32 <a href="javascript:void(0)" id="anio-actual-${category.categoryId?string}" onClick="cambiarCategoriaAnioActual('${categoryURL}', 'anio-actual-${category.categoryId}', '${category.name}')" class="clasificacion-year-nav-btn btn filtro-anual-color categoria-clasificacion-actual <#if category.description == "IEDS"> active</#if>">${category.description}</a>
33 </#list>
34 </#if>
35</div>
36<script>
37 var imgOriginalActual = null;
38
39 var srcValueActual = "";
40
41 var contenidoSinResultado = "";
42
43 document.addEventListener('DOMContentLoaded', function() {
44 imgOriginalActual = document.querySelector('.gif-loader-saesa');
45 contenidoSinResultado = document.getElementsByClassName("sin-resultados")[0].innerHTML;
46 srcValueActual = imgOriginalActual.getAttribute('src');
47 document.getElementsByClassName("sin-resultados")[0].style.display="none";
48 mostrarPreLoading();
49 });
50
51 // Funcion que hace click sobre el primer anio
52 function clickPrimerAnioCalendario() {
53 var links = document.querySelectorAll('.container-gs.container-scroll a.categoria-clasificacion-actual');
54 var firstLink = links[0]; // Get the last link
55 if (firstLink) {
56 firstLink.click(); // Trigger click on the last link
57 }
58 }
59
60 <#if !renderRequest.getParameter("categoryId")??>
61 if (document.readyState === "loading") {
62 // Loading hasn't finished yet
63 document.addEventListener("DOMContentLoaded", clickPrimerAnioCalendario)
64 } else {
65 // `DOMContentLoaded` has already fired
66 clickPrimerAnioCalendario();
67 }
68 </#if>
69
70 function cambiarCategoriaAnioActual(urlCategoria, idCatLink, categoryName) {
71 // Función para cargar la imagen
72 function cargarImagen() {
73 return new Promise(function(resolve, reject) {
74 var imgElement = document.querySelector('.gif-loader-saesa');
75 imgElement.onload = function() {
76 console.log("[mostrarLoadingCal] Imagen cargada.");
77 resolve();
78 };
79 imgElement.setAttribute('src', srcValueActual + "?a=" + Math.random());
80 });
81 }
82
83 // Promesa para cargar la imagen
84 var promesaCargarImagen = cargarImagen();
85
86 // Cuando la imagen se carga, continuamos con la lógica
87 promesaCargarImagen.then(function() {
88 // Crear una nueva solicitud AJAX
89 var xhr = new XMLHttpRequest();
90 xhr.open('POST', urlCategoria, true);
91 mostrarLoadingCal();
92
93 // Configurar la lógica de tratamiento de respuesta
94 xhr.onload = function() {
95 if (this.status >= 200 && this.status < 300) {
96 // Obtener todos los elementos que contienen la parte específica del id
97 var idCats = document.querySelectorAll("div[id*='p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_']");
98
99 var parser = new DOMParser();
100 var doc = parser.parseFromString(this.response, "text/html");
101
102 // Actualizar el HTML del primer elemento de asset
103 var idCat = idCats[2].getAttribute("id");
104 var foo = doc.querySelector('#' + idCat);
105 var contentTitle = foo.querySelector('.wrapper-calendario-financiero-historico-container div h2');
106
107 if (foo) {
108 idCats[2].innerHTML = foo.innerHTML;
109 }
110 if (contentTitle) {
111 console.log("Con contenido");
112 document.getElementsByClassName("sin-resultados")[0].innerHTML=null;
113 document.querySelector(".wrapper-calendario-financiero-historico-container").classList.remove("d-none");
114 document.querySelector(".wrapper-calendario-financiero-historico-container").classList.add("d-flex");
115 } else {
116 console.log("Sin contenido");
117 document.querySelector(".container-calendario-financiero-historico").innerHTML=null;
118
119 var contenedorPrincipal = document.querySelector(".container-calendario-financiero-historico");
120 var sinResultadoHtml = document.querySelector(".sin-resultados").outerHTML;
121 contenedorPrincipal.insertAdjacentHTML("afterbegin", sinResultadoHtml);
122
123 document.querySelector(".sin-resultados").innerHTML=contenidoSinResultado;
124 document.getElementsByClassName("sin-resultados")[0].style.display = "flex";
125 }
126
127 // Remover la clase 'active' de todos los elementos con clase 'categoria-clasificacion-actual'
128 document.querySelectorAll(".categoria-clasificacion-actual").forEach(function(navLink) {
129 navLink.classList.remove("active");
130 });
131
132 // Imprimir en consola y añadir la clase 'active' al enlace de categoría específico
133 var activeNavLink = document.getElementById(idCatLink);
134 if (activeNavLink) {
135 activeNavLink.classList.add("active");
136 }
137 }
138 ocultarLoadingCal();
139 };
140
141 // Manejar errores de la solicitud
142 xhr.onerror = function() {
143 console.error('Error en la solicitud AJAX.');
144 ocultarLoadingCal();
145 };
146
147 // Enviar la solicitud
148 xhr.send();
149 });
150 return false;
151 }
152 // Metodo encargado de mostrar el loading
153 function mostrarPreLoading() {
154 console.log("[mostrarPreLoading] Inicio.");
155 document.getElementsByClassName("container-gs bonos-corporativos")[0].style.display = "none";
156 var loading = document.getElementById("loader-container");
157 loading.classList.add("d-flex");
158 loading.classList.remove("d-none");
159 console.log("[mostrarPreLoading] Fin.");
160 }
161 // Metodo encargado de mostrar el loading
162 function mostrarLoadingCal() {
163 document.getElementsByClassName("sin-resultados")[0].innerHTML=null
164 document.querySelector(".container-calendario-financiero-historico").innerHTML=null;
165
166 var contenedorPrincipal = document.querySelector(".container-calendario-financiero-historico");
167 var loading = document.getElementById("loader-container").outerHTML;
168 contenedorPrincipal.insertAdjacentHTML("afterbegin", loading);
169
170 var imgElement = document.querySelector('.gif-loader-saesa');
171 // Asignar al atributo src el valor inicial para reiniciar la animacion
172 imgElement.onload = function() {
173 // Una vez que la imagen se haya cargado, continuar con la lógica
174 continuarDespuesDeCargaImagenCal();
175 };
176 // Asignar al atributo src el valor inicial para reiniciar la animacion
177 imgElement.setAttribute('src', srcValueActual + "?a=" + Math.random());
178 }
179 // Metodo que se llama una vez que la imagen se haya cargado
180 function continuarDespuesDeCargaImagenCal() {
181 console.log("[continuarDespuesDeCargaImagenActual] Inicio.");
182 var loading = document.getElementById("loader-container");
183 loading.classList.add("d-flex");
184 loading.classList.remove("d-none");
185 console.log("[continuarDespuesDeCargaImagenActual] Fin.");
186 }
187 // Metodo encargado de ocultar el loading
188 function ocultarLoadingCal() {
189 var loading = document.querySelector("#loader-container");
190 loading.classList.add("d-none");
191 loading.classList.remove("d-flex");
192 }
193
194</script>
