tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Now supports running under a sub path

Browse Source 
Just set the SPOOLMAN_BASE_PATH environment variable and it should work.

Resolves #95
This commit is contained in:
Donkie
2024-05-10 11:36:33 +02:00
parent fc532ff697
commit bc32f1e890
18 changed files with 158 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@@ -2,12 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#DC7734" />
<meta name="description" content="Spoolman - Keep track of your inventory of 3D-printer filament spools." />
<meta name="robots" content="noindex,nofollow" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript" src="./config.js"></script>
<title>Spoolman</title>
</head>

9
client/src/App.tsx
View File

@@ -26,6 +26,8 @@ import loadable from "@loadable/component";
import SpoolmanNotificationProvider from "./components/notificationProvider";
import { SpoolmanLayout } from "./components/layout";
import liveProvider from "./components/liveProvider";
import { getAPIURL, getBasePath } from "./utils/url";
import { Favicon } from "./components/favicon";
interface ResourcePageProps {
resource: "spools" | "filaments" | "vendors";
@@ -84,7 +86,7 @@ function App() {
}
return (
<BrowserRouter>
<BrowserRouter basename={getBasePath() + "/"}>
<RefineKbarProvider>
<ColorModeContextProvider>
<ConfigProvider
@@ -96,11 +98,11 @@ function App() {
}}
>
<Refine
dataProvider={dataProvider(import.meta.env.VITE_APIURL)}
dataProvider={dataProvider(getAPIURL())}
notificationProvider={SpoolmanNotificationProvider}
i18nProvider={i18nProvider}
routerProvider={routerBindings}
liveProvider={liveProvider(import.meta.env.VITE_APIURL)}
liveProvider={liveProvider(getAPIURL())}
resources={[
{
name: "home",
@@ -227,6 +229,7 @@ function App() {
<UnsavedChangesNotifier />
<DocumentTitleHandler />
<ReactQueryDevtools />
<Favicon url={getBasePath() + "/favicon.svg"} />
</Refine>
</ConfigProvider>
</ColorModeContextProvider>

20
client/src/components/favicon.tsx Normal file
View File

@@ -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 <></>;
}

3
client/src/components/layout.tsx
View File

@@ -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",
}}

1
client/src/components/liveProvider.ts
View File

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

3
client/src/components/liveify.ts
View File

@@ -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

22
client/src/components/otherModels.tsx
View File

@@ -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");
}

5
client/src/components/version.tsx
View File

@@ -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");
}

3
client/src/i18n.ts
View File

