signalk-automation-plugin 0.0.1

package/public/app.js

@@ -0,0 +1,155 @@
+const PLUGIN = 'signalk-automation-plugin'
+const API_READ = '/signalk/v1/api/' + PLUGIN
+const API_WRITE = '/plugins/' + PLUGIN
+
+async function getJson (url) {
+  const res = await fetch(url, { credentials: 'same-origin' })
+  const text = await res.text()
+  let data = {}
+  try { data = text ? JSON.parse(text) : {} } catch (_) { data = { error: text } }
+  if (!res.ok) throw new Error(data.error || res.status + ' ' + url)
+  return data
+}
+
+async function sendJson (url, method, body) {
+  const res = await fetch(url, {
+    method,
+    credentials: 'same-origin',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body || {})
+  })
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) throw new Error(data.error || res.status + ' ' + url)
+  return data
+}
+
+function el (id) { return document.getElementById(id) }
+
+function badge (result) {
+  const r = result || '—'
+  return '<span class="badge ' + (result || '') + '">' + r + '</span>'
+}
+
+function fmtTime (iso) {
+  if (!iso) return ''
+  try { return new Date(iso).toLocaleString() } catch (_) { return iso }
+}
+
+let status = null
+
+async function load () {
+  status = await getJson(API_READ + '/status')
+  render()
+}
+
+function render () {
+  const sha = status.activeSha ? status.activeSha.slice(0, 8) : 'working tree / empty'
+  el('shaLine').textContent =
+    (status.started ? 'Running' : 'Not started') +
+    ' · live ' + sha +
+    (status.automationsDir ? ' · repo ' + status.automationsDir : '')
+  if (status.errors && status.errors.length) {
+    el('shaLine').innerHTML +=
+      '<div class="error">' +
+      status.errors.map((e) => e.file + ': ' + e.message).join('<br>') +
+      '</div>'
+  }
+
+  el('autos').innerHTML = (status.automations || []).map((a) => {
+    const last = a.lastRun || {}
+    return (
+      '<div class="card">' +
+        '<div class="row">' +
+          '<div><div class="name">' + escapeHtml(a.alias) + '</div>' +
+          '<div class="muted">' + escapeHtml(a.id) + ' · ' + fmtTime(last.ts) + '</div></div>' +
+          '<div class="row">' +
+            badge(last.result) +
+            '<label class="muted"><input type="checkbox" data-toggle="' + escapeHtml(a.id) + '"' +
+              (a.enabled ? ' checked' : '') + '> on</label>' +
+            '<button data-traces="' + escapeHtml(a.id) + '" data-alias="' + escapeHtml(a.alias) + '">runs</button>' +
+          '</div>' +
+        '</div>' +
+      '</div>'
+    )
+  }).join('') || '<p class="hint">No automations loaded. Set automationsDir and activate a commit.</p>'
+
+  el('helpers').innerHTML = (status.helpers || []).map((h) => {
+    const mode = h.on_start === 'restore' ? 'survive reboot' : h.on_start === 'default' ? 'default on start' : 'nothing'
+    const val = h.set ? JSON.stringify(h.value) : 'unset'
+    return (
+      '<div class="card"><div class="row">' +
+        '<div><div class="name">' + escapeHtml(h.name) + '</div>' +
+        '<div class="muted">' + escapeHtml(h.id) + ' · ' + mode + ' · ' + escapeHtml(val) + '</div></div>' +
+        '<button data-reset="' + escapeHtml(h.id) + '">reset default</button>' +
+      '</div></div>'
+    )
+  }).join('') || '<p class="hint">No helpers in live YAML.</p>'
+
+  el('yaml').textContent = status.yaml || '# no live YAML'
+  el('commits').innerHTML = (status.commits || []).map((c) => {
+    const live = status.activeSha && c.sha === status.activeSha
+    return (
+      '<div class="card"><div class="row">' +
+        '<div><div class="name">' + escapeHtml(c.subject || '') + '</div>' +
+        '<div class="muted">' + escapeHtml(c.sha.slice(0, 10)) + ' · ' + escapeHtml(c.date || '') +
+        (live ? ' · live' : '') + '</div></div>' +
+        (live ? '' : '<button class="primary" data-sha="' + escapeHtml(c.sha) + '">make live</button>') +
+      '</div></div>'
+    )
+  }).join('') || '<p class="hint">automationsDir is not a git repo (or git is missing in the container).</p>'
+
+  bind()
+}
+
+function bind () {
+  document.querySelectorAll('[data-toggle]').forEach((box) => {
+    box.addEventListener('change', async () => {
+      await sendJson(API_WRITE + '/automations/' + box.getAttribute('data-toggle') + '/enabled', 'POST', {
+        enabled: box.checked
+      })
+      await load()
+    })
+  })
+  document.querySelectorAll('[data-traces]').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const id = btn.getAttribute('data-traces')
+      const data = await getJson(API_READ + '/automations/' + encodeURIComponent(id) + '/traces')
+      el('detail').hidden = false
+      el('detailTitle').textContent = 'Runs — ' + btn.getAttribute('data-alias')
+      el('traces').innerHTML = (data.traces || []).map((t) => {
+        return (
+          '<div class="card">' +
+            badge(t.result) + ' <span class="muted">' + fmtTime(t.ts) + '</span>' +
+            (t.reason ? '<div class="muted">' + escapeHtml(t.reason) + '</div>' : '') +
+            '<pre class="trace">' + escapeHtml(JSON.stringify(t, null, 2)) + '</pre>' +
+          '</div>'
+        )
+      }).join('') || '<p class="hint">No runs yet.</p>'
+      el('detail').scrollIntoView({ behavior: 'smooth' })
+    })
+  })
+  document.querySelectorAll('[data-sha]').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      await sendJson(API_WRITE + '/live', 'POST', { sha: btn.getAttribute('data-sha') })
+      await load()
+    })
+  })
+  document.querySelectorAll('[data-reset]').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      await sendJson(API_WRITE + '/helpers/' + btn.getAttribute('data-reset') + '/reset', 'POST', {})
+      await load()
+    })
+  })
+}
+
+function escapeHtml (s) {
+  return String(s == null ? '' : s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+load().catch((err) => {
+  el('shaLine').innerHTML = '<span class="error">' + escapeHtml(err.message) + '</span>'
+})

package/public/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Signal K Automations</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Automations</h1>
+      <p class="meta" id="shaLine">Loading…</p>
+    </header>
+    <main>
+      <section>
+        <h2>Automations</h2>
+        <div id="autos"></div>
+      </section>
+      <section>
+        <h2>Helpers</h2>
+        <div id="helpers"></div>
+      </section>
+      <section>
+        <h2>Live YAML</h2>
+        <pre id="yaml" class="yaml"></pre>
+      </section>
+      <section>
+        <h2>Git commits</h2>
+        <p class="hint">Activate a commit to copy that tree into plugin data and reload. Invalid YAML is rejected; the previous live snapshot stays.</p>
+        <div id="commits"></div>
+      </section>
+      <section id="detail" hidden>
+        <h2 id="detailTitle">Runs</h2>
+        <div id="traces"></div>
+      </section>
+    </main>
+    <script src="app.js"></script>
+  </body>
+</html>

package/public/style.css

@@ -0,0 +1,70 @@
+:root {
+  color-scheme: dark;
+  --bg: #11161c;
+  --card: #1b222b;
+  --border: #2c3642;
+  --text: #e8eef4;
+  --muted: #93a1b0;
+  --ok: #3dba7a;
+  --fail: #e15b5b;
+  --skip: #c9a227;
+  --accent: #4d8fd6;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+header, main { max-width: 960px; margin: 0 auto; padding: 1rem 1.2rem; }
+h1 { margin: 0 0 0.25rem; font-size: 1.4rem; }
+h2 { font-size: 1.05rem; margin: 1.4rem 0 0.6rem; }
+.meta, .hint, .muted { color: var(--muted); font-size: 0.9rem; }
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.75rem 0.9rem;
+  margin-bottom: 0.5rem;
+}
+.row { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
+.name { font-weight: 600; }
+.badge {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 0.15rem 0.45rem;
+  border-radius: 4px;
+  background: #2a3340;
+}
+.badge.ok { background: #1d3b2c; color: var(--ok); }
+.badge.failure { background: #3b1d1d; color: var(--fail); }
+.badge.skipped { background: #3b341d; color: var(--skip); }
+button, .toggle {
+  background: #243040;
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.3rem 0.6rem;
+  cursor: pointer;
+}
+button.primary { background: var(--accent); border-color: var(--accent); color: #071018; }
+.yaml {
+  background: #0c1015;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.8rem;
+  overflow: auto;
+  max-height: 28rem;
+  font-size: 0.8rem;
+  white-space: pre-wrap;
+}
+.trace {
+  font-family: ui-monospace, monospace;
+  font-size: 0.8rem;
+  white-space: pre-wrap;
+  margin: 0.4rem 0 0;
+  color: #c5d0db;
+}
+.error { color: var(--fail); }