curetnly undevelopmetn

index.html

@@ -19,7 +19,7 @@
             <input type="text" id="ics_file" placeholder="Paste .ics URL or API endpoint here" />
             <input type="button" value="new calendar" id="ics_run" />
             <input type="button" value="add a calendar" id="ics_add" />
-            </div>
+        </div>
         <div class="info-bar" style="text-align: center">
             <span>Tip: You can add multiple calendars. Hover events for details.
                 <a href="https://fullcalendar.io/" target="_blank" rel="noopener noreferrer">Powered by
@@ -33,12 +33,19 @@
                 <div id="calendar"></div>
             </div>
         </div>
-        <footer class="app-footer">
-                <p>Made with Rust, JS, and ❤️</p>
-                <p>by
-                    <a href="//ldlda.com" target="_blank" rel="noopener noreferrer">lđa</a></p>
-        </footer>
+        <div class="event-source-management" id="event-source-management">
+            <h2>Event Sources</h2>
+            <div id="event-source-list">
+                <!-- Event source cards will be dynamically added here -->
+            </div>
         </div>
+        <footer class="app-footer">
+            <p>Made with Rust, JS, and ❤️</p>
+            <p>by
+                <a href="//ldlda.com" target="_blank" rel="noopener noreferrer">lđa</a>
+                </p>
+        </footer>
+    </div>
 </body>
 
 </html>

src/calendar.js

@@ -68,3 +68,7 @@ export function addEventSource(url) {
     });
   }
 }
+
+export function getCalendarInstance() {
+  return calendar;
+}

src/main.js

@@ -1,18 +1,17 @@
-import { initializeCalendar, addEventSource } from "./calendar";
+import { initializeCalendar, addEventSource, getCalendarInstance } from "./calendar";
 import { newTippy, tippyDie } from "./tooltip";
 import { create_url } from "./utils";
 
-
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import "tippy.js/dist/tippy.css";
 
-
 const text_field = document.getElementById("ics_file");
 const confirm_button = document.getElementById("ics_run");
 const add_button = document.getElementById("ics_add");
 const cal_ele = document.getElementById("calendar");
 const placeholder_message = document.getElementById("placeholder-message");
+const eventSourceList = document.getElementById("event-source-list");
 
 function showPlaceholder() {
   placeholder_message.style.display = "block";
@@ -24,6 +23,59 @@ function hidePlaceholder() {
   cal_ele.style.display = "block";
 }
 
+function updateEventSourceList(calendar) {
+  if (!calendar) return;
+
+  // Clear the current list
+  eventSourceList.innerHTML = "";
+
+  // Fetch all event sources
+  const sources = calendar.getEventSources();
+
+  sources.forEach((source) => {
+    const card = document.createElement("div");
+    card.className = "event-source-card";
+    card.style.borderLeft = `4px solid ${source.color || "#007bff"}`;
+    card.style.padding = "0.5em";
+    card.style.marginBottom = "0.5em";
+
+    const url = source.url || "(No URL)";
+    const format = source.format || "(Unknown Format)";
+
+    // Add source info
+    card.innerHTML = `
+      <div><strong>Source:</strong> ${url}<br>
+      <strong>Format:</strong> ${format}</div>
+    `;
+
+    // Add Refetch Button
+    const refetchButton = document.createElement("button");
+    refetchButton.textContent = "Refetch";
+    refetchButton.className = "btn btn-sm btn-primary";
+    refetchButton.style.marginRight = "0.5em";
+    refetchButton.addEventListener("click", () => {
+      source.refetch();
+      alert("Source refetched!");
+    });
+
+    // Add Remove Button
+    const removeButton = document.createElement("button");
+    removeButton.textContent = "Remove";
+    removeButton.className = "btn btn-sm btn-danger";
+    removeButton.addEventListener("click", () => {
+      source.remove();
+      updateEventSourceList(calendar); // Refresh the list after removal
+    });
+
+    // Append buttons to the card
+    card.appendChild(refetchButton);
+    card.appendChild(removeButton);
+
+    // Append the card to the event source list
+    eventSourceList.appendChild(card);
+  });
+}
+
 confirm_button.addEventListener("click", () => {
   const url = create_url(text_field.value);
   if (!url && text_field.value) return alert("Please input valid url.");
@@ -34,7 +86,7 @@ confirm_button.addEventListener("click", () => {
   }
 
   hidePlaceholder();
-  initializeCalendar(cal_ele, url, newTippy, tippyDie);
+  initializeCalendar(cal_ele, url, newTippy, tippyDie); 
 });
 
 add_button.addEventListener("click", () => {
@@ -45,3 +97,6 @@ add_button.addEventListener("click", () => {
   }
   addEventSource(url);
 });
+
+
+document.getElementById("event-source-management").addEventListener("click", _ => updateEventSourceList(getCalendarInstance()));

src/style.css

@@ -109,3 +109,25 @@ input[type="button"]:hover {
   margin-top: 2em;
   font-size: 0.95em;
 }
+
+.event-source-management {
+  margin-top: 2em;
+  padding: 1em;
+  background: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
+}
+
+.event-source-card {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 0.5em;
+  margin-bottom: 0.5em;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid #ddd;
+  background-color: #f9f9f9;
+}
+
+.event-source-card button {
+  margin-top: 0.5em;
+}

src/tooltip.js

@@ -31,3 +31,5 @@ export function tippyDie(info) {
     currentTippy.hideWithInteractivity(info.jsEvent);
   }
 }
+
+