Save current app progress
This commit is contained in:
28
scratch_db_test.js
Normal file
28
scratch_db_test.js
Normal file
@@ -0,0 +1,28 @@
|
||||
const supabaseUrl = "https://qyvnryhskgmvgjajqqru.supabase.co";
|
||||
const supabaseKey = "sb_publishable_fazCCLmO7XjtryY28ePR-A_CS7aU6fF";
|
||||
|
||||
async function run() {
|
||||
try {
|
||||
const res = await fetch(`${supabaseUrl}/rest/v1/trips`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
apikey: supabaseKey,
|
||||
Authorization: `Bearer ${supabaseKey}`,
|
||||
"Content-Type": "application/json",
|
||||
Prefer: "return=representation"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: "Test Trip",
|
||||
origin: "Lisbon",
|
||||
destination: "Porto",
|
||||
waypoints: []
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
console.log("INSERT_RESPONSE:", JSON.stringify(data, null, 2));
|
||||
} catch (err) {
|
||||
console.error("Error inserting:", err);
|
||||
}
|
||||
}
|
||||
|
||||
run();
|
||||
@@ -6,9 +6,7 @@ interface AuthContextType {
|
||||
user: User | null;
|
||||
session: Session | null;
|
||||
loading: boolean;
|
||||
isDemoMode: boolean;
|
||||
isSpotifyAuthenticated: boolean;
|
||||
enableDemoMode: () => void;
|
||||
enableSpotifyMode: () => void;
|
||||
}
|
||||
|
||||
@@ -16,9 +14,7 @@ const AuthContext = createContext<AuthContextType>({
|
||||
user: null,
|
||||
session: null,
|
||||
loading: true,
|
||||
isDemoMode: false,
|
||||
isSpotifyAuthenticated: false,
|
||||
enableDemoMode: () => {},
|
||||
enableSpotifyMode: () => {},
|
||||
});
|
||||
|
||||
@@ -28,18 +24,9 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [session, setSession] = useState<Session | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isDemoMode, setIsDemoMode] = useState(false);
|
||||
const [isSpotifyAuthenticated, setIsSpotifyAuthenticated] = useState(false);
|
||||
|
||||
const enableDemoMode = () => {
|
||||
setIsDemoMode(true);
|
||||
setIsSpotifyAuthenticated(false);
|
||||
setUser({ id: '00000000-0000-4000-8000-000000000002', email: 'demo@roadtripdj.com' } as User);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const enableSpotifyMode = () => {
|
||||
setIsDemoMode(false);
|
||||
setIsSpotifyAuthenticated(true);
|
||||
setLoading(false);
|
||||
};
|
||||
@@ -49,12 +36,10 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
|
||||
setSession(session);
|
||||
setUser(session?.user ?? null);
|
||||
if (!session) {
|
||||
setIsDemoMode(false);
|
||||
setIsSpotifyAuthenticated(false);
|
||||
} else {
|
||||
const isSpotify = !!session.user?.user_metadata?.spotify_id;
|
||||
setIsSpotifyAuthenticated(isSpotify);
|
||||
setIsDemoMode(false);
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
@@ -63,12 +48,10 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
|
||||
setSession(session);
|
||||
setUser(session?.user ?? null);
|
||||
if (!session) {
|
||||
setIsDemoMode(false);
|
||||
setIsSpotifyAuthenticated(false);
|
||||
} else {
|
||||
const isSpotify = !!session.user?.user_metadata?.spotify_id;
|
||||
setIsSpotifyAuthenticated(isSpotify);
|
||||
setIsDemoMode(false);
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
@@ -77,7 +60,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, session, loading, isDemoMode, isSpotifyAuthenticated, enableDemoMode, enableSpotifyMode }}>
|
||||
<AuthContext.Provider value={{ user, session, loading, isSpotifyAuthenticated, enableSpotifyMode }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
|
||||
@@ -18,7 +18,7 @@ const discovery: DiscoveryDocument = {
|
||||
|
||||
// @ts-ignore
|
||||
export default function LoginScreen({ navigation }) {
|
||||
const { enableDemoMode, enableSpotifyMode } = useAuth();
|
||||
const { enableSpotifyMode } = useAuth();
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -305,14 +305,6 @@ export default function LoginScreen({ navigation }) {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleResetAuth = async () => {
|
||||
await supabase.auth.signOut();
|
||||
await clearSpotifyTokens();
|
||||
setEmail('');
|
||||
setPassword('');
|
||||
Alert.alert('Reset', 'Auth state cleared.');
|
||||
};
|
||||
|
||||
const handleSpotifyLogin = async () => {
|
||||
try {
|
||||
console.log("[SpotifyAuthDebug] 1. Exact redirectUri at login press:", redirectUri);
|
||||
@@ -394,22 +386,6 @@ export default function LoginScreen({ navigation }) {
|
||||
<Text style={styles.spotifyButtonText}>Entrar com Spotify</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{__DEV__ && (
|
||||
<TouchableOpacity
|
||||
style={[styles.primaryButton, { backgroundColor: '#333', marginBottom: 24 }]}
|
||||
onPress={() => {
|
||||
console.log("DEMO_BYPASS_PRESSED");
|
||||
enableDemoMode();
|
||||
}}
|
||||
>
|
||||
<Text style={styles.primaryButtonText}>Continuar sem Spotify (demo)</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<TouchableOpacity style={{ padding: 10, alignItems: 'center', marginBottom: 10 }} onPress={handleResetAuth}>
|
||||
<Text style={{ color: 'red', fontWeight: '600' }}>Reset Auth</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.footerContainer}>
|
||||
<Text style={styles.footerText}>Não tens conta? </Text>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('Register')}>
|
||||
@@ -489,7 +465,7 @@ const styles = StyleSheet.create({
|
||||
padding: 24,
|
||||
paddingBottom: Platform.OS === 'ios' ? 40 : 24,
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: -4 },
|
||||
shadowOpacity: 0.1,
|
||||
|
||||
@@ -176,7 +176,15 @@ export default function HomeScreen({ navigation }: Props) {
|
||||
{loading ? (
|
||||
<ActivityIndicator size="large" color={colors.primary} style={{ marginTop: 40 }} />
|
||||
) : trips.length > 0 ? (
|
||||
trips.map(trip => <TripCard key={trip.id} trip={trip} />)
|
||||
trips.map(trip => (
|
||||
<TouchableOpacity
|
||||
key={trip.id}
|
||||
activeOpacity={0.9}
|
||||
onPress={() => navigation.navigate('TripDetails', { trip })}
|
||||
>
|
||||
<TripCard trip={trip} />
|
||||
</TouchableOpacity>
|
||||
))
|
||||
) : (
|
||||
<View style={styles.promptCard}>
|
||||
<Text style={styles.promptTitle}>Pronto para a próxima?</Text>
|
||||
|
||||
@@ -1,361 +1,480 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ImageBackground, SafeAreaView, FlatList } from 'react-native';
|
||||
import { ArrowLeft, Share2, MoreVertical, Navigation, Clock, Music, Compass, MapPin, Play } from 'lucide-react-native';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ImageBackground, SafeAreaView, Linking, Alert } from 'react-native';
|
||||
import { ArrowLeft, MapPin, Navigation, Music, Play } from 'lucide-react-native';
|
||||
import { colors } from '../../utils/colors';
|
||||
import TimelineItem from '../../components/TimelineItem';
|
||||
import TrackItem from '../../components/TrackItem';
|
||||
|
||||
const MOCK_TRACKS = [
|
||||
{ id: '1', title: 'Born to Run', artist: 'Bruce Springsteen', duration: '4:30' },
|
||||
{ id: '2', title: 'Hotel California', artist: 'Eagles', duration: '6:30' },
|
||||
{ id: '3', title: 'Holocene', artist: 'Bon Iver', duration: '5:37' },
|
||||
{ id: '4', title: 'Ganges', artist: 'The National', duration: '4:12' },
|
||||
];
|
||||
import { getDestinationLandmarkImage } from '../../services/destinationImage';
|
||||
|
||||
// @ts-ignore
|
||||
export default function TripDetailsScreen({ navigation }) {
|
||||
const [activeTab, setActiveTab] = useState<'rota' | 'playlist'>('rota');
|
||||
export default function TripDetailsScreen({ navigation, route }) {
|
||||
const { trip } = route.params || {};
|
||||
|
||||
const renderRotaTab = () => (
|
||||
<View style={styles.tabContent}>
|
||||
{/* Stats Cards */}
|
||||
<View style={styles.statsContainer}>
|
||||
<View style={styles.statCard}>
|
||||
{/* @ts-ignore */}
|
||||
<Navigation color={colors.primary} size={24} style={{ marginBottom: 8 }} />
|
||||
<Text style={styles.statValue}>314 km</Text>
|
||||
<Text style={styles.statLabel}>Distância</Text>
|
||||
</View>
|
||||
<View style={styles.dividerVertical} />
|
||||
<View style={styles.statCard}>
|
||||
<Clock color={colors.primary} size={24} style={{ marginBottom: 8 }} />
|
||||
<Text style={styles.statValue}>3h 15m</Text>
|
||||
<Text style={styles.statLabel}>Tempo</Text>
|
||||
</View>
|
||||
</View>
|
||||
const [imageUrl, setImageUrl] = useState<string | null>(trip?.destination_image_url || null);
|
||||
const [landmarkName, setLandmarkName] = useState<string | null>(trip?.destination_landmark_name || null);
|
||||
|
||||
{/* DJ Guide Card */}
|
||||
<View style={styles.djCard}>
|
||||
<View style={styles.djHeader}>
|
||||
<View style={styles.djIconContainer}>
|
||||
<Music color={colors.white} size={16} />
|
||||
</View>
|
||||
<Text style={styles.djTitle}>O Teu DJ Guide:</Text>
|
||||
</View>
|
||||
<Text style={styles.djText}>
|
||||
"Na primeira hora da viagem, ouve Rock clássico para acordar. Quando passares pela zona de Leiria, ouve Indie Folk. Ah, e faz uma paragem na área de serviço de Pombal porque o café lá tem ótimas reviews."
|
||||
</Text>
|
||||
</View>
|
||||
useEffect(() => {
|
||||
if (!trip?.destination || imageUrl) return;
|
||||
|
||||
{/* Itinerary */}
|
||||
<View style={styles.itinerarySection}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<Compass color={colors.textMain} size={20} style={{ marginRight: 8 }} />
|
||||
<Text style={styles.sectionTitle}>Itinerário</Text>
|
||||
</View>
|
||||
let isMounted = true;
|
||||
const tripTitle = trip.title || trip.destination || 'Viagem';
|
||||
|
||||
<View style={styles.timelineContainer}>
|
||||
<TimelineItem
|
||||
title="Lisbon, Portugal"
|
||||
subtitle="Partida • 0 km"
|
||||
type="start"
|
||||
/>
|
||||
<TimelineItem
|
||||
title="Área de Serviço de Pombal"
|
||||
subtitle="Paragem sugerida para café. + 145 km"
|
||||
type="stop"
|
||||
/>
|
||||
<TimelineItem
|
||||
title="Porto, Portugal"
|
||||
subtitle="Destino • 314 km"
|
||||
type="end"
|
||||
isLast
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
getDestinationLandmarkImage(trip.destination, { tripTitle }).then(result => {
|
||||
if (!isMounted) return;
|
||||
if (result.imageUrl) {
|
||||
setImageUrl(result.imageUrl);
|
||||
}
|
||||
if (result.landmarkName) {
|
||||
setLandmarkName(result.landmarkName);
|
||||
}
|
||||
});
|
||||
|
||||
{/* Maps Action */}
|
||||
<TouchableOpacity style={styles.mapsButton}>
|
||||
<MapPin color={colors.white} size={20} style={{ marginRight: 8 }} />
|
||||
<Text style={styles.mapsButtonText}>Abrir no Google Maps</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [trip?.destination, imageUrl]);
|
||||
|
||||
const renderPlaylistTab = () => (
|
||||
<View style={styles.tabContent}>
|
||||
{/* Generated Playlist Card */}
|
||||
<View style={styles.playlistGeneratedCard}>
|
||||
<View style={styles.spotifyLogoLarge}>
|
||||
{/* Mocking large spotify logo with music icon for now */}
|
||||
<Music color={colors.spotify} size={40} />
|
||||
</View>
|
||||
<Text style={styles.playlistTitle}>Playlist Gerada</Text>
|
||||
<Text style={styles.playlistSubtitle}>45 músicas • 3h 20m de viagem</Text>
|
||||
const handleOpenGoogleMaps = () => {
|
||||
if (!trip?.origin || !trip?.destination) {
|
||||
Alert.alert('Erro', 'Dados de rota incompletos.');
|
||||
return;
|
||||
}
|
||||
const url = `https://www.google.com/maps/dir/?api=1&origin=${encodeURIComponent(trip.origin)}&destination=${encodeURIComponent(trip.destination)}`;
|
||||
Linking.openURL(url);
|
||||
};
|
||||
|
||||
<TouchableOpacity style={styles.spotifyActionBtn}>
|
||||
<Play fill={colors.white} color={colors.white} size={18} style={{ marginRight: 8 }} />
|
||||
<Text style={styles.spotifyActionText}>Ouvir no Spotify</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
const stops = trip?.stops || trip?.waypoints || [];
|
||||
const hasStops = Array.isArray(stops) && stops.length > 0;
|
||||
|
||||
{/* Preview List */}
|
||||
<Text style={styles.previewTitle}>Pré-visualização (Músicas Iniciais)</Text>
|
||||
<View style={styles.previewListCard}>
|
||||
{MOCK_TRACKS.map((track, index) => (
|
||||
<TrackItem
|
||||
key={track.id}
|
||||
index={index + 1}
|
||||
title={track.title}
|
||||
artist={track.artist}
|
||||
duration={track.duration}
|
||||
/>
|
||||
))}
|
||||
const routeVisual = (
|
||||
<View style={styles.mockRouteVisual}>
|
||||
<View style={styles.routeDotLarge} />
|
||||
<View style={styles.routeLineDashed} />
|
||||
<View style={styles.routePinLarge}>
|
||||
<MapPin color={colors.white} size={14} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ScrollView>
|
||||
{/* Header Image */}
|
||||
<ImageBackground
|
||||
source={{ uri: 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?q=80&w=2021&auto=format&fit=crop' }}
|
||||
style={styles.headerImage}
|
||||
<SafeAreaView style={styles.safeArea}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title} numberOfLines={1}>
|
||||
{trip?.title || trip?.destination || 'Detalhes da Viagem'}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.backButton}
|
||||
onPress={() => navigation.goBack()}
|
||||
>
|
||||
<SafeAreaView style={styles.headerSafeArea}>
|
||||
<View style={styles.headerNav}>
|
||||
<TouchableOpacity style={styles.navIconButton} onPress={() => navigation.goBack()}>
|
||||
<ArrowLeft color={colors.white} size={24} />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.navRightActions}>
|
||||
<TouchableOpacity style={styles.navIconButton}>
|
||||
<Share2 color={colors.white} size={20} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.navIconButton, { marginLeft: 12 }]}>
|
||||
<MoreVertical color={colors.white} size={20} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<ArrowLeft color={colors.textMain} size={20} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View style={styles.headerTitles}>
|
||||
<View style={styles.tag}>
|
||||
<Text style={styles.tagText}>ROADTRIP</Text>
|
||||
</View>
|
||||
<Text style={styles.mainTitle}>Lisbon to Porto Coastline</Text>
|
||||
<Text style={styles.subTitle}>May 10, 2026</Text>
|
||||
<ScrollView contentContainerStyle={styles.scrollContent}>
|
||||
{/* Top visual representation */}
|
||||
{imageUrl ? (
|
||||
<ImageBackground source={{ uri: imageUrl }} style={styles.mapArea}>
|
||||
<View style={styles.imageOverlay}>
|
||||
{landmarkName && (
|
||||
<View style={styles.landmarkTag}>
|
||||
<Text style={styles.landmarkTagText} numberOfLines={1}>
|
||||
{landmarkName}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{routeVisual}
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</ImageBackground>
|
||||
</ImageBackground>
|
||||
) : (
|
||||
<View style={styles.mapArea}>
|
||||
{routeVisual}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Content Area overlapping image slightly */}
|
||||
<View style={styles.contentWrapper}>
|
||||
|
||||
{/* Custom Tabs */}
|
||||
<View style={styles.tabContainer}>
|
||||
<TouchableOpacity
|
||||
style={[styles.tabButton, activeTab === 'rota' && styles.tabButtonActive]}
|
||||
onPress={() => setActiveTab('rota')}
|
||||
>
|
||||
<Text style={[styles.tabText, activeTab === 'rota' && styles.tabTextActive]}>
|
||||
Rota & DJ
|
||||
{/* Content Card overlapping map/image */}
|
||||
<View style={styles.detailsCard}>
|
||||
{/* Trip Name info */}
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.inputLabel}>NOME DA VIAGEM</Text>
|
||||
<View style={styles.textInputReadonly}>
|
||||
<Text style={styles.textInputReadonlyText}>
|
||||
{trip?.title || trip?.destination || 'Sem título'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.tabButton, activeTab === 'playlist' && styles.tabButtonActive]}
|
||||
onPress={() => setActiveTab('playlist')}
|
||||
>
|
||||
<Text style={[styles.tabText, activeTab === 'playlist' && styles.tabTextActive]}>
|
||||
Playlist Spotify
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Render Tab Content */}
|
||||
{activeTab === 'rota' ? renderRotaTab() : renderPlaylistTab()}
|
||||
{/* Origin & Destination timeline */}
|
||||
<View style={styles.routeInputContainer}>
|
||||
<View style={styles.routeTimeline}>
|
||||
<View style={styles.timelineDot} />
|
||||
<View style={styles.timelineLine} />
|
||||
<MapPin color={colors.textSecondary} size={16} style={styles.timelinePin} />
|
||||
</View>
|
||||
|
||||
<View style={styles.routeInputs}>
|
||||
<View style={styles.inputGroup}>
|
||||
<Text style={styles.inputLabel}>PARTIDA</Text>
|
||||
<View style={styles.textInputReadonly}>
|
||||
<Text style={[styles.textInputReadonlyText, styles.boldText]}>
|
||||
{trip?.origin}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={[styles.inputGroup, { marginBottom: 0 }]}>
|
||||
<Text style={styles.inputLabel}>DESTINO</Text>
|
||||
<View style={styles.textInputReadonly}>
|
||||
<Text style={[styles.textInputReadonlyText, styles.boldText]}>
|
||||
{trip?.destination}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Distance and Duration summary */}
|
||||
<View style={styles.resultsContainer}>
|
||||
<View style={styles.resultItem}>
|
||||
<Text style={styles.resultLabel}>Distância</Text>
|
||||
<Text style={styles.resultValue}>{trip?.distance || '-'}</Text>
|
||||
</View>
|
||||
<View style={styles.resultDivider} />
|
||||
<View style={styles.resultItem}>
|
||||
<Text style={styles.resultLabel}>Duração</Text>
|
||||
<Text style={styles.resultValue}>{trip?.duration || '-'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Spotify Playlist Segment */}
|
||||
{trip?.playlist_url ? (
|
||||
<View style={styles.playlistSection}>
|
||||
<Text style={styles.sectionLabel}>PLAYLIST DO SPOTIFY</Text>
|
||||
<View style={styles.spotifyCard}>
|
||||
<View style={styles.spotifyHeader}>
|
||||
<View style={styles.spotifyLogoContainer}>
|
||||
<Music color={colors.spotify} size={24} />
|
||||
</View>
|
||||
<View style={styles.spotifyHeaderTextContainer}>
|
||||
<Text style={styles.spotifyCardTitle} numberOfLines={1}>
|
||||
{trip?.title || 'Playlist da Viagem'}
|
||||
</Text>
|
||||
<Text style={styles.spotifyCardSubtitle} numberOfLines={1}>
|
||||
{trip?.playlist_url}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={styles.spotifyButton}
|
||||
onPress={() => Linking.openURL(trip.playlist_url)}
|
||||
>
|
||||
<Play fill={colors.white} color={colors.white} size={16} style={{ marginRight: 8 }} />
|
||||
<Text style={styles.spotifyButtonText}>Ouvir no Spotify</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{/* Route Stops / Waypoints */}
|
||||
<View style={styles.stopsSection}>
|
||||
<Text style={styles.sectionLabel}>PARAGENS DA ROTA</Text>
|
||||
{hasStops ? (
|
||||
<View style={styles.timelineContainer}>
|
||||
{stops.map((stop: string, index: number) => (
|
||||
<TimelineItem
|
||||
key={index}
|
||||
title={stop}
|
||||
subtitle={`Paragem #${index + 1}`}
|
||||
type="stop"
|
||||
isLast={index === stops.length - 1}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.noStopsCard}>
|
||||
<Text style={styles.noStopsText}>
|
||||
Ainda não existem paragens guardadas para esta viagem.
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Bottom Actions */}
|
||||
<View style={styles.bottomActions}>
|
||||
<TouchableOpacity
|
||||
style={styles.mapsButton}
|
||||
onPress={handleOpenGoogleMaps}
|
||||
>
|
||||
<Navigation color={colors.primary} size={20} />
|
||||
<Text style={styles.mapsButtonText}>Abrir no Google Maps</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
safeArea: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background,
|
||||
backgroundColor: colors.white,
|
||||
},
|
||||
headerImage: {
|
||||
width: '100%',
|
||||
height: 320,
|
||||
justifyContent: 'flex-start',
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
headerSafeArea: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(0,0,0,0.3)', // Overlay
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
headerNav: {
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 16,
|
||||
},
|
||||
navIconButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
navRightActions: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
headerTitles: {
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 40, // Room for overlap
|
||||
},
|
||||
tag: {
|
||||
backgroundColor: colors.primary,
|
||||
alignSelf: 'flex-start',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
tagText: {
|
||||
color: colors.white,
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 1,
|
||||
},
|
||||
mainTitle: {
|
||||
fontSize: 32,
|
||||
fontWeight: '800',
|
||||
color: colors.white,
|
||||
marginBottom: 4,
|
||||
lineHeight: 38,
|
||||
},
|
||||
subTitle: {
|
||||
fontSize: 16,
|
||||
color: colors.white,
|
||||
fontWeight: '500',
|
||||
},
|
||||
contentWrapper: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background,
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
marginTop: -24,
|
||||
minHeight: 500,
|
||||
},
|
||||
tabContainer: {
|
||||
flexDirection: 'row',
|
||||
paddingBottom: 16,
|
||||
backgroundColor: colors.white,
|
||||
zIndex: 10,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.inputBorder,
|
||||
paddingHorizontal: 20,
|
||||
marginTop: 10,
|
||||
},
|
||||
tabButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 16,
|
||||
alignItems: 'center',
|
||||
borderBottomWidth: 2,
|
||||
borderBottomColor: 'transparent',
|
||||
},
|
||||
tabButtonActive: {
|
||||
borderBottomColor: colors.primary,
|
||||
},
|
||||
tabText: {
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
tabTextActive: {
|
||||
color: colors.primary,
|
||||
},
|
||||
tabContent: {
|
||||
padding: 20,
|
||||
},
|
||||
statsContainer: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 20,
|
||||
padding: 20,
|
||||
marginBottom: 24,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
statCard: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
},
|
||||
dividerVertical: {
|
||||
width: 1,
|
||||
backgroundColor: colors.inputBorder,
|
||||
marginHorizontal: 10,
|
||||
},
|
||||
statValue: {
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
color: colors.textMain,
|
||||
marginBottom: 4,
|
||||
flex: 1,
|
||||
marginRight: 16,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 13,
|
||||
backButton: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
backgroundColor: colors.inputBackground,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
mapArea: {
|
||||
height: 180,
|
||||
backgroundColor: '#F0F2F5', // Light map-like gray
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
imageOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(0,0,0,0.3)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
landmarkTag: {
|
||||
position: 'absolute',
|
||||
top: 12,
|
||||
right: 12,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.65)',
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
borderRadius: 12,
|
||||
maxWidth: '80%',
|
||||
},
|
||||
landmarkTagText: {
|
||||
color: colors.white,
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
mockRouteVisual: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 40,
|
||||
width: '100%',
|
||||
},
|
||||
routeDotLarge: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
backgroundColor: colors.primary,
|
||||
borderWidth: 4,
|
||||
borderColor: colors.white,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
zIndex: 2,
|
||||
},
|
||||
routeLineDashed: {
|
||||
flex: 1,
|
||||
height: 4,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.primary,
|
||||
borderStyle: 'dashed',
|
||||
marginHorizontal: -4,
|
||||
zIndex: 1,
|
||||
},
|
||||
routePinLarge: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#000000',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: colors.white,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
zIndex: 2,
|
||||
},
|
||||
detailsCard: {
|
||||
backgroundColor: colors.white,
|
||||
borderTopLeftRadius: 32,
|
||||
borderTopRightRadius: 32,
|
||||
padding: 24,
|
||||
marginTop: -32, // Overlap map/image
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: -4 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 12,
|
||||
elevation: 10,
|
||||
},
|
||||
inputGroup: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
inputLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
color: colors.textSecondary,
|
||||
marginBottom: 8,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
textInputReadonly: {
|
||||
backgroundColor: colors.inputBackground,
|
||||
borderRadius: 16,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 16,
|
||||
},
|
||||
textInputReadonlyText: {
|
||||
fontSize: 16,
|
||||
color: colors.textMain,
|
||||
fontWeight: '500',
|
||||
},
|
||||
djCard: {
|
||||
backgroundColor: '#FFF5EB',
|
||||
boldText: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
routeInputContainer: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 10,
|
||||
},
|
||||
routeTimeline: {
|
||||
alignItems: 'center',
|
||||
width: 30,
|
||||
marginTop: 38,
|
||||
marginRight: 8,
|
||||
},
|
||||
timelineDot: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
backgroundColor: colors.primary,
|
||||
},
|
||||
timelineLine: {
|
||||
width: 1,
|
||||
height: 60,
|
||||
backgroundColor: colors.inputBorder,
|
||||
marginVertical: 4,
|
||||
},
|
||||
timelinePin: {
|
||||
marginTop: 4,
|
||||
},
|
||||
routeInputs: {
|
||||
flex: 1,
|
||||
},
|
||||
resultsContainer: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 24,
|
||||
paddingTop: 24,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.inputBorder,
|
||||
marginBottom: 24,
|
||||
},
|
||||
resultItem: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
},
|
||||
resultDivider: {
|
||||
width: 1,
|
||||
backgroundColor: colors.inputBorder,
|
||||
marginHorizontal: 16,
|
||||
},
|
||||
resultLabel: {
|
||||
fontSize: 12,
|
||||
color: colors.textSecondary,
|
||||
marginBottom: 4,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
resultValue: {
|
||||
fontSize: 18,
|
||||
color: colors.textMain,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
sectionLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
color: colors.textSecondary,
|
||||
marginBottom: 12,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
playlistSection: {
|
||||
marginBottom: 28,
|
||||
},
|
||||
spotifyCard: {
|
||||
backgroundColor: '#E8F5E9', // Light green matches spotify style
|
||||
borderRadius: 20,
|
||||
padding: 20,
|
||||
marginBottom: 30,
|
||||
borderWidth: 1,
|
||||
borderColor: '#FFE0C2',
|
||||
borderColor: '#C8E6C9',
|
||||
},
|
||||
djHeader: {
|
||||
spotifyHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
djIconContainer: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: colors.primary,
|
||||
spotifyLogoContainer: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
backgroundColor: '#000000',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: 10,
|
||||
marginRight: 12,
|
||||
},
|
||||
djTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#8C3800',
|
||||
spotifyHeaderTextContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
djText: {
|
||||
fontSize: 15,
|
||||
lineHeight: 24,
|
||||
color: '#A34200',
|
||||
fontWeight: '500',
|
||||
},
|
||||
itinerarySection: {
|
||||
marginBottom: 30,
|
||||
},
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 20,
|
||||
spotifyCardTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: colors.textMain,
|
||||
marginBottom: 2,
|
||||
},
|
||||
spotifyCardSubtitle: {
|
||||
fontSize: 13,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
spotifyButton: {
|
||||
backgroundColor: colors.spotify,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
shadowColor: colors.spotify,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
spotifyButtonText: {
|
||||
color: colors.white,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
stopsSection: {
|
||||
marginBottom: 28,
|
||||
},
|
||||
timelineContainer: {
|
||||
backgroundColor: colors.white,
|
||||
@@ -366,87 +485,40 @@ const styles = StyleSheet.create({
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.inputBorder,
|
||||
},
|
||||
noStopsCard: {
|
||||
backgroundColor: '#FFF5EB',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: '#FFE0C2',
|
||||
alignItems: 'center',
|
||||
},
|
||||
noStopsText: {
|
||||
color: '#A34200',
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
},
|
||||
bottomActions: {
|
||||
marginTop: 8,
|
||||
marginBottom: 16,
|
||||
},
|
||||
mapsButton: {
|
||||
backgroundColor: '#111827', // Almost black
|
||||
backgroundColor: colors.inputBackground,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 18,
|
||||
borderRadius: 30, // Highly rounded
|
||||
marginBottom: 40,
|
||||
borderRadius: 16,
|
||||
},
|
||||
mapsButtonText: {
|
||||
color: colors.white,
|
||||
color: colors.primary,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
|
||||
// Playlist Tab Styles
|
||||
playlistGeneratedCard: {
|
||||
backgroundColor: '#E8F5E9', // Light green
|
||||
borderRadius: 24,
|
||||
padding: 30,
|
||||
alignItems: 'center',
|
||||
marginBottom: 30,
|
||||
borderWidth: 1,
|
||||
borderColor: '#C8E6C9',
|
||||
},
|
||||
spotifyLogoLarge: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: '#000',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
playlistTitle: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: colors.textMain,
|
||||
marginBottom: 8,
|
||||
},
|
||||
playlistSubtitle: {
|
||||
fontSize: 15,
|
||||
color: colors.textSecondary,
|
||||
marginBottom: 24,
|
||||
},
|
||||
spotifyActionBtn: {
|
||||
backgroundColor: colors.spotify,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 14,
|
||||
borderRadius: 30,
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
shadowColor: colors.spotify,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 8,
|
||||
elevation: 5,
|
||||
},
|
||||
spotifyActionText: {
|
||||
color: colors.white,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
previewTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: colors.textMain,
|
||||
marginBottom: 16,
|
||||
},
|
||||
previewListCard: {
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 20,
|
||||
padding: 20,
|
||||
marginBottom: 40,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
marginLeft: 8,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user