Implementing editing results as new tool
This commit is contained in:
parent
6fd28101e1
commit
19dd8a4276
GPG Key ID:
EA4CE0D1E2A6DC98
32
src/components/useLocalStorage.ts
Normal file
32
src/components/useLocalStorage.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import { useState } from "react";
|
||||
/**
|
||||
* Works like useState but stores the 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
|
||||
*/
|
||||
const useLocalStorage = <T>(key: string, initialValue: T): [T, (value: T) => void] => {
|
||||
const [storedValue, setStoredValue] = useState<T>(() => {
|
||||
try {
|
||||
const item = window.localStorage.getItem(key);
|
||||
return item ? JSON.parse(item) : initialValue;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return initialValue;
|
||||
}
|
||||
});
|
||||
|
||||
const setValue = (value: T) => {
|
||||
try {
|
||||
const valueToStore = value instanceof Function ? value(storedValue) : value;
|
||||
setStoredValue(valueToStore);
|
||||
window.localStorage.setItem(key, JSON.stringify(valueToStore));
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return [storedValue, setValue];
|
||||
};
|
||||
|
||||
export default useLocalStorage;
|
||||
@ -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.7.0",
|
||||
program_version: "1.9.0",
|
||||
};
|
||||
//About page configuration
|
||||
export const about = {
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Select from "../../components/Select";
|
||||
import Slider from "../../components/Slider";
|
||||
import useLocalStorage from "../../components/useLocalStorage";
|
||||
import { Tool, toolsDatabase } from "../../toolsDatabase";
|
||||
import { v4 as uuid4 } from "uuid";
|
||||
|
||||
const frezowaniaOpcje = {
|
||||
name: "rodzajFrezowania",
|
||||
@ -13,7 +15,7 @@ const dropdowns = [
|
||||
{
|
||||
name: "rodzajObrobki",
|
||||
label: "Rodzaj Obróbki",
|
||||
options: ["Zgrubna", "Wykończeniowa"],
|
||||
options: ["Zgrubna", "Wykończeniowa", "Wstępna i wykańczająca"],
|
||||
},
|
||||
{
|
||||
name: "material",
|
||||
@ -28,7 +30,7 @@ const dropdowns = [
|
||||
{
|
||||
name: "chropowatosc",
|
||||
label: "Chropowatość",
|
||||
options: ["Ra 1,6", "Ra 3,2", "Ra 6,3", "Ra 12,5", "Ra 25", "Ra 50"],
|
||||
options: ["Ra 0,1", "Ra 0,2", "Ra 0,4", "Ra 0,8", "Ra 1,6", "Ra 3,2", "Ra 6,3", "Ra 12,5", "Ra 25", "Ra 50"],
|
||||
},
|
||||
];
|
||||
interface IInput {
|
||||
@ -62,7 +64,8 @@ const HomePage = () => {
|
||||
tolerancja: 0,
|
||||
chropowatosc: 0,
|
||||
});
|
||||
const [result, setResult] = useState<Tool | null>(null); // Znalazione narzędzie
|
||||
const [result, setResult] = useLocalStorage<Tool[] | null>("results", []); // Znalazione narzędzie
|
||||
// const [result, setResult] = useState<Tool | null>(null); // Znalazione narzędzie
|
||||
const [calculating, setCalculating] = useState(false);
|
||||
const [notFound, setNotFound] = useState(false);
|
||||
// ----------------------------- FUNCTION --------------------------
|
||||
@ -81,20 +84,23 @@ const HomePage = () => {
|
||||
input.tolerancja === tool.tolerancja
|
||||
);
|
||||
};
|
||||
const checkInputInDatabse = useCallback((input: IInput): void => {
|
||||
console.debug("checking...", input);
|
||||
const checkInputInDatabse = useCallback(
|
||||
(input: IInput): void => {
|
||||
console.debug("checking...", input);
|
||||
|
||||
const foundTool = toolsDatabase.tools.find((tool) => matchesInput(tool, input));
|
||||
const foundTool: Tool[] | undefined = toolsDatabase.tools.filter((tool) => matchesInput(tool, input));
|
||||
|
||||
if (foundTool) {
|
||||
console.debug("found", foundTool);
|
||||
setResult(foundTool);
|
||||
} else {
|
||||
console.debug("not found");
|
||||
setResult(null);
|
||||
setNotFound(true);
|
||||
}
|
||||
}, []);
|
||||
if (foundTool && typeof foundTool !== "undefined" && foundTool.length > 0) {
|
||||
console.debug("found", foundTool);
|
||||
setResult(foundTool);
|
||||
} else {
|
||||
console.debug("not found");
|
||||
setResult(null);
|
||||
setNotFound(true);
|
||||
}
|
||||
},
|
||||
[setResult],
|
||||
);
|
||||
|
||||
// ----------------------------- EFFECT ----------------------------
|
||||
useEffect(() => {
|
||||
@ -103,14 +109,29 @@ const HomePage = () => {
|
||||
}
|
||||
setCalculating(false);
|
||||
}, [calculating, checkInputInDatabse, input]);
|
||||
// debug
|
||||
useEffect(() => {
|
||||
setInput({
|
||||
// lists
|
||||
rodzajFrezowania: 1,
|
||||
rodzajObrobki: 0,
|
||||
material: 1,
|
||||
// variables
|
||||
glebokoscSkrawania: 5,
|
||||
szerokoscSkrawania: 20,
|
||||
tolerancja: 3,
|
||||
chropowatosc: 2,
|
||||
});
|
||||
console.dir(input);
|
||||
}, [input]);
|
||||
return () => {
|
||||
setResult(null);
|
||||
};
|
||||
}, []);
|
||||
// ----------------------------- RENDER ----------------------------
|
||||
return (
|
||||
<>
|
||||
<div className="p-6 bg-white rounded shadow-lg lg:w-[800px] space-y-4 mb-4 mt-4 lg:ml-[50%] lg:translate-x-[-50%] ">
|
||||
<h1 className="text-3xl mb-6 text-center text-gray-700">Wybór parametrów</h1>
|
||||
<h1 className="text-3xl mb-6 text-center text-gray-700">Wybór atrybutów</h1>
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="block text-gray-700 text-sm font-bold mb-2">{frezowaniaOpcje.label}</label>
|
||||
@ -179,15 +200,36 @@ const HomePage = () => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-white rounded shadow-lg lg:w-[500px] mb-4 lg:ml-[50%] lg:translate-x-[-50%]">
|
||||
<div className="p-6 bg-white rounded shadow-lg lg:w-[800px] mb-4 lg:ml-[50%] lg:translate-x-[-50%]">
|
||||
{result ? (
|
||||
<>
|
||||
<h2 className="text-2xl mb-4">{result.name}</h2>
|
||||
{Object.entries(result!).map((arrayKeyValue) => {
|
||||
{result.map((tool) => {
|
||||
return (
|
||||
<p>
|
||||
{`${arrayKeyValue[0]}:`} <b>{`${arrayKeyValue[1]}`}</b>
|
||||
</p>
|
||||
<div key={uuid4()}>
|
||||
<h2 className="text-2xl mb-1">{tool.name}</h2>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-4 py-2">Parametr</th>
|
||||
<th className="px-4 py-2">Wartość</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Object.entries(tool).map(([key, value]) => {
|
||||
return (
|
||||
<tr>
|
||||
<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} />
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<button className="btn btn-neutral mt-4 mb-4">Zapisz zmiany jako nowe narzędzie</button>
|
||||
<div className="h-px bg-neutral-content mb-2"></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
|
||||
@ -12,10 +12,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
{/* fallbackElement - use when routing table is quite big to load, it will display desired element in convention of loading screen */}
|
||||
<ConfirmationDialogProvider>
|
||||
<RouterProvider
|
||||
router={router}
|
||||
fallbackElement={<p>Loading route table...</p>}
|
||||
/>
|
||||
<RouterProvider router={router} fallbackElement={<p>Loading route table...</p>} />
|
||||
</ConfirmationDialogProvider>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
|
||||
@ -24,7 +24,7 @@ interface Database {
|
||||
|
||||
export const toolsDatabase: Database = {
|
||||
name: "Baza narzędzi obróbki skrawaniem",
|
||||
version: "1.0",
|
||||
version: "1.1",
|
||||
tools: [
|
||||
{
|
||||
rodzajFrezowania: 1,
|
||||
@ -44,9 +44,27 @@ export const toolsDatabase: Database = {
|
||||
posuwNaObrot: 0.407,
|
||||
wydajnoscObjetosciowa: 64.8,
|
||||
},
|
||||
{
|
||||
rodzajFrezowania: 1,
|
||||
rodzajObrobki: 0,
|
||||
material: 1,
|
||||
chropowatosc: 2,
|
||||
tolerancja: 3,
|
||||
glebokoscSkrawania: 5,
|
||||
szerokoscSkrawania: 20,
|
||||
name: "Coromill DUPA",
|
||||
plate: "DUPA",
|
||||
ilosc_zebow: 4,
|
||||
predkoscObrotowaWrzeciona: 9999,
|
||||
predkoscSkrawania: 999,
|
||||
predkoscPosuwu: 9999,
|
||||
posuwNaOstrze: 0.999,
|
||||
posuwNaObrot: 0.999,
|
||||
wydajnoscObjetosciowa: 99.9,
|
||||
},
|
||||
{
|
||||
rodzajFrezowania: 0,
|
||||
rodzajObrobki: 1,
|
||||
rodzajObrobki: 2,
|
||||
material: 2,
|
||||
chropowatosc: 3,
|
||||
tolerancja: 2,
|
||||
@ -64,7 +82,7 @@ export const toolsDatabase: Database = {
|
||||
},
|
||||
{
|
||||
rodzajFrezowania: 0,
|
||||
rodzajObrobki: 0,
|
||||
rodzajObrobki: 2,
|
||||
material: 2,
|
||||
chropowatosc: 5,
|
||||
tolerancja: 5,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user