function MainComponent() { const [language, setLanguage] = useState("de"); const [unit, setUnit] = useState("meters"); const [roomConfig, setRoomConfig] = useState({ width: 4, length: 5, height: 2.4 }); const [calculations, setCalculations] = useState(null); const [translations, setTranslations] = useState({}); const [savedConfigs, setSavedConfigs] = useState([]); const [configName, setConfigName] = useState(""); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const languageOptions = [ { code: "de", label: "Deutsch" }, { code: "en", label: "English" } ]; useEffect(()=>{ const loadTranslations = async ()=>{ try { const response = await fetch("/api/translations/get", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ language_code: language }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); if (result.success) { setTranslations(result.data); } else { throw new Error(result.message); } } catch (error) { console.error(error); setError("Failed to load translations"); } }; loadTranslations(); }, [ language ]); useEffect(()=>{ const loadConfigs = async ()=>{ try { const response = await fetch("/api/room-config/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: "current_user" }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); if (result.success) { setSavedConfigs(result.data); } else { throw new Error(result.message); } } catch (error) { console.error(error); setError(translations.load_error || "Failed to load configurations"); } }; loadConfigs(); }, [ translations.load_error ]); const metersToFeet = (meters)=>meters * 3.28084; const feetToMeters = (feet)=>feet / 3.28084; const formatMeasurement = (value)=>{ const converted = unit === "feet" ? metersToFeet(value) : value; return `${converted.toFixed(2)}${unit === "feet" ? "ft" : "m"}`; }; const handleUnitChange = (newUnit)=>{ setUnit(newUnit); }; const handleInputChange = (field, value)=>{ const valueInMeters = unit === "feet" ? feetToMeters(parseFloat(value)) : parseFloat(value); setRoomConfig((prev)=>({ ...prev, [field]: valueInMeters })); }; const getDisplayValue = (field)=>{ const valueInMeters = roomConfig[field]; return unit === "feet" ? metersToFeet(valueInMeters).toFixed(2) : valueInMeters.toFixed(2); }; const t = (key)=>translations[key] || key; const calculatePlacement = useCallback(()=>{ const { width, length, height } = roomConfig; const speakerDistance = width * 0.6; const wallDistance = length * 0.38; const speakerHeight = height * 0.4; const speakerAngle = 60; setCalculations({ speakerDistance, wallDistance, speakerHeight, speakerAngle }); }, [ roomConfig ]); const saveConfiguration = async ()=>{ if (!configName.trim()) { setError("Configuration name is required"); return; } setLoading(true); try { const response = await fetch("/api/room-config/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ user_id: "current_user", name: configName, ...roomConfig }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); if (result.success) { setSavedConfigs([ result.data, ...savedConfigs ]); setConfigName(""); setError(null); } else { throw new Error(result.message); } } catch (error) { console.error(error); setError("Failed to save configuration"); } finally{ setLoading(false); } }; const RoomVisualization = useCallback(()=>{ if (!calculations) return null; const VIEWPORT_WIDTH = 400; const VIEWPORT_HEIGHT = 300; const PADDING = 50; const scaleX = (VIEWPORT_WIDTH - 2 * PADDING) / roomConfig.width; const scaleY = (VIEWPORT_HEIGHT - 2 * PADDING) / roomConfig.length; const scale = Math.min(scaleX, scaleY); const roomWidth = roomConfig.width * scale; const roomLength = roomConfig.length * scale; const startX = (VIEWPORT_WIDTH - roomWidth) / 2; const startY = (VIEWPORT_HEIGHT - roomLength) / 2; const listenerX = startX + roomWidth / 2; const listenerY = startY + roomLength - calculations.wallDistance * scale; const speakerLeftX = listenerX - calculations.speakerDistance * scale / 2; const speakerRightX = listenerX + calculations.speakerDistance * scale / 2; const speakerY = startY + calculations.wallDistance * scale; return /*#__PURE__*/ React.createElement("svg", { className: "w-full h-64", viewBox: `0 0 ${VIEWPORT_WIDTH} ${VIEWPORT_HEIGHT}`, __source: { fileName: "", lineNumber: 184, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("rect", { x: startX, y: startY, width: roomWidth, height: roomLength, fill: "none", stroke: "#315CAA", strokeWidth: "2", __source: { fileName: "", lineNumber: 188, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: listenerX, cy: listenerY, r: "5", fill: "#315CAA", __source: { fileName: "", lineNumber: 197, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: speakerLeftX, cy: speakerY, r: "5", fill: "#315CAA", __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: speakerRightX, cy: speakerY, r: "5", fill: "#315CAA", __source: { fileName: "", lineNumber: 199, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: listenerX, y1: listenerY, x2: speakerLeftX, y2: speakerY, stroke: "#315CAA", strokeWidth: "1", strokeDasharray: "4", __source: { fileName: "", lineNumber: 200, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: listenerX, y1: listenerY, x2: speakerRightX, y2: speakerY, stroke: "#315CAA", strokeWidth: "1", strokeDasharray: "4", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: speakerLeftX, y1: speakerY, x2: speakerRightX, y2: speakerY, stroke: "#315CAA", strokeWidth: "1", strokeDasharray: "4", __source: { fileName: "", lineNumber: 218, columnNumber: 9 }, __self: this })); }, [ calculations, roomConfig ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-4 md:p-8 bg-gray-50", __source: { fileName: "", lineNumber: 232, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 233, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 234, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[28px] font-bold text-[#282727]", __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, t("title")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 items-center", __source: { fileName: "", lineNumber: 236, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center rounded-md border border-white shadow-md", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleUnitChange("meters"), className: `px-3 py-1 rounded-l-md ${unit === "meters" ? "bg-[#315CAA] text-white" : "text-[#282727] hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, "m"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleUnitChange("feet"), className: `px-3 py-1 rounded-r-md ${unit === "feet" ? "bg-[#315CAA] text-white" : "text-[#282727] hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, "ft")), /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "p-2 rounded-md font-['Century_Gothic'] bg-[#315CAA] text-white border border-white shadow-md", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, languageOptions.map((lang)=>/*#__PURE__*/ React.createElement("option", { key: lang.code, value: lang.code, __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }, lang.label))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 265, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 266, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 mb-4", __source: { fileName: "", lineNumber: 268, columnNumber: 25 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 270, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#282727]", __source: { fileName: "", lineNumber: 271, columnNumber: 17 }, __self: this }, t("room_width"), " (", unit === "meters" ? "m" : "ft", ")"), /*#__PURE__*/ React.createElement("input", { type: "number", value: getDisplayValue("width"), onChange: (e)=>handleInputChange("width", e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2", step: "0.1", __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#282727]", __source: { fileName: "", lineNumber: 284, columnNumber: 17 }, __self: this }, t("room_length"), " (", unit === "meters" ? "m" : "ft", ")"), /*#__PURE__*/ React.createElement("input", { type: "number", value: getDisplayValue("length"), onChange: (e)=>handleInputChange("length", e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2", step: "0.1", __source: { fileName: "", lineNumber: 287, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 296, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#282727]", __source: { fileName: "", lineNumber: 297, columnNumber: 17 }, __self: this }, t("room_height"), " (", unit === "meters" ? "m" : "ft", ")"), /*#__PURE__*/ React.createElement("input", { type: "number", value: getDisplayValue("height"), onChange: (e)=>handleInputChange("height", e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2", step: "0.1", __source: { fileName: "", lineNumber: 300, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: calculatePlacement, className: "w-full bg-[#315CAA] text-white py-2 px-4 rounded-md hover:bg-[#264785] transition-colors", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, t("calculate")), /*#__PURE__*/ React.createElement("div", { className: "pt-4 border-t", __source: { fileName: "", lineNumber: 316, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 317, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-[#282727]", __source: { fileName: "", lineNumber: 318, columnNumber: 19 }, __self: this }, t("configuration_name")), /*#__PURE__*/ React.createElement("input", { type: "text", value: configName, onChange: (e)=>setConfigName(e.target.value), className: "mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2", __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: saveConfiguration, disabled: loading, className: "mt-2 w-full bg-[#315CAA] text-white py-2 px-4 rounded-md hover:bg-[#264785] transition-colors disabled:bg-gray-400", __source: { fileName: "", lineNumber: 328, columnNumber: 17 }, __self: this }, loading ? "..." : t("save_configuration"))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 339, columnNumber: 11 }, __self: this }, calculations && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 341, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#315CAA]", __source: { fileName: "", lineNumber: 342, columnNumber: 17 }, __self: this }, t("recommended_setup")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 345, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#282727]", __source: { fileName: "", lineNumber: 346, columnNumber: 19 }, __self: this }, t("speaker_distance"), ":", " ", formatMeasurement(calculations.speakerDistance)), /*#__PURE__*/ React.createElement("p", { className: "text-[#282727]", __source: { fileName: "", lineNumber: 350, columnNumber: 19 }, __self: this }, t("wall_distance"), ":", " ", formatMeasurement(calculations.wallDistance)), /*#__PURE__*/ React.createElement("p", { className: "text-[#282727]", __source: { fileName: "", lineNumber: 354, columnNumber: 19 }, __self: this }, t("speaker_height"), ":", " ", formatMeasurement(calculations.speakerHeight)), /*#__PURE__*/ React.createElement("p", { className: "text-[#282727]", __source: { fileName: "", lineNumber: 358, columnNumber: 19 }, __self: this }, t("speaker_angle"), ": ", calculations.speakerAngle, "°")), /*#__PURE__*/ React.createElement(RoomVisualization, { __source: { fileName: "", lineNumber: 362, columnNumber: 17 }, __self: this })))), savedConfigs.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 369, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-[#315CAA] mb-4", __source: { fileName: "", lineNumber: 370, columnNumber: 13 }, __self: this }, t("load_configuration")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 373, columnNumber: 13 }, __self: this }, savedConfigs.map((config)=>/*#__PURE__*/ React.createElement("div", { key: config.id, onClick: ()=>setRoomConfig({ width: config.width, length: config.length, height: config.height }), className: "p-4 border rounded-md cursor-pointer hover:bg-gray-50", __source: { fileName: "", lineNumber: 375, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 386, columnNumber: 19 }, __self: this }, config.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 387, columnNumber: 19 }, __self: this }, formatMeasurement(config.width), " x", " ", formatMeasurement(config.length), " x", " ", formatMeasurement(config.height))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 399, columnNumber: 7 }, __self: this }, ` * { font-family: "Century Gothic", CenturyGothic, AppleGothic, "Futura", sans-serif; } @font-face { font-family: "Century Gothic"; src: local("Century Gothic"), local("CenturyGothic"), local("AppleGothic"), local("Futura"); font-display: swap; } input, button, select { font-family: "Century Gothic", CenturyGothic, AppleGothic, "Futura", sans-serif !important; } `)); }