Skip to content

Fernando Moreno Jiménez / proyecto_TDDM

Go to a project
Commit 84d111c2 by Sergio Cubero León
Options

Merge remote-tracking branch 'origin/FernandoDev' into Desarrollo 

# Conflicts:
#	package-lock.json
#	package.json
parents 20d96c83 213309a0
Inline Side-by-side
Showing with 518 additions and 11 deletions
BotonAdd.js 0 → 100644
import React from "react";
import { StyleSheet, Image, View, TouchableOpacity } from "react-native";
const estilosBoton = StyleSheet.create({
contenedorBoton: {
backgroundColor: '#7D9BFF',
borderRadius: 100,
width: 60,
height: 60,
justifyContent: 'center'
},
contenedorImage: {
width: 20,
height: 20,
tintColor: 'white',
alignSelf: 'center'
},
botonPos: {
position: 'absolute',
bottom: 20,
right: 20
}
});
const BotonAñadir = () => {
return(
<TouchableOpacity style={estilosBoton.botonPos}>
<View style={estilosBoton.contenedorBoton}>
<Image style={estilosBoton.contenedorImage} source={require("./assets/img/icons/iconoAdd.png")}></Image>
</View>
</TouchableOpacity>
);
}
export default BotonAñadir;
TabBar.js 0 → 100644
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';
const tabBarEstilos = StyleSheet.create({
icono: {
width: 20,
height: 20
}
});
const tabBar = createBottomTabNavigator();
const TabBar = () => {
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>
);
}
export default TabBar;
\ No newline at end of file
assets/data/load/listaMatRes.json 0 → 100644
{
"listaResMat0": {
"dia": "19",
"mes": "01",
"año": "2023",
"horaInicio": "10:00",
"horaFin": "11:00",
"nombreLista": "Juegos de Baloncesto",
"materiales": [
{
"cantidadMaterial": 10,
"material": "Balones de baloncesto"
},
{
"cantidadMaterial": 50,
"material": "Conos"
},
{
"cantidadMaterial": 1,
"material": "Cinta métrica"
}
]
},
"listaResMat1": {
"dia": "20",
"mes": "01",
"año": "2023",
"horaInicio": "11:00",
"horaFin": "12:00",
"nombreLista": "Juegos de Fútbol",
"materiales": [
{
"cantidadMaterial": 1,
"material": "Balón de fútbol"
},
{
"cantidadMaterial": 20,
"material": "Conos"
},
{
"cantidadMaterial": 2,
"material": "Cinta métrica"
}
]
},
"listaResMat2": {
"dia": "20",
"mes": "01",
"año": "2023",
"horaInicio": "09:00",
"horaFin": "10:00",
"nombreLista": "Pruebas físicas",
"materiales": [
{
"cantidadMaterial": 50,
"material": "Conos"
},
{
"cantidadMaterial": 1,
"material": "Cinta métrica"
},
{
"cantidadMaterial": 3,
"material": "Balones medicinales"
},
{
"cantidadMaterial": 2,
"material": "Pelotas de goma"
},
{
"cantidadMaterial": 4,
"material": "Pelotas de balonmano"
},
{
"cantidadMaterial": 4,
"material": "Pelotas de baloncesto"
},
{
"cantidadMaterial": 4,
"material": "Pelotas de fúbtol"
}
]
}
}
\ No newline at end of file
index.js
/** /**
* @format * @format
*/ */
import {AppRegistry} from 'react-native'; import {AppRegistry} from 'react-native';
import App from './App'; import App from './TabBar';
import {name as appName} from './app.json';
AppRegistry.registerComponent("gestion", () => App);
AppRegistry.registerComponent(appName, () => App);
listaMatRes.js 0 → 100644
import React, {Component} from 'react';
import { DefaultTheme, NavigationContainer} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {Text, View, SafeAreaView, Image, StyleSheet, Dimensions, ScrollView, TouchableOpacity} from 'react-native';
import BotonAdd from './BotonAdd.js';
import ListaMateriales from './materialesLista.js';
const styles = StyleSheet.create({
margenTextoListas: {
marginTop: 10,
marginLeft: 20,
marginRight: 20
},
textoFechaMaterial: {
fontSize: 14,
color: '#1f2d3d',
marginBottom: 2
},
lineaFecha: {
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#C0CCDA'
},
listaMaterialContenedor: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: 12,
marginBottom: 26,
paddingLeft: 20
},
listaMaterialTouch: {
width: '94%',
paddingRight: 50
},
textMaterial: {
fontSize: 10,
color: "#8492A6"
},
iconoEliminar: {
width: 28,
height: 28
}
});
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"]
class ListaReservaMaterial extends Component {
state = {
fechaAgrupar: ""
}
constructor(props) {
super(props)
}
/* Función que comprueba si una reserva está agrupada dentro de la fecha actual */
ComprobarFecha (dateReserva, fechaActual) {
if ((dateReserva.getDate() + dateReserva.getMonth() + dateReserva.getFullYear()) != this.state.fechaAgrupar) {
this.state.fechaAgrupar = dateReserva.getDate() + dateReserva.getMonth() + dateReserva.getFullYear()
return (
<View>
{/*Se comprueba si la fecha de reserva coincide con el día actual*/}
{dateReserva.getDate() == fechaActual.getDate() && dateReserva.getMonth() == fechaActual.getMonth() && dateReserva.getFullYear() == fechaActual.getFullYear() ?
<Text style={styles.textoFechaMaterial}>Hoy, {diasSemana[dateReserva.getDay()]}, {dateReserva.getDate()} de {meses[dateReserva.getMonth()]} de {dateReserva.getFullYear()}</Text>:
<Text style={styles.textoFechaMaterial}>{diasSemana[dateReserva.getDay()]}, {dateReserva.getDate()} de {meses[dateReserva.getMonth()]} de {dateReserva.getFullYear()}</Text>}
{/* Se dibuja una línea horizontal */}
<View style={styles.lineaFecha} />
</View>
);
}
return null;
}
ListaReserva (horaInicio, horaFin, nombreLista, listaMateriales) {
const materiales = listaMateriales.map((mat) =>
mat.cantidadMaterial + " " + mat.material + ", "
)
return (
<View style={{flex: 1}}>
<View style={styles.listaMaterialContenedor}>
{/* Visualización de la lista de reserva de material */}
<TouchableOpacity style={styles.listaMaterialTouch} onPress={()=> this.props.navigation.navigate('Materiales', {nombreListaMat: nombreLista, listaMat: listaMateriales}) }>
<Text style = {styles.textoFechaMaterial}>
({horaInicio} - {horaFin}) {nombreLista}
</Text>
<Text numberOfLines={2} ellipsizeMode="tail" style={styles.textMaterial}> {materiales} </Text>
</TouchableOpacity>
{/* Visualización del icono que permite eliminar una lista de reserva de material */}
<TouchableOpacity style={{alignSelf: 'center'}} onPress={()=>console.log("Hola")}>
<Image style={styles.iconoEliminar} source={require("./assets/img/icons/iconoBorrarMaterial.png")}></Image>
</TouchableOpacity>
</View>
</View>
);
}
ComprobarFechaActual(id, dia, mes, año, fechaActual, horaInicio, horaFin, nombreLista, materiales) {
const dateReserva = new Date(año, mes - 1, dia, 23, 59, 59)
if(dateReserva >= fechaActual) {
return (
<View key={id}>
{/* Los datos se supondrán que son obtenidos de manera ordenada por fecha */}
{this.ComprobarFecha(dateReserva, fechaActual)}
{/* Se cargan las listas de material */}
{this.ListaReserva(horaInicio, horaFin, nombreLista, materiales)}
</View>
);
}
return null;
}
render() {
// Se extraen los datos del json
const datosJson = require("./assets/data/load/listaMatRes.json")
// Se obtiene la fecha actual
const dateActual = new Date()
return (
<SafeAreaView style={{flex: 1}}>
<ScrollView style={styles.margenTextoListas}>
{/* Se comprueba si la fecha de creación de la lista es inferior a la fecha actual */}
{idListaMaterial.map((reserva) =>
this.ComprobarFechaActual(reserva, datosJson[reserva].dia, datosJson[reserva].mes, datosJson[reserva].año, dateActual, datosJson[reserva].horaInicio,
datosJson[reserva].horaFin, datosJson[reserva].nombreLista, datosJson[reserva].materiales)
)}
</ScrollView>
<BotonAdd />
</SafeAreaView>
);
}
}
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;
materialesLista.js 0 → 100644
import React, { useEffect, Component} from 'react';
import {FlatList, Text, TextInput, View, StyleSheet, TouchableOpacity, Image} from 'react-native';
const estilosMaterialesLista = StyleSheet.create({
margenes: {
flex: 1,
marginLeft: 30,
marginRight: 30
},
contenedorMaterial: {
marginTop: 10,
marginBottom: 10
},
textoMaterial: {
fontSize: 14,
color: '#1f2d3d',
alignSelf: 'center'
},
elementosFila: {
flexDirection: 'row',
justifyContent: "space-between",
},
iconos: {
width: 15,
height: 15
},
botonMod: {
backgroundColor: '#7D9BFF',
height: 40,
bottom: 25,
justifyContent: 'center'
},
textoBoton: {
alignSelf: 'center',
color: 'white',
fontWeight: 'bold'
}
});
/*const ListaMateriales = ({navigation, route}) => {
useEffect (() => {
navigation.setOptions({title: route.params.nombreListaMat});
})
const [actualizar, setActualizar] = useState(false)
const [texto, setTexto] = useState('')
const AumentarCantidad = (item) => {
setActualizar(!actualizar)
item.cantidadMaterial = item.cantidadMaterial + 1
}
const DisminuirCantidad = (item) => {
if(item.cantidadMaterial > 0) {
setActualizar(!actualizar)
item.cantidadMaterial = item.cantidadMaterial - 1
}
}
const Material = ({item}) => {
return (
<View>
<View style={[estilosMaterialesLista.elementosFila, estilosMaterialesLista.contenedorMaterial]}>
<Text style={estilosMaterialesLista.textoMaterial}>{item.material}</Text>
<View style={[estilosMaterialesLista.elementosFila, {width: 75}]}>
<TouchableOpacity style={{marginRight: 3, alignSelf: 'center'}} onPress={() => DisminuirCantidad(item)}>
<Image style={estilosMaterialesLista.iconos} source={require("./Imagenes/iconoElim.png")}/>
</TouchableOpacity>
<TextInput style={estilosMaterialesLista.textoMaterial} textAlign={'center'} maxLength={3} keyboardType={'numeric'}
defaultValue={item.cantidadMaterial.toString()} onSubmitEditing={{
newtext => setTexto(newtext);
item.cantidadMaterial = newtext;
}}/>
<TouchableOpacity style={{marginLeft: 3, alignSelf: 'center'}} onPress={()=> AumentarCantidad(item)}>
<Image style={estilosMaterialesLista.iconos} source={require("./Imagenes/iconoAñadir.png")}/>
</TouchableOpacity>
</View>
</View>
</View>
);
}
return (
<View style={estilosMaterialesLista.margenes}>
<FlatList
extraData={actualizar}
data = {route.params.listaMat}
renderItem={Material}
/>
<TouchableOpacity style={estilosMaterialesLista.botonMod}>
<Text style={estilosMaterialesLista.textoBoton}>MODIFICAR</Text>
</TouchableOpacity>
</View>
);
}*/
class ListaMateriales extends Component {
state = {
listaMat: [],
cantidadTotal: 0
}
constructor(props) {
super(props);
this.state.listaMat = this.props.route.params.listaMat;
this.state.listaMat.map((item, index) =>
this.state.cantidadTotal = this.state.cantidadTotal + item.cantidadMaterial
)
}
AumentarCantidad = (index) => {
let {listaMat} = this.state;
listaMat[index].cantidadMaterial = listaMat[index].cantidadMaterial + 1;
this.state.cantidadTotal = this.state.cantidadTotal + 1;
this.setState({listaMat});
}
DisminuirCantidad = (index) => {
let {listaMat} = this.state;
if(listaMat[index].cantidadMaterial > 0) {
listaMat[index].cantidadMaterial = listaMat[index].cantidadMaterial - 1
this.state.cantidadTotal = this.state.cantidadTotal - 1;
this.setState({listaMat});
}
}
CambiarCantidad = (index, text) => {
const numeroTexto = Number(text)
if(!isNaN(numeroTexto)) {
let {listaMat} = this.state;
this.state.cantidadTotal = this.state.cantidadTotal + (numeroTexto - listaMat[index].cantidadMaterial);
listaMat[index].cantidadMaterial = Number(text);
this.setState({listaMat});
}
}
render() {
return (
<View style={estilosMaterialesLista.margenes}>
<FlatList
data = {this.state.listaMat}
keyExtractor={(item) => item.material}
renderItem={({item, index}) => {
return (
<View>
<View style={[estilosMaterialesLista.elementosFila, estilosMaterialesLista.contenedorMaterial]}>
<Text style={estilosMaterialesLista.textoMaterial}>{item.material}</Text>
<View style={[estilosMaterialesLista.elementosFila, {width: 75}]}>
<TouchableOpacity style={{marginRight: 3, alignSelf: 'center'}} onPress={() => {this.DisminuirCantidad(index)}}>
<Image style={estilosMaterialesLista.iconos} source={require("./assets/img/icons/iconoElim.png")}/>
</TouchableOpacity>
<TextInput style={estilosMaterialesLista.textoMaterial} textAlign={'center'} maxLength={3} keyboardType={'number-pad'}
value={item.cantidadMaterial.toString()} placeholder={item.cantidadMaterial.toString()}
onChangeText={(text) => this.CambiarCantidad(index, text)}/>
<TouchableOpacity style={{marginLeft: 3, alignSelf: 'center'}} onPress={() => {this.AumentarCantidad(index)}}>
<Image style={estilosMaterialesLista.iconos} source={require("./assets/img/icons/iconoAdd.png")}/>
</TouchableOpacity>
</View>
</View>
</View>
);
}}
/>
<TouchableOpacity style={estilosMaterialesLista.botonMod} onPress={() => this.props.navigation.goBack(null)}>
<Text style={estilosMaterialesLista.textoBoton}>MODIFICAR ({this.state.cantidadTotal} materiales)</Text>
</TouchableOpacity>
</View>
);
}
}
export default ListaMateriales;
\ No newline at end of file
package-lock.json
This diff could not be displayed because it is too large.
package.json
...@@ -10,8 +10,9 @@ ...@@ -10,8 +10,9 @@
"lint": "eslint ." "lint": "eslint ."
}, },
"dependencies": { "dependencies": {
"@react-navigation/native": "^6.1.1", "@react-navigation/bottom-tabs": "^6.5.3",
"@react-navigation/native-stack": "^6.9.7", "@react-navigation/native": "^6.1.2",
"@react-navigation/native-stack": "^6.9.8",
"react": "17.0.2", "react": "17.0.2",
"react-native": "0.68.2", "react-native": "0.68.2",
"react-native-safe-area-context": "^4.4.1", "react-native-safe-area-context": "^4.4.1",
......
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