Now supports running under a sub path

Just set the SPOOLMAN_BASE_PATH environment variable and it should work.

Resolves #95

client/src/components/favicon.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+/**
+ * Renders a favicon element in the head of the HTML document with the specified URL.
+ *
+ * @param {string} props.url - The URL of the favicon image.
+ * @return {JSX.Element} - An empty JSX element.
+ */
+export function Favicon(props: { url: string }) {
+  useEffect(() => {
+    let link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
+    if (!link) {
+      link = document.createElement("link") as HTMLLinkElement;
+      link.rel = "icon";
+      document.getElementsByTagName("head")[0].appendChild(link);
+    }
+    link.href = props.url;
+  }, [props.url]);
+  return <></>;
+}

client/src/components/layout.tsx

@@ -5,6 +5,7 @@ import { Version } from "./version";
 import { Button } from "antd";
 import Logo from "../icon.svg?react";
 import { useTranslate } from "@refinedev/core";
+import { getBasePath } from "../utils/url";
 
 const SpoolmanFooter: React.FC = () => {
   const t = useTranslate();
@@ -27,7 +28,7 @@ const SpoolmanFooter: React.FC = () => {
           <Button
             icon={
               <img
-                src="/kofi_s_logo_nolabel.png"
+                src={getBasePath() + "/kofi_s_logo_nolabel.png"}
                 style={{
                   height: "1.6em",
                 }}

client/src/components/liveProvider.ts

@@ -1,4 +1,5 @@
 import { BaseKey, LiveEvent, LiveProvider } from "@refinedev/core";
+import { getBasePath } from "../utils/url";
 
 /**
  * A spoolman websocket event.

client/src/components/liveify.ts

@@ -1,8 +1,9 @@
 import { LiveEvent } from "@refinedev/core";
 import React from "react";
 import liveProvider from "./liveProvider";
+import { getAPIURL } from "../utils/url";
 
-const liveProviderInstance = liveProvider(import.meta.env.VITE_APIURL);
+const liveProviderInstance = liveProvider(getAPIURL());
 
 /**
  * Hook that subscribes to live updates for the items in the dataSource

client/src/components/otherModels.tsx

@@ -3,14 +3,14 @@ import { IFilament } from "../pages/filaments/model";
 import { IVendor } from "../pages/vendors/model";
 import { ColumnFilterItem } from "antd/es/table/interface";
 import { Tooltip } from "antd";
+import { getAPIURL } from "../utils/url";
 
 export function useSpoolmanFilamentFilter(enabled: boolean = false) {
-  const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<IFilament[], unknown, ColumnFilterItem[]>({
     enabled: enabled,
     queryKey: ["filaments"],
     queryFn: async () => {
-      const response = await fetch(apiEndpoint + "/filament");
+      const response = await fetch(getAPIURL() + "/filament");
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
@@ -86,12 +86,11 @@ export function useSpoolmanFilamentFilter(enabled: boolean = false) {
 }
 
 export function useSpoolmanFilamentNames(enabled: boolean = false) {
-  const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<IFilament[], unknown, string[]>({
     enabled: enabled,
     queryKey: ["filaments"],
     queryFn: async () => {
-      const response = await fetch(apiEndpoint + "/filament");
+      const response = await fetch(getAPIURL() + "/filament");
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
@@ -115,12 +114,11 @@ export function useSpoolmanFilamentNames(enabled: boolean = false) {
 }
 
 export function useSpoolmanVendors(enabled: boolean = false) {
-  const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<IVendor[], unknown, string[]>({
     enabled: enabled,
     queryKey: ["vendors"],
     queryFn: async () => {
-      const response = await fetch(apiEndpoint + "/vendor");
+      const response = await fetch(getAPIURL() + "/vendor");
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
@@ -137,12 +135,11 @@ export function useSpoolmanVendors(enabled: boolean = false) {
 }
 
 export function useSpoolmanMaterials(enabled: boolean = false) {
-  const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<string[]>({
     enabled: enabled,
     queryKey: ["materials"],
     queryFn: async () => {
-      const response = await fetch(apiEndpoint + "/material");
+      const response = await fetch(getAPIURL() + "/material");
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
@@ -155,12 +152,11 @@ export function useSpoolmanMaterials(enabled: boolean = false) {
 }
 
 export function useSpoolmanArticleNumbers(enabled: boolean = false) {
-  const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<string[]>({
     enabled: enabled,
     queryKey: ["articleNumbers"],
     queryFn: async () => {
-      const response = await fetch(apiEndpoint + "/article-number");
+      const response = await fetch(getAPIURL() + "/article-number");
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
@@ -173,12 +169,11 @@ export function useSpoolmanArticleNumbers(enabled: boolean = false) {
 }
 
 export function useSpoolmanLotNumbers(enabled: boolean = false) {
-  const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<string[]>({
     enabled: enabled,
     queryKey: ["lotNumbers"],
     queryFn: async () => {
-      const response = await fetch(apiEndpoint + "/lot-number");
+      const response = await fetch(getAPIURL() + "/lot-number");
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
@@ -191,12 +186,11 @@ export function useSpoolmanLotNumbers(enabled: boolean = false) {
 }
 
 export function useSpoolmanLocations(enabled: boolean = false) {
-  const apiEndpoint = import.meta.env.VITE_APIURL;
   return useQuery<string[]>({
     enabled: enabled,
     queryKey: ["locations"],
     queryFn: async () => {
-      const response = await fetch(apiEndpoint + "/location");
+      const response = await fetch(getAPIURL() + "/location");
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }

client/src/components/version.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { Spin, Typography } from "antd";
+import { getAPIURL } from "../utils/url";
 
 const { Text } = Typography;
 
@@ -15,12 +16,10 @@ interface IInfo {
 }
 
 export const Version: React.FC = () => {
-  const apiEndpoint = import.meta.env.VITE_APIURL;
-
   const infoResult = useQuery<IInfo>({
     queryKey: ["info"],
     queryFn: async () => {
-      const response = await fetch(apiEndpoint + "/info");
+      const response = await fetch(getAPIURL() + "/info");
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }