eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reservas screen

This commit is contained in:
Maria Sanchez 2022-08-17 10:36:33 -06:00
parent dcb77ae10e
commit 50995a06e3
7 changed files with 314 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
mobile-ui/App.js
View File

@ -4,24 +4,48 @@ import {
} from "native-base";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import LogIn from "./components/LogIn";
import Home from "./components/Home";
import RecoverPassword from "./components/RecoverPassword";
import Reservas from "./components/Reservas";
import Profile from "./components/Profile";
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
function HomeTab() {
return (
<Tab.Navigator initialRouteName="Comunicados" >
<Tab.Screen name="Comunicados" component={Home} options={{headerStyle: {
backgroundColor: "#D7A86E"
}}}/>
<Tab.Screen name="Reservas" component={Reservas } options={{headerStyle: {
backgroundColor: "#D7A86E"
}}}/>
<Tab.Screen name="Perfil" component={Profile} options={{headerStyle: {
backgroundColor: "#D7A86E"
}}}/>
</Tab.Navigator>
)
}
export default function App() {
return (
<NativeBaseProvider>
<NavigationContainer>
<Stack.Navigator initialRouteName="LogIn">
<Stack.Screen name="Inicio" component={LogIn} />
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Inicio" component={LogIn} options={{headerStyle: {
backgroundColor: "#D7A86E"
}}} />
<Stack.Screen name="Comunicados" component={HomeTab} options={{headerShown: false}} />
<Stack.Screen name="Password" component={RecoverPassword} />
</Stack.Navigator>
</NavigationContainer>
</NavigationContainer>
</NativeBaseProvider>
);
}

133
mobile-ui/components/Home.js
View File

@ -1,60 +1,103 @@
import React from 'react';
import React from "react";
import {
Text,
HStack,
Badge,
Box,
Icon,
MaterialIcons,
Center,
Pressable
Pressable,
Spacer,
Flex,
Center
} from "native-base";
import { MaterialCommunityIcons } from '@expo/vector-icons';
export default function Home(){
export default function Home({navigation}){
const [selected, setSelected] = React.useState(1);
const [selected, setSelected] = React.useState(0);
return (
<Box flex={1} bg="white" safeAreaTop width="100%" maxW="300px" alignSelf="center">
<Center flex={1}></Center>
<HStack bg="indigo.600" alignItems="center" safeAreaBottom shadow={6}>
<Pressable opacity={selected === 0 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(0)}>
<Center>
<Icon mb="1" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="white" size="sm" />
<Text color="white" fontSize="12">
Inicio
<Box alignItems="center">
<Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5" marginTop="4">
<Box>
<HStack alignItems="center">
<Badge colorScheme="darkBlue" _text={{
color: "white"
}} variant="solid" rounded="4">
Comunicado
</Badge>
<Spacer />
<Text fontSize={10} color="coolGray.800">
1 month ago
</Text>
</Center>
</Pressable>
<Pressable opacity={selected === 1 ? 1 : 0.5} py="2" flex={1} onPress={() => setSelected(1)}>
<Center>
<Icon mb="1" as={<MaterialIcons name="search" />} color="white" size="sm" />
<Text color="white" fontSize="12">
Comunicados
</Text>
</Center>
</Pressable>
<Pressable opacity={selected === 2 ? 1 : 0.6} py="2" flex={1} onPress={() => setSelected(2)}>
<Center>
<Icon mb="1" as={<MaterialCommunityIcons name={selected === 2 ? 'cart' : 'cart-outline'} />} color="white" size="sm" />
<Text color="white" fontSize="12">
Reservas
</Text>
</Center>
</Pressable>
<Pressable opacity={selected === 3 ? 1 : 0.5} py="2" flex={1} onPress={() => setSelected(3)}>
<Center>
<Icon mb="1" as={<MaterialCommunityIcons name={selected === 3 ? 'account' : 'account-outline'} />} color="white" size="sm" />
<Text color="white" fontSize="12">
Perfil
</Text>
</Center>
</Pressable>
</HStack>
<Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
Administrador de Comunidad
</Text>
<Text mt="2" fontSize="sm" color="coolGray.700">
Notificacion sobre la aplicacion
</Text>
</Box>
</Pressable>
<Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5" marginTop="4">
<Box>
<HStack alignItems="center">
<Badge colorScheme="darkBlue" _text={{
color: "white"
}} variant="solid" rounded="4">
Comunicado
</Badge>
<Spacer />
<Text fontSize={10} color="coolGray.800">
1 month ago
</Text>
</HStack>
<Text color="coolGray.800" mt="3" fontWeight="medium" fontSize="xl">
Administrador General
</Text>
<Text mt="2" fontSize="sm" color="coolGray.700">
Notificacion sobre la aplicacion
</Text>
</Box>
</Pressable>
</Box>
// <Center width={"100%"} marginTop={"auto"}>
// <Box safeAreaTop bg="#D7A86E" flex={1} />
// <HStack bg="#D7A86E" px="2" py="4" justifyContent="space-between" alignItems="center" w="100%" maxW="100%">
// <Pressable opacity={selected === 0 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(0) && navigation.navigate('Home')}>
// <Center>
// <Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="white" size="md" />
// <Text color="white" fontSize="15">
// Inicio
// </Text>
// </Center>
// </Pressable>
);
// <Pressable opacity={selected === 1 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(1) && ( () => navigation.navigate('Reservas'))}>
// <Center>
// <Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="white" size="md" />
// <Text color="white" fontSize="15">
// Reservas
// </Text>
// </Center>
// </Pressable>
// <Pressable opacity={selected === 2 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(2)}>
// <Center>
// <Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="white" size="md" />
// <Text color="white" fontSize="15">
// Perfil
// </Text>
// </Center>
// </Pressable>
// </HStack>
// </Center>
)
}

