feat: update app configuration and enhance UI components
This commit is contained in:
@@ -6,6 +6,7 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import { ChevronLeft, ServerOff, WifiOff } from 'lucide-react-native';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
|
||||
export default function AutomationDetailScreen() {
|
||||
const router = useRouter();
|
||||
@@ -95,14 +96,18 @@ export default function AutomationDetailScreen() {
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<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 gap-4'>
|
||||
<TouchableOpacity onPress={() => router.back()} className='rounded-full active:bg-gray-100'>
|
||||
<ChevronLeft size={28} color="#4b5563" />
|
||||
</TouchableOpacity>
|
||||
<Text className="text-2xl font-bold text-gray-800">{area.name}</Text>
|
||||
</View>
|
||||
<View className={`ms-auto w-3.5 h-3.5 rounded-full border-2 border-white shadow-sm bg-green-500`} />
|
||||
<View className="bg-white px-4 pb-6 shadow-sm border-b border-gray-100">
|
||||
<SafeAreaView edges={['top']} className='pt-5'>
|
||||
<View className="flex-row justify-between items-center">
|
||||
<View className='flex-row items-center gap-4'>
|
||||
<TouchableOpacity onPress={() => router.back()} className='rounded-full active:bg-gray-100'>
|
||||
<ChevronLeft size={28} color="#4b5563" />
|
||||
</TouchableOpacity>
|
||||
<Text className="text-2xl font-bold text-gray-800">{area.name}</Text>
|
||||
</View>
|
||||
<View className={`ms-auto w-3.5 h-3.5 rounded-full border-2 border-white shadow-sm bg-green-500`} />
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import LoadingScreen from '@/components/LoadingScreen';
|
||||
import type { HaArea } from '@/types/types';
|
||||
import { getHaAreas, testHaConnection } from '@/utils/haApi';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Archive, Briefcase, DoorOpen, Grid2X2, Lightbulb, Plus, Users, WifiOff } from 'lucide-react-native';
|
||||
import { Archive, Briefcase, DoorOpen, Grid2X2, Lightbulb, Users, WifiOff } from 'lucide-react-native';
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
||||
import LoadingScreen from '@/components/LoadingScreen';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
|
||||
const AREA_STYLES = [
|
||||
{ icon: Users, bgColor: 'bg-indigo-100' },
|
||||
@@ -70,11 +71,48 @@ export default function AutomationScreen() {
|
||||
return <LoadingScreen />;
|
||||
}
|
||||
|
||||
// TODO: Remove duplicated code
|
||||
if (!connectionStatus.success) {
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="bg-white pt-16 shadow-sm border-b border-gray-100">
|
||||
<View className="px-6 pb-4 flex-row justify-between items-center">
|
||||
<View className="bg-white shadow-sm border-b border-gray-100">
|
||||
<SafeAreaView edges={['top']} className='pt-5'>
|
||||
<View className="flex-row justify-between items-center px-6 pb-6">
|
||||
<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={`px-4 py-2 rounded-xl border ${connectionStatus.success ? 'bg-green-100 border-green-200' : 'bg-red-100 border-red-200'}`}>
|
||||
<Text className={`text-xs font-bold tracking-wide ${connectionStatus.success ? 'text-green-700' : 'text-red-700'}`}>
|
||||
{connectionStatus.success ? 'ONLINE' : 'OFFLINE'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
contentContainerClassName="flex-grow items-center justify-center pb-[100px]"
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#099499']} tintColor={'#099499'} />}
|
||||
>
|
||||
<WifiOff size={48} color="#9ca3af" />
|
||||
<Text className="text-lg text-gray-500 font-medium mt-4">Errore di connessione</Text>
|
||||
<Text className="text-center text-gray-400 mt-2 px-10">
|
||||
{connectionStatus.message}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={onRefresh} className="mt-6 bg-[#099499] px-6 py-3 rounded-lg active:scale-95">
|
||||
<Text className="text-white font-bold">Riprova</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="bg-white shadow-sm border-b border-gray-100">
|
||||
<SafeAreaView edges={['top']} className='pt-5'>
|
||||
<View className="flex-row justify-between items-center px-6 pb-6">
|
||||
<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>
|
||||
@@ -98,51 +136,7 @@ export default function AutomationScreen() {
|
||||
))}
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
<ScrollView
|
||||
contentContainerClassName="flex-grow items-center justify-center pb-[100px]"
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#099499']} tintColor={'#099499'} />}
|
||||
>
|
||||
<WifiOff size={48} color="#9ca3af" />
|
||||
<Text className="text-lg text-gray-500 font-medium mt-4">Errore di connessione</Text>
|
||||
<Text className="text-center text-gray-400 mt-2 px-10">
|
||||
{connectionStatus.message}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={onRefresh} className="mt-6 bg-[#099499] px-6 py-3 rounded-lg active:scale-95">
|
||||
<Text className="text-white font-bold">Riprova</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="bg-white pt-16 shadow-sm border-b border-gray-100">
|
||||
<View className="px-6 pb-4 flex-row justify-between items-center">
|
||||
<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={`px-4 py-2 rounded-xl border ${connectionStatus.success ? 'bg-green-100 border-green-200' : 'bg-red-100 border-red-200'}`}>
|
||||
<Text className={`text-xs font-bold tracking-wide ${connectionStatus.success ? 'text-green-700' : 'text-red-700'}`}>
|
||||
{connectionStatus.success ? 'ONLINE' : 'OFFLINE'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
{connectionStatus.success && (
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerClassName="px-5 pb-4 gap-3">
|
||||
{floors.map(floor => (
|
||||
<TouchableOpacity
|
||||
key={floor}
|
||||
onPress={() => setSelectedFloor(floor)}
|
||||
className={`px-5 py-2.5 rounded-xl ${selectedFloor === floor ? 'bg-[#099499]' : 'bg-gray-100 active:bg-gray-200'}`}
|
||||
>
|
||||
<Text className={`font-bold ${selectedFloor === floor ? 'text-white' : 'text-gray-600'}`}>{floor}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
|
||||
Reference in New Issue
Block a user