Highlight sorted field

frontend/src/components/Body/TableHead.tsx

@@ -1,10 +1,22 @@
-import { For } from "solid-js";
+import { createSignal, For } from "solid-js";
 import { Host } from "../../functions/exports";
 import { sortByAnyField } from "../../functions/sort";
 
 function TableHead() {
 
+  const [sortField, setSortField] = createSignal<string>('');
+  
+  const showSort = () => {
+    let field = localStorage.getItem("sortField") as string;
+    field === "Mac" ? field = "MAC" : '';
+    field === "Hw" ? field = "Hardware" : '';
+    field === "Now" ? field = "On" : '';
+    setSortField(field);
+  };
+  showSort();
+
   const handleSort = (sortBy: string) => {
+    setSortField(sortBy);
     sortBy === "MAC" ? sortBy = "Mac" : '';
     sortBy === "Hardware" ? sortBy = "Hw" : '';
     sortBy === "On" ? sortBy = "Now" : '';
@@ -16,10 +28,13 @@ function TableHead() {
       <tr>
         <th style="width: 2em;"></th>
         <For each={["Name", "Iface", "IP", "MAC", "Hardware", "Date", "Known", "On"]}>{(key) =>
-          <th>{key} <i class="bi bi-sort-down-alt my-btn" 
-                      onClick={[handleSort, key]}
-                      title={"Sort by " + key}
-                    ></i></th>
+          <th 
+            style={key === sortField() ? "color: var(--bs-primary);" : ''}
+          >{key} <i
+            class="bi bi-sort-down-alt my-btn"
+            onClick={[handleSort, key]}
+            title={"Sort by " + key}
+          ></i></th>
         }</For>
         <th style="width: 2em;"></th>
       </tr>

frontend/src/functions/atstart.ts

@@ -29,7 +29,7 @@ function listIfaces() {
 
   let ifaces:string[] = [];
 
-  for (let host of allHosts()) {
+  for (let host of allHosts) {
     if (!ifaces.includes(host.Iface)) {
       ifaces.push(host.Iface);
     }

frontend/src/functions/exports.ts

@@ -1,4 +1,5 @@
 import { createSignal } from "solid-js";
+import { createStore } from "solid-js/store";
 
 export interface Host {
 	ID:    number;
@@ -80,8 +81,7 @@ export const emptyConf:Conf = {
 	PrometheusEnable: false,
 };
 
-
-export const [allHosts, setAllHosts] = createSignal<Host[]>([]);
+export const [allHosts, setAllHosts] = createStore<Host[]>([]);
 export const [bkpHosts, setBkpHosts] = createSignal<Host[]>([]);
 
 export const [ifaces, setIfaces] = createSignal<string[]>([]);

frontend/src/functions/filter.ts

@@ -11,7 +11,7 @@ export function filterAtStart() {
 
 export function filterFunc(field: keyof Host, value: any) {
 
-  let addrsArray = allHosts();
+  let addrsArray = allHosts;
   
   if (oldFilter == field) {
     addrsArray = bkpHosts();
@@ -35,6 +35,5 @@ export function filterFunc(field: keyof Host, value: any) {
       addrsArray = bkpHosts();
   }
 
-  setAllHosts([]);
   setAllHosts(addrsArray);
 }

frontend/src/functions/search.ts

@@ -7,18 +7,15 @@ export function searchFunc(s: string) {
     const sl = s.toLowerCase();
     let newArray:Host[] = [];
 
-    for (let item of allHosts()) {
+    for (let item of allHosts) {
         
       if (searchItem(item, sl)) {
           newArray.push(item);
       }
     }
 
-    setAllHosts([]);
     setAllHosts(newArray);
-
   } else {
-    setAllHosts([]);
     setAllHosts(bkpHosts());
   }    
 }

frontend/src/functions/sort.ts

@@ -1,4 +1,4 @@
-import { allHosts, Host, setAllHosts } from "./exports";
+import { bkpHosts, Host, setAllHosts } from "./exports";
 
 let down = false;
 let oldField = '';
@@ -23,16 +23,14 @@ export function sortByAnyField(field: keyof Host) {
 
   localStorage.setItem("sortDown", down.toString());
   localStorage.setItem("sortField", field);
-  // checkNotEmpty(addrsArray);
 
-  let someArray = allHosts();
+  let someArray = bkpHosts();
   if (field == 'IP') {
     someArray.sort((a, b) => sortIP(a, b, down));
   } else {
     someArray.sort((a, b) => byField(a, b, field, down));
   }
   
-  setAllHosts([]);
   setAllHosts(someArray);
 }
 

frontend/src/pages/Body.tsx

@@ -17,7 +17,7 @@ function Body() {
         <table class="table table-striped table-hover">
           <TableHead></TableHead>
           <tbody>
-            <For each={allHosts()}>{(host, index) =>
+            <For each={allHosts}>{(host, index) =>
             <TableRow host={host} index={index() + 1}></TableRow>
             }</For>
           </tbody> 

frontend/src/pages/History.tsx

@@ -19,9 +19,9 @@ function History() {
       <div class="card-body">
         <table class="table table-striped table-hover">
           <tbody>
-          <For each={allHosts()}>{(host, index) =>
+          <For each={allHosts}>{(host, index) =>
           <tr>
-            <td class="opacity-50" style="width: 2em;">{index()}.</td>
+            <td class="opacity-50" style="width: 2em;">{index()+1}.</td>
             <td>
               <a href={"/host/"+host.ID}>{host.Name}</a><br></br>
               <a href={"http://"+host.IP}>{host.IP}</a>

internal/web/public/assets/History.js

@@ -1 +1 @@
-import{k as f,l as m,t as _,i as t,e as a,m as C,b as H,s as v,n as I,F}from"./index.js";import{H as M,M as N}from"./HistShow.js";var P=_('<div class="card border-primary"><div class="card-header d-flex justify-content-between"></div><div class=card-body><table class="table table-striped table-hover"><tbody></tbody>'),j=_("<tr><td class=opacity-50 style=width:2em;>.</td><td><a></a><br><a></a></td><td>");function D(){const $=localStorage.getItem("histShow");return f(+$),(m()===0||isNaN(m()))&&f(200),(()=>{var d=P(),l=d.firstChild,u=l.nextSibling,S=u.firstChild,g=S.firstChild;return t(l,a(C,{}),null),t(l,a(M,{name:"histShow"}),null),t(g,a(F,{get each(){return I()},children:(e,y)=>(()=>{var n=j(),i=n.firstChild,w=i.firstChild,o=i.nextSibling,s=o.firstChild,p=s.nextSibling,c=p.nextSibling,x=o.nextSibling;return t(i,y,w),t(s,()=>e.Name),t(c,()=>e.IP),t(x,a(N,{get mac(){return e.Mac}})),H(r=>{var h="/host/"+e.ID,b="http://"+e.IP;return h!==r.e&&v(s,"href",r.e=h),b!==r.t&&v(c,"href",r.t=b),r},{e:void 0,t:void 0}),n})()})),d})()}export{D as default};
+import{k as f,l as m,t as _,i as t,e as a,m as C,n as H,b as I,s as v,F}from"./index.js";import{H as M,M as N}from"./HistShow.js";var P=_('<div class="card border-primary"><div class="card-header d-flex justify-content-between"></div><div class=card-body><table class="table table-striped table-hover"><tbody></tbody>'),j=_("<tr><td class=opacity-50 style=width:2em;>.</td><td><a></a><br><a></a></td><td>");function D(){const $=localStorage.getItem("histShow");return f(+$),(m()===0||isNaN(m()))&&f(200),(()=>{var d=P(),l=d.firstChild,u=l.nextSibling,S=u.firstChild,y=S.firstChild;return t(l,a(C,{}),null),t(l,a(M,{name:"histShow"}),null),t(y,a(F,{each:H,children:(e,g)=>(()=>{var n=j(),i=n.firstChild,w=i.firstChild,o=i.nextSibling,s=o.firstChild,p=s.nextSibling,c=p.nextSibling,x=o.nextSibling;return t(i,()=>g()+1,w),t(s,()=>e.Name),t(c,()=>e.IP),t(x,a(N,{get mac(){return e.Mac}})),I(r=>{var h="/host/"+e.ID,b="http://"+e.IP;return h!==r.e&&v(s,"href",r.e=h),b!==r.t&&v(c,"href",r.t=b),r},{e:void 0,t:void 0}),n})()})),d})()}export{D as default};