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
document.addEventListener('DOMContentLoaded', function () {
console.log('DOMContentLoaded fired.');
initializeCytoscape();
loadGraphData();
document.body.addEventListener('htmx:afterSwap', function (event) {
console.log('htmx:afterSwap fired.');
// if (event.target.id === 'agentList') {
if (event.target.id === 'agentList') {
initializeCytoscape();
loadGraphData();
// }
}
});
});
@ -64,7 +62,7 @@ async function updateGraph(agentData) {
return;
}
console.log('Updating graph with agent data:', agentData);
// console.log('Updating graph with agent data:', agentData);
// Clear existing nodes and edges
cy.elements().remove();

4
static/gontrol-stylesheet.css
View File

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

79
templates/index.html
View File

@ -70,33 +70,66 @@
<!-- Command Execution -->
<div class="col-md-6">
<div id="agentCommands">
<!-- <h5>Command Execution</h5> -->
<form hx-post="http://localhost:5555/executeCommand"
hx-target="#commandOutput"
hx-encoding="application/x-www-form-urlencoded"
hx-swap="innerHTML"
onsubmit="prepareAgentNames(event)">
<div style="visibility: collapse" 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>
<!-- <div id="agentCommands"> -->
<!-- <!-1- <h5>Command Execution</h5> -1-> -->
<!-- <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> -->
</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 -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel" data-bs-scroll="true">
<div class="offcanvas-header">