Skip to content

Fernando Moreno Jiménez / proyecto_TDDM

Go to a project
Commit 4648e55c by Inmaculada Cubero León
Options

Fusión del desarrollo realizado

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

5.54 KB | W: | H:

assets/img/icons/editar.png

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
img/flecha.png → assets/img/icons/flecha.png
img/flecha.png

4.72 KB | W: | H:

assets/img/icons/flecha.png

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
img/logo.png → assets/img/logo.png
img/logo.png

39.7 KB | W: | H:

assets/img/logo.png

39.7 KB | W: | H:

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

50.2 KB | W: | H:

assets/img/photoprofiles/profile.png

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
index.js
/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './TabBar';
AppRegistry.registerComponent("gestion", () => App);
/**
* @format
*/
import {AppRegistry} from 'react-native';
import Navegacion from './Navegacion';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => Navegacion);
listaMatRes.js
......@@ -43,7 +43,7 @@ const styles = StyleSheet.create({
const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
const diasSemana = ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"]
const idListaMaterial = ["listaResMat0", "listaResMat1", "listaResMat2"]
//const idListaMaterial = ["listaResMat0", "listaResMat1", "listaResMat2"]
class ListaReservaMaterial extends Component {
......@@ -114,6 +114,8 @@ class ListaReservaMaterial extends Component {
render() {
// Se extraen los datos del 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
const dateActual = new Date()
return (
......@@ -131,34 +133,4 @@ class ListaReservaMaterial extends Component {
}
}
const Stack = createNativeStackNavigator();
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;
export default ListaReservaMaterial;
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