update list Api and readme

README.md

@@ -34,12 +34,12 @@ The public page [api-colombia.com](https://api-colombia.com/) has useful informa
 
 * Swagger documentation can be found at the following [URL](https://api-colombia.com/swagger/index.html)
 
-## Projects, Demos, POCs and Samples
+## Projects, Demos, POCs, Samples and ColombiaAPI para R
 
 | Repo | Url   | Description         |
 | ---------- | ------------------------------------- | ------------------------------------------------ |
 | https://github.com/Mteheran/invasivespecie-colombia | https://especiesinvasoras.api-colombia.com/ | A portal to consult all invasive species in Colombia |
-
+| https://github.com/lightbluetitan/colombiapi | https://github.com/lightbluetitan/colombiapi | ColombiaAPI for R, an R package that consumes the data exposed by api-colombia |
 
 ## API Endpoints
 | HTTP Verbs | Endpoints                             | Action                                                               |
@@ -120,6 +120,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   </tr>
   <tr>
     <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/hamilgdev/"><img src="https://avatars.githubusercontent.com/u/37517478?v=4" width="100px;" alt="Hamilton Galeano"/><br /><sub><b>Hamilton Galeano</b></sub></a><br /><a href="https://github.com/Mteheran/api-colombia/commits?author=hamilgdev" title="Documentation">📖</a> </td>
+    <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/leomaris-reyes-1b598661/"><img src="https://avatars.githubusercontent.com/u/35940594?v=4" width="120px;" alt="Leomarys Reyes"/><br /><sub><b>Leomaris Reyes</b></sub></a><br /><a href="https://github.com/LeomarisReyes" title="Code">💻</a></td>
   </tr>
   </tbody>
   <tfoot>

api/wwwroot/css/moduleApi.css

@@ -11,7 +11,7 @@
   display: flex;
   border: 1px solid ;
   padding: 5px 7px;
-  width: 498px;
+  width: 598px;
   border-radius: 7px 7px 0px 0px;
 }
 
@@ -47,7 +47,7 @@
   background-color: #22292a;
   padding: 10px;
   margin-top: 2em;
-  width: 494px;
+  width: 595px;
   height: 2.7em;
   border-bottom: 1px solid #ffffff;
 }
@@ -118,7 +118,7 @@
   position: absolute;
   margin-top: 9.6em;
   font-size: 12px;
-  width: 479px;
+  width: 595px;
   overflow-y: auto;
   background-color: #22292a;
   border-radius: 0px 0px 7px 7px;

api/wwwroot/css/style.css

@@ -225,7 +225,7 @@
 
 .parteIzquierda,
 .parteDerecha {
-    width: 50%;
+    width: 70%;
     margin: 0.6em 1.2em;
 }
 

api/wwwroot/index.html

@@ -232,8 +232,12 @@ <h6>
             <option value="Invasivespecie">InvasiveSpecie</option>
             <option value="NativeCommunity">NativeCommunity</option>
             <option value="Airport">Airport</option>
-            <option value="constitutionarticle">ConstitutionArticle</option>
+            <option value="Radio">Radio</option>
+            <option value="Holiday">Holiday</option>
+            <option value="TypicalDish">TypicalDish</option>
+
           </select>
+          <select id="selectYear" style="display: none;"></select>
           <button id="btnSolicitar">Solicitar</button>
         </div>
         <div class="block-api">
@@ -356,7 +360,6 @@ <h1>Contribuidores</h1>
       </div>
     </div>
   </footer>
-
   <script src="js/moduleApi.js"></script>
   <script src="js/modal.js"></script>
   <script src="js/scriptantiguo.js"></script>

api/wwwroot/js/moduleApi.js

@@ -5,6 +5,7 @@ const cache = new Map(); // Mapeo para almacenar las respuestas en caché
 const selectVersion = document.getElementById("selectVersion");
 const selectData = document.getElementById("selectData");
 const btnSolicitar = document.getElementById("btnSolicitar");
+const selectYear = document.getElementById("selectYear");
 const resultadoDiv = document.querySelector(".resultado");
 
 async function fetchData(apiUrl) {
@@ -33,25 +34,91 @@ async function fetchData(apiUrl) {
   }
 }
 
