mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 17:31:13 -05:00
Visual edit in Lovable
This commit is contained in:
@@ -8,30 +8,23 @@ import { useToast } from '@/hooks/use-toast';
|
|||||||
import { useAuth } from '@/hooks/useAuth';
|
import { useAuth } from '@/hooks/useAuth';
|
||||||
import { supabase } from '@/integrations/supabase/client';
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
import { Download, BarChart3, Upload, FileText, History } from 'lucide-react';
|
import { Download, BarChart3, Upload, FileText, History } from 'lucide-react';
|
||||||
|
|
||||||
export function DataExportTab() {
|
export function DataExportTab() {
|
||||||
const { user, profile } = useAuth();
|
const {
|
||||||
const { toast } = useToast();
|
user,
|
||||||
|
profile
|
||||||
|
} = useAuth();
|
||||||
|
const {
|
||||||
|
toast
|
||||||
|
} = useToast();
|
||||||
const [exportLoading, setExportLoading] = useState(false);
|
const [exportLoading, setExportLoading] = useState(false);
|
||||||
const [exportProgress, setExportProgress] = useState(0);
|
const [exportProgress, setExportProgress] = useState(0);
|
||||||
|
|
||||||
const handleDataExport = async () => {
|
const handleDataExport = async () => {
|
||||||
if (!user) return;
|
if (!user) return;
|
||||||
|
|
||||||
setExportLoading(true);
|
setExportLoading(true);
|
||||||
setExportProgress(0);
|
setExportProgress(0);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Simulate export progress
|
// Simulate export progress
|
||||||
const steps = [
|
const steps = ['Collecting profile data...', 'Gathering reviews...', 'Collecting ride credits...', 'Gathering top lists...', 'Packaging data...', 'Preparing download...'];
|
||||||
'Collecting profile data...',
|
|
||||||
'Gathering reviews...',
|
|
||||||
'Collecting ride credits...',
|
|
||||||
'Gathering top lists...',
|
|
||||||
'Packaging data...',
|
|
||||||
'Preparing download...'
|
|
||||||
];
|
|
||||||
|
|
||||||
for (let i = 0; i < steps.length; i++) {
|
for (let i = 0; i < steps.length; i++) {
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
await new Promise(resolve => setTimeout(resolve, 500));
|
||||||
setExportProgress((i + 1) / steps.length * 100);
|
setExportProgress((i + 1) / steps.length * 100);
|
||||||
@@ -47,11 +40,9 @@ export function DataExportTab() {
|
|||||||
export_date: new Date().toISOString(),
|
export_date: new Date().toISOString(),
|
||||||
data_types: ['profile', 'reviews', 'ride_credits', 'top_lists']
|
data_types: ['profile', 'reviews', 'ride_credits', 'top_lists']
|
||||||
};
|
};
|
||||||
|
|
||||||
const blob = new Blob([JSON.stringify(exportData, null, 2)], {
|
const blob = new Blob([JSON.stringify(exportData, null, 2)], {
|
||||||
type: 'application/json'
|
type: 'application/json'
|
||||||
});
|
});
|
||||||
|
|
||||||
const url = URL.createObjectURL(blob);
|
const url = URL.createObjectURL(blob);
|
||||||
const a = document.createElement('a');
|
const a = document.createElement('a');
|
||||||
a.href = url;
|
a.href = url;
|
||||||
@@ -60,7 +51,6 @@ export function DataExportTab() {
|
|||||||
a.click();
|
a.click();
|
||||||
document.body.removeChild(a);
|
document.body.removeChild(a);
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
|
|
||||||
toast({
|
toast({
|
||||||
title: 'Export complete',
|
title: 'Export complete',
|
||||||
description: 'Your data has been exported and downloaded successfully.'
|
description: 'Your data has been exported and downloaded successfully.'
|
||||||
@@ -76,16 +66,13 @@ export function DataExportTab() {
|
|||||||
setExportProgress(0);
|
setExportProgress(0);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleImportData = () => {
|
const handleImportData = () => {
|
||||||
toast({
|
toast({
|
||||||
title: 'Coming soon',
|
title: 'Coming soon',
|
||||||
description: 'Data import functionality will be available in a future update.',
|
description: 'Data import functionality will be available in a future update.'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
return <div className="space-y-8">
|
||||||
return (
|
|
||||||
<div className="space-y-8">
|
|
||||||
{/* Personal Statistics */}
|
{/* Personal Statistics */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
@@ -159,21 +146,15 @@ export function DataExportTab() {
|
|||||||
<Badge variant="secondary">Account Activity</Badge>
|
<Badge variant="secondary">Account Activity</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{exportLoading && (
|
{exportLoading && <div className="space-y-2">
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex justify-between text-sm">
|
<div className="flex justify-between text-sm">
|
||||||
<span>Exporting data...</span>
|
<span>Exporting data...</span>
|
||||||
<span>{Math.round(exportProgress)}%</span>
|
<span>{Math.round(exportProgress)}%</span>
|
||||||
</div>
|
</div>
|
||||||
<Progress value={exportProgress} />
|
<Progress value={exportProgress} />
|
||||||
</div>
|
</div>}
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
<Button onClick={handleDataExport} disabled={exportLoading} className="w-fit">
|
||||||
onClick={handleDataExport}
|
|
||||||
disabled={exportLoading}
|
|
||||||
className="w-fit"
|
|
||||||
>
|
|
||||||
<Download className="w-4 h-4 mr-2" />
|
<Download className="w-4 h-4 mr-2" />
|
||||||
{exportLoading ? 'Exporting...' : 'Export My Data'}
|
{exportLoading ? 'Exporting...' : 'Export My Data'}
|
||||||
</Button>
|
</Button>
|
||||||
@@ -186,65 +167,12 @@ export function DataExportTab() {
|
|||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Separator />
|
|
||||||
|
|
||||||
{/* Data Import */}
|
{/* Data Import */}
|
||||||
<div className="space-y-4">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Upload className="w-5 h-5" />
|
|
||||||
<h3 className="text-lg font-medium">Import Data</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Import From Other Sources</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Import your ride credits and reviews from other coaster tracking platforms.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div className="grid gap-3">
|
|
||||||
<div className="flex items-center justify-between p-3 border rounded-lg">
|
|
||||||
<div>
|
|
||||||
<p className="font-medium">Coaster Count</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Import your ride credits from coaster-count.com
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Button variant="outline" size="sm" onClick={handleImportData}>
|
|
||||||
Import
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between p-3 border rounded-lg">
|
|
||||||
<div>
|
|
||||||
<p className="font-medium">Captain Coaster</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Import your coaster credits from captaincoaster.com
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Button variant="outline" size="sm" onClick={handleImportData}>
|
|
||||||
Import
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between p-3 border rounded-lg">
|
|
||||||
<div>
|
|
||||||
<p className="font-medium">CSV File</p>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
Upload a CSV file with your ride credits
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Button variant="outline" size="sm" onClick={handleImportData}>
|
|
||||||
Upload
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Separator />
|
|
||||||
|
|
||||||
{/* Account Activity */}
|
{/* Account Activity */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
@@ -285,6 +213,5 @@ export function DataExportTab() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>;
|
||||||
);
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user