feat: update app configuration and enhance UI components

This commit is contained in:
2026-02-06 18:06:48 +01:00
parent 7c8ef45e5a
commit 882cfc281d
19 changed files with 339 additions and 266 deletions

View File

@@ -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