Add option for PPV events only

.github/workflows/main.yml

@@ -21,6 +21,6 @@ jobs:
         run: |
           git config --global user.name "Clarence Chan"
           git config --global user.email "[email protected]"
-          git add UFC.ics
+          git add UFC.ics UFC-PPV.ics
-          git commit -m "Update UFC.ics"
+          git commit -m "Update UFC.ics and UFC-PPV.ics"
           git push -u origin ics

index.html

@@ -20,6 +20,27 @@
         background-color: rgb(243, 243, 243);
         font-family: "Inter", sans-serif;
       }
+      .calendar-type-selector {
+        margin: 20px 0;
+        display: flex;
+        gap: 20px;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+      .calendar-type-selector label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        font-size: 16px;
+        line-height: 1;
+      }
+      .calendar-type-selector input[type="radio"] {
+        cursor: pointer;
+        width: 18px;
+        height: 18px;
+        margin: 0;
+      }
       .links {
         margin: 40px 20px;
         display: flex;
@@ -65,15 +86,38 @@
   </head>
   <body>
     <h1>Subscribe to this calendar to keep track of UFC events</h1>
+    <div class="calendar-type-selector">
+      <label>
+        <input
+          type="radio"
+          name="calendar-type"
+          value="all"
+          checked
+          onchange="updateCalendarLinks('all')"
+        />
+        <span>All UFC Events</span>
+      </label>
+      <label>
+        <input
+          type="radio"
+          name="calendar-type"
+          value="ppv"
+          onchange="updateCalendarLinks('ppv')"
+        />
+        <span>PPV Events Only</span>
+      </label>
+    </div>
     <div class="links">
       <a
         class="sub-link"
+        id="apple-link"
         href="webcal://raw.githubusercontent.com/clarencechaan/ufc-cal/ics/UFC.ics"
         ><img src="./src/assets/apple.svg" alt="apple" />
         <div>Apple</div>
       </a>
       <a
         class="sub-link"
+        id="google-link"
         href="https://calendar.google.com/calendar/u/0/r?cid=webcal://raw.githubusercontent.com/clarencechaan/ufc-cal/ics/UFC.ics"
         ><img src="./src/assets/google.svg" alt="google" />
         <div>Google</div>
@@ -82,7 +126,7 @@
     <div class="sub-manual">
       <p>Or subscribe manually from your calendar app using this URL:</p>
       <div class="code-wrapper">
-        <code
+        <code id="manual-url"
           >webcal://raw.githubusercontent.com/clarencechaan/ufc-cal/ics/UFC.ics</code
         >
       </div>
@@ -93,5 +137,18 @@
         >Source code on GitHub</a
       >
     </p>
+    <script>
+      function updateCalendarLinks(type) {
+        const filename = type === "ppv" ? "UFC-PPV.ics" : "UFC.ics";
+        const baseUrl =
+          "webcal://raw.githubusercontent.com/clarencechaan/ufc-cal/ics/";
+        const fullUrl = baseUrl + filename;
+
+        document.getElementById("apple-link").href = fullUrl;
+        document.getElementById("google-link").href =
+          "https://calendar.google.com/calendar/u/0/r?cid=" + fullUrl;
+        document.getElementById("manual-url").textContent = fullUrl;
+      }
+    </script>
   </body>
 </html>

src/index.ts

@@ -12,7 +12,9 @@ async function createICS() {
     if (!events?.length) throw new Error("No events retrieved");
 
     // Convert event details in the format in accordance with the ICS generator
-    const formattedEvents = events.map(formatEventForCalendar);
+    const formattedEvents = events.map((event) =>
+      formatEventForCalendar(event, "UFC")
+    );
 
     console.log("\nDetailed events:");
     console.log(formattedEvents);
@@ -20,12 +22,25 @@ async function createICS() {
     // Create UFC.ics
     const eventsData = createEvents(formattedEvents).value;
     if (eventsData) fs.writeFileSync("UFC.ics", eventsData);
+
+    // Filter for PPV events only
+    const ppvEvents = events.filter((event) => /^UFC \d+/.test(event.name));
+    const formattedPPVEvents = ppvEvents.map((event) =>
+      formatEventForCalendar(event, "UFC-PPV")
+    );
+
+    // Create UFC-PPV.ics
+    const ppvEventsData = createEvents(formattedPPVEvents).value;
+    if (ppvEventsData) fs.writeFileSync("UFC-PPV.ics", ppvEventsData);
   } catch (error) {
     console.error(error);
   }
 }
 
-function formatEventForCalendar(event: UFCEvent): EventAttributes {
+function formatEventForCalendar(
+  event: UFCEvent,
+  calName = "UFC"
+): EventAttributes {
   const date = new Date(parseInt(event.date) * 1000);
   const start: DateArray = [
     date.getFullYear(),
@@ -82,7 +97,6 @@ function formatEventForCalendar(event: UFCEvent): EventAttributes {
 
   const location = event.location;
   const uid = event.url.href;
-  const calName = "UFC";
 
   const calendarEvent = {
     start,