const { useState, useEffect, useRef } = React;
function TarasKalkulator() {
const [wymiary, setWymiary] = useState({
szerokosc: 420,
dlugosc: 240,
wymiarPlyty: {
szerokosc: 60,
dlugosc: 60
}
});
const [wyniki, setWyniki] = useState({
iloscPłyt: 0,
iloscWspornikow: 0
});
const [skala, setSkala] = useState(1);
const containerRef = useRef(null);
const CONTAINER_SIZE = 500;
const MARGIN = 10;
useEffect(() => {
const obliczMaterialy = () => {
const plytyWzdluz = Math.ceil(wymiary.dlugosc / wymiary.wymiarPlyty.dlugosc);
const plytyWszerz = Math.ceil(wymiary.szerokosc / wymiary.wymiarPlyty.szerokosc);
const iloscPlyt = plytyWzdluz * plytyWszerz;
const wspornikiWzdluz = plytyWzdluz + 1;
const wspornikiWszerz = plytyWszerz + 1;
const iloscWspornikow = wspornikiWzdluz * wspornikiWszerz;
setWyniki({
iloscPłyt: iloscPlyt,
iloscWspornikow: iloscWspornikow
});
};
obliczMaterialy();
}, [wymiary]);
useEffect(() => {
const updateScale = () => {
if (containerRef.current) {
const dostepnaSzerokosc = CONTAINER_SIZE - (2 * MARGIN);
const dostepnaWysokosc = CONTAINER_SIZE - (2 * MARGIN);
const tarasWidth = wymiary.szerokosc;
const tarasHeight = wymiary.dlugosc;
const scaleX = dostepnaSzerokosc / tarasWidth;
const scaleY = dostepnaWysokosc / tarasHeight;
setSkala(Math.min(scaleX, scaleY));
}
};
updateScale();
window.addEventListener('resize', updateScale);
return () => window.removeEventListener('resize', updateScale);
}, [wymiary]);
const renderTaras = () => {
const plyty = [];
const wsporniki = [];
const iloscPlytyX = Math.ceil(wymiary.szerokosc / wymiary.wymiarPlyty.szerokosc);
const iloscPlytyY = Math.ceil(wymiary.dlugosc / wymiary.wymiarPlyty.dlugosc);
for (let i = 0; i < iloscPlytyX; i++) {
for (let j = 0; j < iloscPlytyY; j++) {
plyty.push(
React.createElement('rect', {
key: `plyta-${i}-${j}`,
x: i * wymiary.wymiarPlyty.szerokosc,
y: j * wymiary.wymiarPlyty.dlugosc,
width: wymiary.wymiarPlyty.szerokosc - 1,
height: wymiary.wymiarPlyty.dlugosc - 1,
fill: "#e2e2e2",
stroke: "#999",
strokeWidth: 1/skala
})
);
}
}
for (let i = 0; i <= iloscPlytyX; i++) {
for (let j = 0; j <= iloscPlytyY; j++) {
wsporniki.push(
React.createElement('circle', {
key: `wspornik-${i}-${j}`,
cx: i * wymiary.wymiarPlyty.szerokosc,
cy: j * wymiary.wymiarPlyty.dlugosc,
r: 3/skala,
fill: "#666"
})
);
}
}
const svgWidth = wymiary.szerokosc;
const svgHeight = wymiary.dlugosc;
const translateX = (CONTAINER_SIZE - (svgWidth * skala)) / 2;
const translateY = (CONTAINER_SIZE - (svgHeight * skala)) / 2;
return React.createElement('svg', {
width: CONTAINER_SIZE,
height: CONTAINER_SIZE,
style: { border: '1px solid #e5e7eb', background: 'white' }
},
React.createElement('g', {
transform: `translate(${translateX}, ${translateY}) scale(${skala})`
},
[...plyty, ...wsporniki]
)
);
};
const inputAndResults = React.createElement('div', { className: 'input-and-results' },
React.createElement('div', { className: 'input-section' },
React.createElement('p', { className: 'section-title' },
'Wprowadź długość i szerokość planowanego tarasu (w cm).'
),
React.createElement('div', { className: 'input-group' },
React.createElement('label', { className: 'label' }, 'Szerokość tarasu:'),
React.createElement('input', {
className: 'input',
type: 'number',
value: wymiary.szerokosc,
onChange: (e) => setWymiary({
...wymiary,
szerokosc: parseFloat(e.target.value) || 0
}),
min: '1'
})
),
React.createElement('div', { className: 'input-group' },
React.createElement('label', { className: 'label' }, 'Długość tarasu:'),
React.createElement('input', {
className: 'input',
type: 'number',
value: wymiary.dlugosc,
onChange: (e) => setWymiary({
...wymiary,
dlugosc: parseFloat(e.target.value) || 0
}),
min: '1'
})
)
),
React.createElement('div', { className: 'input-section' },
React.createElement('p', { className: 'section-title' },
'Wprowadź wymiary wybranych płyt (długość, szerokość (w cm))'
),
React.createElement('div', { className: 'input-group' },
React.createElement('label', { className: 'label' }, 'Szerokość płyty:'),
React.createElement('input', {
className: 'input',
type: 'number',
value: wymiary.wymiarPlyty.szerokosc,
onChange: (e) => setWymiary({
...wymiary,
wymiarPlyty: {
...wymiary.wymiarPlyty,
szerokosc: parseFloat(e.target.value) || 0
}
}),
min: '1'
})
),
React.createElement('div', { className: 'input-group' },
React.createElement('label', { className: 'label' }, 'Długość płyty:'),
React.createElement('input', {
className: 'input',
type: 'number',
value: wymiary.wymiarPlyty.dlugosc,
onChange: (e) => setWymiary({
...wymiary,
wymiarPlyty: {
...wymiary.wymiarPlyty,
dlugosc: parseFloat(e.target.value) || 0
}
}),
min: '1'
})
)
),
React.createElement('div', { className: 'results' },
React.createElement('h3', null, `Ilość potrzebnych wsporników: ${wyniki.iloscWspornikow} szt.`),
React.createElement('a', {
href: `https://postawnataras.pl/produkt/podkladka-pod-plyty-tarasowe-gumowa-2-mm/?add-to-cart=235176&quantity=${wyniki.iloscWspornikow}`,
className: 'add-to-cart-button-pnt',
// target: '_blank'
}, 'Dodaj do koszyka ')
)
);
const visualization = React.createElement('div', {
className: 'visualization-container',
ref: containerRef
},
React.createElement('h3', null, 'Wizualizacja układu:'),
React.createElement('div', { style: { display: 'flex', justifyContent: 'center' } },
renderTaras()
)
);
return React.createElement('div', { className: 'card' },
// React.createElement('div', { className: 'card-header' },
// React.createElement('h2', { className: 'card-title' }, 'Oblicz ilość potrzebnych wsporników')
// ),
React.createElement('div', { className: 'grid' },
inputAndResults,
visualization
)
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(TarasKalkulator));