openleaf/viewer.html at master · Horizon-Digital-Engineering/openleaf · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>OpenLeaf Viewer</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 2rem;
        background: #111;
        color: #eee;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
      }
      .card {
        border: 1px solid #444;
        border-radius: 0.5rem;
        padding: 1rem;
        background: #1c1c1c;
      }
      button {
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        background: #28a745;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h1>OpenLeaf Live State</h1>
    <div class="grid" id="stateGrid"></div>
    <div style="margin-top: 2rem">
      <button id="clearBtn">Clear DTCs</button>
    </div>

    <script>
      async function fetchState() {
        try {
          const res = await fetch('/state');
          const data = await res.json();
          const grid = document.getElementById('stateGrid');
          grid.innerHTML = '';
          Object.entries(data).forEach(([key, value]) => {
            const card = document.createElement('div');
            card.className = 'card';
            card.innerHTML = `<h3>${key}</h3><p>${value}</p>`;
            grid.appendChild(card);
          });
        } catch (err) {
          console.error('Failed to fetch state', err);
        }
      }

      async function clearDtcs() {
        try {
          const res = await fetch('/command/clear_dtcs', { method: 'POST' });
          const data = await res.json();
          alert(`Command status: ${data.status}`);
        } catch (err) {
          alert('Failed to send command');
        }
      }

      document.getElementById('clearBtn').addEventListener('click', clearDtcs);
      setInterval(fetchState, 500);
      fetchState();
    </script>
  </body>
</html>