pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-25 19:31:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add tooltips to technical specs editor

Browse Source 
Enhance TechnicalSpecsEditor and related ride form fields with contextual tooltips and example guidance for track materials, propulsion methods, and other spec fields to improve user understanding of expected values. Changes include importing tooltip components, adding informative tooltips for specification name, type, unit, track/material categories (e.g., track materials, propulsion methods), and updating UI to display examples inline.
This commit is contained in:
gpt-engineer-app[bot]
2025-11-11 23:03:59 +00:00
parent 9a3fbb2f78
commit 99c8c94e47
2 changed files with 126 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/admin/RideForm.tsx
View File

@@ -21,9 +21,10 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
import { Combobox } from '@/components/ui/combobox';
import { SlugField } from '@/components/ui/slug-field';
import { Checkbox } from '@/components/ui/checkbox';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { toast } from '@/hooks/use-toast';
import { handleError } from '@/lib/errorHandler';
import { Plus, Zap, Save, X, Building2, AlertCircle, Info } from 'lucide-react';
import { Plus, Zap, Save, X, Building2, AlertCircle, Info, HelpCircle } from 'lucide-react';
import { toDateOnly, parseDateOnly, toDateWithPrecision } from '@/lib/dateUtils';
import { useUnitPreferences } from '@/hooks/useUnitPreferences';
import { useManufacturers, useRideModels, useParks } from '@/hooks/useAutocompleteData';
@@ -381,15 +382,16 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
};
return (
<Card className="w-full max-w-4xl mx-auto">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Zap className="w-5 h-5" />
{isEditing ? 'Edit Ride' : 'Create New Ride'}
</CardTitle>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
<TooltipProvider>
<Card className="w-full max-w-4xl mx-auto">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Zap className="w-5 h-5" />
{isEditing ? 'Edit Ride' : 'Create New Ride'}
</CardTitle>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
{/* Basic Information */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
@@ -844,7 +846,17 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
</div>
<div className="space-y-3">
<Label>Track Material(s)</Label>
<div className="flex items-center gap-2">
<Label>Track Material(s)</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<p>Material used for the track. Select multiple if hybrid (e.g., wood track with steel supports).</p>
</TooltipContent>
</Tooltip>
</div>
<p className="text-sm text-muted-foreground">Select all materials used in the track</p>
<div className="grid grid-cols-2 gap-3">
{TRACK_MATERIALS.map((material) => (
@@ -870,7 +882,17 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
</div>
<div className="space-y-3">
<Label>Support Material(s)</Label>
<div className="flex items-center gap-2">
<Label>Support Material(s)</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<p>Material used for the support structure. Can be different from track material (e.g., wood track on steel supports).</p>
</TooltipContent>
</Tooltip>
</div>
<p className="text-sm text-muted-foreground">Select all materials used in the supports</p>
<div className="grid grid-cols-2 gap-3">
{SUPPORT_MATERIALS.map((material) => (
@@ -896,7 +918,23 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
</div>
<div className="space-y-3">
<Label>Propulsion Method(s)</Label>
<div className="flex items-center gap-2">
<Label>Propulsion Method(s)</Label>
<Tooltip>
<TooltipTrigger asChild>
<HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" />
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<p className="font-semibold mb-1">Common methods:</p>
<ul className="text-xs space-y-1">
<li>• <strong>LSM Launch:</strong> Linear Synchronous Motor (smooth, modern)</li>
<li>• <strong>Chain Lift:</strong> Traditional lift hill</li>
<li>• <strong>Hydraulic Launch:</strong> Fast, powerful (e.g., Kingda Ka)</li>
<li>• <strong>Gravity:</strong> Free-fall or terrain-based</li>
</ul>
</TooltipContent>
</Tooltip>
</div>
<p className="text-sm text-muted-foreground">Select all propulsion methods used</p>
<div className="grid grid-cols-2 gap-3">
{PROPULSION_METHODS.map((method) => (
@@ -1602,5 +1640,6 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
</Dialog>
</CardContent>
</Card>
</TooltipProvider>
);
}