Finished, needs some polishing but it is working

src/FrezowanieBarbie.json

@@ -0,0 +1,135 @@
+[
+	{
+		"rodzajFrezowania": 1,
+		"rodzajObrobki": 0,
+		"material": 1,
+		"chropowatosc": 2,
+		"tolerancja": 3,
+		"glebokoscSkrawania": 5,
+		"szerokoscSkrawania": 20,
+		"params": {
+			"name": "Coromill 390 R390-20T10-11M",
+			"plate": "R390-11 T3 08M-MM 1040",
+			"predkoscObrotowaWrzeciona": 2680,
+			"predkoscSkrawania": 168,
+			"predkoscPosuwu": 1090,
+			"posuwNaOstrze": 0.136,
+			"posuwNaObrot": 0.407,
+			"wydajnoscObjetosciowa\r": 64.8
+		}
+	},
+	{
+		"rodzajFrezowania": 0,
+		"rodzajObrobki": 2,
+		"material": 2,
+		"chropowatosc": 7,
+		"tolerancja": 2,
+		"glebokoscSkrawania": 6,
+		"szerokoscSkrawania": 44.5,
+		"params": {
+			"name": "CoroMill 245 R245-032A32-12M (Wstępna)",
+			"plate": "R245-12 T3 E1 6190",
+			"predkoscObrotowaWrzeciona": 10800,
+			"predkoscSkrawania": 1520,
+			"predkoscPosuwu": 9030,
+			"posuwNaOstrze": 0.278,
+			"posuwNaObrot": 0.836,
+			"wydajnoscObjetosciowa\r": 552
+		}
+	},
+	{
+		"rodzajFrezowania": 0,
+		"rodzajObrobki": 2,
+		"material": 2,
+		"chropowatosc": 7,
+		"tolerancja": 2,
+		"glebokoscSkrawania": 6,
+		"szerokoscSkrawania": 44.5,
+		"params": {
+			"name": "CoroMill 245 R245-032A32-12M (Wykańczająca)",
+			"plate": "R245-12 T3 E1 6190",
+			"predkoscObrotowaWrzeciona": 13800,
+			"predkoscSkrawania": 1520,
+			"predkoscPosuwu": 4420,
+			"posuwNaOstrze": 0.107,
+			"posuwNaObrot": 0.32,
+			"wydajnoscObjetosciowa\r": 55.3
+		}
+	},
+	{
+		"rodzajFrezowania": 2,
+		"rodzajObrobki": 1,
+		"material": 1,
+		"chropowatosc": 4,
+		"tolerancja": 4,
+		"glebokoscSkrawania": 5,
+		"szerokoscSkrawania": 40,
+		"params": {
+			"name": "CoroMill 331 R331.35C-040A16CM060",
+			"plate": "R331.1A-04 35 15H-WL1040",
+			"predkoscObrotowaWrzeciona": 1790,
+			"predkoscSkrawania": 225,
+			"predkoscPosuwu": 542,
+			"posuwNaOstrze": 0.151,
+			"posuwNaObrot": 0.303,
+			"wydajnoscObjetosciowa\r": 7.67
+		}
+	},
+	{
+		"rodzajFrezowania": 1,
+		"rodzajObrobki": 1,
+		"material": 0,
+		"chropowatosc": 2,
+		"tolerancja": 1,
+		"glebokoscSkrawania": 10,
+		"szerokoscSkrawania": 25,
+		"params": {
+			"name": "CoroMill 790 R790-025A25S2-16L",
+			"plate": "R790-160408PH-PL 1130",
+			"predkoscObrotowaWrzeciona": 4090,
+			"predkoscSkrawania": 321,
+			"predkoscPosuwu": 3270,
+			"posuwNaOstrze": 0.4,
+			"posuwNaObrot": 0.799,
+			"wydajnoscObjetosciowa\r": 3.27
+		}
+	},
+	{
+		"rodzajFrezowania": 2,
+		"rodzajObrobki": 0,
+		"material": 0,
+		"chropowatosc": 5,
+		"tolerancja": 2,
+		"glebokoscSkrawania": 10,
+		"szerokoscSkrawania": 50,
+		"params": {
+			"name": "CoroMill 331 R331.35C-051M25EMA06",
+			"plate": "L331.1A-05 45 15H-WL1130",
+			"predkoscObrotowaWrzeciona": 1950,
+			"predkoscSkrawania": 311,
+			"predkoscPosuwu": 736,
+			"posuwNaOstrze": 0.126,
+			"posuwNaObrot": 0.377,
+			"wydajnoscObjetosciowa\r": 47.6
+		}
+	},
+	{
+		"rodzajFrezowania": 0,
+		"rodzajObrobki": 0,
+		"material": 2,
+		"chropowatosc": 0,
+		"tolerancja": 2,
+		"glebokoscSkrawania": 1,
+		"szerokoscSkrawania": 25,
+		"params": {
+			"name": "CoroMill 210 R210-025T12-09M",
+			"plate": "R210-09 04 12M-PM 1010",
+			"predkoscObrotowaWrzeciona": 3360,
+			"predkoscSkrawania": 250,
+			"predkoscPosuwu": 5380,
+			"posuwNaOstrze": 0.8,
+			"posuwNaObrot": "1,6",
+			"wydajnoscObjetosciowa\r": "49,8"
+		}
+	}
+]

