Add DatePicker and refactor some views layout
This commit is contained in:
75
app/automation/[id].tsx
Normal file
75
app/automation/[id].tsx
Normal 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
10
app/automation/_layout.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user