refactor: ETA templating engine for dashboard, shared nav/head/foot partials

2026-03-16 15:14:26 +04:00
parent 389c88e124
commit e36c239000
9 changed files with 724 additions and 10 deletions
@@ -0,0 +1,88 @@
+<%~ include('./partials/head', { title: 'New Monitor' }) %>
+<%~ include('./partials/nav', { nav: 'monitors' }) %>
+
+<main class="max-w-2xl mx-auto px-6 py-8">
+    <div class="mb-6">
+      <a href="/dashboard/home" class="text-sm text-gray-500 hover:text-gray-300 transition-colors">&larr; Back to monitors</a>
+      <h2 class="text-lg font-semibold text-gray-200 mt-2">Create Monitor</h2>
+    </div>
+
+    <form id="create-form" class="space-y-6">
+      <div>
+        <label class="block text-sm text-gray-400 mb-1.5">Name</label>
+        <input id="name" type="text" required placeholder="Production API"
+          class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500">
+      </div>
+
+      <div>
+        <label class="block text-sm text-gray-400 mb-1.5">URL</label>
+        <input id="url" type="url" required placeholder="https://api.example.com/health"
+          class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500">
+      </div>
+
+      <div>
+        <label class="block text-sm text-gray-400 mb-1.5">Ping Interval</label>
+        <select id="interval"
+          class="w-full bg-gray-900 border border-gray-800 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" selected>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>
+        <label class="block text-sm text-gray-400 mb-1.5">Query Conditions <span class="text-gray-600">(optional)</span></label>
+        <p class="text-xs text-gray-600 mb-3">Define when this monitor should be considered "up". Defaults to status &lt; 400.</p>
+        <div id="query-builder"></div>
+      </div>
+
+      <div id="form-error" class="text-red-400 text-sm hidden"></div>
+
+      <button type="submit" id="submit-btn"
+        class="w-full bg-blue-600 hover:bg-blue-500 text-white font-medium py-3 rounded-lg transition-colors">
+        Create Monitor
+      </button>
+    </form>
+  </main>
+
+  <script>
+    if (!requireAuth()) throw 'auth';
+
+    let currentQuery = null;
+    const qb = new QueryBuilder(document.getElementById('query-builder'), (q) => {
+      currentQuery = q;
+    });
+
+    document.getElementById('create-form').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const btn = document.getElementById('submit-btn');
+      const errEl = document.getElementById('form-error');
+      errEl.classList.add('hidden');
+      btn.disabled = true;
+      btn.textContent = 'Creating...';
+
+      try {
+        const body = {
+          name: document.getElementById('name').value.trim(),
+          url: document.getElementById('url').value.trim(),
+          interval_s: Number(document.getElementById('interval').value),
+        };
+        if (currentQuery) body.query = currentQuery;
+
+        await api('/monitors/', { method: 'POST', body });
+        window.location.href = '/dashboard/home';
+      } catch (err) {
+        errEl.textContent = err.message;
+        errEl.classList.remove('hidden');
+      } finally {
+        btn.disabled = false;
+        btn.textContent = 'Create Monitor';
+      }
+    });
+  </script>
+
+<%~ include('./partials/foot') %>