DevSecOps/index.html at main · SunainM/DevSecOps · 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inventory Manager</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background: #f4f6f8;
      }
      h1 {
        text-align: center;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        background: white;
      }
      th,
      td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
      }
      th {
        background: #333;
        color: white;
      }
      button {
        padding: 8px 15px;
        margin: 5px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      .btn-start {
        background: #28a745;
        color: white;
      }
      .btn-stop {
        background: #dc3545;
        color: white;
      }
      #status {
        margin-top: 15px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>📦 Inventory Manager</h1>
    <div style="text-align: center">
      <button class="btn-start" id="btnStart">Start Simulation</button>
      <button class="btn-stop" id="btnStop">Stop Simulation</button>
    </div>
    <div id="status">Simulation stopped.</div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Stock</th>
          <th>Max Threshold</th>
        </tr>
      </thead>
      <tbody id="productTable"></tbody>
    </table>

    <script>
      async function fetchStatus() {
        const res = await fetch("/api/sim/status");
        const data = await res.json();

        // update status line
        const statusEl = document.getElementById("status");
        if (data.running) {
          const t = data.nextRunAt
            ? new Date(data.nextRunAt).toLocaleTimeString()
            : "soon";
          statusEl.textContent = `Simulation running, next tick around ${t}`;
        } else {
          statusEl.textContent = "Simulation stopped.";
        }

        // update table
        const tb = document.getElementById("productTable");
        tb.innerHTML = "";
        data.products.forEach((p) => {
          const row = `<tr><td>${p.id}</td><td>${p.name}</td><td>${p.stock}</td><td>${p.maxThreshold}</td></tr>`;
          tb.insertAdjacentHTML("beforeend", row);
        });
      }

      document.getElementById("btnStart").onclick = async () => {
        await fetch("/api/sim/start", { method: "POST" });
        fetchStatus();
      };
      document.getElementById("btnStop").onclick = async () => {
        await fetch("/api/sim/stop", { method: "POST" });
        fetchStatus();
      };

      // poll status every 3s
      setInterval(fetchStatus, 3000);
      fetchStatus();
    </script>
  </body>
</html>