Added button to adjust filament

Resolves #428
Resolves #30

client/src/pages/spools/functions.tsx

@@ -4,8 +4,10 @@ import { getAPIURL } from "../../utils/url";
 import { ISpool } from "./model";
 import { IFilament } from "../filaments/model";
 import { SpoolType, useGetExternalDBFilaments } from "../../utils/queryExternalDB";
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useQueries } from "@tanstack/react-query";
+import { Button, Form, InputNumber, Modal, Radio } from "antd";
+import { useForm } from "antd/es/form/Form";
 
 export async function setSpoolArchived(spool: ISpool, archived: boolean) {
   const init: RequestInit = {
@@ -21,6 +23,27 @@ export async function setSpoolArchived(spool: ISpool, archived: boolean) {
   await fetch(request, init);
 }
 
+/**
+ * Use some spool filament from this spool. Either specify length or weight.
+ * @param spool The spool
+ * @param length The length to add/subtract from the spool, in mm
+ * @param weight The weight to add/subtract from the spool, in g
+ */
+export async function useSpoolFilament(spool: ISpool, length?: number, weight?: number) {
+  const init: RequestInit = {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      use_length: length,
+      use_weight: weight,
+    }),
+  };
+  const request = new Request(`${getAPIURL()}/spool/${spool.id}/use`);
+  await fetch(request, init);
+}
+
 /**
  * Returns an array of queries using the useQueries hook from @tanstack/react-query.
  * Each query fetches a spool by its ID from the server.
@@ -149,3 +172,67 @@ export function useGetFilamentSelectOptions() {
     allExternalFilaments: externalFilaments.data,
   };
 }
+
+type MeasurementType = "length" | "weight";
+
+export function useSpoolAdjustModal() {
+  const t = useTranslate();
+  const [form] = useForm();
+
+  const [curSpool, setCurSpool] = useState<ISpool | null>(null);
+  const [measurementType, setMeasurementType] = useState<MeasurementType>("length");
+
+  const openSpoolAdjustModal = useCallback((spool: ISpool) => {
+    setCurSpool(spool);
+  }, []);
+
+  const spoolAdjustModal = useMemo(() => {
+    if (curSpool === null) {
+      return null;
+    }
+
+    const onSubmit = async () => {
+      if (curSpool === null) {
+        return;
+      }
+
+      const value = form.getFieldValue("filament_value");
+      if (value === undefined || value === null) {
+        return;
+      }
+
+      if (measurementType === "length") {
+        await useSpoolFilament(curSpool, value, undefined);
+      } else {
+        await useSpoolFilament(curSpool, undefined, value);
+      }
+
+      setCurSpool(null);
+    };
+
+    return (
+      <Modal title={t("spool.titles.adjust")} open onCancel={() => setCurSpool(null)} onOk={form.submit}>
+        <p>{t("spool.form.adjust_filament_help")}</p>
+        <Form form={form} initialValues={{ measurement_type: measurementType }} onFinish={onSubmit}>
+          <Form.Item label={t("spool.form.measurement_type_label")} name="measurement_type">
+            <Radio.Group
+              value={measurementType}
+              onChange={({ target: { value } }) => setMeasurementType(value as MeasurementType)}
+            >
+              <Radio.Button value="length">{t("spool.form.measurement_type.length")}</Radio.Button>
+              <Radio.Button value="weight">{t("spool.form.measurement_type.weight")}</Radio.Button>
+            </Radio.Group>
+          </Form.Item>
+          <Form.Item label={t("spool.form.adjust_filament_value")} name="filament_value">
+            <InputNumber precision={1} addonAfter={measurementType === "length" ? "mm" : "g"} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    );
+  }, [curSpool, measurementType, t]);
+
+  return {
+    openSpoolAdjustModal,
+    spoolAdjustModal,
+  };
+}