Add Chropowatosc

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

src/features/Home/HomePage.tsx

@@ -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) => (
+const Select = ({ value, onChange, options, disabledLabel }: SelectProps) => (
-	<div className="mb-4">
+	<select className="select w-full input input-secondary" value={value} onChange={onChange}>
-		<label className="block text-gray-700 text-sm font-bold mb-2">{label}</label>
+		<option disabled>{disabledLabel}</option>
-		<select className="select w-full input input-secondary" value={value} onChange={onChange}>
+		{options.map((option, index) => (
-			<option disabled>{disabledLabel}</option>
+			<option key={option} value={index}>
-			{options.map((option, index) => (
+				{option}
-				<option key={option} value={index}>
+			</option>
-					{option}
+		))}
-				</option>
+	</select>
-			))}
-		</select>
-	</div>
 );
 
 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>
 		</>