6
mobile-ui/components/LogIn.js
View File

@ -7,10 +7,8 @@ import {
VStack,
Box,
FormControl,
Input,
Button,
Image,
Container
Image
} from "native-base";
import logo from "../assets/logo-katoikia.png";
import { Entypo } from '@expo/vector-icons';
@ -115,7 +113,7 @@ export default function LogIn({navigation}) {
</Link>
</FormControl>
<Button mt="2" colorScheme="primary" onPress={() => navigation.navigate('Home')}
<Button mt="2" colorScheme="primary" onPress={() => navigation.navigate('Comunicados')}
>
<Text>Continuar</Text>
</Button>

15
mobile-ui/components/Profile.js
View File

@ -0,0 +1,15 @@
import React from "react";
import {
Box
} from "native-base";
export default function Profile(){
return (
<Box>
</Box>
)
}

148
mobile-ui/components/Reservas.js Normal file
View File

@ -0,0 +1,148 @@
import React from "react";
import {
Text,
HStack,
AntDesign,
Heading,
Stack,
Box,
ScrollView,
Fab,
Icon
} from "native-base";
import logo from "../assets/logo-katoikia.png";
import { Entypo } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { View, TextInput, StyleSheet } from "react-native";
const styles = StyleSheet.create({
input: {
height: 40,
margin: 10,
borderWidth: 0.5,
padding: 5,
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
marginTop: 50,
marginBottom: 10
},
iconStyle: {
padding: 10,
},
viewSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
margin: 10
},
container: {
}
})
export default function Reservas({navigation}) {
return (
<ScrollView showsVerticalScrollIndicator={false}>
<Box alignItems="center">
<Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
borderColor: "coolGray.600",
backgroundColor: "gray.700"
}} _web={{
shadow: 2,
borderWidth: 0
}} _light={{
backgroundColor: "gray.50"
}}>
<Stack p="4" space={3}>
<Stack space={2}>
<Heading size="md" ml="-1">
Reserva #1
</Heading>
<Text fontSize="xs" _light={{
color: "violet.500"
}} _dark={{
color: "violet.400"
}} fontWeight="500" ml="-0.5" mt="-1">
horario de Reserva
</Text>
</Stack>
<Text fontWeight="400">
Descripcion
</Text>
<HStack alignItems="center" space={4} justifyContent="space-between">
<HStack alignItems="center">
<Text color="coolGray.600" _dark={{
color: "warmGray.200"
}} fontWeight="400">
6 mins ago
</Text>
</HStack>
</HStack>
</Stack>
</Box>
</Box>
<Box alignItems="center" width={"100%"}>
<Box width="80" rounded="lg" overflow="hidden" borderColor="coolGray.200" borderWidth="1" _dark={{
borderColor: "coolGray.600",
backgroundColor: "gray.700"
}} _web={{
shadow: 2,
borderWidth: 0
}} _light={{
backgroundColor: "gray.50"
}}>
<Stack p="4" space={3}>
<Stack space={2}>
<Heading size="md" ml="-1">
Reserva #1
</Heading>
<Text fontSize="xs" _light={{
color: "violet.500"
}} _dark={{
color: "violet.400"
}} fontWeight="500" ml="-0.5" mt="-1">
horario de Reserva
</Text>
</Stack>
<Text fontWeight="400">
Descripcion
</Text>
<HStack alignItems="center" space={4} justifyContent="space-between">
<HStack alignItems="center">
<Text color="coolGray.600" _dark={{
color: "warmGray.200"
}} fontWeight="400">
6 mins ago
</Text>
</HStack>
</HStack>
</Stack>
</Box>
</Box>
<Box height="200" w="300" shadow="2" rounded="lg" _dark={{
bg: "coolGray.200:alpha.20"
}} _light={{
bg: "coolGray.200:alpha.20"
}}>
<Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon color="white" as={AntDesign} name="plus" size="sm" />} />
</Box>
</ScrollView>
);
}

