https://campoalegre-huila.gov.co/SiteAssets/v1/assets/components/home/eventos-home/main.js

1document.addEventListener("DOMContentLoaded", async () => {
2  try {
3    const data = await getEventosHome();
4    if (!data || data.length === 0) {
5      const noEventos = document.createElement("div");
6      noEventos.className =
7        "flex flex-col items-center justify-center py-16 px-8 text-center";
8
9      noEventos.innerHTML = `
10        <div class="mb-6">
11          <i class="fa-regular fa-calendar-xmark text-6xl text-color3 mb-4"></i>
12        </div>
13        <h3 class="text-2xl font-bold text-color8 mb-3">No hay eventos próximos</h3>
14        <p class="text-color3 text-lg max-w-md leading-relaxed">
15          En este momento no tenemos eventos programados. 
16          ¡Mantente atento para futuras actividades!
17        </p>
18        <div class="mt-6">
19          <i class="fa-solid fa-bell text-color1 text-xl"></i>
20          <span class="ml-2 text-color3">Te notificaremos cuando haya nuevos eventos</span>
21        </div>
22      `;
23
24      document.querySelector("#eventos-list").appendChild(noEventos);
25      return;
26    }
27    for (const item of data) {
28      const eventoItem = eventosComponent(item);
29      document.querySelector("#eventos-list").appendChild(eventoItem);
30    }
31  } catch (error) {
32    console.error("Error fetching eventos:", error);
33  }
34});
35
36const eventosComponent = (item) => {
37  const li = document.createElement("li");
38  li.className = "flex flex-col flex-1 gap-5 group w-full lg:w-1/4";
39
40  li.innerHTML = `
41     <img
42        src="${
43          item.UrlImagen ||
44          "/SiteAssets/v1/assets/components/home/eventos-home/events-blank.svg"
45        }"
46        alt="${item.Title || "Evento"}"
47        class="rounded-xl w-full object-cover relative lg:h-[320px]" />
48    <section class="flex items-center gap-2">
49        <i class="fa-regular fa-calendar-days text-color3"></i>
50        <p class="text-color3 !uppercase !m-0 !p-0">
51            ${item.EventDate || "Fecha del evento"}
52        </p>
53    </section>
54    <section class="flex flex-col h-full justify-between gap-4">
55        <h3
56            class="text-[18px] group-hover:text-color1 !font-bold text-color8 transition-colors duration-300 !m-0 !p-0">
57        ${item.Title || "Sin título"}
58        </h3>
59        <p
60            class="text-black font-light leading-6 line-clamp-2 text-[14px]">
61        ${item.Description || "Sin descripción"}
62        </p>
63        <a
64            href="${item.Url || "#"}"
65            class="no-underline rounded-lg text-white flex justify-between items-center py-2 px-4 bg-color6 font-semibold transition-colors duration-300 group-hover:bg-color1">Conocer más <i class="fa-solid fa-arrow-right"></i>
66        </a>
67    </section>
68    `;
69
70  return li;
71};
72
73const getEventosHome = async () => {
74  const url = "/sp_api.aspx?ref=get-list-items";
75  const body = {
76    fields: [
77      "Title",
78      "Description",
79      "EventDate",
80      "EndDate",
81      "UrlImagen",
82      "Url",
83    ],
84    site: "/",
85    list: "CalendarioEventos",
86  };
87
88  const response = await fetch(url, {
89    method: "POST",
90    headers: {
91      "Content-Type": "application/json",
92    },
93    body: JSON.stringify(body),
94  });
95
96  if (!response.ok) {
97    throw new Error("Network response was not ok");
98  }
99
100  const data = await response.json();
101  if (data.status !== "ok") {
102    return [];
103  }
104
105  return data.data
106    .sort((a, b) => new Date(b.EventDate) - new Date(a.EventDate))
107    .slice(0, 4)
108    .map((item) => ({
109      ...item,
110      EventDate: new Date(item.EventDate).toLocaleDateString("es-ES", {
111        year: "numeric",
112        month: "long",
113        day: "numeric",
114        hour: "2-digit",
115        minute: "2-digit",
116      }),
117      EndDate: item.EndDate
118        ? new Date(item.EndDate).toLocaleDateString("es-ES", {
119            year: "numeric",
120            month: "long",
121            day: "numeric",
122            hour: "2-digit",
123            minute: "2-digit",
124          })
125        : null,
126    }));
127};