Merge pull request #70 from withoutwax13/jpvalera/add-pagination-to-e…

…vent-page

feat: add pagination to event page

site/html/events.html

@@ -80,6 +80,7 @@
         <div id="event-list">
             <!-- Javascript will add element, refer to /site/js/event.js-->
         </div>
+        <div class="pagination" id="pagination-controls"></div>
     </div>
 </body>
 </html>

site/js/event.js

@@ -1,59 +1,90 @@
-const events_div = document.getElementById('event-list');
+const events_div = document.getElementById("event-list");
+const paginationControls = document.getElementById("pagination-controls");
 
 let date = new Date();
 let today_month = date.getMonth();
 let today_date = date.getDate();
 let today_year = date.getFullYear();
 let curr_hour = date.getHours();
 
+const eventsPerPage = 10;
+let currentPage = 1;
+let events = [];
+
 /* Read a json file that contains data about Events */
-fetch('/events.json')
-.then((data)=> data.json())
-.then((data)=>{
-   data.forEach(elt => {
+fetch("/events.json")
+  .then((data) => data.json())
+  .then((data) => {
+    events = data;
+    renderEvents();
+    createPaginationControls();
+  });
+
+function renderEvents() {
+  events_div.innerHTML = "";
+  const start = (currentPage - 1) * eventsPerPage;
+  const end = start + eventsPerPage;
+  const paginatedEvents = events.slice(start, end);
 
-    const container = document.createElement('div');  
-    const title = document.createElement('a');
-    const status = document.createElement('p');
-    const guest = document.createElement('p');
+  paginatedEvents.forEach((elt) => {
+    const container = document.createElement("div");
+    const title = document.createElement("a");
+    const status = document.createElement("p");
+    const guest = document.createElement("p");
 
     const start_detail = elt.Date.split("-");
     const start_time = elt.Time.split(":");
 
-    var event_status = "Completed"
+    var event_status = "Completed";
 
-    if (today_year < start_detail[2])
-      event_status = "Registration Open";    
-    else if (today_year == start_detail[2] && (today_month+1) < start_detail[1])
+    if (today_year < start_detail[2]) event_status = "Registration Open";
+    else if (today_year == start_detail[2] && today_month + 1 < start_detail[1])
       event_status = "Registration Open";
-    else if (today_year == start_detail[2] && (today_month+1) == start_detail[1] && today_date <= start_detail[0])
+    else if (
+      today_year == start_detail[2] &&
+      today_month + 1 == start_detail[1] &&
+      today_date <= start_detail[0]
+    )
       event_status = "Registration Open";
 
-   //  If event is not complete refer to registration for event 
-   // otherwise refer to gallery section of corresponsing event
-
-   if (event_status != "Completed"){
+    if (event_status != "Completed") {
       title.href = elt.URL;
-   }else{
-      if (elt.IMGURL)
-        title.href = elt.IMGURL;
-      else 
-	 title.href = elt.URL;
-   }
-
-    title.classList.add('event-title');
-    status.classList.add('event-status');
-    guest.classList.add('event-guest');
-
-    title.innerText  = elt.Title;
+    } else {
+      if (elt.IMGURL) title.href = elt.IMGURL;
+      else title.href = elt.URL;
+    }
+
+    title.classList.add("event-title");
+    status.classList.add("event-status");
+    guest.classList.add("event-guest");
+
+    title.innerText = elt.Title;
     status.innerText = "Status:" + event_status;
-    guest.innerText  = "By:" + elt.By;
+    guest.innerText = "By:" + elt.By;
+
+    container.appendChild(title);
+    container.appendChild(status);
+    container.appendChild(guest);
 
-    container.appendChild(title)
-    container.appendChild(status)
-    container.appendChild(guest)
+    events_div.appendChild(container);
+  });
+}
 
-    events_div.appendChild(container)
+function createPaginationControls() {
+  paginationControls.innerHTML = "";
+  const totalPages = Math.ceil(events.length / eventsPerPage);
 
-   });
-})
+  for (let i = 1; i <= totalPages; i++) {
+    const button = document.createElement("button");
+    button.textContent = i;
+    if (i === currentPage) {
+      button.classList.add("active");
+    }
+    button.addEventListener("click", () => {
+      currentPage = i;
+      renderEvents();
+      createPaginationControls();
+    });
+    paginationControls.appendChild(button);
+  }
+}

site/style/events.css

@@ -1,14 +1,36 @@
-.event-title{
-    font-size: 25px !important;
-    display: inline-block;
+.event-title {
+  font-size: 25px !important;
+  display: inline-block;
 }
-.event-title:hover{
-    background-color: antiquewhite;
+.event-title:hover {
+  background-color: antiquewhite;
 }
-.event-status{
-    font-size: 19px;
-    color:blue;
+.event-status {
+  font-size: 19px;
+  color: blue;
+}
+.event-guest {
+  font-style: italic;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+}
+.pagination button {
+  color: black;
+  float: left;
+  padding: 8px 16px;
+  text-decoration: none;
+  transition: background-color 0.3s;
+  border: 1px solid #ddd;
+  margin: 0 4px;
+}
+.pagination button:hover:not(.active) {
+  background-color: #ddd;
+}
+.pagination button.active {
+  background-color: #689775;
+  color: white;
 }
-.event-guest{
-    font-style: italic;
-}