src/components/useLocalStorage.ts

@@ -1,6 +1,7 @@
 import { useState } from "react";
 /**
- * Works like useState but stores the value in local storage
+ * Works like useState but stores the value in local storage\
+ * ! It will use initialValue if there is no value in local storage !
  * @param key Create a key to store the value in local storage
  * @param initialValue Assign an initial value to the key
  * @returns [storedValue, setValue] Returns the stored value and a function to set the value

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.9.0",
+	program_version: "2.0.0",
 };
 //About page configuration
 export const about = {

src/features/Home/HomePage.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
+import { v4 as uuid4 } from "uuid";
 import Select from "../../components/Select";
 import Slider from "../../components/Slider";
 import useLocalStorage from "../../components/useLocalStorage";
-import { Tool, ToolParams, toolsDatabase } from "../../toolsDatabase";
+import { Database, Tool, ToolParams, toolsDatabase } from "../../toolsDatabase";
-import { v4 as uuid4 } from "uuid";
 
 const frezowaniaOpcje = {
 	name: "rodzajFrezowania",
@@ -15,7 +15,7 @@ const dropdowns = [
 	{
 		name: "rodzajObrobki",
 		label: "Rodzaj Obróbki",
-		options: ["Zgrubna", "Wykończeniowa", "Wstępna i wykańczająca"],
+		options: ["Wstępna", "Wykańczająca", "Wstępna i wykańczająca"],
 	},
 	{
 		name: "material",
@@ -42,17 +42,11 @@ interface IInput {
 	tolerancja: number;
 	chropowatosc: number;
 }
-// interface IResults {
-// 	predkoscObrotowaWrzeciona: number;
-// 	predkoscSkrawania: number;
-// 	predkoscPosuwu: number;
-// 	posowNaOstrze: number;
-// 	posowNaObrot: number;
-// 	wydajnoscObjetosciowa: number;
-// }
 
 const HomePage = () => {
 	// ----------------------------- STATE -----------------------------
+	// Załadowanie narzędzi z pliku do localStorage (tylko raz) w celu modyfikowania narzędzi
+	const [toolsDB, setToolsDB] = useLocalStorage<Database>("tools", toolsDatabase);
 	const [input, setInput] = useState<IInput>({
 		// lists
 		rodzajFrezowania: 0,
@@ -63,11 +57,11 @@ const HomePage = () => {
 		szerokoscSkrawania: Math.floor(Math.random() * 50 + 1),
 		tolerancja: 0,
 		chropowatosc: 0,
-	});
+	}); // Parametry szukania
 	const [result, setResult] = useLocalStorage<ToolParams[] | null>("results", []); // Znalazione narzędzie
-	// const [result, setResult] = useState<Tool | null>(null); // Znalazione narzędzie
+	const [searching, setSearching] = useState(false); // Status wyszukiwania
-	const [calculating, setCalculating] = useState(false);
+	const [notFound, setNotFound] = useState(false); // Status znalezienia
-	const [notFound, setNotFound] = useState(false);
+	const [edited, setEdited] = useState(false); // Status edycji
 	// ----------------------------- FUNCTION --------------------------
 	const handleChangeOfField = (key: keyof typeof input) => (e: React.ChangeEvent<HTMLSelectElement>) => {
 		const value = Number(e.target.value);
@@ -86,33 +80,32 @@ const HomePage = () => {
 	};
 	const checkInputInDatabse = useCallback(
 		(input: IInput): void => {
-			console.debug("checking...", input);
+			console.debug("[Search in DB] checking...", input);
 
-			const foundTool: ToolParams[] | undefined = toolsDatabase.tools
+			const foundTool: ToolParams[] | undefined = toolsDB.tools
 				.filter((tool) => matchesInput(tool, input)) // filter tools that match input
 				.filter((tool) => tool.params) // filter tools that have params
 				.map((tool) => tool.params); // extract params from tools
 
 			if (foundTool && typeof foundTool !== "undefined" && foundTool.length > 0) {
-				console.debug("found", foundTool);
+				console.debug("[Search in DB] found ✅", foundTool);
 				setResult(foundTool);
 			} else {
-				console.debug("not found");
+				console.debug("[Search in DB] not found ⚠️");
 				setResult(null);
 				setNotFound(true);
 			}
 		},
-		[setResult],
+		[setResult, toolsDB.tools],
 	);
-
 	// ----------------------------- EFFECT ----------------------------
 	useEffect(() => {
-		if (calculating) {
+		if (searching) {
 			checkInputInDatabse(input);
 		}
-		setCalculating(false);
+		setSearching(false);
-	}, [calculating, checkInputInDatabse, input]);
+	}, [searching, checkInputInDatabse, input]);
-	// debug
+	// Set default input
 	useEffect(() => {
 		setInput({
 			// lists
@@ -125,10 +118,10 @@ const HomePage = () => {
 			tolerancja: 3,
 			chropowatosc: 2,
 		});
-		console.dir(input);
 		return () => {
 			setResult(null);
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 	// ----------------------------- RENDER ----------------------------
 	return (
@@ -196,7 +189,7 @@ const HomePage = () => {
 					className="btn btn-secondary w-full mt-4"
 					type="submit"
 					onClick={() => {
-						setCalculating(true);
+						setSearching(true);
 					}}
 				>
 					Dobierz narzędzia i parametry skrawania
@@ -206,10 +199,10 @@ const HomePage = () => {
 			<div className="p-6 bg-white rounded shadow-lg lg:w-[800px] mb-4 lg:ml-[50%] lg:translate-x-[-50%]">
 				{result ? (
 					<>
-						{result.map((tool) => {
+						{result.map((tool, index) => {
 							return (
 								<div key={uuid4()}>
-									<h2 className="text-2xl mb-1">{tool.params.name}</h2>
+									<h2 className="text-2xl mb-1">{tool.name}</h2>
 									<table className="table">
 										<thead>
 											<tr>
@@ -218,20 +211,49 @@ const HomePage = () => {
 											</tr>
 										</thead>
 										<tbody>
-											{Object.entries(tool.params).map(([key, value]) => {
+											{Object.entries(tool).map(([key, value]) => {
-												console.log(tool.params);
 												return (
-													<tr>
+													<tr key={uuid4()}>
 														<td className="border px-4 py-2">{key}</td>
 														<td className="border px-4 py-2">
-															<input type="text" className="input w-full" value={value} />
+															<input
+																type="text"
+																className="input w-full"
+																value={value}
+																onChange={(e) => {
+																	// Set edited status
+																	setEdited(true);
+																	// Create new tool with new value
+																	const newTool = { ...result[index], [key]: e.target.value };
+																	// Create new array with new tool
+																	const newResult = [...result];
+																	newResult[index] = newTool;
+																	// Set new result on enter key
+																	setResult(newResult);
+																}}
+															/>
 														</td>
 													</tr>
 												);
 											})}
 										</tbody>
 									</table>
-									<button className="btn btn-neutral mt-4 mb-4">Zapisz zmiany jako nowe narzędzie</button>
+									<button
+										className="btn btn-neutral mt-4 mb-4"
+										onClick={() => {
+											// Create new tools with values from result
+											const newTool: Tool[] = result.map((tool) => {
+												return { ...input, params: tool };
+											});
+											// Add new tools to databse
+											const newToolsDB: Database = { ...toolsDB, tools: [...toolsDB.tools, ...newTool] };
+											// Set new tools to localStorage
+											setToolsDB(newToolsDB);
+										}}
+										disabled={!edited}
+									>
+										Zapisz zmiany jako nowe narzędzie
+									</button>
 									<div className="h-px bg-neutral-content mb-2"></div>
 								</div>
 							);

src/toolsDatabase.ts

@@ -18,7 +18,7 @@ export interface Tool {
 	glebokoscSkrawania: number;
 	params: ToolParams;
 }
-interface Database {
+export interface Database {
 	name: string;
 	version: string;
 	tools: Tool[];
@@ -26,7 +26,7 @@ interface Database {
 
 export const toolsDatabase: Database = {
 	name: "Baza narzędzi obróbki skrawaniem",
-	version: "1.1",
+	version: "1.2",
 	tools: [
 		{
 			rodzajFrezowania: 1,
@@ -48,34 +48,34 @@ export const toolsDatabase: Database = {
 			},
 		},
 		{
-			rodzajFrezowania: 1,
+			rodzajFrezowania: 0,
-			rodzajObrobki: 0,
+			rodzajObrobki: 2,
-			material: 1,
+			material: 2,
-			chropowatosc: 2,
+			chropowatosc: 7,
-			tolerancja: 3,
+			tolerancja: 2,
-			glebokoscSkrawania: 5,
+			glebokoscSkrawania: 6,
-			szerokoscSkrawania: 20,
+			szerokoscSkrawania: 44.5,
 			params: {
-				name: "Coromill DUPA",
+				name: "CoroMill 245 R245-032A32-12M (Wstępna)",
-				plate: "DUPA",
+				plate: "R245-12 T3 E1 6190",
-				predkoscObrotowaWrzeciona: 9999,
+				predkoscObrotowaWrzeciona: 10800,
-				predkoscSkrawania: 999,
+				predkoscSkrawania: 1520,
-				predkoscPosuwu: 9999,
+				predkoscPosuwu: 9030,
-				posuwNaOstrze: 0.999,
+				posuwNaOstrze: 0.278,
-				posuwNaObrot: 0.999,
+				posuwNaObrot: 0.836,
-				wydajnoscObjetosciowa: 99.9,
+				wydajnoscObjetosciowa: 552,
 			},
 		},
 		{
 			rodzajFrezowania: 0,
 			rodzajObrobki: 2,
 			material: 2,
-			chropowatosc: 3,
+			chropowatosc: 7,
 			tolerancja: 2,
-			glebokoscSkrawania: 5,
+			glebokoscSkrawania: 6,
 			szerokoscSkrawania: 44.5,
 			params: {
-				name: "CoroMill 245 R245-032A32-12M",
+				name: "CoroMill 245 R245-032A32-12M (Wykańczająca)",
 				plate: "R245-12 T3 E1 6190",
 				predkoscObrotowaWrzeciona: 13800,
 				predkoscSkrawania: 1520,
@@ -85,25 +85,6 @@ export const toolsDatabase: Database = {
 				wydajnoscObjetosciowa: 55.3,
 			},
 		},
-		{
-			rodzajFrezowania: 0,
-			rodzajObrobki: 2,
-			material: 2,
-			chropowatosc: 5,
-			tolerancja: 5,
-			glebokoscSkrawania: 5,
-			szerokoscSkrawania: 44.5,
-			params: {
-				name: "CoroMill 245 R245-032A32-12M",
-				plate: "R245-12 T3 E1 6190",
-				predkoscObrotowaWrzeciona: 11200,
-				predkoscSkrawania: 1510,
-				predkoscPosuwu: 9220,
-				posuwNaOstrze: 0.275,
-				posuwNaObrot: 0.823,
-				wydajnoscObjetosciowa: 461,
-			},
-		},
 		{
 			rodzajFrezowania: 2,
 			rodzajObrobki: 1,
@@ -161,5 +142,24 @@ export const toolsDatabase: Database = {
 				wydajnoscObjetosciowa: 47.6,
 			},
 		},
+		{
+			rodzajFrezowania: 0,
+			rodzajObrobki: 0,
+			material: 2,
+			chropowatosc: 0,
+			tolerancja: 2,
+			glebokoscSkrawania: 1,
+			szerokoscSkrawania: 25,
+			params: {
+				name: "CoroMill 210 R210-025T12-09M",
+				plate: "R210-09 04 12M-PM 1010",
+				predkoscObrotowaWrzeciona: 3360,
+				predkoscSkrawania: 250,
+				predkoscPosuwu: 5380,
+				posuwNaOstrze: 0.8,
+				posuwNaObrot: 1.6,
+				wydajnoscObjetosciowa: 49.8,
+			},
+		},
 	],
 };