Sort

frontend/src/App.tsx

@@ -1,8 +1,17 @@
+import { onMount } from 'solid-js';
 import './App.css'
+import { apiGetAllHosts } from './functions/api';
+import { setAllHosts } from './functions/exports';
 import Body from './pages/Body'
 
 function App() {
 
+  onMount(async () => {
+
+    const hosts = await apiGetAllHosts();
+    setAllHosts(hosts);
+  });
+
   return (
     <div class="container-lg">
       <div class="row">

frontend/src/components/CardHead.tsx

@@ -0,0 +1,20 @@
+import { Show } from "solid-js";
+import { editNames, setEditNames } from "../functions/exports";
+
+function CardHead() {
+
+  return (
+    <div class="row">
+      <div class="col-md mt-1 mb-1">
+      <Show
+        when={editNames()}
+        fallback={<button class="btn btn-outline-primary" onClick={[setEditNames, true]}>Edit names</button>}
+      >
+        <button class="btn btn-primary" onClick={[setEditNames, false]}>Edit names</button>
+      </Show>
+      </div>
+    </div>
+  )
+}
+
+export default CardHead

frontend/src/components/TableHead.tsx

@@ -0,0 +1,28 @@
+import { Host } from "../functions/exports";
+import { sortByAnyField } from "../functions/sort";
+
+function TableHead() {
+
+  const handleSort = (sortBy: keyof Host) => {
+    sortByAnyField(sortBy);
+  };
+
+  return (
+    <thead>
+      <tr>
+        <th style="width: 3em;"></th>
+        <th>Name <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Name"]}></i></th>
+        <th>Iface <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Iface"]}></i></th>
+        <th>IP <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "IP"]}></i></th>
+        <th>MAC <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Mac"]}></i></th>
+        <th>Hardware <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Hw"]}></i></th>
+        <th>Date <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Date"]}></i></th>
+        <th>Known <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Known"]}></i></th>
+        <th>Online <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Now"]}></i></th>
+        <th style="width: 2em;"></th>
+      </tr>
+    </thead>
+  )
+}
+
+export default TableHead

frontend/src/components/TableRow.tsx

