Update script.js

script.js

@@ -1,99 +1,228 @@
+/**
+ * Client-Side JavaScript for the International Umbrella Endowment
+ *
+ * Handles all user interactions:
+ * - Opening the submission modal via a floating button.
+ * - Submitting a new deal and auto-populating the lookup field.
+ * - Looking up a deal's status and displaying it in a modal.
+ * - Admin actions for approving/declining deals.
+ *
+ * Final Version: Monday, June 16, 2025
+ */
 document.addEventListener('DOMContentLoaded', () => {
+    
     // --- CONFIGURATION ---
-  // Add these two lines with your other element selectors
-    const lookupContainer = document.getElementById('lookup-container');
-    const lookupInput = document.getElementById('lookup-deal-id');
-    const workerUrl = 'https://form-handler-worker.aiagents.workers.dev/';
+    const workerUrl = 'https://form-handler-worker.aiagents.workers.dev/'; // Ensure this is your correct worker URL
 
     // --- ELEMENT SELECTIONS ---
+    // Forms
     const submissionForm = document.getElementById('vessel-exchange-form');
     const lookupForm = document.getElementById('deal-lookup-form');
     const adminForm = document.getElementById('admin-action-form');
     
-    // Modals and Buttons
-    const submissionModal = document.getElementById('submission-modal');
-    const dealModal = document.getElementById('deal-modal');
+    // Buttons
     const showSubmissionButton = document.getElementById('show-submission-button');
+    const submitButton = document.getElementById('submit-button');
+    const adminApproveButton = document.getElementById('admin-approve-button');
+    const adminDeclineButton = document.getElementById('admin-decline-button');
     const submissionModalCloseButton = document.getElementById('submission-modal-close-button');
     const dealModalCloseButton = document.getElementById('modal-close-button');
 
+    // Modals & Containers
+    const submissionModal = document.getElementById('submission-modal');
+    const dealModal = document.getElementById('deal-modal');
+    const lookupContainer = document.getElementById('lookup-container');
+    const lookupInput = document.getElementById('lookup-deal-id');
+    
+    // Status Message Areas
+    const submissionStatus = document.getElementById('status-message');
+    const adminStatus = document.getElementById('admin-status-message');
+
+    
     // --- EVENT LISTENERS ---
 
-    // Show the submission form modal
-    showSubmissionButton.addEventListener('click', () => {
-        submissionModal.classList.remove('hidden');
-    });
+    // Floating button to show the submission form modal
+    if (showSubmissionButton) {
+        showSubmissionButton.addEventListener('click', () => {
+            submissionModal.classList.remove('hidden');
+        });
+    }
     
     // Close the submission form modal
-    submissionModalCloseButton.addEventListener('click', () => closeModal(submissionModal));
-    submissionModal.addEventListener('click', (event) => {
-        if (event.target === submissionModal) closeModal(submissionModal);
-    });
+    if (submissionModal) {
+        submissionModalCloseButton.addEventListener('click', () => closeModal(submissionModal));
+        submissionModal.addEventListener('click', (event) => {
+            if (event.target === submissionModal) closeModal(submissionModal);
+        });
+    }
+
+    // Close the deal info modal
+    if (dealModal) {
+        dealModalCloseButton.addEventListener('click', () => closeModal(dealModal));
+        dealModal.addEventListener('click', (event) => {
+            if (event.target === dealModal) closeModal(dealModal);
+        });
+    }
 
     // Handle New Deal Submissions
     if (submissionForm) {
         submissionForm.addEventListener('submit', handleFormSubmit);
     }
 
-    // --- All other event listeners and functions from the previous version remain the same ---
-    // (lookupForm, adminForm, dealModal closing, etc.)
+    // Handle Deal Status Lookups
+    if (lookupForm) {
+        lookupForm.addEventListener('submit', handleLookupSubmit);
+    }
+
+    // Handle Admin Actions
+    if (adminForm) {
+        adminApproveButton.addEventListener('click', () => handleAdminClick('approve'));
+        adminDeclineButton.addEventListener('click', () => handleAdminClick('decline'));
+    }
+
     
     // --- HANDLER FUNCTIONS ---
+
+    /**
+     * Handles the main form submission to create a new deal.
+     */
     async function handleFormSubmit(event) {
-        event.preventDefault();
-        const submitButton = document.getElementById('submit-button');
-        const statusMessage = document.getElementById('status-message');
+        event.preventDefault(); // Stop page reload
         
+        showStatus(submissionStatus, 'Submitting...');
         submitButton.disabled = true;
-        showStatus(statusMessage, 'Submitting...');
         
         try {
             const formData = new FormData(submissionForm);
             const response = await fetch(workerUrl, { method: 'POST', body: formData });
-            const result = await response.json();
-            if (!response.ok) throw new Error(result.error || `Server responded with status ${response.status}`);
+            const resultText = await response.text();
+
+            if (!response.ok) {
+                throw new Error(resultText); // Use the error text from the worker
+            }
+            
+            const result = JSON.parse(resultText);
+            const dealId = result.deal_id;
+            
+            // --- Auto-populate and Highlight Logic ---
+            showSuccess(submissionStatus, `Success! Deal ID copied below.`);
+            lookupInput.value = dealId; // Auto-populate the lookup field
             
-            showSuccess(statusMessage, `Success! Your Deal ID is: ${result.deal_id}`);
+            lookupContainer.classList.add('highlight');
+            setTimeout(() => {
+                lookupContainer.classList.remove('highlight');
+            }, 2000);
+
             submissionForm.reset();
             
-            // Close the modal after a short delay to allow user to see the success message
-            setTimeout(() => closeModal(submissionModal), 2000);
+            // Close the modal after a delay
+            setTimeout(() => closeModal(submissionModal), 2500);
 
         } catch (error) {
-            showError(statusMessage, error.message);
+            showError(submissionStatus, error.message);
         } finally {
             submitButton.disabled = false;
         }
     }
 
-    // --- All other handler functions (handleLookupSubmit, handleAdminClick) remain the same ---
+    /**
+     * Handles the lookup form submission to check a deal's status.
+     */
+    async function handleLookupSubmit(event) {
+        event.preventDefault();
+        if (!lookupInput.value) return;
+
+        try {
+            const response = await fetch(`${workerUrl}?deal_id=${lookupInput.value}`, { method: 'GET' });
+            const result = await response.json();
+            if (!response.ok) throw new Error(result.error || 'Failed to fetch deal.');
+            
+            openDealInfoModal(result);
+        } catch (error) {
+            alert(`Error: ${error.message}`);
+        }
+    }
+
+    /**
+     * Handles clicks on the admin approve/decline buttons.
+     */
+    async function handleAdminClick(action) {
+        const dealId = document.getElementById('admin-deal-id').value;
+        if (!dealId) {
+            showError(adminStatus, 'Please enter a Deal ID.');
+            return;
+        }
+
+        showStatus(adminStatus, 'Processing action...');
+        const formData = new FormData();
+        formData.append('action', action);
+        formData.append('deal_id', dealId);
+
+        try {
+            const response = await fetch(workerUrl, { method: 'POST', body: formData });
+            const result = await response.json();
+            if (!response.ok) throw new Error(result.error || `Server responded with status ${response.status}`);
+
+            showSuccess(adminStatus, result.message);
+        } catch (error) {
+            showError(adminStatus, error.message);
+        }
+    }
+
+    
+    // --- UI HELPER FUNCTIONS ---
 
-    // --- MODAL & UI FUNCTIONS ---
+    /**
+     * Populates and opens the deal information modal.
+     */
+    function openDealInfoModal(dealData) {
+        document.getElementById('modal-deal-id').textContent = dealData.deal_id;
+        document.getElementById('modal-owner-name').textContent = dealData.owner_name;
+        document.getElementById('modal-contact-email').textContent = dealData.contact_email;
+        document.getElementById('modal-contact-phone').textContent = dealData.contact_phone || 'N/A';
+        document.getElementById('modal-year-built').textContent = dealData.year_built || 'N/A';
+        document.getElementById('modal-gross-tonnage').textContent = dealData.gross_tonnage || 'N/A';
+        document.getElementById('modal-token-amount').textContent = dealData.token_amount;
+        document.getElementById('modal-vessel-description').textContent = dealData.vessel_description || 'No description provided.';
+        
+        const statusBadge = document.getElementById('modal-status-badge');
+        statusBadge.textContent = dealData.status;
+        statusBadge.className = `badge ${dealData.status}`;
+        
+        dealModal.classList.remove('hidden');
+    }
+
+    /**
+     * Hides a modal element.
+     */
     function closeModal(modalElement) {
         modalElement.classList.add('hidden');
     }
-
+    
+    /**
+     * Displays a generic status message.
+     */
     function showStatus(element, message) {
         element.className = 'status';
-        element.textContent = message;
+        element.innerHTML = message;
         element.style.display = 'block';
     }
 
+    /**
+     * Displays a success message.
+     */
     function showSuccess(element, message) {
         element.className = 'status success';
-        element.innerHTML = `<strong>${message}</strong>`; // Use innerHTML to render bold tag
+        element.innerHTML = `<strong>${message}</strong>`;
         element.style.display = 'block';
     }
 
+    /**
+     * Displays an error message.
+     */
     function showError(element, message) {
         element.className = 'status error';
         element.innerHTML = `<strong>Error:</strong> ${message}`;
         element.style.display = 'block';
     }
-    
-    // --- The openModal function for the deal lookup remains the same ---
-    function openModal(dealData) {
-        // ... (existing code to populate deal info modal)
-        dealModal.classList.remove('hidden');
-    }
 });