watchyourlan/frontend/src/components/Body/TableRow.tsx
2025-03-24 17:59:48 +07:00

61 lines
1.8 KiB
TypeScript

import { createSignal, Show } from "solid-js";
import { editNames } from "../../functions/exports";
import { apiEditHost } from "../../functions/api";
import { getHosts } from "../../functions/atstart";
function TableRow(_props: any) {
const [name, setName] = createSignal(_props.host.Name);
let now = <i class="bi bi-circle-fill" style="color:var(--bs-gray-500);"></i>;
if (_props.host.Now == 1) {
now = <i class="bi bi-check-circle-fill" style="color:var(--bs-success);"></i>;
};
let known:boolean;
_props.host.Known === 1 ? known = true : known = false;
const handleInput = async (n: string) => {
setName(n);
await apiEditHost(_props.host.ID, name(), '');
getHosts();
};
const handleToggle = async () => {
await apiEditHost(_props.host.ID, name(), 'toggle');
getHosts();
};
return (
<tr>
<td class="opacity-50">{_props.index}.</td>
<td>
<Show
when={editNames()}
fallback={name()}
>
<input type="text" class="form-control" value={name()}
onInput={e => handleInput(e.target.value)}></input>
</Show>
</td>
<td>{_props.host.Iface}</td>
<td><a href={"http://" + _props.host.IP} target="_blank">{_props.host.IP}</a></td>
<td>{_props.host.Mac}</td>
<td title={_props.host.Hw}>{_props.host.Hw.slice(0,12)+".."}</td>
<td>{_props.host.Date}</td>
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" checked={known}
onClick={handleToggle}></input>
</div>
</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>
</td>
</tr>
)
}
export default TableRow