biggy/FrezManager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Igor Barcik 2023-10-27 08:46:01 +02:00
parent 232df0d13d
commit 13d173d937
Signed by: biggy
GPG Key ID: EA4CE0D1E2A6DC98
4 changed files with 196 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Modal.tsx
View File

@ -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 = ({
<dialog id={modalId} className={composeModalStyles()}>
<div className={comopseModalBoxStyles()}>
<h3 className="font-bold text-lg">{title ?? "Hello!"}</h3>
<p className="py-4">
{subTitle ?? "Press ESC key or click the button below to close"}
</p>
<p className="py-4">{subTitle ?? "Press ESC key or click the button below to close"}</p>
<p>{content}</p>
<div className="modal-action">
<form method="dialog">
<button
className="btn btn-circle btn-sm absolute top-2 right-2"
onClick={handleClose}
>
<button className="btn btn-circle btn-sm absolute top-2 right-2" onClick={handleClose}>
<Cross1Icon />
</button>
{children}

2
src/configure.tsx
View File

@ -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 = {

185
src/features/Home/HomePage.tsx
View File

@ -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<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 handleChange = (key: keyof typeof state) => (e: React.ChangeEvent<HTMLSelectElement>) => {
// const [calcResults, setCalcResults] = useState<IResults>({
// // 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) => (
<div className="mb-4" key={key}>
<label className="block text-gray-700 text-sm font-bold mb-2">
{listsLabels[key as keyof typeof listsLabels]}
</label>
{dropdowns.map((dropdown) => (
<div className="mb-4" key={dropdown.label}>
<label className="block text-gray-700 text-sm font-bold mb-2">{dropdown.label}</label>
<Select
key={key}
value={state[key as keyof typeof state]}
onChange={handleChange(key as keyof typeof state)}
options={lists[key as keyof typeof lists]}
label={key}
disabledLabel={`Wybierz ${key}`}
value={input[dropdown.label as keyof typeof input]}
onChange={handleChangeOfField(dropdown.name as keyof typeof input)}
options={dropdown.options}
label={dropdown.label}
disabledLabel={`Wybierz ${dropdown.label}`}
/>
</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 }}
value={state.szerokoscSkrawania}
range={{ min: 1, max: 50 }}
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(
state.rodzajFrezowania,
state.rodzajObrobki,
state.material,
state.glebokoscSkrawania,
state.szerokoscSkrawania,
state.tolerancja,
state.chropowatosc,
);
setCalculating(true);
}}
>
Policz
</button>
</div>
<div className="m-4 p-6 bg-white rounded-lg shadow-md w-fit max-w-xs">
<h1 className="text-4xl mb-8 text-center text-gray-800 tracking-wider">Wyniki</h1>
<div className="space-y-2">
{Object.keys(state).map((key) => (
<span key={key} className="text-gray-800 block tracking-wide">
{key}: <span className="text-black font-medium">{state[key as keyof typeof state]}</span>
</span>
))}
</div>
<div className="p-6 bg-white rounded shadow-lg lg:w-[500px] mb-4 lg:ml-[50%] lg:translate-x-[-50%]">
{result ? (
<>
<h2 className="text-2xl mb-4">{result.name}</h2>
<p className="text-lg">
Płyta: <span className="text font-mono font-semibold">{result.plate}</span>
</p>
<p className="text-lg">
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>
</>
);

63
src/toolsDatabase.ts Normal file
View File

@ -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],
},
],
};