Fusión del desarrollo realizado

parent 84d111c2
...@@ -4,7 +4,8 @@ import { DefaultTheme, NavigationContainer, StackActions } from '@react-navigati ...@@ -4,7 +4,8 @@ import { DefaultTheme, NavigationContainer, StackActions } from '@react-navigati
import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import Perfil from './Perfil'; import Perfil from './Perfil';
import Contraseña from './Contraseña'; import Password from './Password';
import TabBar from './TabBar';
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
...@@ -16,12 +17,12 @@ const Stack = createNativeStackNavigator(); ...@@ -16,12 +17,12 @@ const Stack = createNativeStackNavigator();
* @returns la siguiente vista o un modal dependiendo si las credenciales son correctas * @returns la siguiente vista o un modal dependiendo si las credenciales son correctas
*/ */
function ComprobacionAuth(userName, password, setM, navigation){ function ComprobacionAuth(userName, password, setM, navigation){
const jsonInicio = require('./inicio.json'); const jsonInicio = require('./assets/data/load/usuarios.json');
const data = jsonInicio[userName]; const data = jsonInicio[userName];
if(data){ // se comprueba si el usuario existe if(data){ // se comprueba si el usuario existe
if(jsonInicio[userName].Contraseña == password){ // se verifica si la contraseña corresponde if(jsonInicio[userName].Password == password){ // se verifica si la contraseña corresponde
return navigation.dispatch( return navigation.dispatch(
StackActions.replace('Perfil',{id: userName}) StackActions.replace('TabBar',{id: userName})
); // Modificar por la visualizacion de la vista principal ); // Modificar por la visualizacion de la vista principal
}else{ }else{
return setM(true); return setM(true);
...@@ -56,7 +57,7 @@ function Inicio({navigation}) { ...@@ -56,7 +57,7 @@ function Inicio({navigation}) {
</Modal> </Modal>
</View> </View>
<View style={{justifyContent: 'center', alignItems: 'center', padding:'5%'}}> <View style={{justifyContent: 'center', alignItems: 'center', padding:'5%'}}>
<Image style={estilos.Logo} source={require('./img/logo.png')} /> <Image style={estilos.Logo} source={require('./assets/img/logo.png')} />
</View> </View>
<View> <View>
<TextInput style={estilos.EntradaTexto} placeholder = "Nombre de usuario" onChangeText={(valor) => setIdentificador(valor)} ></TextInput> <TextInput style={estilos.EntradaTexto} placeholder = "Nombre de usuario" onChangeText={(valor) => setIdentificador(valor)} ></TextInput>
...@@ -80,18 +81,17 @@ function App() { ...@@ -80,18 +81,17 @@ function App() {
const tema = DefaultTheme; const tema = DefaultTheme;
tema.colors.background = 'white'; tema.colors.background = 'white';
return ( return (
<View style={{ flex: 1 }}> <NavigationContainer ref={ref}>
<NavigationContainer ref={ref}> <Stack.Navigator initialRouteName="Inicio">
<Stack.Navigator initialRouteName="Inicio"> <Stack.Screen name="Inicio de sesión" component={Inicio}
<Stack.Screen name="Inicio de sesión" component={Inicio} options={{ headerStyle:{ backgroundColor: '#7D9BFF' }, headerTitleStyle: {
options={{ headerStyle:{ backgroundColor: '#7D9BFF' }, headerTitleStyle: { color: 'white'
color: 'white' }}} />
}}} /> <Stack.Screen name="TabBar" component={TabBar} options={{"headerShown": false}}/>
<Stack.Screen name="Perfil" component={Perfil} options={{"headerShown": false}}></Stack.Screen> {/*<Stack.Screen name="Perfil" component={Perfil} options={{"headerShown": false}}></Stack.Screen>*/}
<Stack.Screen name="Contraseña" component={Contraseña} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}></Stack.Screen> <Stack.Screen name="Contraseña" component={Password} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}/>
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
</View>
); );
} }
...@@ -102,7 +102,7 @@ const estilos = StyleSheet.create({ ...@@ -102,7 +102,7 @@ const estilos = StyleSheet.create({
EntradaTexto: { EntradaTexto: {
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: "#B5B2B2", borderBottomColor: "#B5B2B2",
padding: 15, paddingBottom: 15,
}, },
ContenedorTexto:{ ContenedorTexto:{
padding: 18, padding: 18,
...@@ -161,4 +161,4 @@ const estilos = StyleSheet.create({ ...@@ -161,4 +161,4 @@ const estilos = StyleSheet.create({
} }
}); });
export default App; export default Inicio;
\ No newline at end of file \ No newline at end of file
import * as React from 'react';
import { DefaultTheme, NavigationContainer} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Password from './Password';
import TabBar from './TabBar';
import Inicio from './App';
import ListaReservaMaterial from './listaMatRes';
import ListaMateriales from './materialesLista';
const Stack = createNativeStackNavigator();
function Navegacion() {
const ref = React.useRef(null);
const tema = DefaultTheme;
tema.colors.background = 'white';
return (
<NavigationContainer ref={ref}>
<Stack.Navigator initialRouteName="Inicio">
<Stack.Screen name="Inicio de sesión" component={Inicio}
options={{ headerStyle:{ backgroundColor: '#7D9BFF' }, headerTitleStyle: {
color: 'white'
}}} />
<Stack.Screen name="TabBar" component={TabBar} options={{"headerShown": false}}/>
<Stack.Screen name="Contraseña" component={Password} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}/>
<Stack.Screen
name="Materiales"
component={ListaMateriales}
options = {({route}) => ({
title: route.params.nombreListaMat,
headerStyle: { backgroundColor: '#7D9BFF' },
headerTintColor: 'white'
})}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default Navegacion;
\ No newline at end of file
import * as React from 'react';
import * as React from 'react'; import * as React from 'react';
import { View, Text, TextInput, StyleSheet, TouchableOpacity, Alert, Modal } from 'react-native'; import { View, Text, TextInput, StyleSheet, TouchableOpacity, Modal } from 'react-native';
function ComprobarContraseña(navigation, route, contr, nuevaContr, rNuevaContr, setModal, setTextModal){ function CheckPassword(navigation, route, contr, nuevaContr, rNuevaContr, setModal, setTextModal){
const jsonInicio = require('./inicio.json'); const jsonInicio = require('./assets/data/load/usuarios.json');
if(jsonInicio[route.params.id].Contraseña == contr){ if(jsonInicio[route.params.id].Password == contr){
if(nuevaContr != contr){ if(nuevaContr != contr){
if(nuevaContr == rNuevaContr && (nuevaContr != "" || rNuevaContr != "")){ if(nuevaContr == rNuevaContr && (nuevaContr != "" || rNuevaContr != "")){
return navigation.goBack(); return navigation.goBack();
...@@ -18,36 +18,40 @@ function ComprobarContraseña(navigation, route, contr, nuevaContr, rNuevaContr, ...@@ -18,36 +18,40 @@ function ComprobarContraseña(navigation, route, contr, nuevaContr, rNuevaContr,
} }
setModal(true); setModal(true);
} }
const Modales = (props) => {
return (
<Modal transparent={true} visible={props.modal} animationType={'fade'}>
<View style={estilos.CentrarModal}>
<View style={estilos.VistaModal}>
<Text style={estilos.TituloModal}>Contraseña</Text>
<Text>{props.textModal}</Text>
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'flex-end'}}>
<TouchableOpacity onPress={()=>props.setModal(false)}>
<Text style={estilos.BotonAceptar}>ACEPTAR</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
}
function Contraseña({navigation, route}){ function Password({navigation, route}){
const [contrAct, setContrAct] = React.useState(""); const [contrAct, setContrAct] = React.useState("");
const [nuevaContr, setNuevaContr] = React.useState(""); const [nuevaContr, setNuevaContr] = React.useState("");
const [rNuevaContr, setRNuevaContr] = React.useState(""); const [rNuevaContr, setRNuevaContr] = React.useState("");
const [modal, setModal] = React.useState(false); const [modal, setModal] = React.useState(false);
const [textModal, setTextModal] = React.useState(""); const [textModal, setTextModal] = React.useState("");
return( return(
<View style={{flex: 1, padding: 18}}> <View style={{flex: 1, padding: 18}}>
<Modal transparent={true} visible={modal} animationType={'fade'}> <Modales modal={modal} textModal={textModal} setModal={setModal}/>
<View style={estilos.CentrarModal}>
<View style={estilos.VistaModal}>
<Text style={estilos.TituloModal}>Contraseña</Text>
<Text>{textModal}</Text>
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'flex-end'}}>
<TouchableOpacity onPress={()=>setModal(false)}>
<Text style={estilos.BotonAceptar}>ACEPTAR</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
<View> <View>
<TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder='Contraseña actual' onChangeText={(valor) => setContrAct(valor)}></TextInput> <TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder='Contraseña actual' onChangeText={(valor) => setContrAct(valor)}></TextInput>
<TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder='Nueva contraseña' onChangeText={(valor) => setNuevaContr(valor)}></TextInput> <TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder='Nueva contraseña' onChangeText={(valor) => setNuevaContr(valor)}></TextInput>
<TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder='Repita la nueva contraseña' onChangeText={(valor) => setRNuevaContr(valor)}></TextInput> <TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder='Repita la nueva contraseña' onChangeText={(valor) => setRNuevaContr(valor)}></TextInput>
</View> </View>
<View style={{position: 'absolute', bottom: 25, width:'100%', alignSelf:'center'}}> <View style={{position: 'absolute', bottom: 25, width:'100%', alignSelf:'center'}}>
<TouchableOpacity style={estilos.Boton} onPress={() => ComprobarContraseña(navigation, route, contrAct, nuevaContr, rNuevaContr, setModal, setTextModal)}> <TouchableOpacity style={estilos.Boton} onPress={() => CheckPassword(navigation, route, contrAct, nuevaContr, rNuevaContr, setModal, setTextModal)}>
<Text style={{color:'white', fontWeight: 'bold'}}>CONFIRMAR</Text> <Text style={{color:'white', fontWeight: 'bold'}}>CONFIRMAR</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
...@@ -115,4 +119,4 @@ const estilos = StyleSheet.create({ ...@@ -115,4 +119,4 @@ const estilos = StyleSheet.create({
} }
) )
export default Contraseña; export default Password;
\ No newline at end of file \ No newline at end of file
...@@ -2,32 +2,32 @@ import * as React from 'react'; ...@@ -2,32 +2,32 @@ import * as React from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity, Modal, TextInput, ScrollView } from 'react-native'; import { View, Text, Image, StyleSheet, TouchableOpacity, Modal, TextInput, ScrollView } from 'react-native';
const imagenes = { const imagenes = {
vacio: require('./img/profile.png') vacio: require('./assets/img/photoprofiles/profile.png')
} }
function Perfil({navigation, route}){ function Perfil({navigation, route}){
const jsonInicio = require('./inicio.json'); const jsonInicio = require('./assets/data/load/usuarios.json');
const [modal, setModal] = React.useState(false); const [modal, setModal] = React.useState(false);
return( return(
<ScrollView> <ScrollView>
<View style={{padding: 18}}> <View style={{padding: 18}}>
<View style={estilos.CentrarModal}> <View style={estilos.CentrarModal}>
<Modal transparent={true} visible={modal} animationType={'fade'}> <Modal transparent={true} visible={modal} animationType={'fade'}>
<View style={estilos.CentrarModal}> <View style={estilos.CentrarModal}>
<View style={estilos.VistaModal}> <View style={estilos.VistaModal}>
<Text style={estilos.TituloModal}>Modificar teléfono</Text> <Text style={estilos.TituloModal}>Modificar teléfono</Text>
<TextInput style={estilos.EntradaTexto} keyboardType="number-pad" placeholder="Nuevo teléfono"></TextInput> <TextInput style={estilos.EntradaTexto} keyboardType="number-pad" placeholder="Nuevo teléfono"></TextInput>
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'flex-end'}}> <View style={{flexDirection:'row', alignItems:'center', justifyContent:'flex-end'}}>
<TouchableOpacity onPress={()=>setModal(false)}> <TouchableOpacity onPress={()=>setModal(false)}>
<Text style={estilos.BotonAceptar}>ACEPTAR</Text> <Text style={estilos.BotonAceptar}>ACEPTAR</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style= {{paddingLeft:15}} onPress={()=>setModal(false)}> <TouchableOpacity style= {{paddingLeft:15}} onPress={()=>setModal(false)}>
<Text style={estilos.BotonCancelar}>CANCELAR</Text> <Text style={estilos.BotonCancelar}>CANCELAR</Text>
</TouchableOpacity> </TouchableOpacity>
</View>
</View> </View>
</View> </View>
</Modal> </View>
</Modal>
</View> </View>
<View style={estilos.ContenedorLogo}> <View style={estilos.ContenedorLogo}>
<Image style={estilos.Logo} source={imagenes[jsonInicio[route.params.id].ImagenPerfil]} /> <Image style={estilos.Logo} source={imagenes[jsonInicio[route.params.id].ImagenPerfil]} />
...@@ -41,10 +41,10 @@ function Perfil({navigation, route}){ ...@@ -41,10 +41,10 @@ function Perfil({navigation, route}){
<View style={estilos.contenedor}> <View style={estilos.contenedor}>
<View> <View>
<Text style={estilos.TituloLista}>Teléfono</Text> <Text style={estilos.TituloLista}>Teléfono</Text>
<Text>{jsonInicio[route.params.id].Teléfono}</Text> <Text>{jsonInicio[route.params.id].Telefono}</Text>
</View> </View>
<TouchableOpacity onPress={() => setModal(true)}> <TouchableOpacity onPress={() => setModal(true)}>
<Image style={{height:20, width:20}} source={require('./img/editar.png')} /> <Image style={{height:20, width:20}} source={require('./assets/img/icons/editar.png')} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -55,7 +55,7 @@ function Perfil({navigation, route}){ ...@@ -55,7 +55,7 @@ function Perfil({navigation, route}){
<Text>Cambiar la contraseña de la cuenta</Text> <Text>Cambiar la contraseña de la cuenta</Text>
</View> </View>
<TouchableOpacity onPress={() => navigation.navigate('Contraseña', {id: route.params.id})}> <TouchableOpacity onPress={() => navigation.navigate('Contraseña', {id: route.params.id})}>
<Image style={{height:20, width:20}} source={require('./img/flecha.png')} /> <Image style={{height:20, width:20}} source={require('./assets/img/icons/flecha.png')} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
......
import React from "react"; import React from "react";
import { Image, StyleSheet } from "react-native"; import { Image, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import listaMatRes from './listaMatRes.js'; import listaMatRes from './listaMatRes.js';
import Perfil from "./Perfil.js";
const tabBarEstilos = StyleSheet.create({ const tabBarEstilos = StyleSheet.create({
icono: { icono: {
...@@ -13,36 +13,38 @@ const tabBarEstilos = StyleSheet.create({ ...@@ -13,36 +13,38 @@ const tabBarEstilos = StyleSheet.create({
const tabBar = createBottomTabNavigator(); const tabBar = createBottomTabNavigator();
const TabBar = () => { const TabBar = ({route}) => {
return( return(
<NavigationContainer> <tabBar.Navigator >
<tabBar.Navigator screenOptions={{headerShown: false}}> <tabBar.Screen name="Inicio" component={listaMatRes} initialParams={{id: route.params.id}}
<tabBar.Screen name="Inicio" component={listaMatRes} options={{
options={{ tabBarIcon: ({size, color}) => {
tabBarIcon: ({size, color}) => { return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoInicio.png")}/>
return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoInicio.png")}/> },
} headerShown: false
}}/> }}/>
<tabBar.Screen name="Instalaciones" component={listaMatRes} <tabBar.Screen name="Instalaciones" component={listaMatRes} initialParams={{id: route.params.id}}
options={{ options={{
tabBarIcon: ({size, color}) => { tabBarIcon: ({size, color}) => {
return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoInstalaciones.png")}/> return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoInstalaciones.png")}/>
} }
}}/> }}/>
<tabBar.Screen name="Material" component={listaMatRes} <tabBar.Screen name="Material" component={listaMatRes} initialParams={{id: route.params.id}}
options={{ options={{
tabBarIcon: ({size, color}) => { tabBarIcon: ({size, color}) => {
return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoMaterial.png")}/> return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoMaterial.png")}/>
} },
}}/> title: 'Reservas de material',
<tabBar.Screen name="Perfil" component={listaMatRes} headerShadowVisible: false
options={{ }}/>
tabBarIcon: ({size, color}) => { <tabBar.Screen name="Perfil" component={Perfil} initialParams={{id: route.params.id}}
return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoPerfil.png")}/> options={{
} tabBarIcon: ({size, color}) => {
}}/> return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoPerfil.png")}/>
</tabBar.Navigator> },
</NavigationContainer> headerShown: false
}}/>
</tabBar.Navigator>
); );
} }
......
{ {
"dgh00001":{ "dgh00001":{
"Teléfono": "677490125", "Telefono": "677490125",
"Nombre": "David González Hidalgo", "Nombre": "David González Hidalgo",
"Contraseña": "qwerty", "Password": "qwerty",
"Correo": "dgh00001@gmail.com", "Correo": "dgh00001@gmail.com",
"ImagenPerfil":"vacio" "ImagenPerfil":"vacio",
"idListaMaterial": ["listaResMat0", "listaResMat1", "listaResMat2"]
}, },
"icl00001":{ "icl00001":{
"Teléfono": "658968701", "Telefono": "658968701",
"Nombre": "Isabel Cazalla Loma", "Nombre": "Isabel Cazalla Loma",
"Contraseña": "12345", "Password": "12345",
"Correo": "icl00001@gmail.com", "Correo": "icl00001@gmail.com",
"ImagenPerfil":"vacio" "ImagenPerfil":"vacio",
"idListaMaterial": []
} }
} }
\ No newline at end of file

5.54 KB | W: | H:

5.54 KB | W: | H:

img/editar.png
assets/img/icons/editar.png
img/editar.png
assets/img/icons/editar.png
  • 2-up
  • Swipe
  • Onion skin

4.72 KB | W: | H:

4.72 KB | W: | H:

img/flecha.png
assets/img/icons/flecha.png
img/flecha.png
assets/img/icons/flecha.png
  • 2-up
  • Swipe
  • Onion skin

39.7 KB | W: | H:

39.7 KB | W: | H:

img/logo.png
assets/img/logo.png
img/logo.png
assets/img/logo.png
  • 2-up
  • Swipe
  • Onion skin

50.2 KB | W: | H:

50.2 KB | W: | H:

img/profile.png
assets/img/photoprofiles/profile.png
img/profile.png
assets/img/photoprofiles/profile.png
  • 2-up
  • Swipe
  • Onion skin
/** /**
* @format * @format
*/ */
import {AppRegistry} from 'react-native'; import {AppRegistry} from 'react-native';
import App from './TabBar'; import Navegacion from './Navegacion';
import {name as appName} from './app.json';
AppRegistry.registerComponent("gestion", () => App);
AppRegistry.registerComponent(appName, () => Navegacion);
...@@ -43,7 +43,7 @@ const styles = StyleSheet.create({ ...@@ -43,7 +43,7 @@ const styles = StyleSheet.create({
const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"] const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
const diasSemana = ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"] const diasSemana = ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"]
const idListaMaterial = ["listaResMat0", "listaResMat1", "listaResMat2"] //const idListaMaterial = ["listaResMat0", "listaResMat1", "listaResMat2"]
class ListaReservaMaterial extends Component { class ListaReservaMaterial extends Component {
...@@ -114,6 +114,8 @@ class ListaReservaMaterial extends Component { ...@@ -114,6 +114,8 @@ class ListaReservaMaterial extends Component {
render() { render() {
// Se extraen los datos del json // Se extraen los datos del json
const datosJson = require("./assets/data/load/listaMatRes.json") const datosJson = require("./assets/data/load/listaMatRes.json")
const usuarios = require("./assets/data/load/usuarios.json")
const idListaMaterial = usuarios[this.props.route.params.id].idListaMaterial
// Se obtiene la fecha actual // Se obtiene la fecha actual
const dateActual = new Date() const dateActual = new Date()
return ( return (
...@@ -131,34 +133,4 @@ class ListaReservaMaterial extends Component { ...@@ -131,34 +133,4 @@ class ListaReservaMaterial extends Component {
} }
} }
const Stack = createNativeStackNavigator(); export default ListaReservaMaterial;
const BarraTitulo = () => {
const tema = DefaultTheme
tema.colors.background = 'white'
return (
<NavigationContainer
independent = {true}
theme={tema}>
<Stack.Navigator>
<Stack.Screen
name="ReservaMat"
component={ListaReservaMaterial}
options = {{
title: 'Reservas de material',
headerShadowVisible: false
}}/>
<Stack.Screen
name="Materiales"
component={ListaMateriales}
options = {({route}) => ({
title: route.params.nombreListaMat,
headerStyle: { backgroundColor: '#7D9BFF' },
headerTintColor: 'white'
})}/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default BarraTitulo;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment