fix: Improve canvas error handling and update button functionality in Generator component

This commit is contained in:
2025-07-01 11:51:19 +02:00
parent d3ecfae5df
commit 38970430a0
2 changed files with 68 additions and 38 deletions

View File

@@ -72,8 +72,11 @@ export default function Generator() {
}
const canvas = document.getElementById("canvas");
if (!canvas.getContext) {
console.log("canvas err");
console.log("Canvas element:", canvas);
if (!canvas || !canvas.getContext) {
console.log("canvas not found or no context available");
console.log("canvas exists:", !!canvas);
console.log("getContext available:", canvas ? !!canvas.getContext : false);
return;
}
@@ -154,7 +157,6 @@ export default function Generator() {
rows={8}
onChange={(e) => {
setProfil(e.target.value);
getPath(e, e.target.value);
}}
className="font-mono text-sm"
/>
@@ -203,6 +205,27 @@ export default function Generator() {
</div>
</div>
<div className="flex space-x-3">
<Button
onClick={() => {
const textareaValue = document.getElementById("textarea-1").value;
if (textareaValue && textareaValue.startsWith("Próbkowanie")) {
// First set preview visible, then draw after a small delay
setPreviewVisible(true);
setTimeout(() => {
getPath(null, textareaValue);
}, 50);
} else {
alert("Wprowadź poprawne dane z Geoportalu");
}
}}
variant="outline"
className="flex-1"
>
<EyeIcon className="w-5 h-5 mr-2" />
Podgląd
</Button>
<Button
onClick={(e) => {
const textareaValue = document.getElementById("textarea-1").value;
@@ -216,11 +239,12 @@ export default function Generator() {
}}
disabled={isLoading}
loading={isLoading}
className="w-full"
className="flex-1"
>
<DownloadIcon className="w-5 h-5 mr-2" />
{isLoading ? 'Generowanie...' : 'Generuj profil'}
</Button>
</div>
</CardContent>
</Card>
</div>
@@ -238,23 +262,23 @@ export default function Generator() {
</CardDescription>
</CardHeader>
<CardContent>
{previewVisible ? (
<div className="bg-gray-50 rounded-lg p-4">
<canvas
id="canvas"
height="500"
width="700"
className="border border-gray-200 rounded bg-white"
style={{ display: previewVisible ? 'block' : 'none' }}
/>
</div>
) : (
{!previewVisible && (
<div className="bg-gray-50 rounded-lg p-8 text-center">
<div className="mx-auto w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4">
<ChartBarIcon className="w-8 h-8 text-gray-400" />
</div>
<p className="text-gray-500">Wprowadź dane aby zobaczyć podgląd profilu</p>
<p className="text-gray-500">Wprowadź dane i kliknij "Podgląd" aby zobaczyć profil</p>
</div>
)}
</div>
</CardContent>
</Card>
@@ -281,6 +305,12 @@ export default function Generator() {
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
<span className="text-xs font-semibold text-blue-600">3</span>
</div>
<p className="text-gray-600">Kliknij "Podgląd" aby zobaczyć wizualizację profilu</p>
</div>
<div className="flex items-start space-x-3">
<div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center">
<span className="text-xs font-semibold text-blue-600">4</span>
</div>
<p className="text-gray-600">Kliknij "Generuj profil" aby pobrać plik DXF</p>
</div>
</div>

View File

@@ -77,7 +77,7 @@ export default function Layout({ children, title = 'Wastpol' }) {
<div className="flex min-h-0 flex-1 flex-col bg-white border-r border-gray-200 shadow-sm">
<div className="flex h-16 items-center justify-center px-4 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700">
<img className="h-8 w-auto filter brightness-0 invert" src="/logo.png" alt="Wastpol" />
<span className="ml-2 text-lg font-semibold text-white">Wastpol</span>
{/* <span className="ml-2 text-lg font-semibold text-white">Wastpol</span> */}
</div>
<div className="flex flex-1 flex-col overflow-y-auto">
<nav className="flex-1 px-2 py-4 space-y-1">