added searchbar to docker container list

This commit is contained in:
Tim Dreyer 2024-11-18 18:16:07 +01:00
parent 6515eb99e3
commit 373845f8fd

View File

@ -10,11 +10,20 @@
<body> <body>
<br /> <br />
<div class="ui container"> <div class="ui container">
<div class="ui form">
<div class="field">
<input
id="searchbar"
type="text"
placeholder="Search..."
autocomplete="off"
/>
</div>
<div class="field"> <div class="field">
<div class="ui checkbox"> <div class="ui checkbox">
<input type="checkbox" id="showUnexposed" class="hidden" /> <input type="checkbox" id="showUnexposed" class="hidden" />
<label for="showUnexposed" <label for="showUnexposed"
>Show Containers with Unexposed Ports >Show Containers with unexposed ports
<br /> <br />
<small <small
>Please make sure Zoraxy and the target container share a >Please make sure Zoraxy and the target container share a
@ -23,6 +32,7 @@
</label> </label>
</div> </div>
</div> </div>
</div>
<div class="ui header"> <div class="ui header">
<div class="content"> <div class="content">
List of Docker Containers List of Docker Containers
@ -46,6 +56,9 @@
</div> </div>
<script> <script>
// TODO: refactor for better readability / consistent use of jQuery
// TODO: add persistence for showUnexposed checkbox
let lines = {}; let lines = {};
let linesAdded = {}; let linesAdded = {};
@ -64,6 +77,16 @@
getDockerContainers(); getDockerContainers();
}); });
$("#searchbar").on("input", () => {
// TODO: this should probably be debounced to avoid unnecessary calls during typing
const search = $("#searchbar").val().toLowerCase();
console.log("search", search);
$("#containersList .item").each((index, item) => {
const content = $(item).text().toLowerCase();
$(item).toggle(content.includes(search));
});
});
function getDockerContainers() { function getDockerContainers() {
const hostRequest = $.get("/api/proxy/list?type=host"); const hostRequest = $.get("/api/proxy/list?type=host");
const dockerRequest = $.get("/api/docker/containers"); const dockerRequest = $.get("/api/docker/containers");