Adds initial ajax call to agents api

app/templates/agent-list.php

@@ -6,7 +6,10 @@
 <?php foreach ($agentDetails as $agent) { ?>
                         <p class="card-text">
                             agent id<?= htmlspecialchars($agent['id']) ?>: type <?= htmlspecialchars($agent['agent_type_id']) ?>, url <?= htmlspecialchars($agent['url']) ?>
-
+                            <button onclick="fetchData()">fetch data</button>
+                            <button onclick="fetchData(true)">force refresh</button>
                         </p>
+                        <p>Result:</p>
+                        <pre id="result">click a button to fetch data from the agent.</pre>
 
 <?php } ?>

app/templates/page-header.php

@@ -23,6 +23,9 @@
             }
         })();
     </script>
+<?php if ($page === 'agents') { ?>
+    <script src="<?= $app_root ?>static/agents.js"></script>
+<?php } ?>
     <title>Jilo Web</title>
     <link rel="icon" type="image/x-icon" href="<?= $app_root ?>static/favicon.ico">
 </head>

public_html/static/agents.js

@@ -0,0 +1,20 @@
+function fetchData(force = false) {
+    // Show loading text
+    document.getElementById("result").innerHTML = "Loading...";
+
+    // Create an AJAX request
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "index.php?page=agents", true);
+    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            // Parse and display the result
+            let result = JSON.parse(xhr.responseText);
+            document.getElementById("result").innerHTML = JSON.stringify(result, null, 2);
+        }
+    };
+
+    // Send the AJAX request, with force flag
+    xhr.send("action=fetch&force=" + (force ? 'true' : 'false'));
+}