diff --git a/js/alx911.js b/js/alx911.js index 660585d..994a360 100644 --- a/js/alx911.js +++ b/js/alx911.js @@ -1,4 +1,7 @@ (() => { + // --- API Configuration --- + const API_BASE_URL = 'https://alx911-api.danielmorrisey.com'; + let nextCursor = null; // Elements @@ -24,6 +27,8 @@ const setupDropzone = (dropzoneId, inputId) => { const dropzone = document.getElementById(dropzoneId); const input = document.getElementById(inputId); + if (!dropzone || !input) return; + const label = dropzone.querySelector('.file-label'); input.addEventListener('change', () => { @@ -54,6 +59,18 @@ setupDropzone('audio-dropzone', 'audio'); setupDropzone('video-dropzone', 'video'); + const escapeHtml = (str) => { + return str.replace(/[&<>"']/g, (m) => { + return { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''' + }[m]; + }); + }; + // Render HTML for a Single Call Card const createCallCard = (call) => { const card = document.createElement('div'); @@ -64,11 +81,14 @@ timeStyle: 'short' }); + const audioUrl = `${API_BASE_URL}${call.audioUrl}`; + const videoUrl = call.videoUrl ? `${API_BASE_URL}${call.videoUrl}` : null; + let videoHtml = ''; - if (call.videoUrl) { + if (videoUrl) { videoHtml = ` `; @@ -82,7 +102,7 @@ ${call.description ? `
${escapeHtml(call.description)}
` : ''}
${videoHtml} @@ -92,22 +112,10 @@ return card; }; - const escapeHtml = (str) => { - return str.replace(/[&<>"']/g, (m) => { - return { - '&': '&', - '<': '<', - '>': '>', - '"': '"', - "'": ''' - }[m]; - }); - }; - // API: Fetch Calls List const fetchCalls = async (cursor = null) => { try { - const url = new URL('https://alx911-api.danielmorrisey.com/api/calls', window.location.origin); + const url = new URL(`${API_BASE_URL}/api/calls`); if (cursor) url.searchParams.set('cursor', cursor); const res = await fetch(url.toString()); @@ -143,49 +151,53 @@ } }; -// API: Form Submit Handler - form.addEventListener('submit', async (e) => { - e.preventDefault(); - hideAlert(); - - const formData = new FormData(form); - - submitBtn.disabled = true; - submitBtn.innerHTML = ' Uploading...'; - - try { - const res = await fetch(`${API_BASE_URL}/api/calls`, { - method: 'POST', - body: formData - }); - - const result = await res.json(); - - if (!res.ok) { - throw new Error(result.error || 'Failed to submit recording.'); + // API: Form Submit Handler + if (form) { + form.addEventListener('submit', async (e) => { + e.preventDefault(); + hideAlert(); + + const formData = new FormData(form); + + submitBtn.disabled = true; + submitBtn.innerHTML = ' Uploading...'; + + try { + const res = await fetch(`${API_BASE_URL}/api/calls`, { + method: 'POST', + body: formData + }); + + const result = await res.json(); + + if (!res.ok) { + throw new Error(result.error || 'Failed to submit recording.'); + } + + showAlert('Record successfully submitted!', 'success'); + form.reset(); + document.querySelector('#audio-dropzone .file-label').textContent = 'Choose or drag audio file'; + document.querySelector('#video-dropzone .file-label').textContent = 'Choose or drag video file'; + + // Refresh call feed instantly + fetchCalls(); + } catch (err) { + showAlert(err.message || 'An error occurred while uploading.'); + } finally { + submitBtn.disabled = false; + submitBtn.innerHTML = ' Submit Record'; } - - showAlert('Record successfully submitted!', 'success'); - form.reset(); - document.querySelector('#audio-dropzone .file-label').textContent = 'Choose or drag audio file'; - document.querySelector('#video-dropzone .file-label').textContent = 'Choose or drag video file'; - - // Refresh call feed instantly - fetchCalls(); - } catch (err) { - showAlert(err.message || 'An error occurred while uploading.'); - } finally { - submitBtn.disabled = false; - submitBtn.innerHTML = ' Submit Record'; - } - }); + }); + } // Pagination Load More - loadMoreBtn.addEventListener('click', () => { - if (nextCursor) { - fetchCalls(nextCursor); - } - }); + if (loadMoreBtn) { + loadMoreBtn.addEventListener('click', () => { + if (nextCursor) { + fetchCalls(nextCursor); + } + }); + } // Initial Load fetchCalls();