From 13d173d937d7863fd35e3e5e0213f7bb78cfa849 Mon Sep 17 00:00:00 2001 From: Igor Barcik Date: Fri, 27 Oct 2023 08:46:01 +0200 Subject: [PATCH] Add tools databse, make it serchable based on values in fields, some refactorization done --- src/components/Modal.tsx | 20 +--- src/configure.tsx | 2 +- src/features/Home/HomePage.tsx | 185 +++++++++++++++++++++++---------- src/toolsDatabase.ts | 63 +++++++++++ 4 files changed, 196 insertions(+), 74 deletions(-) create mode 100644 src/toolsDatabase.ts diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 7802a2a..aa8d433 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -40,16 +40,9 @@ export const Modal = ({ const handleClose = useCallback(() => { if (navigatePathOnClose) navigate(navigatePathOnClose); - if (isConfirmationDialogVisible) - (document.getElementById(modalId) as HTMLDialogElement).close(); + if (isConfirmationDialogVisible) (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 = ({

{title ?? "Hello!"}

-

- {subTitle ?? "Press ESC key or click the button below to close"} -

+

{subTitle ?? "Press ESC key or click the button below to close"}

{content}

- {children} diff --git a/src/configure.tsx b/src/configure.tsx index e199cb1..ddd8428 100644 --- a/src/configure.tsx +++ b/src/configure.tsx @@ -85,7 +85,7 @@ export interface CustomRouteObject extends Omit { //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 = { diff --git a/src/features/Home/HomePage.tsx b/src/features/Home/HomePage.tsx index e06a798..625f0d3 100644 --- a/src/features/Home/HomePage.tsx +++ b/src/features/Home/HomePage.tsx @@ -1,51 +1,123 @@ -import { 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 { useCallback, useEffect, useState } from "react"; 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({ + // 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 handleChange = (key: keyof typeof state) => (e: React.ChangeEvent) => { + // const [calcResults, setCalcResults] = useState({ + // // constans + // predkoscObrotowaWrzeciona: 2700, + // predkoscSkrawania: 170, + // predkoscPosuwu: 1140, + // posowNaOstrze: 0.14, + // posowNaObrot: 0.42, + // wydajnoscObjetosciowa: 114, + // }); + const [result, setResult] = useState(null); + const [calculating, setCalculating] = useState(false); + const [notFound, setNotFound] = useState(false); + // ----------------------------- FUNCTION -------------------------- + const handleChangeOfField = (key: keyof typeof input) => (e: React.ChangeEvent) => { 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 ( <> -
+

Wybór parametrów

- {Object.keys(lists).map((key) => ( -
- + {dropdowns.map((dropdown) => ( +
+