feat: show only running containers checkbox

This commit is contained in:
Tim Dreyer 2025-04-24 22:43:04 +02:00
parent 4dc7175588
commit e049761f36

View File

@ -21,6 +21,12 @@
autocomplete="off"
/>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="showOnlyRunning" class="hidden" />
<label for="showOnlyRunning">Show running Containers only</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" id="showUnexposed" class="hidden" />
@ -101,6 +107,7 @@
const $existingList = $("#existingList");
const $searchbar = $("#searchbar");
const $showOnlyRunning = $("#showOnlyRunning");
const $showUnexposed = $("#showUnexposed");
// objects to store container entries
@ -122,6 +129,22 @@
localStorage.setItem("showUnexposed", $showUnexposed.prop("checked"));
}
// load showOnlyRunning checkbox state from local storage
function loadShowOnlyRunningState() {
const storedState = localStorage.getItem("showOnlyRunning");
if (storedState !== null) {
$showOnlyRunning.prop("checked", storedState === "true");
}
}
// save showOnlyRunning checkbox state to local storage
function saveShowOnlyRunningState() {
localStorage.setItem(
"showOnlyRunning",
$showOnlyRunning.prop("checked")
);
}
// fetch docker containers
function getDockerContainers() {
$networkedList.html('<div class="ui active loader"></div>');
@ -182,6 +205,14 @@
// process each container
containers.forEach((container) => {
// skip containers that are not running, if the checkbox is checked
if (
$showOnlyRunning.is(":checked") &&
container.State !== "running"
) {
return;
}
// skip containers in network mode "none"
if (container.HostConfig.NetworkMode === "none") {
return;
@ -227,8 +258,9 @@
// add the container to the networked list, using it's name as address
container.Ports.forEach((portObject) => {
// skip unexposed ports if the checkbox is not checked
if (!portObject.PublicPort && !$showUnexposed.is(":checked"))
if (!portObject.PublicPort && !$showUnexposed.is(":checked")) {
return;
}
const port = portObject.PublicPort || portObject.PrivatePort;
@ -389,6 +421,11 @@
getDockerContainers();
});
$showOnlyRunning.on("change", () => {
saveShowOnlyRunningState(); // save the new state to local storage
getDockerContainers();
});
// debounce searchbar input with 300ms delay, then filter list
// this prevents excessive calls to the filter function
$searchbar.on(