Update scripts/ui.js

scripts/ui.js

@@ -5,6 +5,15 @@ const BACKEND_URL = 'https://streamai-backend-v2.smplushypermedia.workers.dev';
 // --- Helper Functions ---
 const getElement = (id) => document.getElementById(id);
 
+function showNotification(message, isError = false) {
+    const container = getElement('notification');
+    if (!container) return;
+    const bgColor = isError ? 'bg-red-500' : 'bg-green-500';
+    container.innerHTML = `<div class="flex items-center text-white p-4 rounded-lg shadow-lg ${bgColor}"><i class="fas fa-info-circle mr-3"></i><p>${message}</p></div>`;
+    container.classList.add('show');
+    setTimeout(() => { container.classList.remove('show'); }, 4000);
+}
+
 // --- Card Rendering ---
 function createListingCard(item) {
     const card = document.createElement('div');
@@ -38,10 +47,52 @@ async function loadRecommendations() {
     }
 }
 
-// ... (The rest of your ui.js file, including initUI, handleFormSubmit, showNotification, etc., can remain the same or you can paste the full version from previous steps if you are unsure) ...
+async function handleFormSubmit(event) {
+    event.preventDefault();
+    const form = event.target;
+    const submitButton = getElement('submit-listing-btn');
+    submitButton.disabled = true;
+    submitButton.textContent = 'Submitting...';
+    const listingData = Object.fromEntries(new FormData(form).entries());
+
+    try {
+        const response = await fetch(`${BACKEND_URL}/api/add-listing`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(listingData),
+        });
+        const result = await response.json();
+        if (!response.ok) throw new Error(result.details || 'Submission failed.');
+        showNotification('Success! Your recommendation has been added.');
+        const newCard = createListingCard(listingData);
+        getElement('recommendations-container').prepend(newCard);
+        getElement('form-container').classList.add('hidden');
+        getElement('form-chevron').classList.remove('rotate-180');
+        form.reset();
+    } catch (error) {
+        showNotification(`Error: ${error.message}`, true);
+    } finally {
+        submitButton.disabled = false;
+        submitButton.textContent = 'Submit Listing';
+    }
+}
 
+// --- Initialization ---
 export function initUI() {
-    // This will run our function on page load to populate the recommendations
+    const addListingForm = getElement('add-listing-form');
+    const toggleBtn = getElement('toggle-form-btn');
+    const formContainer = getElement('form-container');
+    const chevron = getElement('form-chevron');
+
+    if (toggleBtn && formContainer && chevron) {
+        toggleBtn.addEventListener('click', () => {
+            formContainer.classList.toggle('hidden');
+            chevron.classList.toggle('rotate-180');
+        });
+    }
+
+    if (addListingForm) {
+        addListingForm.addEventListener('submit', handleFormSubmit);
+    }
     loadRecommendations();
-    // ... other event listeners for the form and video button ...
 }