@@ -1,8 +1,11 @@
-
+import { createSignal, Show } from "solid-js";
-
+import { editNames } from "../functions/exports";
+import { apiEditHost } from "../functions/api";
 
 function TableRow(_props: any) {
 
+  const [name, setName] = createSignal(_props.host.Name);
+
   const link = "http://" + _props.host.IP;
   
   let now = <i class="bi bi-circle-fill" style="color:var(--bs-gray-500);"></i>;
@@ -15,10 +18,27 @@ function TableRow(_props: any) {
     known = true;
   }
 
+  const handleInput = async (n: string) => {
+    // console.log('Edit:', n);
+    setName(n);
+    await apiEditHost(_props.host.ID, name(), '');
+  };
+  const handleToggle = async () => {
+    await apiEditHost(_props.host.ID, name(), 'toggle');
+  };
+
   return (
     <tr>
       <td class="opacity-50">{_props.index}.</td>
-      <td>{_props.host.Name}</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={link} target="_blank">{_props.host.IP}</a></td>
       <td>{_props.host.Mac}</td>
@@ -26,11 +46,12 @@ function TableRow(_props: any) {
       <td>{_props.host.Date}</td>
       <td>
         <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" checked={known}></input>
+          <input class="form-check-input" type="checkbox" checked={known}
+            onClick={handleToggle}></input>
         </div>
       </td>
       <td>{now}</td>
-      <td><i class="bi bi-three-dots-vertical my-btn"></i></td>
+      <td><i class="bi bi-pencil-square my-btn"></i></td>
     </tr>
   )
 }

frontend/src/functions/api.ts

@@ -1,8 +1,16 @@
 const api = 'http://0.0.0.0:8840';
 
-export const getAllHosts = async () => {
+export const apiGetAllHosts = async () => {
   const url = api+'/api/all';
   const hosts = await (await fetch(url)).json();
 
   return hosts;
+};
+
+export const apiEditHost = async (id:number, name:string, known:string) => {
+
+  const url = api+'/api/edit/'+id+'/'+name+'/'+known;
+  const res = await (await fetch(url)).json();
+
+  return res;
 };

frontend/src/functions/exports.ts

@@ -13,17 +13,17 @@ export interface Host {
 	Now:   number;
 };
 
-export const emptyHost: Host = {
+export interface Conf {
-	ID: 0,
+	Color:   string;
-	Name: "",
+  Timeout: number;
-	DNS: "",
-	Iface: "",
-	IP:    "",
-	Mac:   "",
-	Hw:    "",
-	Date:  "",
-	Known: 0,
-	Now:   0,
 };
 
-export const [allHosts, setAllHosts] = createSignal<Host[]>([]);
+export const [allHosts, setAllHosts] = createSignal<Host[]>([]);
+
+export const [appConfig, setAppConfig] = createSignal<Conf>();
+
+export const [editNames, setEditNames] = createSignal(false);
+
+// export const [store, setStore] = createStore({ hosts: allHosts() });
+
+// export const [updBody, setUpdBody] = createSignal(false);

frontend/src/functions/sort.ts

@@ -0,0 +1,51 @@
+import { allHosts, Host, setAllHosts } from "./exports";
+
+let down = false;
+let oldField = "Name";
+
+export function sortByAnyField(field: keyof Host) {
+
+  if (field != oldField) {
+    oldField = field;
+    down = !down;
+  } else {
+    oldField = '';
+    down = !down;
+  }
+
+  // localStorage.setItem("sortDown", down);
+  // localStorage.setItem("sortField", field);
+  // checkNotEmpty(addrsArray);
+
+  let someArray = allHosts();
+  if (field == 'IP') {
+    someArray.sort((a, b) => sortIP(a, b, down));
+  } else {
+    someArray.sort((a, b) => byField(a, b, field, down));
+  }
+  
+  setAllHosts([]);
+  setAllHosts(someArray);
+}
+
+function byField(a:Host, b:Host, fieldName: keyof Host, down:boolean){
+  if (a[fieldName] > b[fieldName]) {
+    return down ? 1 : -1;
+  } else {
+    return !down ? 1 : -1;
+  }
+}
+
+function sortIP(a:Host, b:Host, down: boolean) {
+  const num1 = numIP(a);
+  const num2 = numIP(b);
+  if (down) {
+    return num1-num2;
+  } else {
+    return num2-num1;
+  } 
+}
+
+function numIP(a:Host) {
+  return Number(a.IP.split(".").map((num) => (`000${num}`).slice(-3) ).join(""));
+}

frontend/src/pages/Body.tsx

@@ -1,42 +1,20 @@
-import { onMount } from "solid-js";
+import { allHosts } from "../functions/exports";
-import { allHosts, setAllHosts } from "../functions/exports";
-import { getAllHosts } from "../functions/api";
 import { For } from "solid-js";
 import TableRow from "../components/TableRow";
+import CardHead from "../components/CardHead";
+import TableHead from "../components/TableHead";
 
 
 function Body() {
 
-  const handleSort = (sortBy: string) => {
-    console.log("SORT BY", sortBy);
-  };
-
-  onMount(async () => {
-
-    setAllHosts(await getAllHosts());
-  });
-
   return (
     <div class="card border-primary">
       <div class="card-header">
-        Header
+        <CardHead></CardHead>
       </div>
       <div class="card-body table-responsive">
-        <table class="table table-striped">
+        <table class="table table-striped table-hover">
-          <thead>
+          <TableHead></TableHead>
-            <tr>
-            <th style="width: 3em;"></th>
-            <th>Name <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Name"]}></i></th>
-            <th>Iface <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Iface"]}></i></th>
-            <th>IP <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "IP"]}></i></th>
-            <th>MAC <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Mac"]}></i></th>
-            <th>Hardware <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Hw"]}></i></th>
-            <th>Date <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Date"]}></i></th>
-            <th>Known <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Known"]}></i></th>
-            <th>Online <i class="bi bi-sort-down-alt my-btn" onclick={[handleSort, "Now"]}></i></th>
-            <th style="width: 2em;"></th>
-            </tr>
-          </thead>
           <tbody>
             <For each={allHosts()}>{(host, index) =>
             <TableRow host={host} index={index}></TableRow>