whx
/
gontrol
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

introduced navbar for execution

This commit is contained in:
Stefan Etringer 2025-06-06 13:42:27 +00:00
parent 90cbe2f396
commit 4fdcd049a7
3 changed files with 63 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/agents-graph.js
View File

@ -43,16 +43,14 @@ function initializeCytoscape() {
// Load the graph after the page has fully loaded // Load the graph after the page has fully loaded
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
console.log('DOMContentLoaded fired.');
initializeCytoscape(); initializeCytoscape();
loadGraphData(); loadGraphData();
document.body.addEventListener('htmx:afterSwap', function (event) { document.body.addEventListener('htmx:afterSwap', function (event) {
console.log('htmx:afterSwap fired.'); if (event.target.id === 'agentList') {
// if (event.target.id === 'agentList') {
initializeCytoscape(); initializeCytoscape();
loadGraphData(); loadGraphData();
// } }
}); });
}); });
@ -64,7 +62,7 @@ async function updateGraph(agentData) {
return; return;
} }
console.log('Updating graph with agent data:', agentData); // console.log('Updating graph with agent data:', agentData);
// Clear existing nodes and edges // Clear existing nodes and edges
cy.elements().remove(); cy.elements().remove();

4
static/gontrol-stylesheet.css
View File

@ -39,6 +39,10 @@
color: var(--bs-primary); color: var(--bs-primary);
} }
.execute-navbar {
background-color: var(--bs-warning)
}
#graph-container { #graph-container {
margin: 0; padding: 0; margin: 0; padding: 0;
} }

79
templates/index.html
View File

@ -70,33 +70,66 @@
<!-- Command Execution --> <!-- Command Execution -->
<div class="col-md-6"> <div class="col-md-6">
<div id="agentCommands"> <!-- <div id="agentCommands"> -->
<!-- <h5>Command Execution</h5> --> <!-- <!-1- <h5>Command Execution</h5> -1-> -->
<form hx-post="http://localhost:5555/executeCommand" <!-- <form hx-post="http://localhost:5555/executeCommand" -->
hx-target="#commandOutput" <!-- hx-target="#commandOutput" -->
hx-encoding="application/x-www-form-urlencoded" <!-- hx-encoding="application/x-www-form-urlencoded" -->
hx-swap="innerHTML" <!-- hx-swap="innerHTML" -->
onsubmit="prepareAgentNames(event)"> <!-- onsubmit="prepareAgentNames(event)"> -->
<div style="visibility: collapse" class="mb-3"> <!-- <!-1- <div style="visibility: collapse" class="mb-3"> -1-> -->
<label for="agentName" class="form-label">Agent Name</label> <!-- <div class="mb-3"> -->
<select id="agentName" class="form-select" name="agentName" <!-- <label for="agentName" class="form-label">Agent Name</label> -->
hx-on="htmx:afterSwap:updateAgentDropdown"> <!-- <select id="agentName" class="form-select" name="agentName" -->
<option value="" disabled selected>Select an Agent</option> <!-- hx-on="htmx:afterSwap:updateAgentDropdown"> -->
</select> <!-- <option value="" disabled selected>Select an Agent</option> -->
</div> <!-- </select> -->
<div class="mb-3"> <!-- </div> -->
<label for="command" class="form-label">Command</label> <!-- <div class="mb-3"> -->
<input type="text" class="form-control" id="command" name="command" placeholder="Enter command" required> <!-- <label for="command" class="form-label">Command</label> -->
</div> <!-- <input type="text" class="form-control" id="command" name="command" placeholder="Enter command" required> -->
<button type="submit" class="btn btn-primary">Execute</button> <!-- </div> -->
<input type="hidden" name="agentNames" id="agentNamesInput"> <!-- <button type="submit" class="btn btn-primary">Execute</button> -->
</form> <!-- <input type="hidden" name="agentNames" id="agentNamesInput"> -->
<!-- </form> -->
<pre id="commandOutput"></pre> <pre id="commandOutput"></pre>
</div> <!-- </div> -->
</div> <!-- </div> -->
</div> </div>
<!-- <div id="agentConnect">Future Agent Tabs</div> --> <!-- <div id="agentConnect">Future Agent Tabs</div> -->
<nav class="navbar fixed-bottom bg-body-tertiary">
<div class="container-fluid navbar execute-navbar">
<form id="agentCommands"
hx-post="http://localhost:5555/executeCommand"
hx-target="#commandOutput"
hx-encoding="application/x-www-form-urlencoded"
hx-swap="innerHTML"
onsubmit="prepareAgentNames(event)"
class="d-flex w-100">
<!-- Submit button on the left -->
<button type="submit" class="btn btn-primary me-2">Execute</button>
<!-- Command input fills the rest of the space -->
<input type="text" class="form-control" id="command" name="command" placeholder="Enter command" required>
<!-- Hidden agentNames input -->
<input type="hidden" name="agentNames" id="agentNamesInput">
<!-- Fully hidden dropdown (not visible but present in DOM) -->
<select id="agentName"
class="form-select d-none"
name="agentName"
hx-on="htmx:afterSwap:updateAgentDropdown">
<option value="" disabled selected>Select an Agent</option>
</select>
</form>
</div>
</nav>
<!-- Offcanvas for Agent Details --> <!-- Offcanvas for Agent Details -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel" data-bs-scroll="true"> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel" data-bs-scroll="true">
<div class="offcanvas-header"> <div class="offcanvas-header">