Add tools databse, make it serchable based on values in fields, some refactorization done

src/components/Modal.tsx

@@ -40,16 +40,9 @@ export const Modal = ({
 
 	const handleClose = useCallback(() => {
 		if (navigatePathOnClose) navigate(navigatePathOnClose);
-		if (isConfirmationDialogVisible)
+		if (isConfirmationDialogVisible) (document.getElementById(modalId) as HTMLDialogElement).close();
-			(document.getElementById(modalId) as HTMLDialogElement).close();
 		hideDialog();
-	}, [
+	}, [hideDialog, isConfirmationDialogVisible, modalId, navigate, navigatePathOnClose]);
-		hideDialog,
-		isConfirmationDialogVisible,
-		modalId,
-		navigate,
-		navigatePathOnClose,
-	]);
 
 	const handleKeyPress = useCallback(
 		(event: KeyboardEvent) => {
@@ -86,16 +79,11 @@ export const Modal = ({
 		<dialog id={modalId} className={composeModalStyles()}>
 			<div className={comopseModalBoxStyles()}>
 				<h3 className="font-bold text-lg">{title ?? "Hello!"}</h3>
-				<p className="py-4">
+				<p className="py-4">{subTitle ?? "Press ESC key or click the button below to close"}</p>
-					{subTitle ?? "Press ESC key or click the button below to close"}
-				</p>
 				<p>{content}</p>
 				<div className="modal-action">
 					<form method="dialog">
-						<button
+						<button className="btn btn-circle btn-sm absolute top-2 right-2" onClick={handleClose}>
-							className="btn btn-circle btn-sm absolute top-2 right-2"
-							onClick={handleClose}
-						>
 							<Cross1Icon />
 						</button>
 						{children}

src/configure.tsx

@@ -85,7 +85,7 @@ export interface CustomRouteObject extends Omit<RouteObject, "children"> {
 //Main configuration, static data, mostly used here
 export const main = {
 	program_name: viteEnv.VITE_APP_NAME,
-	program_version: "1.2.0",
+	program_version: "1.4.0",
 };
 //About page configuration
 export const about = {

src/features/Home/HomePage.tsx

@@ -1,51 +1,123 @@
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
-
-const lists = {
-	rodzajFrezowania: ["Czolowe", "Walcowo Czolowe", "Rowkowe"],
-	rodzajObrobki: ["Zgrubna", "Wykończeniowa"],
-	material: ["Stal węglowa", "Stal nierdzewna", "Żeliwo"],
-};
-const listsLabels = {
-	rodzajFrezowania: "Rodzaj Frezowania",
-	rodzajObrobki: "Rodzaj Obróbki",
-	material: "Material",
-};
-import Slider from "../../components/Slider";
 import Select from "../../components/Select";
+import Slider from "../../components/Slider";
+import { Tool, toolsDatabase } from "../../toolsDatabase";
+
+const dropdowns = [
+	{
+		name: "rodzajFrezowania",
+		label: "Rodzaj Frezowania",
+		options: ["Czolowe", "Walcowo Czołowe", "Rowkowe"],
+	},
+	{
+		name: "rodzajObrobki",
+		label: "Rodzaj Obróbki",
+		options: ["Zgrubna", "Wykończeniowa"],
+	},
+	{
+		name: "material",
+		label: "Materiał",
+		options: ["Stal węglowa", "Stal nierdzewna", "Żeliwo"],
+	},
+];
+interface IInput {
+	rodzajFrezowania: number;
+	rodzajObrobki: number;
+	material: number;
+	glebokoscSkrawania: number;
+	szerokoscSkrawania: number;
+	tolerancja: number;
+	chropowatosc: number;
+}
+// interface IResults {
+// 	predkoscObrotowaWrzeciona: number;
+// 	predkoscSkrawania: number;
+// 	predkoscPosuwu: number;
+// 	posowNaOstrze: number;
+// 	posowNaObrot: number;
+// 	wydajnoscObjetosciowa: number;
+// }
 
 const HomePage = () => {
-	const [state, setState] = useState({
+	// ----------------------------- STATE -----------------------------
+	const [input, setInput] = useState<IInput>({
+		// lists
 		rodzajFrezowania: 0,
 		rodzajObrobki: 0,
 		material: 0,
+		// variables
 		glebokoscSkrawania: Math.floor(Math.random() * 50 + 1),
-		szerokoscSkrawania: Math.floor(Math.random() * 30 + 1),
+		szerokoscSkrawania: Math.floor(Math.random() * 50 + 1),
 		tolerancja: parseFloat((0.1 + Math.random() * (5 - 0.1)).toFixed(2)),
 		chropowatosc: parseFloat((0.1 + Math.random() * (5 - 0.1)).toFixed(2)),
 	});
-
+	// const [calcResults, setCalcResults] = useState<IResults>({
-	const handleChange = (key: keyof typeof state) => (e: React.ChangeEvent<HTMLSelectElement>) => {
+	// 	// constans
+	// 	predkoscObrotowaWrzeciona: 2700,
+	// 	predkoscSkrawania: 170,
+	// 	predkoscPosuwu: 1140,
+	// 	posowNaOstrze: 0.14,
+	// 	posowNaObrot: 0.42,
+	// 	wydajnoscObjetosciowa: 114,
+	// });
+	const [result, setResult] = useState<Tool | null>(null);
+	const [calculating, setCalculating] = useState(false);
+	const [notFound, setNotFound] = useState(false);
+	// ----------------------------- FUNCTION --------------------------
+	const handleChangeOfField = (key: keyof typeof input) => (e: React.ChangeEvent<HTMLSelectElement>) => {
 		const value = Number(e.target.value);
-		setState((prev) => ({ ...prev, [key]: value }));
+		setInput((prev) => ({ ...prev, [key]: value }));
 	};
+	const matchesInput = (tool: Tool, input: IInput): boolean => {
+		return (
+			tool.rodzajFrezowania === input.rodzajFrezowania &&
+			tool.rodzajObrobki === input.rodzajObrobki &&
+			tool.material === input.material &&
+			input.chropowatosc >= tool.chropowatosc[0] &&
+			input.chropowatosc <= tool.chropowatosc[1] &&
+			input.szerokoscSkrawania >= tool.szerokoscSkrawania[0] &&
+			input.szerokoscSkrawania <= tool.szerokoscSkrawania[1] &&
+			input.glebokoscSkrawania >= tool.glebokoscSkrawania[0] &&
+			input.glebokoscSkrawania <= tool.glebokoscSkrawania[1]
+		);
+	};
+	const checkInputInDatabse = useCallback((input: IInput): void => {
+		console.debug("checking...", input);
 
+		const foundTool = toolsDatabase.tools.find((tool) => matchesInput(tool, input));
+
+		if (foundTool) {
+			console.debug("found", foundTool);
+			setResult(foundTool);
+		} else {
+			console.debug("not found");
+			setResult(null);
+			setNotFound(true);
+		}
+	}, []);
+
+	// ----------------------------- EFFECT ----------------------------
+	useEffect(() => {
+		if (calculating) {
+			checkInputInDatabse(input);
+		}
+		setCalculating(false);
+	}, [calculating, checkInputInDatabse, input]);
+	// ----------------------------- RENDER ----------------------------
 	return (
 		<>
-			<div className="p-6 bg-white rounded shadow-lg lg:w-[500px] space-y-4 mb-4 lg:absolute lg:right-1/2 lg:translate-x-1/2 lg:translate-y-4">
+			<div className="p-6 bg-white rounded shadow-lg lg:w-[500px] space-y-4 mb-4 lg:ml-[50%] lg:translate-x-[-50%]">
 				<h1 className="text-3xl mb-6 text-center text-gray-700">Wybór parametrów</h1>
 				<div className="space-y-4">
-					{Object.keys(lists).map((key) => (
+					{dropdowns.map((dropdown) => (
-						<div className="mb-4" key={key}>
+						<div className="mb-4" key={dropdown.label}>
-							<label className="block text-gray-700 text-sm font-bold mb-2">
+							<label className="block text-gray-700 text-sm font-bold mb-2">{dropdown.label}</label>
-								{listsLabels[key as keyof typeof listsLabels]}
-							</label>
 							<Select
-								key={key}
+								value={input[dropdown.label as keyof typeof input]}
-								value={state[key as keyof typeof state]}
+								onChange={handleChangeOfField(dropdown.name as keyof typeof input)}
-								onChange={handleChange(key as keyof typeof state)}
+								options={dropdown.options}
-								options={lists[key as keyof typeof lists]}
+								label={dropdown.label}
-								label={key}
+								disabledLabel={`Wybierz ${dropdown.label}`}
-								disabledLabel={`Wybierz ${key}`}
 							/>
 						</div>
 					))}
@@ -54,19 +126,19 @@ const HomePage = () => {
 				<label className="flex text-gray-700 text-sm font-bold mb-0">Głębokość Skrawania</label>
 				<Slider
 					range={{ min: 1, max: 50 }}
-					value={state.glebokoscSkrawania}
+					value={input.glebokoscSkrawania}
 					onChange={(e) => {
-						setState((prev) => ({ ...prev, glebokoscSkrawania: Number(e!.target.value) }));
+						setInput((prev) => ({ ...prev, glebokoscSkrawania: Number(e!.target.value) }));
 					}}
 					suffix="mm"
 				/>
 
 				<label className="flex text-gray-700 text-sm font-bold mb-0">Szerokość Skrawania</label>
 				<Slider
-					range={{ min: 1, max: 30 }}
+					range={{ min: 1, max: 50 }}
-					value={state.szerokoscSkrawania}
+					value={input.szerokoscSkrawania}
 					onChange={(e) => {
-						setState((prev) => ({ ...prev, szerokoscSkrawania: Number(e!.target.value) }));
+						setInput((prev) => ({ ...prev, szerokoscSkrawania: Number(e!.target.value) }));
 					}}
 					suffix="mm"
 				/>
@@ -74,9 +146,9 @@ const HomePage = () => {
 				<label className="flex text-gray-700 text-sm font-bold mb-0">Tolerancja</label>
 				<Slider
 					range={{ min: 0.1, max: 5 }}
-					value={state.tolerancja}
+					value={input.tolerancja}
 					onChange={(e) => {
-						setState((prev) => ({ ...prev, tolerancja: Number(e!.target.value) }));
+						setInput((prev) => ({ ...prev, tolerancja: Number(e!.target.value) }));
 					}}
 					suffix="mm"
 					step={0.01}
@@ -85,9 +157,9 @@ const HomePage = () => {
 				<label className="flex text-gray-700 text-sm font-bold mb-0">Chropowatość</label>
 				<Slider
 					range={{ min: 0.1, max: 5 }}
-					value={state.chropowatosc}
+					value={input.chropowatosc}
 					onChange={(e) => {
-						setState((prev) => ({ ...prev, chropowatosc: Number(e!.target.value) }));
+						setInput((prev) => ({ ...prev, chropowatosc: Number(e!.target.value) }));
 					}}
 					suffix="mm"
 					step={0.01}
@@ -97,30 +169,29 @@ const HomePage = () => {
 					className="btn btn-secondary w-full mt-4"
 					type="submit"
 					onClick={() => {
-						console.log(
+						setCalculating(true);
-							state.rodzajFrezowania,
-							state.rodzajObrobki,
-							state.material,
-							state.glebokoscSkrawania,
-							state.szerokoscSkrawania,
-							state.tolerancja,
-							state.chropowatosc,
-						);
 					}}
 				>
 					Policz
 				</button>
 			</div>
 
-			<div className="m-4 p-6 bg-white rounded-lg shadow-md w-fit max-w-xs">
+			<div className="p-6 bg-white rounded shadow-lg lg:w-[500px] mb-4 lg:ml-[50%] lg:translate-x-[-50%]">
-				<h1 className="text-4xl mb-8 text-center text-gray-800 tracking-wider">Wyniki</h1>
+				{result ? (
-				<div className="space-y-2">
+					<>
-					{Object.keys(state).map((key) => (
+						<h2 className="text-2xl mb-4">{result.name}</h2>
-						<span key={key} className="text-gray-800 block tracking-wide">
+						<p className="text-lg">
-							{key}: <span className="text-black font-medium">{state[key as keyof typeof state]}</span>
+							Płyta: <span className="text font-mono font-semibold">{result.plate}</span>
-						</span>
+						</p>
-					))}
+						<p className="text-lg">
-				</div>
+							Ilość zębów: <span className="text font-mono font-semibold">{result.ilosc_zebow}</span>
+						</p>
+					</>
+				) : notFound ? (
+					<h2 className="text-xl">❗Nie znaleziono narzędzia dla podanych parametrów</h2>
+				) : (
+					<p className="text-neutral-content">Tutaj pojawią się wyniki</p>
+				)}
 			</div>
 		</>
 	);

src/toolsDatabase.ts

@@ -0,0 +1,63 @@
+export type RodzajFrezowania = "Walcowo Czołowe" | "Walcowo Boczne";
+export type RodzajObrobki = "Zgrubna" | "Wykańczająca";
+export type Material = "Stal nierdzewna" | "Stal" | "Żeliwo" | "Miedź" | "Aluminium";
+export interface Tool {
+	name: string;
+	plate: string;
+	ilosc_zebow: number;
+	rodzajFrezowania: number;
+	rodzajObrobki: number;
+	material: number;
+	chropowatosc: [number, number];
+	tolerancja: [number, number];
+	szerokoscSkrawania: [number, number];
+	glebokoscSkrawania: [number, number];
+}
+interface Database {
+	name: string;
+	version: string;
+	tools: Tool[];
+}
+
+export const toolsDatabase: Database = {
+	name: "Baza narzędzi obróbki skrawaniem",
+	version: "1.0",
+	tools: [
+		{
+			name: "Coromill 390",
+			plate: "M-MM 1040",
+			ilosc_zebow: 3,
+			rodzajFrezowania: 1,
+			rodzajObrobki: 0,
+			material: 1,
+			chropowatosc: [0.5, 2],
+			tolerancja: [0.5, 2],
+			szerokoscSkrawania: [15, 25],
+			glebokoscSkrawania: [3, 8],
+		},
+		{
+			name: "CoroMill 245",
+			plate: "R245-12T3E1 6190",
+			ilosc_zebow: 3,
+			rodzajFrezowania: 0,
+			rodzajObrobki: 1,
+			material: 2,
+			chropowatosc: [0.1, 5],
+			tolerancja: [0.1, 5],
+			szerokoscSkrawania: [32, 40],
+			glebokoscSkrawania: [2, 6],
+		},
+		{
+			name: "CoroMill 331",
+			plate: "R331.1A-04 35 15H-WL1040",
+			ilosc_zebow: 4,
+			rodzajFrezowania: 2,
+			rodzajObrobki: 1,
+			material: 1,
+			chropowatosc: [0.1, 5],
+			tolerancja: [0.1, 5],
+			szerokoscSkrawania: [40, 40],
+			glebokoscSkrawania: [2, 10],
+		},
+	],
+};