From a681833d8dc89204cca8ee5f3078c187394a9778 Mon Sep 17 00:00:00 2001
From: M1 <m1-pro@M1s-MacBook-Pro.local>
Date: Mon, 16 Mar 2026 17:04:30 +0400
Subject: [PATCH] feat: detail edit form matches new monitor form (method,
 headers, body, timeout)

---
 apps/web/src/views/detail.ejs | 130 ++++++++++++++++++++++++++++------
 1 file changed, 108 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/views/detail.ejs b/apps/web/src/views/detail.ejs
index f6e6883..f385b71 100644
--- a/apps/web/src/views/detail.ejs
+++ b/apps/web/src/views/detail.ejs
@@ -79,33 +79,71 @@
       <!-- Edit form -->
       <div class="bg-gray-900 border border-gray-800 rounded-xl p-6">
         <h3 class="text-sm text-gray-400 mb-4">Edit Monitor</h3>
-        <form id="edit-form" class="space-y-4">
-          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <div>
-              <label class="block text-xs text-gray-500 mb-1">Name</label>
-              <input id="edit-name" type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm">
-            </div>
-            <div>
-              <label class="block text-xs text-gray-500 mb-1">URL</label>
-              <input id="edit-url" type="url" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm">
+        <form id="edit-form" class="space-y-5">
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1.5">Name</label>
+            <input id="edit-name" type="text"
+              class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1.5">URL</label>
+            <div class="flex gap-2">
+              <select id="edit-method"
+                class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500 font-mono text-sm">
+                <option>GET</option><option>POST</option><option>PUT</option>
+                <option>PATCH</option><option>DELETE</option><option>HEAD</option><option>OPTIONS</option>
+              </select>
+              <input id="edit-url" type="url"
+                class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
             </div>
           </div>
+
           <div>
-            <label class="block text-xs text-gray-500 mb-1">Interval</label>
-            <select id="edit-interval" class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm">
-              <option value="10">10s</option>
-              <option value="30">30s</option>
-              <option value="60">1m</option>
-              <option value="300">5m</option>
-              <option value="600">10m</option>
-              <option value="1800">30m</option>
-              <option value="3600">1h</option>
-            </select>
+            <div class="flex items-center justify-between mb-1.5">
+              <label class="text-sm text-gray-400">Headers <span class="text-gray-600">(optional)</span></label>
+              <button type="button" id="edit-add-header" class="text-xs text-blue-400 hover:text-blue-300 transition-colors">+ Add header</button>
+            </div>
+            <div id="edit-headers-list" class="space-y-2"></div>
           </div>
+
+          <div id="edit-body-section" class="hidden">
+            <label class="block text-sm text-gray-400 mb-1.5">Request Body <span class="text-gray-600">(optional)</span></label>
+            <textarea id="edit-request-body" rows="4" placeholder='{"key": "value"}'
+              class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 font-mono text-sm resize-y"></textarea>
+          </div>
+
+          <div class="flex gap-4">
+            <div class="flex-1">
+              <label class="block text-sm text-gray-400 mb-1.5">Interval</label>
+              <select id="edit-interval" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
+                <option value="10">10 seconds</option>
+                <option value="30">30 seconds</option>
+                <option value="60">1 minute</option>
+                <option value="300">5 minutes</option>
+                <option value="600">10 minutes</option>
+                <option value="1800">30 minutes</option>
+                <option value="3600">1 hour</option>
+              </select>
+            </div>
+            <div class="flex-1">
+              <label class="block text-sm text-gray-400 mb-1.5">Timeout</label>
+              <select id="edit-timeout" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
+                <option value="5000">5 seconds</option>
+                <option value="10000">10 seconds</option>
+                <option value="30000">30 seconds</option>
+                <option value="60000">60 seconds</option>
+              </select>
+            </div>
+          </div>
+
           <div>
