Messages wrapped up.

packetserver/http/templates/base.html

@@ -40,7 +40,7 @@
                 </div>
                 <div class="modal-body">
                     <div class="mb-3">
-                        <label for="to_call" class="form-label">To (callsign)</label>
+                        <label for="to_call" class="form-label">To (comma-separated callsigns, or ALL for bulletin)</label>
                         <input type="text" class="form-control" id="to_call" name="to_call" required>
                     </div>
                     <div class="mb-3">
@@ -59,59 +59,81 @@
 </div>
 
 <script>
-    document.getElementById('composeForm')?.addEventListener('submit', async function(e) {
+    const composeForm = document.getElementById('composeForm');
-        e.preventDefault();
+    if (composeForm) {
-        const status = document.getElementById('composeStatus');
+        composeForm.addEventListener('submit', async function(e) {
-        status.style.display = 'none';
+            e.preventDefault();
-        status.className = 'alert';
+            const status = document.getElementById('composeStatus');
+            status.style.display = 'none';
+            status.className = 'alert';
 
-        const to_call = document.getElementById('to_call').value.trim();
+            const toInput = document.getElementById('to_call').value.trim();  // keep ID for compatibility
-        const text = document.getElementById('message_text').value.trim();
+            const text = document.getElementById('message_text').value.trim();
 
-        if (!to_call || !text) {
+            if (!toInput || !text) {
-            status.className = 'alert alert-danger';
-            status.textContent = 'Both To and Message fields are required.';
-            status.style.display = 'block';
-            return;
-        }
-
-        try {
-            const response = await fetch('/api/v1/messages', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    to_call: to_call,
-                    text: text
-                }),
-                credentials: 'include'  // sends Basic Auth
-            });
-
-            if (response.ok) {
-                const result = await response.json();
-                status.className = 'alert alert-success';
-                status.textContent = 'Message sent successfully!';
-                status.style.display = 'block';
-                this.reset();
-                // Auto-close modal and refresh page to show new message
-                setTimeout(() => {
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('composeModal'));
-                    if (modal) modal.hide();
-                }, 1000);
-                setTimeout(() => location.reload(), 1500);
-            } else {
-                const errorData = await response.json();
                 status.className = 'alert alert-danger';
-                status.textContent = errorData.detail || 'Failed to send message';
+                status.textContent = 'To and Message fields are required.';
+                status.style.display = 'block';
+                return;
+            }
+
+            // Split comma-separated, strip, uppercase, filter empty
+            const toList = toInput.split(',')
+                                  .map(c => c.trim().toUpperCase())
+                                  .filter(c => c.length > 0);
+
+            if (toList.length === 0) {
+                status.className = 'alert alert-danger';
+                status.textContent = 'At least one valid callsign required.';
+                status.style.display = 'block';
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/v1/messages', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        to: toList,      // <-- array of callsigns
+                        text: text       // <-- body
+                    }),
+                    credentials: 'include'
+                });
+
+                if (response.ok) {
+                    status.className = 'alert alert-success';
+                    status.textContent = 'Message sent successfully!';
+                    status.style.display = 'block';
+                    composeForm.reset();
+                    setTimeout(() => {
+                        const modal = bootstrap.Modal.getInstance(document.getElementById('composeModal'));
+                        if (modal) modal.hide();
+                    }, 1200);
+                    setTimeout(() => location.reload(), 1700);
+                } else {
+                    const errorData = await response.json();
+                    let errorMsg = 'Failed to send message';
+                    if (errorData.detail) {
+                        if (Array.isArray(errorData.detail)) {
+                            errorMsg = errorData.detail.map(d => d.msg || d).join('; ');
+                        } else {
+                            errorMsg = errorData.detail;
+                        }
+                    }
+                    status.className = 'alert alert-danger';
+                    status.textContent = errorMsg;
+                    status.style.display = 'block';
+                }
+            } catch (err) {
+                console.error(err);
+                status.className = 'alert alert-danger';
+                status.textContent = 'Network error';
                 status.style.display = 'block';
             }
-        } catch (err) {
+        });
-            status.className = 'alert alert-danger';
+    }
-            status.textContent = 'Network error – check connection';
-            status.style.display = 'block';
-        }
-    });
 </script>
 </body>
 </html>

packetserver/http/templates/message_detail.html

@@ -35,6 +35,6 @@
 <pre class="bg-light p-3 border">{{ message.text }}</pre>
 
 <p class="nav-links">
-    <a href="/dashboard">← Back to Dashboard</a>
+    <a href="/messages">← Back to Messages</a>
 </p>
 {% endblock %}