leonardo/mariani_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add DatePicker and refactor some views layout

Browse Source
This commit is contained in:
leonardo
2025-12-09 13:06:35 +01:00
parent 2251c42ecf
commit abe14f4c3f
12 changed files with 379 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -41,3 +41,7 @@ app-example
# generated native folders
/ios
/android
# IDE
.idea
.vscode

2
app/_layout.tsx
View File

@ -53,7 +53,7 @@ export default function AppLayout() {
}}
/>
<Tabs.Screen
name="automation/index"
name="automation"
options={{
title: 'Domotica',
tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,

2
app/attendance/index.tsx
View File

@ -80,9 +80,11 @@ export default function AttendanceScreen() {
<Text className="text-sm text-gray-400 font-medium">{item.in} - {item.out || 'In corso'}</Text>
</View>
</View>
{item.status === 'complete' && (
<View className="bg-gray-100 px-3 py-1.5 rounded-lg">
<Text className="text-sm font-mono text-gray-600 font-bold">8h</Text>
</View>
)}
</View>
))}
</View>

75
app/automation/[id].tsx Normal file
View File

@ -0,0 +1,75 @@
import { OFFICES_DATA } from '@/data/data';
import type { OfficeItem } from '@/types/types';
import { Activity, ChevronLeft, Lightbulb, Thermometer, Wifi, WifiOff, Zap, Plus } from 'lucide-react-native';
import React from 'react';
import { useRouter, useLocalSearchParams } from 'expo-router';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
export default function AutomationDetail() {
const router = useRouter();
const { id } = useLocalSearchParams<{ id: string }>();
const selectedOffice: OfficeItem | undefined = OFFICES_DATA.find(o => o.id.toString() === id);
if (!selectedOffice) return <Text>Ufficio non trovato</Text>;
return (
<View className="flex-1 bg-gray-50">
{/* Header Dettaglio */}
<View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-center border-b border-gray-100">
<View className='flex-row items-center'>
<TouchableOpacity
onPress={() => router.back()}
className="mr-4 p-3 rounded-full bg-gray-50 active:bg-gray-200"
>
<ChevronLeft size={28} color="#4b5563" />
</TouchableOpacity>
<Text className="text-2xl font-bold text-gray-800">{selectedOffice.name}</Text>
</View>
{/* Status Dot */}
<View className={`ms-auto w-4 h-4 rounded-full border-2 border-white shadow-sm ${selectedOffice.status === 'online' ? 'bg-green-500' : 'bg-red-500'}`} />
</View>
<ScrollView contentContainerStyle={{ padding: 20, gap: 24 }} showsVerticalScrollIndicator={false}>
<View className="flex-row gap-5">
{/* Lights Card Grande */}
<TouchableOpacity className={`flex-1 p-6 rounded-3xl border-2 active:scale-95 ${selectedOffice.lights ? 'border-[#099499] bg-teal-50' : 'border-transparent bg-white shadow-sm'}`}>
<View className="flex-row justify-between items-start mb-6">
<Lightbulb size={40} color={selectedOffice.lights ? '#099499' : '#d1d5db'} />
{/* Switch UI Grande - FIXED: Rimossa 'transition-colors' che causava il crash */}
<View className={`w-14 h-8 rounded-full p-1 ${selectedOffice.lights ? 'bg-[#099499]' : 'bg-gray-200'}`}>
<View className={`bg-white w-6 h-6 rounded-full shadow-sm ${selectedOffice.lights ? 'translate-x-6' : 'translate-x-0'}`} />
</View>
</View>
<Text className="text-lg font-bold text-gray-800 mb-1">Luci</Text>
<Text className="text-gray-500 font-medium">{selectedOffice.lights ? 'Accese - 80%' : 'Spente'}</Text>
</TouchableOpacity>
{/* Temp Card Grande */}
<View className="flex-1 bg-white p-6 rounded-3xl border border-transparent shadow-sm">
<Thermometer size={40} color="#fb923c" className="mb-6" />
<Text className="text-lg font-bold text-gray-800 mb-1">Clima</Text>
<View className="flex-row items-end">
<Text className="text-4xl font-bold text-gray-800">{selectedOffice.temp}</Text>
<Text className="text-gray-500 mb-2 ml-1 text-lg">°C</Text>
</View>
</View>
</View>
{/* Chart Card Grande */}
<View className="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
<View className="flex-row items-center mb-6 gap-3">
<Activity size={28} color="#099499" />
<Text className="text-xl font-bold text-gray-700">Consumo Oggi</Text>
</View>
<View className="flex-row items-end justify-between h-48 gap-4">
{[40, 65, 30, 80, 55, 90, 45].map((h, i) => (
<View key={i} className="flex-1 bg-gray-100 rounded-t-xl relative overflow-hidden h-full justify-end">
<View style={{ height: `${h}%` }} className="w-full bg-[#099499] rounded-t-xl opacity-80" />
</View>
))}
</View>
</View>
</ScrollView>
</View>
);
}

