3d788740cb
Includes room interior with floor, walls, glass you can see through, and all uncommitted production changes that were running live. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
736 lines
22 KiB
JavaScript
736 lines
22 KiB
JavaScript
import { useContext, useState, useEffect } from "react";
|
|
import { MyContext } from "../data/contextapi";
|
|
import InfoIcon from "./InfoIcon";
|
|
|
|
export default function Door() {
|
|
const {
|
|
type,
|
|
settype,
|
|
setStep,
|
|
width,
|
|
setWidth,
|
|
doorConfig,
|
|
setDoorConfig,
|
|
sidePannel,
|
|
setSidePannel,
|
|
sidePannelConfig,
|
|
setSidePannelConfig,
|
|
sidePannelSize,
|
|
setSidePannelSize,
|
|
stalenPart,
|
|
setStalenPart,
|
|
stalenType,
|
|
setStalenType,
|
|
open,
|
|
inprogress,
|
|
setInprogress,
|
|
height,
|
|
setHeight,
|
|
holeWidth,
|
|
setHoleWidth,
|
|
} = useContext(MyContext);
|
|
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Function to check the window width
|
|
const checkScreenWidth = () => {
|
|
setIsMobile(window.innerWidth <= 800);
|
|
};
|
|
|
|
// Initial check
|
|
checkScreenWidth();
|
|
|
|
// Add event listener to check screen width on resize
|
|
window.addEventListener("resize", checkScreenWidth);
|
|
|
|
// Clean up event listener on component unmount
|
|
return () => {
|
|
window.removeEventListener("resize", checkScreenWidth);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (
|
|
(doorConfig == "dubbele" && sidePannel === "beide") ||
|
|
sidePannel === "beide"
|
|
) {
|
|
setSidePannelSize(width);
|
|
} else {
|
|
setSidePannelSize(width);
|
|
}
|
|
setWidth(90);
|
|
setSidePannelSize(90);
|
|
setHoleWidth(calculateHoleWidth());
|
|
}, [doorConfig, sidePannelConfig, sidePannel]);
|
|
|
|
const handleHeightChange = (e) => {
|
|
if (e.target.value > 285) {
|
|
return
|
|
}
|
|
const value = e.target.value;
|
|
if (!isNaN(value)) {
|
|
setHeight(value);
|
|
}
|
|
};
|
|
|
|
const calculateHoleMinWidth = () => {
|
|
if (
|
|
(doorConfig != "dubbele" &&
|
|
(sidePannel === "links" || sidePannel === "rechts")) ||
|
|
(doorConfig == "dubbele" && sidePannel == "geen")
|
|
) {
|
|
return 120;
|
|
}
|
|
|
|
if (doorConfig != "dubbele" && sidePannel === "beide") {
|
|
return 180;
|
|
}
|
|
if (
|
|
doorConfig == "dubbele" &&
|
|
(sidePannel == "links" || sidePannel == "rechts")
|
|
) {
|
|
return 180;
|
|
}
|
|
|
|
if (doorConfig == "dubbele" && sidePannel == "beide") {
|
|
return 240;
|
|
}
|
|
|
|
return 60;
|
|
};
|
|
|
|
const calculateHoleMaxWidth = () => {
|
|
if (
|
|
(doorConfig != "dubbele" &&
|
|
(sidePannel === "links" || sidePannel === "rechts")) ||
|
|
(doorConfig == "dubbele" && sidePannel == "geen")
|
|
) {
|
|
return 240;
|
|
}
|
|
|
|
if (doorConfig != "dubbele" && sidePannel === "beide") {
|
|
return 360;
|
|
}
|
|
if (
|
|
doorConfig == "dubbele" &&
|
|
(sidePannel == "links" || sidePannel == "rechts")
|
|
) {
|
|
return 360;
|
|
}
|
|
|
|
if (doorConfig == "dubbele" && sidePannel == "beide") {
|
|
return 400;
|
|
}
|
|
|
|
return 120;
|
|
};
|
|
|
|
const calculateHoleWidth = () => {
|
|
if (
|
|
(doorConfig != "dubbele" &&
|
|
(sidePannel === "links" || sidePannel === "rechts")) ||
|
|
(doorConfig == "dubbele" && sidePannel == "geen")
|
|
) {
|
|
return 180;
|
|
}
|
|
|
|
if (doorConfig != "dubbele" && sidePannel === "beide") {
|
|
return 270;
|
|
}
|
|
if (
|
|
doorConfig == "dubbele" &&
|
|
(sidePannel == "links" || sidePannel == "rechts")
|
|
) {
|
|
return 270;
|
|
}
|
|
|
|
if (doorConfig == "dubbele" && sidePannel == "beide") {
|
|
return 360;
|
|
}
|
|
|
|
return 90;
|
|
};
|
|
|
|
const handleHoleWidth = (e) => {
|
|
if (e.target.value > calculateHoleMaxWidth()) {
|
|
return
|
|
}
|
|
setHoleWidth(e.target.value);
|
|
setSidePannelSize(calculateSidePanelWidth(e.target.value, width));
|
|
|
|
if (sidePannel == "geen") {
|
|
setWidth(doorConfig === "dubbele" ? e.target.value / 2 : e.target.value);
|
|
}
|
|
};
|
|
|
|
const calculateSidePanelWidth = (totalWidth, doorWidth) => {
|
|
if (
|
|
doorConfig != "dubbele" &&
|
|
(sidePannel === "links" || sidePannel === "rechts")
|
|
) {
|
|
return totalWidth - Number(doorWidth);
|
|
}
|
|
|
|
if (doorConfig == "dubbele" && sidePannel == "geen") {
|
|
return 0;
|
|
}
|
|
|
|
if (doorConfig != "dubbele" && sidePannel === "beide") {
|
|
return (totalWidth - Number(doorWidth)) / 2;
|
|
}
|
|
if (
|
|
doorConfig == "dubbele" &&
|
|
(sidePannel == "links" || sidePannel == "rechts")
|
|
) {
|
|
return totalWidth - Number(doorWidth) * 2;
|
|
}
|
|
|
|
if (doorConfig == "dubbele" && sidePannel == "beide") {
|
|
return (totalWidth - Number(doorWidth) * 2) / 2;
|
|
}
|
|
|
|
return 0;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* <div style={{ width: '100%' }}>
|
|
<div style={{ margin: '5%', paddingTop: '0.5rem', display: 'flex', justifyContent: 'space-between', fontWeight: 'bolder', fontSize: 'normal' }}>
|
|
<span>Type Deur</span>
|
|
<div style={{ backgroundColor: 'white', borderRadius: '20px', width: 'auto', padding: '10px', margin: '0 0 0 10px' }}>
|
|
<span className="body-txt" style={{}} onClick={() => { setStep('door') }}>€ 0,00</span>
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
<div
|
|
style={{
|
|
margin: "5%",
|
|
paddingTop: "0.5rem",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
fontWeight: "bolder",
|
|
fontSize: "normal",
|
|
}}
|
|
>
|
|
<span>Afmeting</span>
|
|
</div>
|
|
<div className="slider-container" style={{ margin: "5%" }}>
|
|
<div className="">
|
|
<p style={{ marginBottom: "-5px" }}>Hoogte</p>
|
|
</div>
|
|
<div
|
|
className="slider-container"
|
|
style={{ display: "flex", alignItems: "center" }}
|
|
>
|
|
<div style={{ flex: 1 }}>
|
|
<input
|
|
type="range"
|
|
min="180"
|
|
max="285"
|
|
value={height}
|
|
onChange={handleHeightChange}
|
|
className="slider"
|
|
id="range1"
|
|
style={{
|
|
width: "100%",
|
|
height: "8px",
|
|
borderRadius: "5px",
|
|
appearance: "none",
|
|
background: "#F2F2F3", // Grey line
|
|
outline: "none", // Remove default outline
|
|
marginTop: "10px", // Adjust margin to separate from the text above
|
|
}}
|
|
/>
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginLeft: "10px",
|
|
paddingLeft: "10px",
|
|
paddingRight: "10px",
|
|
paddingTop: "5px",
|
|
paddingBottom: "5px",
|
|
backgroundColor: "#F2F2F3",
|
|
position: "relative",
|
|
width: "5rem",
|
|
fontSize: "small",
|
|
border: "1px solid",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
<input
|
|
type="text"
|
|
style={{
|
|
width: "100%",
|
|
border: "none",
|
|
outline: "none",
|
|
background: "transparent",
|
|
}}
|
|
value={height}
|
|
onChange={handleHeightChange}
|
|
onInput={(e) => e.target.value = e.target.value.replace(/[^0-9]/g, '')}
|
|
/>
|
|
<span
|
|
style={{
|
|
position: "absolute",
|
|
right: "10px",
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
}}
|
|
>
|
|
cm
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="slider-container"
|
|
style={{
|
|
margin: "5%",
|
|
borderBottom: "1px solid #d1d1d1",
|
|
paddingBottom: "15px",
|
|
}}
|
|
>
|
|
<div className="">
|
|
<p style={{ marginBottom: "-5px" }}>Breedte</p>
|
|
</div>
|
|
<div
|
|
className="slider-container"
|
|
style={{ display: "flex", alignItems: "center" }}
|
|
>
|
|
<div style={{ flex: 1 }}>
|
|
<input
|
|
type="range"
|
|
min={calculateHoleMinWidth()}
|
|
max={calculateHoleMaxWidth()}
|
|
value={holeWidth}
|
|
onChange={handleHoleWidth}
|
|
style={{
|
|
width: "100%",
|
|
height: "8px",
|
|
borderRadius: "5px",
|
|
appearance: "none",
|
|
background: "#F2F2F3", // Grey line
|
|
outline: "none", // Remove default outline
|
|
marginTop: "10px", // Adjust margin to separate from the text above
|
|
}}
|
|
/>
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginLeft: "10px",
|
|
paddingLeft: "10px",
|
|
paddingRight: "10px",
|
|
paddingTop: "5px",
|
|
paddingBottom: "5px",
|
|
backgroundColor: "#F2F2F3",
|
|
position: "relative",
|
|
width: "5rem",
|
|
fontSize: "small",
|
|
border: "1px solid",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
<input
|
|
type="text"
|
|
style={{
|
|
width: "100%",
|
|
border: "none",
|
|
outline: "none",
|
|
background: "transparent",
|
|
}}
|
|
value={holeWidth}
|
|
onChange={handleHoleWidth}
|
|
onInput={(e) => e.target.value = e.target.value.replace(/[^0-9]/g, '')}
|
|
/>
|
|
<span
|
|
style={{
|
|
position: "absolute",
|
|
right: "10px",
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
}}
|
|
>
|
|
cm
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ width: "100%" }}>
|
|
<div
|
|
style={{
|
|
margin: "5%",
|
|
paddingTop: "0.5rem",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
fontWeight: "bolder",
|
|
fontSize: "normal",
|
|
}}
|
|
>
|
|
<InfoIcon title={"Deur type"} />
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="door-content-2"
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<div
|
|
className="door-content-2-1 door-content-custom-1"
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(2, 1fr)",
|
|
gridColumnGap: "10px",
|
|
fontSize: "11px",
|
|
margin: "0 5%",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<div
|
|
className="custom-card-1"
|
|
style={{
|
|
position: "relative",
|
|
margin: "5px",
|
|
borderRadius: "5px",
|
|
}}
|
|
onClick={() => {
|
|
if (!inprogress) settype("Taatsdeur");
|
|
}}
|
|
>
|
|
<div
|
|
className="main-img-div"
|
|
style={{
|
|
border: type === "Taatsdeur" ? "2px solid black" : "none",
|
|
borderRadius: "10px",
|
|
boxShadow: "-5px -2px 10px -2px rgba(0,0,0,0.6)",
|
|
padding: "10px",
|
|
backgroundColor: "white",
|
|
aspectRatio: "1/1",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div style={{ position: "absolute", top: "5px", right: "5px" }}>
|
|
<input
|
|
type="radio"
|
|
className="sm"
|
|
checked={type === "Taatsdeur"}
|
|
readOnly
|
|
onChange={() => {
|
|
if (!inprogress) settype("Taatsdeur");
|
|
}}
|
|
/>
|
|
</div>
|
|
<center>
|
|
<img
|
|
src="./images/doortypes/door_type_1_staging.jpg"
|
|
style={{
|
|
maxWidth: "80%",
|
|
maxHeight: "100%",
|
|
width: "80%",
|
|
borderRadius: "10px",
|
|
overflow: "hidden",
|
|
}}
|
|
/>
|
|
</center>
|
|
</div>
|
|
<div
|
|
style={{
|
|
margin: "10px 0 0 0",
|
|
backgroundColor: type === "Taatsdeur" ? "black" : "#bdc79d",
|
|
color: "white",
|
|
position: "relative",
|
|
paddingTop: "5px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "-5px",
|
|
left: "0",
|
|
width: "100%",
|
|
height: "8px",
|
|
borderRadius: "50px",
|
|
backgroundColor: "#fff",
|
|
}}
|
|
/>
|
|
<span
|
|
className="itm-txt"
|
|
style={{
|
|
display: "block",
|
|
wordWrap: "break-word",
|
|
textAlign: "center",
|
|
fontWeight: "normal",
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
Taatsdeur
|
|
</span>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
<div
|
|
className="custom-card-1"
|
|
style={{ position: "relative", margin: "5px", borderRadius: "5px" }}
|
|
onClick={() => {
|
|
if (!inprogress) settype("Schuifdeur");
|
|
}}
|
|
>
|
|
<div
|
|
className="main-img-div"
|
|
style={{
|
|
border: type === "Schuifdeur" ? "2px solid black" : "none",
|
|
borderRadius: "10px",
|
|
boxShadow: "-5px -2px 10px -2px rgba(0,0,0,0.6)",
|
|
padding: "10px",
|
|
backgroundColor: "white",
|
|
aspectRatio: "1/1",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div style={{ position: "absolute", top: "5px", right: "5px" }}>
|
|
<input
|
|
type="radio"
|
|
className="sm"
|
|
checked={type === "Schuifdeur"}
|
|
readOnly
|
|
onChange={() => {
|
|
if (!inprogress) settype("Schuifdeur");
|
|
}}
|
|
/>
|
|
</div>
|
|
<center>
|
|
<img
|
|
src="./images/doortypes/door_type_2_staging.jpg"
|
|
style={{
|
|
maxWidth: "80%",
|
|
maxHeight: "100%",
|
|
width: "80%",
|
|
borderRadius: "10px",
|
|
overflow: "hidden",
|
|
}}
|
|
/>
|
|
</center>
|
|
</div>
|
|
<div
|
|
style={{
|
|
margin: "10px 0 0 0",
|
|
backgroundColor: type === "Schuifdeur" ? "black" : "#bdc79d",
|
|
color: "white",
|
|
position: "relative",
|
|
paddingTop: "5px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "-5px",
|
|
left: "0",
|
|
width: "100%",
|
|
height: "8px",
|
|
borderRadius: "50px",
|
|
backgroundColor: "#fff",
|
|
}}
|
|
/>
|
|
<span
|
|
className="itm-txt"
|
|
style={{
|
|
display: "block",
|
|
wordWrap: "break-word",
|
|
textAlign: "center",
|
|
fontWeight: "normal",
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
SCHUIFDEUR
|
|
</span>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
<div
|
|
className="custom-card-1"
|
|
style={{ position: "relative", margin: "5px", borderRadius: "5px" }}
|
|
onClick={() => {
|
|
if (!inprogress) settype("Scharnier");
|
|
}}
|
|
>
|
|
<div
|
|
className="main-img-div"
|
|
style={{
|
|
border: type === "Scharnier" ? "2px solid black" : "none",
|
|
borderRadius: "10px",
|
|
boxShadow: "-5px -2px 10px -2px rgba(0,0,0,0.6)",
|
|
padding: "10px",
|
|
backgroundColor: "white",
|
|
aspectRatio: "1/1",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div style={{ position: "absolute", top: "5px", right: "5px" }}>
|
|
<input
|
|
type="radio"
|
|
className="sm"
|
|
checked={type === "Scharnier"}
|
|
readOnly
|
|
onChange={() => {
|
|
if (!inprogress) settype("Scharnier");
|
|
}}
|
|
/>
|
|
</div>
|
|
<center>
|
|
<img
|
|
src="./images/doortypes/door_type_3_staging.jpg"
|
|
style={{
|
|
maxWidth: "80%",
|
|
maxHeight: "100%",
|
|
width: "80%",
|
|
borderRadius: "10px",
|
|
overflow: "hidden",
|
|
}}
|
|
/>
|
|
</center>
|
|
</div>
|
|
<div
|
|
style={{
|
|
margin: "10px 0 0 0",
|
|
backgroundColor: type === "Scharnier" ? "black" : "#bdc79d",
|
|
color: "white",
|
|
position: "relative",
|
|
paddingTop: "5px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "-5px",
|
|
left: "0",
|
|
width: "100%",
|
|
height: "8px",
|
|
borderRadius: "50px",
|
|
backgroundColor: "#fff",
|
|
}}
|
|
/>
|
|
<span
|
|
className="itm-txt"
|
|
style={{
|
|
display: "block",
|
|
wordWrap: "break-word",
|
|
textAlign: "center",
|
|
fontWeight: "normal",
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
KOZIJN DEUR
|
|
</span>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
<div
|
|
className="custom-card-1"
|
|
style={{ position: "relative", margin: "5px", borderRadius: "5px" }}
|
|
onClick={() => {
|
|
settype("vast-stalen");
|
|
setDoorConfig("enkele");
|
|
setSidePannel("geen");
|
|
setInprogress(false);
|
|
}}
|
|
>
|
|
<div
|
|
className="main-img-div"
|
|
style={{
|
|
border: type === "vast-stalen" ? "2px solid black" : "none",
|
|
borderRadius: "10px",
|
|
boxShadow: "-5px -2px 10px -2px rgba(0,0,0,0.6)",
|
|
padding: "10px",
|
|
backgroundColor: "white",
|
|
aspectRatio: "1/1",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div style={{ position: "absolute", top: "5px", right: "5px" }}>
|
|
<input
|
|
type="radio"
|
|
className="sm"
|
|
checked={type === "vast-stalen"}
|
|
readOnly
|
|
onChange={() => {
|
|
settype("vast-stalen");
|
|
setDoorConfig("enkele");
|
|
setSidePannel("geen");
|
|
setInprogress(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
<center>
|
|
<img
|
|
src="./images/doortypes/door_type_4.jpg"
|
|
style={{
|
|
maxWidth: "80%",
|
|
maxHeight: "100%",
|
|
width: "80%",
|
|
borderRadius: "10px",
|
|
overflow: "hidden",
|
|
}}
|
|
/>
|
|
</center>
|
|
</div>
|
|
<div
|
|
style={{
|
|
margin: "10px 0 0 0",
|
|
backgroundColor: type === "vast-stalen" ? "black" : "#bdc79d",
|
|
color: "white",
|
|
position: "relative",
|
|
paddingTop: "5px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: "-5px",
|
|
left: "0",
|
|
width: "100%",
|
|
height: "8px",
|
|
borderRadius: "50px",
|
|
backgroundColor: "#fff",
|
|
}}
|
|
/>
|
|
<span
|
|
className="itm-txt"
|
|
style={{
|
|
display: "block",
|
|
wordWrap: "break-word",
|
|
textAlign: "center",
|
|
fontWeight: "normal",
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
Vast stalen
|
|
</span>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
className="volgende btn"
|
|
onClick={() => {
|
|
setStep("samenstling");
|
|
}}
|
|
>
|
|
Volgende
|
|
</button>
|
|
</>
|
|
);
|
|
}
|