@@ -2,6 +2,7 @@ import i18n from "i18next";
import detector from "i18next-browser-languagedetector";
import Backend from "i18next-xhr-backend";
import { initReactI18next } from "react-i18next";
import { getBasePath } from "./utils/url";
interface Language {
name: string;
@@ -106,7 +107,7 @@ i18n
.init({
supportedLngs: Object.keys(languages),
backend: {
loadPath: "/locales/{{lng}}/{{ns}}.json",
loadPath: getBasePath() + "/locales/{{lng}}/{{ns}}.json",
},
defaultNS: "common",
fallbackLng: "en",

4
client/src/pages/spools/functions.ts
View File

@@ -1,7 +1,7 @@
import { getAPIURL } from "../../utils/url";
import { ISpool } from "./model";
export async function setSpoolArchived(spool: ISpool, archived: boolean) {
const apiEndpoint = import.meta.env.VITE_APIURL;
const init: RequestInit = {
method: "PATCH",
headers: {
@@ -11,6 +11,6 @@ export async function setSpoolArchived(spool: ISpool, archived: boolean) {
archived: archived,
}),
};
const request = new Request(apiEndpoint + "/spool/" + spool.id);
const request = new Request(getAPIURL() + "/spool/" + spool.id);
await fetch(request, init);
}

10
client/src/utils/queryFields.ts
View File

@@ -1,5 +1,6 @@
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import dayjs from "dayjs";
import { getAPIURL } from "./url";
export enum FieldType {
text = "text",
@@ -34,11 +35,10 @@ export interface Field extends FieldParameters {
}
export function useGetFields(entity_type: EntityType) {
const apiEndpoint = import.meta.env.VITE_APIURL;
return useQuery<Field[]>({
queryKey: ["fields", entity_type],
queryFn: async () => {
const response = await fetch(`${apiEndpoint}/field/${entity_type}`);
const response = await fetch(`${getAPIURL()}/field/${entity_type}`);
return response.json();
},
});
@@ -47,10 +47,9 @@ export function useGetFields(entity_type: EntityType) {
export function useSetField(entity_type: EntityType) {
const queryClient = useQueryClient();
const apiEndpoint = import.meta.env.VITE_APIURL;
return useMutation<Field[], unknown, { key: string; params: FieldParameters }, { previousFields?: Field[] }>({
mutationFn: async ({ key, params }) => {
const response = await fetch(`${apiEndpoint}/field/${entity_type}/${key}`, {
const response = await fetch(`${getAPIURL()}/field/${entity_type}/${key}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -110,10 +109,9 @@ export function useSetField(entity_type: EntityType) {
export function useDeleteField(entity_type: EntityType) {
const queryClient = useQueryClient();
const apiEndpoint = import.meta.env.VITE_APIURL;
return useMutation<Field[], unknown, string>({
mutationFn: async (key) => {
const response = await fetch(`${apiEndpoint}/field/${entity_type}/${key}`, {
const response = await fetch(`${getAPIURL()}/field/${entity_type}/${key}`, {
method: "DELETE",
});

10
client/src/utils/querySettings.ts
View File

@@ -1,4 +1,5 @@
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { getAPIURL } from "./url";
interface SettingResponseValue {
value: string;
@@ -11,22 +12,20 @@ interface SettingsResponse {
}
export function useGetSettings() {
const apiEndpoint = import.meta.env.VITE_APIURL;
return useQuery<SettingsResponse>({
queryKey: ["settings"],
queryFn: async () => {
const response = await fetch(`${apiEndpoint}/setting`);
const response = await fetch(`${getAPIURL()}/setting/`);
return response.json();
},
});
}
export function useGetSetting(key: string) {
const apiEndpoint = import.meta.env.VITE_APIURL;
return useQuery<SettingResponseValue>({
queryKey: ["settings", key],
queryFn: async () => {
const response = await fetch(`${apiEndpoint}/setting/${key}`);
const response = await fetch(`${getAPIURL()}/setting/${key}`);
return response.json();
},
});
@@ -35,10 +34,9 @@ export function useGetSetting(key: string) {
export function useSetSetting() {
const queryClient = useQueryClient();
const apiEndpoint = import.meta.env.VITE_APIURL;
return useMutation<SettingResponseValue, unknown, { key: string; value: unknown }>({
mutationFn: async ({ key, value }) => {
const response = await fetch(`${apiEndpoint}/setting/${key}`, {
const response = await fetch(`${getAPIURL()}/setting/${key}`, {
method: "POST",
headers: {
"Content-Type": "application/json",

35
client/src/utils/url.ts Normal file
View File

@@ -0,0 +1,35 @@
declare global {
interface Window {
SPOOLMAN_BASE_PATH: string;
}
}
/**
* Returns the base path of the application.
*
* If a base path is set, this returns e.g. "/spoolman". If none is set, it returns "".
*
* @return {string} The base path of the application. If the `SPOOLMAN_BASE_PATH`
* window variable is set and not empty, it is returned. Otherwise, the
* default base path "" is returned.
*/
export function getBasePath(): string {
if (window.SPOOLMAN_BASE_PATH && window.SPOOLMAN_BASE_PATH.length > 0) {
return window.SPOOLMAN_BASE_PATH;
} else {
return "";
}
}
/**
* A function that returns the Spoolman API URL
* This returns e.g. "/spoolman/api/v1" if the base path is "/spoolman"
*
* @return {string} The API URL
*/
export function getAPIURL(): string {
if (!import.meta.env.VITE_APIURL) {
throw new Error("VITE_APIURL is not set");
}
return getBasePath() + import.meta.env.VITE_APIURL;
}

1
client/vite.config.ts
View File

@@ -4,5 +4,6 @@ import svgr from "vite-plugin-svgr";
export default defineConfig({
base: '',
plugins: [react(), svgr()],
});