10
app/automation/_layout.tsx Normal file
View File

@ -0,0 +1,10 @@
import { Stack } from "expo-router";
export default function AutomationLayout() {
return (
<Stack screenOptions={{headerShown: false}}>
<Stack.Screen name="index" />
<Stack.Screen name="[id]" />
</Stack>
);
}

87
app/automation/index.tsx
View File

@ -1,91 +1,24 @@
import { OFFICES_DATA } from '@/data/data';
import type { OfficeItem } from '@/types/types';
import { Activity, ChevronRight, Lightbulb, Thermometer, Wifi, WifiOff, Zap } from 'lucide-react-native';
import { useRouter } from 'expo-router';
import { Activity, ChevronLeft, Lightbulb, Thermometer, Wifi, WifiOff, Zap, Plus } from 'lucide-react-native';
import React, { useState } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
export default function AutomationScreen() {
const router = useRouter();
const [selectedOffice, setSelectedOffice] = useState<OfficeItem | null>(null);
// --- DETAIL VIEW ---
if (selectedOffice) {
return (
<View className="flex-1 bg-gray-50">
{/* Header Dettaglio */}
<View className="bg-white p-6 pt-16 shadow-sm flex-row items-center border-b border-gray-100">
<TouchableOpacity
onPress={() => setSelectedOffice(null)}
className="mr-4 p-3 rounded-full bg-gray-50 active:bg-gray-200"
>
<ChevronRight size={28} color="#4b5563" className="rotate-180" style={{ transform: [{ rotate: '180deg' }] }} />
</TouchableOpacity>
<Text className="text-2xl font-bold text-gray-800">{selectedOffice.name}</Text>
</View>
<ScrollView contentContainerStyle={{ padding: 20, gap: 24 }} showsVerticalScrollIndicator={false}>
{/* Status Banner Grande */}
<View className="bg-white rounded-3xl p-8 shadow-sm items-center relative overflow-hidden border border-gray-100">
<View className={`absolute top-0 left-0 w-full h-2 ${selectedOffice.status === 'online' ? 'bg-green-500' : 'bg-red-500'}`} />
<View className="flex-row items-center mt-2 gap-3">
<View className={`w-4 h-4 rounded-full ${selectedOffice.status === 'online' ? 'bg-green-500 shadow-lg shadow-green-500/50' : 'bg-red-500'}`} />
<Text className="text-lg text-gray-600 uppercase tracking-widest font-bold">{selectedOffice.status}</Text>
</View>
</View>
<View className="flex-row gap-5">
{/* Lights Card Grande */}
<TouchableOpacity className={`flex-1 p-6 rounded-3xl border-2 active:scale-95 ${selectedOffice.lights ? 'border-[#099499] bg-teal-50' : 'border-transparent bg-white shadow-sm'}`}>
<View className="flex-row justify-between items-start mb-6">
<Lightbulb size={40} color={selectedOffice.lights ? '#099499' : '#d1d5db'} />
{/* Switch UI Grande - FIXED: Rimossa 'transition-colors' che causava il crash */}
<View className={`w-14 h-8 rounded-full p-1 ${selectedOffice.lights ? 'bg-[#099499]' : 'bg-gray-200'}`}>
<View className={`bg-white w-6 h-6 rounded-full shadow-sm ${selectedOffice.lights ? 'translate-x-6' : 'translate-x-0'}`} />
</View>
</View>
<Text className="text-lg font-bold text-gray-800 mb-1">Luci</Text>
<Text className="text-sm text-gray-500 font-medium">{selectedOffice.lights ? 'Accese - 80%' : 'Spente'}</Text>
</TouchableOpacity>
{/* Temp Card Grande */}
<View className="flex-1 bg-white p-6 rounded-3xl border border-transparent shadow-sm">
<Thermometer size={40} color="#fb923c" className="mb-6" />
<Text className="text-lg font-bold text-gray-800 mb-1">Clima</Text>
<View className="flex-row items-end">
<Text className="text-4xl font-bold text-gray-800">{selectedOffice.temp}</Text>
<Text className="text-gray-500 mb-2 ml-1 text-lg">°C</Text>
</View>
</View>
</View>
{/* Chart Card Grande */}
<View className="bg-white p-6 rounded-3xl shadow-sm border border-gray-100">
<View className="flex-row items-center mb-6 gap-3">
<Activity size={28} color="#099499" />
<Text className="text-xl font-bold text-gray-700">Consumo Oggi</Text>
</View>
<View className="flex-row items-end justify-between h-48 gap-4">
{[40, 65, 30, 80, 55, 90, 45].map((h, i) => (
<View key={i} className="flex-1 bg-gray-100 rounded-t-xl relative overflow-hidden h-full justify-end">
<View style={{ height: `${h}%` }} className="w-full bg-[#099499] rounded-t-xl opacity-80" />
</View>
))}
</View>
</View>
</ScrollView>
</View>
);
}
// --- LIST VIEW (INGRANDITA) ---
return (
<View className="flex-1 bg-gray-50">
<View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-start border-b border-gray-100">
<View className="bg-white p-6 pt-16 shadow-sm flex-row justify-between items-center border-b border-gray-100">
<View>
<Text className="text-3xl font-bold text-gray-800 mb-1">Domotica</Text>
<Text className="text-base text-gray-500">Controlla gli ambienti</Text>
</View>
<View className="bg-green-100 px-4 py-2 rounded-xl border border-green-200 mt-1">
<Text className="text-xs font-bold text-green-700 tracking-wide">SYSTEM OK</Text>
<Text className="text-xs font-bold text-green-700 tracking-wide">ONLINE</Text>
</View>
</View>
@ -93,7 +26,7 @@ export default function AutomationScreen() {
{OFFICES_DATA.map((office) => (
<TouchableOpacity
key={office.id}
onPress={() => setSelectedOffice(office)}
onPress={() => router.push(`/automation/${office.id}`)}
className="bg-white rounded-3xl p-6 shadow-sm flex-row items-center justify-between border border-gray-100 active:border-[#099499]/30 active:scale-[0.98]"
>
<View className="flex-row items-center gap-5">
@ -125,6 +58,14 @@ export default function AutomationScreen() {
{/* Spacer finale per la navbar */}
<View className="h-20" />
</ScrollView>
{/* FAB */}
<TouchableOpacity
onPress={() => alert('Aggiungi nuovo collegamento')}
className="absolute bottom-8 right-6 w-16 h-16 bg-[#099499] rounded-full shadow-lg items-center justify-center active:scale-90"
>
<Plus size={32} color="white" />
</TouchableOpacity>
</View>
);
}

8
app/index.tsx
View File

@ -9,9 +9,9 @@ export default function HomeScreen() {
const incompleteTasks = ATTENDANCE_DATA.filter(item => item.status === 'incomplete');
return (
<View className="flex-1 bg-gray-50">
<View className="flex-1 bg-[#099499]">
{/* Banner Custom */}
<View className="bg-[#099499] pt-16 pb-6 px-6 rounded-b-[2rem] shadow-sm z-10">
<View className="pt-16 pb-6 px-6 shadow-sm z-10">
<View className="flex-row justify-between items-start">
<View className="flex-row items-center gap-4">
<View>
@ -34,7 +34,7 @@ export default function HomeScreen() {
{/* Contenuto Scrollabile */}
<ScrollView
className="flex-1 px-5 pt-6"
className="flex-1 bg-gray-50 rounded-t-[2.5rem] px-5 pt-6"
contentContainerStyle={{ paddingBottom: 50, gap: 24 }}
showsVerticalScrollIndicator={false}
>
@ -48,7 +48,7 @@ export default function HomeScreen() {
</View>
<View className="flex-1">
<Text className="font-bold text-gray-800 text-lg">Presenza incompleta</Text>
<Text className="text-base text-gray-500 mt-1">Manca uscita: {incompleteTasks[0].site}</Text>
<Text className="text-base text-gray-500 mt-1">{incompleteTasks[0].site}</Text>
</View>
</View>
<TouchableOpacity onPress={() => router.push('/attendance')} className="bg-orange-50 px-5 py-3 rounded-xl ml-2 active:bg-orange-100">

2
app/permits/index.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { PERMITS_DATA } from '@/data/data';
import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, Clock, Plus, Thermometer, X } from 'lucide-react-native';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import RequestPermitModal from '@/components/RenamePermitModal';
import RequestPermitModal from '@/components/RequestPermitModal';
export default function PermitsScreen() {
const [currentDate, setCurrentDate] = useState(new Date(2025, 11, 1)); // Dicembre 2025 Mock

52
components/RangePickerModal.tsx
View File

@ -1,16 +1,15 @@
import React, { useState, useEffect } from 'react';
import { Modal, Text, TouchableOpacity, View } from 'react-native';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
import { Alert, Modal, Text, TouchableOpacity, View } from 'react-native';
import DateTimePicker, { DateType, useDefaultStyles, useDefaultClassNames } from 'react-native-ui-datepicker';
import { Check, X } from 'lucide-react-native';
export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: any) => {
// Stato locale temporaneo per la selezione nel modale
const [localRange, setLocalRange] = useState(currentRange);
// Sincronizza lo stato locale quando il modale si apre
useEffect(() => {
if (visible) setLocalRange(currentRange);
}, [visible, currentRange]);
const defaultStyles = useDefaultStyles();
// const defaultClassNames = useDefaultClassNames();
const [range, setRange] = useState<{
startDate: DateType;
endDate: DateType;
}>({ startDate: undefined, endDate: undefined });
return (
<Modal
@ -30,19 +29,26 @@ export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: an
<DateTimePicker
mode="range"
locale="it"
startDate={localRange.startDate}
endDate={localRange.endDate}
onChange={(params: any) => setLocalRange(params)}
// selectedItemColor="#099499"
// headerTextStyle={{ color: '#1f2937', fontWeight: 'bold', fontSize: 18 }}
// calendarTextStyle={{ color: '#374151' }}
// weekDaysTextStyle={{ color: '#9ca3af', fontWeight: 'bold' }}
startDate={range.startDate}
endDate={range.endDate}
onChange={(params) => setRange(params)}
timeZone='Europe/Rome'
locale='it'
styles={{
...defaultStyles,
selected: { backgroundColor: '#099499' }
}}
// classNames={{
// ...defaultClassNames,
// selected: 'bg-#099499'
// }}
/>
<TouchableOpacity
onPress={() => {
onApply(localRange);
console.log("Data inizio: ", range.startDate?.toLocaleString());
console.log("Data fine: ", range.endDate?.toLocaleString());
onApply(range);
onClose();
}}
className="mt-6 bg-[#099499] rounded-xl py-4 flex-row justify-center items-center active:bg-[#077d82]"
@ -50,6 +56,16 @@ export const RangePickerModal = ({ visible, onClose, currentRange, onApply }: an
<Check size={20} color="white" className="mr-2" />
<Text className="text-white font-bold text-lg ml-2">Applica Filtro</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
console.log("Reset pressed");
range.startDate = range.endDate = undefined;
// TODO: deselect dates from calendar
}}
className="mt-2 bg-gray-200 rounded-xl py-4 flex-row justify-center items-center active:bg-gray-300"
>
<Text className="text-gray-700 font-bold text-lg ml-2">Reset</Text>
</TouchableOpacity>
</View>
</View>
</Modal>

127
components/RenamePermitModal.tsx
View File

@ -1,127 +0,0 @@
import React, { useState } from 'react';
import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native';
import { PermitType } from '@/types/types';
import { X } from 'lucide-react-native';
interface RequestPermitModalProps {
visible: boolean;
onClose: () => void;
onSubmit: (data: any) => void;
}
export default function RequestPermitModal({ visible, onClose, onSubmit}: RequestPermitModalProps) {
const [type, setType] = useState<PermitType>('Ferie');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const [startTime, setStartTime] = useState('');
const [endTime, setEndTime] = useState('');
return (
<Modal
visible={visible}
transparent={true}
animationType="slide"
statusBarTranslucent
>
<View className="flex-1 bg-black/60 justify-end sm:justify-center">
<View className="bg-white w-full rounded-t-[2.5rem] p-6 shadow-2xl h-[85%] sm:h-auto">
{/* Header Modale */}
<View className="flex-row justify-between items-center mb-6">
<Text className="text-2xl font-bold text-gray-800">Nuova Richiesta</Text>
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
<X size={24} color="#4b5563" />
</TouchableOpacity>
</View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
<View className="space-y-6 gap-6">
{/* Tipologia */}
<View>
<Text className="text-base font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
<View className="flex-row gap-3">
{(['Ferie', 'Permesso', 'Malattia'] as PermitType[]).map((t) => (
<TouchableOpacity
key={t}
onPress={() => setType(t)}
className={`flex-1 py-4 rounded-xl border-2 items-center justify-center ${
type === t
? 'border-[#099499] bg-teal-50'
: 'border-gray-100 bg-white'
}`}
>
<Text className={`text-sm font-bold ${
type === t ? 'text-[#099499]' : 'text-gray-500'
}`}>
{t}
</Text>
</TouchableOpacity>
))}
</View>
</View>
{/* Date Selection */}
<View className="flex-row gap-4">
<View className={`flex-1 ${type === 'Permesso' ? 'w-full' : ''}`}>
<Text className="text-sm font-bold text-gray-700 mb-2">
{type === 'Permesso' ? 'Data' : 'Dal'}
</Text>
<TextInput
placeholder="YYYY-MM-DD"
className="w-full p-4 bg-gray-50 rounded-xl font-medium text-gray-800"
value={startDate}
onChangeText={setStartDate}
/>
</View>
{type !== 'Permesso' && (
<View className="flex-1">
<Text className="text-sm font-bold text-gray-700 mb-2">Al</Text>
<TextInput
placeholder="YYYY-MM-DD"
className="w-full p-4 bg-gray-50 rounded-xl font-medium text-gray-800"
value={endDate}
onChangeText={setEndDate}
/>
</View>
)}
</View>
{/* Time Selection (Solo Permessi) */}
{type === 'Permesso' && (
<View className="flex-row gap-4 p-4 bg-orange-50 rounded-xl border border-orange-100">
<View className="flex-1">
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
<TextInput
placeholder="09:00"
className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
value={startTime}
onChangeText={setStartTime}
/>
</View>
<View className="flex-1">
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
<TextInput
placeholder="18:00"
className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
value={endTime}
onChangeText={setEndTime}
/>
</View>
</View>
)}
<TouchableOpacity
onPress={() => {
onSubmit({ type, startDate, endDate, startTime, endTime });
onClose();
}}
className="w-full py-4 bg-[#099499] rounded-2xl shadow-lg mt-4 active:scale-[0.98]"
>
<Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
</View>
</Modal>
);
};

166
components/RequestPermitModal.tsx Normal file
View File

@ -0,0 +1,166 @@
import React, { useState } from 'react';
import { View, Text, Modal, TouchableOpacity, TextInput, ScrollView } from 'react-native';
import DateTimePicker, { DateType, useDefaultStyles, useDefaultClassNames } from 'react-native-ui-datepicker';
import { PermitType } from '@/types/types';
import { X } from 'lucide-react-native';
import { TimePickerModal } from './TimePickerModal';
interface RequestPermitModalProps {
visible: boolean;
onClose: () => void;
onSubmit: (data: any) => void;
}
export default function RequestPermitModal({ visible, onClose, onSubmit }: RequestPermitModalProps) {
const defaultStyles = useDefaultStyles();
const [type, setType] = useState<PermitType>('Ferie');
const [date, setDate] = useState<DateType>();
const [range, setRange] = useState<{
startDate: DateType;
endDate: DateType;
}>({ startDate: undefined, endDate: undefined });
const [showStartPicker, setShowStartPicker] = useState(false);
const [showEndPicker, setShowEndPicker] = useState(false);
const [startTime, setStartTime] = useState('');
const [endTime, setEndTime] = useState('');
return (
<Modal
visible={visible}
transparent={true}
animationType="slide"
statusBarTranslucent
>
<View className="flex-1 bg-black/60 justify-end sm:justify-center">
<View className="bg-white w-full rounded-t-[2.5rem] p-6 shadow-2xl h-[85%] sm:h-auto">
{/* Header Modale */}
<View className="flex-row justify-between items-center mb-6">
<Text className="text-2xl font-bold text-gray-800">Nuova Richiesta</Text>
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
<X size={24} color="#4b5563" />
</TouchableOpacity>
</View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 40 }}>
<View className="space-y-6 gap-6">
{/* Tipologia */}
<View>
<Text className="text-base font-bold text-gray-700 mb-3">Tipologia Assenza</Text>
<View className="flex-row gap-3">
{(['Ferie', 'Permesso', 'Malattia'] as PermitType[]).map((t) => (
<TouchableOpacity
key={t}
onPress={() => setType(t)}
className={`flex-1 py-4 rounded-xl border-2 items-center justify-center ${type === t
? 'border-[#099499] bg-teal-50'
: 'border-gray-100 bg-white'
}`}
>
<Text className={`text-sm font-bold ${type === t ? 'text-[#099499]' : 'text-gray-500'
}`}>
{t}
</Text>
</TouchableOpacity>
))}
</View>
</View>
{/* Date Selection */}
{type !== 'Permesso' ? (
<DateTimePicker
mode="range"
startDate={range.startDate}
endDate={range.endDate}
onChange={(params) => setRange(params)}
timeZone='Europe/Rome'
locale='it'
styles={{
...defaultStyles,
selected: { backgroundColor: '#099499' }
}}
/>
) : (
<View className='flex-column'>
<DateTimePicker
mode="single"
date={date}
onChange={({ date }) => setDate(date)}
timeZone='Europe/Rome'
locale='it'
styles={{
...defaultStyles,
selected: { backgroundColor: '#099499' }
}}
/>
<View className="flex-row gap-4 p-4 bg-orange-50 rounded-xl border border-orange-100">
<View className="flex-1">
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Dalle Ore</Text>
<TouchableOpacity onPress={() => setShowStartPicker(true)}>
<TextInput
placeholder="09:00"
className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
value={startTime}
onChangeText={setStartTime}
editable={false}
/>
</TouchableOpacity>
</View>
<View className="flex-1">
<Text className="text-xs font-bold text-orange-800 mb-2 uppercase">Alle Ore</Text>
<TouchableOpacity onPress={() => setShowEndPicker(true)}>
<TextInput
placeholder="18:00"
className="w-full p-3 bg-white rounded-lg border border-orange-200 font-bold text-gray-800 text-center"
value={endTime}
onChangeText={setEndTime}
editable={false}
/>
</TouchableOpacity>
</View>
</View>
</View>
)}
<TimePickerModal
visible={showStartPicker}
initialDate={new Date()}
onConfirm={(time) => setStartTime(time)}
onClose={() => setShowStartPicker(false)}
/>
<TimePickerModal
visible={showEndPicker}
initialDate={new Date()}
onConfirm={(time) => setEndTime(time)}
onClose={() => setShowEndPicker(false)}
/>
<View>
<TouchableOpacity
onPress={() => {
onSubmit({ type, date, range, startTime, endTime });
onClose();
}}
className="w-full py-4 bg-[#099499] rounded-2xl shadow-lg active:scale-[0.98]"
>
<Text className="text-white text-center font-bold text-lg">Invia Richiesta</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
console.log("Reset pressed");
onClose();
// TODO: deselect dates from calendar
}}
className="mt-2 bg-gray-200 rounded-xl py-4 flex-row justify-center items-center active:bg-gray-300"
>
<Text className="text-gray-700 font-bold text-lg ml-2">Annulla Richiesta</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</View>
</View>
</Modal>
);
};

68
components/TimePickerModal.tsx Normal file
View File

@ -0,0 +1,68 @@
import React, { useState } from 'react';
import { Modal, View, TouchableOpacity, Text } from 'react-native';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';
import { X } from 'lucide-react-native';
import dayjs from 'dayjs';
interface TimePickerModalProps {
visible: boolean;
initialDate?: DateType;
onConfirm: (time: string) => void;
onClose: () => void;
}
export const TimePickerModal = ({ visible, initialDate, onConfirm, onClose }: TimePickerModalProps) => {
const defaultStyles = useDefaultStyles();
const [selectedDate, setSelectedDate] = useState<DateType>(initialDate || new Date());
const formatTime = (date?: DateType | null) => {
if (!date) return "00:00";
date = dayjs(date);
const hour = date?.hour().toString().padStart(2, "0") ?? "00";
const minute = date?.minute().toString().padStart(2, "0") ?? "00";
return `${hour}:${minute}`;
};
const handleConfirm = () => {
const time = formatTime(selectedDate);
console.log("Selected time:", time);
onConfirm(time);
onClose();
};
return (
<Modal visible={visible} transparent animationType="fade">
<View className="flex-1 justify-center items-center bg-black/50">
<View className="bg-white rounded-xl p-4 w-[90%] max-h-[400px]">
{/* Header con chiusura */}
<View className="flex-row justify-end items-center mb-4">
<TouchableOpacity onPress={onClose} className="p-2 bg-gray-100 rounded-full">
<X size={20} color="#4b5563" />
</TouchableOpacity>
</View>
{/* TimePicker */}
<DateTimePicker
mode="single"
timePicker
date={selectedDate}
initialView="time"
hideHeader
containerHeight={200}
styles={defaultStyles}
onChange={(d) => setSelectedDate(d.date || new Date())}
/>
{/* Bottone conferma */}
<TouchableOpacity
onPress={handleConfirm}
className="mt-4 w-full py-3 bg-[#099499] rounded-xl shadow-lg active:scale-[0.98]"
>
<Text className="text-white text-center font-bold text-lg">Applica</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
};