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

Add Chropowatosc

Browse Source
This commit is contained in:
Igor Barcik 2023-10-26 11:54:28 +02:00
parent 22f058f2b7
commit 72a451a710
Signed by: biggy
GPG Key ID: EA4CE0D1E2A6DC98
2 changed files with 69 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

@ -5,6 +5,11 @@ const lists = {
rodzajObrobki: ["Zgrubna", "Wykończeniowa"],
material: ["Stal węglowa", "Stal nierdzewna", "Żeliwo"],
};
const listsLabels = {
rodzajFrezowania: "Rodzaj Frezowania",
rodzajObrobki: "Rodzaj Obróbki",
material: "Material",
};
import { ChangeEvent } from "react";
interface SelectProps {
@ -15,18 +20,15 @@ interface SelectProps {
disabledLabel: string;
}
const Select = ({ value, onChange, options, label, disabledLabel }: SelectProps) => (
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">{label}</label>
<select className="select w-full input input-secondary" value={value} onChange={onChange}>
<option disabled>{disabledLabel}</option>
{options.map((option, index) => (
<option key={option} value={index}>
{option}
</option>
))}
</select>
</div>
const Select = ({ value, onChange, options, disabledLabel }: SelectProps) => (
<select className="select w-full input input-secondary" value={value} onChange={onChange}>
<option disabled>{disabledLabel}</option>
{options.map((option, index) => (
<option key={option} value={index}>
{option}
</option>
))}
</select>
);
const HomePage = () => {
@ -37,6 +39,7 @@ const HomePage = () => {
glebokoscSkrawania: Math.floor(Math.random() * 50 + 1),
szerokoscSkrawania: Math.floor(Math.random() * 30 + 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>) => {
@ -50,7 +53,19 @@ const HomePage = () => {
<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) => (
<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}`} />
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">
{listsLabels[key as keyof typeof listsLabels]}
</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}`}
/>
</div>
))}
</div>
@ -134,12 +149,48 @@ const HomePage = () => {
<span>mm</span>
</div>
</div>
<label className="flex text-gray-700 text-sm font-bold mb-0">Chropowatość</label>
<div className="flex items-center space-x-2">
<input
type="range"
min={0.1}
max={5}
value={state.chropowatosc}
className="range flex-grow mr-2"
onChange={(e) => {
setState((prev) => ({ ...prev, chropowatosc: Number(e.target.value) }));
}}
step={0.01}
/>
<div className="flex items-center space-x-2">
<input
value={state.chropowatosc}
onChange={(e) => {
setState((prev) => ({ ...prev, chropowatosc: Number(e.target.value) }));
}}
className="input input-secondary w-20"
type="number"
min={0.1}
max={5}
step={0.01}
/>
<span>mm</span>
</div>
</div>
<button
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);
console.log(
state.rodzajFrezowania,
state.rodzajObrobki,
state.material,
state.glebokoscSkrawania,
state.szerokoscSkrawania,
state.tolerancja,
state.chropowatosc,
);
}}
>
Policz
@ -166,6 +217,9 @@ const HomePage = () => {
<span className="text-gray-800 block tracking-wide">
tolerancja: <span className="text-black font-medium">{state.tolerancja}</span>
</span>
<span className="text-gray-800 block tracking-wide">
chropowatość: <span className="text-black font-medium">{state.chropowatosc}</span>
</span>
</div>
</div>
</>