-            <label class="block text-xs text-gray-500 mb-1">Query</label>
+            <label class="block text-sm text-gray-400 mb-1.5">Conditions <span class="text-gray-600">(optional)</span></label>
+            <p class="text-xs text-gray-600 mb-3">Define up/down conditions. Defaults to status &lt; 400.</p>
             <div id="edit-query-builder"></div>
           </div>
+
           <div id="edit-error" class="text-red-400 text-sm hidden"></div>
           <button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium px-6 py-2.5 rounded-lg transition-colors">Save Changes</button>
         </form>
@@ -123,6 +161,30 @@
       editQuery = q;
     });
 
+    // Method/body visibility
+    const editMethod = document.getElementById('edit-method');
+    const editBodySection = document.getElementById('edit-body-section');
+    function updateEditBodyVisibility() {
+      editBodySection.classList.toggle('hidden', ['GET','HEAD','OPTIONS'].includes(editMethod.value));
+    }
+    editMethod.addEventListener('change', updateEditBodyVisibility);
+
+    // Dynamic headers
+    document.getElementById('edit-add-header').addEventListener('click', () => {
+      addHeaderRow(document.getElementById('edit-headers-list'));
+    });
+
+    function addHeaderRow(container, key='', value='') {
+      const row = document.createElement('div');
+      row.className = 'header-row flex gap-2';
+      row.innerHTML = `
+        <input type="text" value="${escapeHtml(key)}" placeholder="Header name" class="hk flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
+        <input type="text" value="${escapeHtml(value)}" placeholder="Value" class="hv flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 text-sm">
+        <button type="button" onclick="this.parentElement.remove()" class="px-2 text-gray-600 hover:text-red-400 transition-colors text-sm">✕</button>
+      `;
+      container.appendChild(row);
+    }
+
     async function load() {
       try {
         const data = await api(`/monitors/${monitorId}`);
@@ -190,7 +252,18 @@
         // Edit form
         document.getElementById('edit-name').value = data.name;
         document.getElementById('edit-url').value = data.url;
+        document.getElementById('edit-method').value = data.method || 'GET';
         document.getElementById('edit-interval').value = String(data.interval_s);
+        document.getElementById('edit-timeout').value = String(data.timeout_ms || 30000);
+        document.getElementById('edit-request-body').value = data.request_body || '';
+        updateEditBodyVisibility();
+
+        const headersList = document.getElementById('edit-headers-list');
+        headersList.innerHTML = '';
+        if (data.request_headers && typeof data.request_headers === 'object') {
+          Object.entries(data.request_headers).forEach(([k, v]) => addHeaderRow(headersList, k, v));
+        }
+
         editQuery = data.query;
         editQb.setQuery(data.query);
       } catch (e) {
@@ -252,11 +325,24 @@
       const errEl = document.getElementById('edit-error');
       errEl.classList.add('hidden');
       try {
+        const headers = {};
+        document.querySelectorAll('#edit-headers-list .header-row').forEach(row => {
+          const k = row.querySelector('.hk').value.trim();
+          const v = row.querySelector('.hv').value.trim();
+          if (k) headers[k] = v;
+        });
+
         const body = {
-          name: document.getElementById('edit-name').value.trim(),
-          url: document.getElementById('edit-url').value.trim(),
+          name:       document.getElementById('edit-name').value.trim(),
+          url:        document.getElementById('edit-url').value.trim(),
+          method:     document.getElementById('edit-method').value,
           interval_s: Number(document.getElementById('edit-interval').value),
+          timeout_ms: Number(document.getElementById('edit-timeout').value),
         };
+        if (Object.keys(headers).length) body.request_headers = headers;
+        else body.request_headers = null;
+        const rb = document.getElementById('edit-request-body').value.trim();
+        body.request_body = rb || null;
         if (editQuery) body.query = editQuery;
         await api(`/monitors/${monitorId}`, { method: 'PATCH', body });
         load();