+const currentYear = new Date().getFullYear();
+for (let year = currentYear; year >= 2000; year--) {
+  let option = document.createElement("option");
+  option.value = year;
+  option.textContent = year;
+  selectYear.appendChild(option);
+}
+
+selectData.addEventListener("change", function () {
+  if (this.value === "Holiday") {
+    selectYear.style.display = "inline-block";
+  } else {
+    selectYear.style.display = "none";
+  }
+});
+
+
+async function fetchData(apiUrl) {
+  try {
+    if (cache.has(apiUrl)) {
+      console.log("✅ Datos obtenidos de la caché:", apiUrl);
+      return cache.get(apiUrl);
+    }
+
+    const response = await fetch(apiUrl, {
+      headers: {
+        "Accept": "application/json"
+      }
+    });
+
+    if (!response.ok) {
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      throw new Error(`Error en la solicitud: ${response.status} - ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    cache.set(apiUrl, data);
+    return data;
+  } catch (error) {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    throw new Error("Error al obtener los datos: " + error.message);
+  }
+}
+
+
 // Agrego un evento al botón de solicitar datos
-btnSolicitar.addEventListener("click", async function () {
+/* btnSolicitar.addEventListener("click", async function () {
   const version = selectVersion.value;
   const data = selectData.value;
   let apiUrl = "";
 
   if (data === "CountryColombia") {
     apiUrl = "https://api-colombia.com/api/v1/country/Colombia";
+  } else if (data === "Holiday") {
+    const year = selectYear.value;
+    apiUrl = `https://api-colombia.com/api/${version}/Holiday/year/${year}`;
   } else {
-    apiUrl = `https://api-colombia.com/api/${version}/${data}`;
+    apiUrl = `${apiBaseUrl}${version}/${data}`;
   }
 
   try {
     const responseData = await fetchData(apiUrl);
-    console.log(responseData);
     resultadoDiv.innerText = JSON.stringify(responseData, null, 2);
+
   } catch (error) {
     console.error("Error al obtener los datos:", error);
-    resultadoDiv.innerText = "Error al obtener los datos";
+  }
+}); */
+
+// Muestra en la UI qué endpoint se está consumiendo
+document.getElementById("selectData").addEventListener("change", function () {
+  var selectedOption = this.value;
+  document.getElementById("endpoint").textContent = selectedOption + "'";
+});
+
+// Cargar datos iniciales al cargar la página
+document.addEventListener("DOMContentLoaded", async function () {
+  const apiUrl = "https://api-colombia.com/api/v1/department";
+
+  try {
+    const responseData = await fetchData(apiUrl);
+    console.log(responseData);
+    resultadoDiv.innerText = JSON.stringify(responseData, null, 2);
+  } catch (error) {
+    resultadoDiv.innerHTML = "<p>No se encontraron datos. Vuelva a intentarlo</p>";
   }
 });
 
@@ -76,22 +143,22 @@ btnSolicitar.addEventListener("click", async function () {
   // Verificar si se seleccionó el nuevo endpoint
   if (data === "CountryColombia") {
     apiUrl = "https://api-colombia.com/api/v1/country/Colombia";
-  } else {
+  }else if (data === "Holiday") {
+    const year = selectYear.value;
+    apiUrl = `https://api-colombia.com/api/${version}/Holiday/year/${year}`;
+  }
+  else {
     apiUrl = `${apiBaseUrl}${version}/${data}`;
   }
 
   try {
-    // Obtengo los datos de la API
+    resultadoDiv.innerText = "Cargando datos...";
+    await new Promise(resolve => setTimeout(resolve, 1000));
     const responseData = await fetchData(apiUrl);
-
-    // Proceso los datos obtenidos
-    console.log(responseData);
-
-    // Muestro los datos en el div resultado
+
     resultadoDiv.innerText = JSON.stringify(responseData, null, 2);
   } catch (error) {
     // Aqui capturo y manejo los errores de la solicitud a la API
-    console.error("Error al obtener los datos:", error);
 
     // Muestro un mensaje de error en el div resultado cuando no se consuma correctamente
     resultadoDiv.innerText = "Error al obtener los datos";