Admin/przekroj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cyber Panel
2025-07-01 11:51:19 +02:00
parent d3ecfae5df
commit 38970430a0
2 changed files with 68 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
components/templates/generator.js
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,24 +205,46 @@ export default function Generator() {
</div>
</div>
<Button
onClick={(e) => {
const textareaValue = document.getElementById("textarea-1").value;
if (textareaValue === "") {
alert("Pole danych nie może być puste");
} else if (!textareaValue.startsWith("Próbkowanie")) {
alert("Błędne dane");
} else {
py(e, profil, args);
}
}}
disabled={isLoading}
loading={isLoading}
className="w-full"
>
<DownloadIcon className="w-5 h-5 mr-2" />
{isLoading ? 'Generowanie...' : 'Generuj profil'}
</Button>
<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;
if (textareaValue === "") {
alert("Pole danych nie może być puste");
} else if (!textareaValue.startsWith("Próbkowanie")) {
alert("Błędne dane");
} else {
py(e, profil, args);
}
}}
disabled={isLoading}
loading={isLoading}
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"
/>
</div>
) : (
<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 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' }}
/>
{!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 i kliknij "Podgląd" aby zobaczyć profil</p>
</div>
<p className="text-gray-500">Wprowadź dane aby zobaczyć podgląd profilu</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>