Show external filaments in spool create

client/src/utils/parsing.tsx

@@ -84,3 +84,35 @@ export function enrichText(text: string | undefined) {
 
   return <>{elements}</>;
 }
+
+/**
+ * Formats the weight in grams to either kilograms or grams based on the provided precision.
+ *
+ * @param {number} weightInGrams - The weight in grams to be formatted.
+ * @param {number} [precision=2] - The precision of the formatting (number of decimal places).
+ * @return {string} The formatted weight with the appropriate unit (kg or g).
+ */
+export function formatWeight(weightInGrams: number, precision: number = 2): string {
+  if (weightInGrams >= 1000) {
+    const kilograms = (weightInGrams / 1000).toFixed(precision).replace(/\.?0+$/, ""); // Remove trailing zeros
+    return `${kilograms} kg`;
+  } else {
+    return `${weightInGrams} g`;
+  }
+}
+
+/**
+ * Formats the length in millimeters to either meters or millimeters based on the provided precision.
+ *
+ * @param {number} lengthInMillimeter - The length in millimeters to be formatted.
+ * @param {number} [precision=2] - The precision of the formatting (number of decimal places).
+ * @return {string} The formatted length with the appropriate unit (m or mm).
+ */
+export function formatLength(lengthInMillimeter: number, precision: number = 2): string {
+  if (lengthInMillimeter >= 1000) {
+    const meters = (lengthInMillimeter / 1000).toFixed(precision).replace(/\.?0+$/, ""); // Remove trailing zeros
+    return `${meters} m`;
+  } else {
+    return `${lengthInMillimeter} mm`;
+  }
+}

client/src/utils/queryExternalDB.ts

@@ -0,0 +1,43 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { getAPIURL } from "./url";
+
+interface ExternalFilament {
+  id: string;
+  manufacturer: string;
+  name: string;
+  material: string;
+  density: number | null;
+  weight: number;
+  spool_weight: number | null;
+  diameter: number;
+  color_hex: string;
+  extruder_temp: number | null;
+  bed_temp: number | null;
+}
+
+interface ExternalMaterial {
+  material: string;
+  density: number;
+}
+
+export function useGetExternalDBFilaments() {
+  return useQuery<ExternalFilament[]>({
+    queryKey: ["external", "filaments"],
+    staleTime: 60,
+    queryFn: async () => {
+      const response = await fetch(`${getAPIURL()}/external/filament`);
+      return response.json();
+    },
+  });
+}
+
+export function useGetExternalDBMaterials() {
+  return useQuery<ExternalMaterial[]>({
+    queryKey: ["external", "materials"],
+    staleTime: 60,
+    queryFn: async () => {
+      const response = await fetch(`${getAPIURL()}/external/material`);
+      return response.json();
+    },
+  });
+}