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;
} }

69
templates/index.html
View File

@ -70,32 +70,65 @@
<!-- 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-encoding="application/x-www-form-urlencoded" -->
<!-- hx-swap="innerHTML" -->
<!-- onsubmit="prepareAgentNames(event)"> -->
<!-- <!-1- <div style="visibility: collapse" class="mb-3"> -1-> -->
<!-- <div class="mb-3"> -->
<!-- <label for="agentName" class="form-label">Agent Name</label> -->
<!-- <select id="agentName" class="form-select" name="agentName" -->
<!-- hx-on="htmx:afterSwap:updateAgentDropdown"> -->
<!-- <option value="" disabled selected>Select an Agent</option> -->
<!-- </select> -->
<!-- </div> -->
<!-- <div class="mb-3"> -->
<!-- <label for="command" class="form-label">Command</label> -->
<!-- <input type="text" class="form-control" id="command" name="command" placeholder="Enter command" required> -->
<!-- </div> -->
<!-- <button type="submit" class="btn btn-primary">Execute</button> -->
<!-- <input type="hidden" name="agentNames" id="agentNamesInput"> -->
<!-- </form> -->
<pre id="commandOutput"></pre>
<!-- </div> -->
<!-- </div> -->
</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-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"> class="d-flex w-100">
<label for="agentName" class="form-label">Agent Name</label>
<select id="agentName" class="form-select" name="agentName" <!-- 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"> hx-on="htmx:afterSwap:updateAgentDropdown">
<option value="" disabled selected>Select an Agent</option> <option value="" disabled selected>Select an Agent</option>
</select> </select>
</div>
<div class="mb-3">
<label for="command" class="form-label">Command</label>
<input type="text" class="form-control" id="command" name="command" placeholder="Enter command" required>
</div>
<button type="submit" class="btn btn-primary">Execute</button>
<input type="hidden" name="agentNames" id="agentNamesInput">
</form> </form>
<pre id="commandOutput"></pre>
</div> </div>
</div> </nav>
</div>
<!-- <div id="agentConnect">Future Agent Tabs</div> -->
<!-- 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">