Delete selected hosts

CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
 ## [v2.1.4] - 2025-09
 ### Added
 - Swagger API docs
+- Delete selected hosts
 - Wake-on-LAN [#135](https://github.com/aceberg/WatchYourLAN/issues/135), [#196](https://github.com/aceberg/WatchYourLAN/issues/196)
 
 ### Fixed

frontend/src/components/Body/CardHead.tsx

@@ -1,8 +1,9 @@
 import { Show } from "solid-js";
-import { editNames, setEditNames } from "../../functions/exports";
+import { editNames, selectedIDs, setEditNames } from "../../functions/exports";
 import Filter from "../Filter";
 import Search from "../Search";
 import { getHosts } from "../../functions/atstart";
+import { apiDelHost } from "../../functions/api";
 
 function CardHead() {
 
@@ -13,6 +14,16 @@ function CardHead() {
     setEditNames(toggle);
   };
 
+  const handleDel = async () => {
+    const ids = selectedIDs();
+    
+    for (let id of ids) {
+      await apiDelHost(id);
+    }
+    
+    window.location.href = '/';
+  };
+
   return (
     <div class="row">
       <div class="col-md mt-1 mb-1">
@@ -27,6 +38,7 @@ function CardHead() {
           when={editNames()}
           fallback={<button class="btn btn-outline-primary" title="Toggle edit" onClick={[handleEditNames, true]}>Edit</button>}
         >
+          <button type="button" onClick={handleDel} class="btn btn-outline-danger">Delete selected</button>
           <button class="btn btn-primary" title="Toggle edit" onClick={[handleEditNames, false]}>Edit</button>
         </Show>
         </div>

frontend/src/components/Body/TableRow.tsx

@@ -1,5 +1,5 @@
 import { createSignal, Show } from "solid-js";
-import { editNames } from "../../functions/exports";
+import { editNames, selectedIDs, setSelectedIDs } from "../../functions/exports";
 import { apiEditHost } from "../../functions/api";
 
 import { debounce } from "@solid-primitives/scheduled"; 
@@ -28,6 +28,17 @@ function TableRow(_props: any) {
     await apiEditHost(_props.host.ID, name(), "toggle");
   };
 
+  const handleCheck = (checked: boolean) => {
+    const id = _props.host.ID;
+    setSelectedIDs(prev => {
+      if (checked) {
+        return prev.includes(id) ? prev : [...prev, id];
+      } else {
+        return prev.filter(item => item !== id);
+      }
+    });
+  };
+
   return (
     <tr>
       <td class="opacity-50">{_props.index}.</td>
@@ -53,9 +64,20 @@ function TableRow(_props: any) {
       </td>
       <td>{now}</td>
       <td>
-        <a href={"/host/" + _props.host.ID}>
-          <i class="bi bi-three-dots-vertical my-btn p-2" title="More"></i>
-        </a>
+        <Show
+          when={editNames()}
+          fallback={
+          <a href={"/host/" + _props.host.ID}>
+            <i class="bi bi-three-dots-vertical my-btn p-2" title="More"></i>
+          </a>}
+        >
+          <input
+            type="checkbox"
+            class="form-check-input"
+            checked={selectedIDs().includes(_props.host.ID)}
+            onChange={e => handleCheck((e.target as HTMLInputElement).checked)}
+          />
+        </Show>
       </td>
     </tr>
   )

frontend/src/functions/exports.ts

@@ -90,4 +90,6 @@ export const [editNames, setEditNames] = createSignal(false);
 
 export const [show, setShow] = createSignal<number>(200);
 
-export const [histUpdOnFilter, setHistUpdOnFilter] = createSignal(false);
+export const [histUpdOnFilter, setHistUpdOnFilter] = createSignal(false);
+
+export const [selectedIDs, setSelectedIDs] = createSignal<number[]>([]);