Fusión del desarrollo realizado

4648e55c · Inmaculada Cubero León · 84d111c2 · 4648e55c · 4648e55c · 4648e55c
Commit 4648e55c authored Jan 14, 2023 by Inmaculada Cubero León
Showing with 110 additions and 90 deletions
App.js
Navegacion.js
Contraseña.js → Password.js
Perfil.js
TabBar.js
inicio.json → assets/data/load/usuarios.json
img/editar.png → assets/img/icons/editar.png
img/flecha.png → assets/img/icons/flecha.png
img/logo.png → assets/img/logo.png
img/profile.png → assets/img/photoprofiles/profile.png
index.js
listaMatRes.js
--- a/App.js
+++ b/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="TabBar" component={TabBar} options={{"headerShown": false}}/>
-          <Stack.Screen name="Contraseña" component={Contraseña} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}></Stack.Screen>
+        {/*<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>
-    </View>
  );
 }
@@ -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;
+export default Inicio;
\ No newline at end of file
--- a/Navegacion.js
+++ b/Navegacion.js
+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
--- a/Contraseña.js
+++ b/Contraseña.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){
+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 == rNuevaContr && (nuevaContr != "" || rNuevaContr != "")){
                return navigation.goBack();
@@ -18,36 +18,40 @@ function ComprobarContraseña(navigation, route, contr, nuevaContr, rNuevaContr,
    }
    setModal(true);
 }
+const Modales = (props) => {
-function Contraseña({navigation, route}){
+    return (
-    const [contrAct, setContrAct] = React.useState("");
+        <Modal transparent={true} visible={props.modal} animationType={'fade'}>
-    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>
+                    <Text>{props.textModal}</Text>
                    <View style={{flexDirection:'row', alignItems:'center', justifyContent:'flex-end'}}>
-                            <TouchableOpacity onPress={()=>setModal(false)}>
+                        <TouchableOpacity onPress={()=>props.setModal(false)}>
                            <Text style={estilos.BotonAceptar}>ACEPTAR</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
+    );
+}
+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}}>
+            <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;
+export default Password;
\ No newline at end of file
--- a/Perfil.js
+++ b/Perfil.js
@@ -2,11 +2,11 @@ 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>
@@ -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>

--- a/TabBar.js
+++ b/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 >
-            <tabBar.Navigator screenOptions={{headerShown: false}}>
+            <tabBar.Screen name="Inicio" component={listaMatRes} initialParams={{id: route.params.id}}
-                <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")}/>
-                    }
+                },
+                headerShown: false
            }}/>
-                <tabBar.Screen name="Instalaciones" component={listaMatRes}
+            <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}
+            <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={listaMatRes}
+            <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>
-        </NavigationContainer>     
    );
 }

--- a/inicio.json
+++ b/inicio.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
--- a/img/editar.png
+++ b/img/editar.png
--- a/img/flecha.png
+++ b/img/flecha.png
--- a/img/logo.png
+++ b/img/logo.png
--- a/img/profile.png
+++ b/img/profile.png
--- a/index.js
+++ b/index.js
@@ -3,6 +3,7 @@
 */
 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);
--- a/listaMatRes.js
+++ b/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();
+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;