matt/puffin-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve QR test page: better error handling and de-emphasize vessel info
All checks were successful
Build and Push Docker Images / docker (push) Successful in 2m34s
Details

Browse Source 
- Enhanced error handling to show HTTP status codes (e.g., "HTTP 404: Not Found")
- Moved vessel information to collapsible section at bottom
- Clear vessel default values (was pre-filled with test data)
- Added note explaining vessel info is metadata only, not used in calculations
- Made vessel fields visually de-emphasized with gray text and optional labels
This commit is contained in:
Matt 2025-11-03 19:47:31 +01:00
parent 2c86863845
commit b93d054558
1 changed files with 54 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
app/qr-test/page.tsx
View File

@ -13,8 +13,8 @@ export default function QRTestPage() {
const [fuelAmount, setFuelAmount] = useState('500');
const [fuelUnit, setFuelUnit] = useState<'liters' | 'gallons'>('liters');
const [customAmount, setCustomAmount] = useState('5');
const [vesselName, setVesselName] = useState('Test Yacht');
const [imo, setImo] = useState('1234567');
const [vesselName, setVesselName] = useState('');
const [imo, setImo] = useState('');
// Response state
const [isLoading, setIsLoading] = useState(false);
@ -99,6 +99,20 @@ export default function QRTestPage() {
body: JSON.stringify(requestData),
});
// Check HTTP status first
if (!res.ok) {
let errorMessage = `HTTP ${res.status}: ${res.statusText}`;
try {
const errorData = await res.json();
if (errorData.error) {
errorMessage = errorData.error;
}
} catch {
// Not JSON, use status text
}
throw new Error(errorMessage);
}
const result = await res.json();
if (!result.success) {
@ -199,37 +213,6 @@ export default function QRTestPage() {
</select>
</div>
{/* Vessel Information */}
<div className="mb-6 p-4 bg-gray-50 rounded-lg">
<h3 className="text-sm font-semibold text-gray-700 mb-3">Vessel Information (Optional)</h3>
<div className="space-y-3">
<div>
<label className="block text-xs font-medium text-gray-600 mb-1">
Vessel Name
</label>
<input
type="text"
value={vesselName}
onChange={(e) => setVesselName(e.target.value)}
placeholder="e.g., Test Yacht"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
/>
</div>
<div>
<label className="block text-xs font-medium text-gray-600 mb-1">
IMO Number
</label>
<input
type="text"
value={imo}
onChange={(e) => setImo(e.target.value)}
placeholder="e.g., 1234567"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
/>
</div>
</div>
</div>
{/* Conditional Fields */}
{calculationType === 'distance' && (
<div className="space-y-4 mb-6">
@ -312,6 +295,44 @@ export default function QRTestPage() {
</div>
)}
{/* Vessel Information - Optional Metadata */}
<details className="mb-6">
<summary className="cursor-pointer text-sm font-medium text-gray-500 hover:text-gray-700 mb-3 flex items-center">
<span>Optional: Vessel Information (metadata only - not used in calculations)</span>
</summary>
<div className="mt-3 p-4 bg-gray-50 rounded-lg border border-gray-200">
<p className="text-xs text-gray-600 mb-3 italic">
Note: Vessel name and IMO are stored as metadata only. They are not used in carbon calculations.
</p>
<div className="space-y-3">
<div>
<label className="block text-xs font-medium text-gray-600 mb-1">
Vessel Name
</label>
<input
type="text"
value={vesselName}
onChange={(e) => setVesselName(e.target.value)}
placeholder="e.g., My Yacht (optional)"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
/>
</div>
<div>
<label className="block text-xs font-medium text-gray-600 mb-1">
IMO Number
</label>
<input
type="text"
value={imo}
onChange={(e) => setImo(e.target.value)}
placeholder="e.g., 1234567 (optional)"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
/>
</div>
</div>
</div>
</details>
{/* Generate Button */}
<button
onClick={handleGenerate}