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,17 +10,27 @@
<body> <body>
<br /> <br />
<div class="ui container"> <div class="ui container">
<div class="field"> <div class="ui form">
<div class="ui checkbox"> <div class="field">
<input type="checkbox" id="showUnexposed" class="hidden" /> <input
<label for="showUnexposed" id="searchbar"
>Show Containers with Unexposed Ports type="text"
<br /> placeholder="Search..."
<small autocomplete="off"
>Please make sure Zoraxy and the target container share a />
network</small </div>
> <div class="field">
</label> <div class="ui checkbox">
<input type="checkbox" id="showUnexposed" class="hidden" />
<label for="showUnexposed"
>Show Containers with unexposed ports
<br />
<small
>Please make sure Zoraxy and the target container share a
network</small
>
</label>
</div>
</div> </div>
</div> </div>
<div class="ui header"> <div class="ui header">
@ -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");