/state and /history pages

.env.example

@@ -1,3 +1,3 @@
 DATABASE_URL="file:./evolver.db"
-SESSION_SECRET="evolver4ever"
 DEFAULT_DEVICE_PORT="8080"
+SESSION_SECRET="evolver4life"

app/__tests__/unit/root.test.tsx

@@ -1,6 +1,6 @@
 import { expect, describe, it } from "vitest";
 import { loader, action } from "~/root";
-import { prefs } from "~/prefs-cookie";
+import { userPrefs } from "~/cookies.server";
 
 describe("root loader", () => {
   it("should return an object with the default theme and publically visible (to the client) env variables", async () => {
@@ -10,11 +10,11 @@ describe("root loader", () => {
       context: {},
     });
     const data = await response.json();
-    expect(data).toEqual({ theme: "dark", ENV: { VITEST: true } });
+    expect(data).toEqual({ theme: "dark", ENV: { NODE_ENV: "test" } });
   });
 
   it("should return the theme from the request cookie", async () => {
-    const prefsCookie = await prefs.serialize({ theme: "light" });
+    const prefsCookie = await userPrefs.serialize({ theme: "light" });
     const request = new Request("http://127.0.0.1:8000", {
       headers: { Cookie: prefsCookie },
     });
@@ -44,14 +44,17 @@ describe("root action", () => {
   it("should return valid json if theme form data is included in the request", async () => {
     const formData = new FormData();
     formData.set("theme", "dark");
+
     const request = new Request("http://127.0.0.1:8000", {
       method: "POST",
       body: formData,
     });
 
     const response = await action({ request, params: {}, context: {} });
     const cookie = response?.headers.get("Set-Cookie");
-    const setCookieValue = await prefs.parse(cookie ?? null);
+
+    const setCookieValue = await userPrefs.parse(cookie ?? null);
+
     expect(setCookieValue).toEqual({ theme: "dark" });
   });
 });

app/components/EditJson.client.tsx

@@ -1,6 +1,5 @@
 import { useRouteLoaderData } from "@remix-run/react";
 import clsx from "clsx";
-import Ajv from "ajv";
 import {
   FilterFunction,
   JsonData,
@@ -11,25 +10,21 @@ import {
 import { loader as rootLoader } from "~/root";
 import { checkType } from "~/utils/checkType";
 import { EvolverConfigWithoutDefaults } from "client";
-import { SomeJSONSchema } from "ajv/dist/types/json-schema";
 
 export function EditJson({
   data,
   mode,
-  schema,
   setData,
 }: {
-  schema: SomeJSONSchema;
   data: EvolverConfigWithoutDefaults;
   mode: "edit" | "view";
   setData: (arg0: EvolverConfigWithoutDefaults) => void;
 }) {
   const { theme } = useRouteLoaderData<typeof rootLoader>("root") ?? {
     theme: "dark",
   };
+
   const editorTheme = theme === "dark" ? "githubDark" : "githubLight";
-  const ajv = new Ajv();
-  const validate = ajv.compile(schema);
 
   const customizeText = ({ key, value }: NodeData) => {
     switch (key) {
@@ -212,17 +207,6 @@ export function EditJson({
         restrictAdd={restrictAdd}
         restrictDelete={restrictDelete}
         onUpdate={({ newData }) => {
-          const valid = validate(newData);
-          if (!valid) {
-            const errorMessage = validate.errors
-              ?.map(
-                (error) =>
-                  `${error.instancePath}${error.instancePath ? ": " : ""}${error.message}`,
-              )
-              .join("\n");
-            // This string is returned to and displayed in json-edit-react UI
-            return errorMessage;
-          }
           // data is valid, do nothing
         }}
         setData={(data: JsonData) =>

app/components/EvolverTree.tsx

@@ -0,0 +1,72 @@
+import {
+  BeakerIcon,
+  ChartBarSquareIcon,
+  EyeIcon,
+  FireIcon,
+  PencilSquareIcon,
+  WrenchIcon,
+} from "@heroicons/react/24/outline";
+import { Link } from "@remix-run/react";
+import { EvolverConfigWithoutDefaults } from "client";
+
+const iconMapper = (name: string) => {
+  switch (name) {
+    case "ODSensor":
+      return <EyeIcon className="h-10 w-10" />;
+    case "Temperature":
+      return <FireIcon className="h-10 w-10" />;
+    default:
+      return <WrenchIcon className="h-10 w-10" />;
+  }
+};
+
+export default function EvolverTree({
+  config,
+}: {
+  config: EvolverConfigWithoutDefaults;
+}) {
+  const evolverHardware = config.hardware;
+
+  const hardware = Object.keys(evolverHardware).map((key, ix) => {
+    const { classinfo, config } = evolverHardware[key];
+    const { vials, name } = config;
+
+    return (
+      <li key={key + ix}>
+        <div className="flex gap-8">
+          <div className="text-xl">{key}</div>
+          <div className="join flex gap-4">
+            <Link
+              to={`./hardware/${key}?classinfo=${classinfo}`}
+              className="join-item link h-8 w-8 tooltip"
+              data-tip="view logs"
+            >
+              <ChartBarSquareIcon />
+            </Link>
+
+            <Link
+              to={`./hardware/${key}?classinfo=${classinfo}`}
+              className="join-item link h-8 w-8 tooltip"
+              data-tip="edit hardware config"
+            >
+              <PencilSquareIcon />
+            </Link>
+          </div>
+        </div>
+      </li>
+    );
+  });
+
+  return (
+    <ul className="menu menu-lg bg-base-200 rounded-lg w-full">
+      <li>
+        <details open>
+          <summary>
+            <h1 className="text-xl">Hardware</h1>
+          </summary>
+          <ul>{hardware}</ul>
+        </details>
+      </li>
+    </ul>
+  );
+}

app/components/HardwareTable.tsx

@@ -0,0 +1,85 @@
+import { Link, useParams, useSearchParams } from "@remix-run/react";
+import { EvolverConfigWithoutDefaults } from "client";
+import clsx from "clsx";
+
+export function HardwareTable({
+  evolverConfig,
+}: {
+  evolverConfig: EvolverConfigWithoutDefaults;
+}) {
+  const { hardware_name, ip_addr } = useParams();
+  const [queryParams] = useSearchParams();
+  let currentVials: string[] = [];
+  let allVials = false;
+  if (queryParams.has("vials")) {
+    currentVials = queryParams.get("vials")?.split(",");
+  } else {
+    allVials = true;
+  }
+  const evolverHardware = evolverConfig.hardware;
+
+  const TableRows = Object.keys(evolverHardware).map((key) => {
+    const {
+      config: { vials },
+    } = evolverHardware[key];
+
+    const vialsWithLinks = vials.map((vial) => {
+      const linkTo = `/devices/${ip_addr}/hardware/${key}/history?vials=${vial}`;
+      const activeVial =
+        currentVials.includes(vial.toString()) && hardware_name === key;
+      const vialButtons = (
+        <Link
+          key={vial}
+          className={clsx(
+            "btn",
+            "btn-xs",
+            "btn-outline",
+            activeVial && "btn-active",
+          )}
+          to={linkTo}
+        >
+          {vial}
+        </Link>
+      );
+
+      return vialButtons;
+    });
+    const allButton = (
+      <Link
+        className={clsx(
+          "btn",
+          "btn-xs",
+          "btn-outline",
+          allVials && key === hardware_name && "btn-active",
+        )}
+        key={"all"}
+        to={`/devices/${ip_addr}/hardware/${key}/history`}
+      >
+        {" "}
+        all
+      </Link>
+    );
+
+    return (
+      <tr key={key} className={clsx(hardware_name === key && "bg-base-300")}>
+        <td>{key}</td>
+        <td className="flex gap-2">
+          {vialsWithLinks}
+          {allButton}
+        </td>
+      </tr>
+    );
+  });
+
+  return (
+    <table className="table">
+      <thead>
+        <tr>
+          <th>name</th>
+          <th>vials</th>
+        </tr>
+      </thead>
+      <tbody>{TableRows}</tbody>
+    </table>
+  );
+}

app/components/Navbar.tsx

@@ -4,11 +4,11 @@ import clsx from "clsx";
 
 export default function Navbar({ pathname = "" as string }): JSX.Element {
   return (
-    <div className="mb-8">
-      <div className="px-4 mx-auto max-w-6xl flex flex-wrap justify-between gap-10 min-h-16 items-center">
+    <div className="">
+      <div className="mx-auto max-w-6xl flex flex-wrap justify-between gap-10 min-h-16 items-center">
         <div className="flex-1">
           <div className="flex items-center space-x-1">
-            <Link to="/" className="text-3xl">
+            <Link to="/" className="text-3xl text-primary">
               Evolver
             </Link>
           </div>
@@ -17,8 +17,11 @@ export default function Navbar({ pathname = "" as string }): JSX.Element {
           <Link
             tabIndex={0}
             role="button"
-            className={clsx("link", pathname !== "/devices" && "link-hover")}
-            to="/devices"
+            className={clsx(
+              "link",
+              pathname !== "/devices/list" && "link-hover",
+            )}
+            to="/devices/list"
           >
             Devices
           </Link>
@@ -27,7 +30,7 @@ export default function Navbar({ pathname = "" as string }): JSX.Element {
           <ThemeController />
         </div>
       </div>
-      <div className="divider divider-neutral h-0 m-0"></div>
+      <div className="divider h-0 m-0"></div>
     </div>
   );
 }