28
mobile-ui/package-lock.json generated
View File

@ -10,6 +10,7 @@
"license": "MIT",
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/bottom-tabs": "^6.3.2",
"@react-navigation/native": "^6.0.11",
"@react-navigation/native-stack": "^6.7.0",
"@react-navigation/stack": "^6.2.2",
@ -3533,6 +3534,23 @@
"resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-1.0.0.tgz",
"integrity": "sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w=="
},
"node_modules/@react-navigation/bottom-tabs": {
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.3.2.tgz",
"integrity": "sha512-uS0XV2aH7bAW54Zuf5ks2V60riarbMALyMz3cB3204l4aGhx41UPUIr/K72pGAVdIPizpjz8Fk8qwczAwex9eg==",
"dependencies": {
"@react-navigation/elements": "^1.3.4",
"color": "^4.2.3",
"warn-once": "^0.1.0"
},
"peerDependencies": {
"@react-navigation/native": "^6.0.0",
"react": "*",
"react-native": "*",
"react-native-safe-area-context": ">= 3.0.0",
"react-native-screens": ">= 3.0.0"
}
},
"node_modules/@react-navigation/core": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.2.2.tgz",
@ -13852,6 +13870,16 @@
"resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-1.0.0.tgz",
"integrity": "sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w=="
},
"@react-navigation/bottom-tabs": {
"version": "6.3.2",
"resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.3.2.tgz",
"integrity": "sha512-uS0XV2aH7bAW54Zuf5ks2V60riarbMALyMz3cB3204l4aGhx41UPUIr/K72pGAVdIPizpjz8Fk8qwczAwex9eg==",
"requires": {
"@react-navigation/elements": "^1.3.4",
"color": "^4.2.3",
"warn-once": "^0.1.0"
}
},
"@react-navigation/core": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.2.2.tgz",

1
mobile-ui/package.json
View File

@ -18,6 +18,7 @@
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/bottom-tabs": "^6.3.2",
"@react-navigation/native": "^6.0.11",
"@react-navigation/native-stack": "^6.7.0",
"@react-navigation/stack": "^6.2.2",