Update script.js

script.js

@@ -1,58 +1,133 @@
 document.addEventListener('DOMContentLoaded', () => {
     // --- CONFIGURATION ---
-    const workerUrl = 'https://form-handler-worker.aiagents.workers.dev/'; // IMPORTANT: Make sure this is your correct worker URL
+    const workerUrl = 'https://your-worker-url.workers.dev/'; // IMPORTANT: Use your correct worker URL
 
-    // --- ELEMENT SELECTION ---
-    const form = document.getElementById('vessel-exchange-form');
-    const submitButton = document.getElementById('submit-button');
-    const statusMessage = document.getElementById('status-message');
+    // --- ELEMENT SELECTIONS ---
+    const submissionForm = document.getElementById('vessel-exchange-form');
+    const lookupForm = document.getElementById('deal-lookup-form');
+    const adminForm = document.getElementById('admin-action-form');
+    
+    const submissionStatus = document.getElementById('status-message');
+    const adminStatus = document.getElementById('admin-status-message');
 
-    // --- EVENT LISTENER ---
-    form.addEventListener('submit', async (event) => {
-        event.preventDefault(); // Stop the default form submission which causes a page reload
-        
-        // Provide immediate user feedback
-        submitButton.disabled = true;
-        statusMessage.className = 'status'; // Reset classes
-        statusMessage.textContent = 'Submitting...';
-        statusMessage.style.display = 'block';
+    const modal = document.getElementById('deal-modal');
+    
+    // --- EVENT LISTENERS ---
 
-        try {
-            const formData = new FormData(form);
-            const response = await fetch(workerUrl, {
-                method: 'POST',
-                body: formData
-            });
+    // 1. Handle New Deal Submissions
+    if (submissionForm) {
+        submissionForm.addEventListener('submit', handleFormSubmit);
+    }
 
-            // Get the raw text from the response to analyze it
-            const responseText = await response.text();
+    // 2. Handle Deal Status Lookups
+    if (lookupForm) {
+        lookupForm.addEventListener('submit', handleLookupSubmit);
+    }
 
-            if (!response.ok) {
-                // If the response is not successful, throw an error with the text from the worker
-                throw new Error(responseText);
-            }
+    // 3. Handle Admin Actions
+    if (adminForm) {
+        document.getElementById('admin-approve-button').addEventListener('click', () => handleAdminClick('approve'));
+        document.getElementById('admin-decline-button').addEventListener('click', () => handleAdminClick('decline'));
+    }
+
+    // 4. Handle Modal Closing
+    if (modal) {
+        document.getElementById('modal-close-button').addEventListener('click', closeModal);
+        modal.addEventListener('click', (event) => {
+            if (event.target === modal) closeModal();
+        });
+    }
 
-            // If we are here, the response was successful
-            const result = JSON.parse(responseText);
-            showSuccess(result.deal_id);
-            form.reset();
+    // --- HANDLER FUNCTIONS ---
 
+    async function handleFormSubmit(event) {
+        event.preventDefault();
+        const submitButton = document.getElementById('submit-button');
+        submitButton.disabled = true;
+        submissionStatus.className = 'status';
+        submissionStatus.textContent = 'Submitting...';
+        submissionStatus.style.display = 'block';
+        
+        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}`);
+            
+            showSuccess(submissionStatus, `Success! Your Deal ID is: ${result.deal_id}`);
+            submissionForm.reset();
         } catch (error) {
-            showError(error.message);
+            showError(submissionStatus, error.message);
         } finally {
-            // Re-enable the button whether the submission succeeded or failed
             submitButton.disabled = false;
         }
-    });
+    }
+
+    async function handleLookupSubmit(event) {
+        event.preventDefault();
+        const dealId = document.getElementById('lookup-deal-id').value;
+        if (!dealId) return;
+
+        try {
+            const response = await fetch(`${workerUrl}?deal_id=${dealId}`, { method: 'GET' });
+            const result = await response.json();
+            if (!response.ok) throw new Error(result.error || 'Failed to fetch deal.');
+            
+            openModal(result);
+        } catch (error) {
+            alert(`Error: ${error.message}`);
+        }
+    }
+
+    async function handleAdminClick(action) {
+        const dealId = document.getElementById('admin-deal-id').value;
+        if (!dealId) {
+            showError(adminStatus, 'Please enter a Deal ID.');
+            return;
+        }
+
+        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);
+        }
+    }
+
+    // --- MODAL & UI FUNCTIONS ---
+
+    function openModal(dealData) {
+        document.getElementById('modal-deal-id').textContent = dealData.deal_id;
+        document.getElementById('modal-owner-name').textContent = dealData.owner_name;
+        document.getElementById('modal-token-amount').textContent = dealData.token_amount;
+        
+        const statusBadge = document.getElementById('modal-status-badge');
+        statusBadge.textContent = dealData.status;
+        statusBadge.className = `badge ${dealData.status}`; // e.g., "badge accepted"
+        
+        modal.classList.remove('hidden');
+    }
+
+    function closeModal() {
+        modal.classList.add('hidden');
+    }
 
-    // --- UI HELPER FUNCTIONS ---
-    function showSuccess(dealId) {
-        statusMessage.className = 'status success';
-        statusMessage.innerHTML = `<strong>Success!</strong> Your request has been submitted.<br>Your Unique Deal ID is: <strong>${dealId}</strong>`;
+    function showSuccess(element, message) {
+        element.className = 'status success';
+        element.textContent = message;
+        element.style.display = 'block';
     }
 
-    function showError(message) {
-        statusMessage.className = 'status error';
-        statusMessage.innerHTML = `<strong>Error:</strong> ${message}`;
+    function showError(element, message) {
+        element.className = 'status error';
+        element.textContent = `Error: ${message}`;
+        element.style.display = 'block';
     }
 });