Skip to content

Fernando Moreno Jiménez / proyecto_TDDM

Go to a project
Commit 3dfb3526 by Fernando Moreno Jiménez
Options

Implementación vista modificar material. Versión 1

parent 9b65ec72
Inline Side-by-side
Showing with 247 additions and 35 deletions
listaMatRes.js
...@@ -3,6 +3,7 @@ import { DefaultTheme, NavigationContainer} from '@react-navigation/native'; ...@@ -3,6 +3,7 @@ import { DefaultTheme, NavigationContainer} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'; import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {Text, View, SafeAreaView, Image, StyleSheet, Dimensions, ScrollView, TouchableOpacity} from 'react-native'; import {Text, View, SafeAreaView, Image, StyleSheet, Dimensions, ScrollView, TouchableOpacity} from 'react-native';
import BotonAñadir from './BotonAñadir.js'; import BotonAñadir from './BotonAñadir.js';
import ListaMateriales from './materialesLista.js';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
margenTextoListas: { margenTextoListas: {
...@@ -16,8 +17,8 @@ const styles = StyleSheet.create({ ...@@ -16,8 +17,8 @@ const styles = StyleSheet.create({
marginBottom: 2 marginBottom: 2
}, },
lineaFecha: { lineaFecha: {
borderBottomColor: '#C0CCDA', borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomWidth: StyleSheet.hairlineWidth borderBottomColor: '#C0CCDA'
}, },
listaMaterialContenedor: { listaMaterialContenedor: {
flexDirection: 'row', flexDirection: 'row',
...@@ -65,26 +66,28 @@ class ListaReservaMaterial extends Component { ...@@ -65,26 +66,28 @@ class ListaReservaMaterial extends Component {
<Text style={styles.textoFechaMaterial}>Hoy, {diasSemana[dateReserva.getDay()]}, {dateReserva.getDate()} de {meses[dateReserva.getMonth()]} de {dateReserva.getFullYear()}</Text>: <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>} <Text style={styles.textoFechaMaterial}>{diasSemana[dateReserva.getDay()]}, {dateReserva.getDate()} de {meses[dateReserva.getMonth()]} de {dateReserva.getFullYear()}</Text>}
{/* Se dibuja una línea horizontal */} {/* Se dibuja una línea horizontal */}
<View style={styles.lineaFecha}></View> <View style={styles.lineaFecha} />
</View> </View>
); );
} }
return null; return null;
} }
ListaReserva (id, horaInicio, horaFin, nombreLista, listaMateriales) { ListaReserva (horaInicio, horaFin, nombreLista, listaMateriales) {
const materiales = listaMateriales.map((mat) => const materiales = listaMateriales.map((mat) =>
mat.cantidadMaterial + " " + mat.material + ", " mat.cantidadMaterial + " " + mat.material + ", "
) )
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<View style={styles.listaMaterialContenedor}> <View style={styles.listaMaterialContenedor}>
<TouchableOpacity style={styles.listaMaterialTouch} > {/* 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}> <Text style = {styles.textoFechaMaterial}>
({horaInicio} - {horaFin}) {nombreLista} ({horaInicio} - {horaFin}) {nombreLista}
</Text> </Text>
<Text numberOfLines={2} ellipsizeMode="tail" style={styles.textMaterial}> {materiales} </Text> <Text numberOfLines={2} ellipsizeMode="tail" style={styles.textMaterial}> {materiales} </Text>
</TouchableOpacity> </TouchableOpacity>
{/* Visualización del icono que permite eliminar una lista de reserva de material */}
<TouchableOpacity style={{alignSelf: 'center'}} onPress={()=>console.log("Hola")}> <TouchableOpacity style={{alignSelf: 'center'}} onPress={()=>console.log("Hola")}>
<Image style={styles.iconoEliminar} source={require("./Imagenes/iconoBorrarMaterial.png")}></Image> <Image style={styles.iconoEliminar} source={require("./Imagenes/iconoBorrarMaterial.png")}></Image>
</TouchableOpacity> </TouchableOpacity>
...@@ -101,7 +104,7 @@ class ListaReservaMaterial extends Component { ...@@ -101,7 +104,7 @@ class ListaReservaMaterial extends Component {
{/* Los datos se supondrán que son obtenidos de manera ordenada por fecha */} {/* Los datos se supondrán que son obtenidos de manera ordenada por fecha */}
{this.ComprobarFecha(dateReserva, fechaActual)} {this.ComprobarFecha(dateReserva, fechaActual)}
{/* Se cargan las listas de material */} {/* Se cargan las listas de material */}
{this.ListaReserva(id, horaInicio, horaFin, nombreLista, materiales)} {this.ListaReserva(horaInicio, horaFin, nombreLista, materiales)}
</View> </View>
); );
} }
...@@ -116,6 +119,7 @@ class ListaReservaMaterial extends Component { ...@@ -116,6 +119,7 @@ class ListaReservaMaterial extends Component {
return ( return (
<SafeAreaView style={{flex: 1}}> <SafeAreaView style={{flex: 1}}>
<ScrollView style={styles.margenTextoListas}> <ScrollView style={styles.margenTextoListas}>
{/* Se comprueba si la fecha de creación de la lista es inferior a la fecha actual */}
{idListaMaterial.map((reserva) => {idListaMaterial.map((reserva) =>
this.ComprobarFechaActual(reserva, datosJson[reserva].dia, datosJson[reserva].mes, datosJson[reserva].año, dateActual, datosJson[reserva].horaInicio, 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) datosJson[reserva].horaFin, datosJson[reserva].nombreLista, datosJson[reserva].materiales)
...@@ -144,6 +148,14 @@ const BarraTitulo = () => { ...@@ -144,6 +148,14 @@ const BarraTitulo = () => {
title: 'Reservas de material', title: 'Reservas de material',
headerShadowVisible: false headerShadowVisible: false
}}/> }}/>
<Stack.Screen
name="Materiales"
component={ListaMateriales}
options = {{
title: '',
headerStyle: { backgroundColor: '#7D9BFF' },
headerTintColor: 'white'
}}/>
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
); );
......
listaMatRes.json
{ {
"listaResMat0": { "listaResMat0": {
"dia": "02", "dia": "19",
"mes": "01", "mes": "01",
"año": "2023", "año": "2023",
"horaInicio": "10:00", "horaInicio": "10:00",
...@@ -8,21 +8,21 @@ ...@@ -8,21 +8,21 @@
"nombreLista": "Juegos de Baloncesto", "nombreLista": "Juegos de Baloncesto",
"materiales": [ "materiales": [
{ {
"cantidadMaterial": "10", "cantidadMaterial": 10,
"material": "balones de baloncesto" "material": "Balones de baloncesto"
}, },
{ {
"cantidadMaterial": "50", "cantidadMaterial": 50,
"material": "conos" "material": "Conos"
}, },
{ {
"cantidadMaterial": "1", "cantidadMaterial": 1,
"material": "cinta métrica" "material": "Cinta métrica"
} }
] ]
}, },
"listaResMat1": { "listaResMat1": {
"dia": "5", "dia": "20",
"mes": "01", "mes": "01",
"año": "2023", "año": "2023",
"horaInicio": "11:00", "horaInicio": "11:00",
...@@ -30,21 +30,21 @@ ...@@ -30,21 +30,21 @@
"nombreLista": "Juegos de Fútbol", "nombreLista": "Juegos de Fútbol",
"materiales": [ "materiales": [
{ {
"cantidadMaterial": "1", "cantidadMaterial": 1,
"material": "balón de fútbol" "material": "Balón de fútbol"
}, },
{ {
"cantidadMaterial": "20", "cantidadMaterial": 20,
"material": "conos" "material": "Conos"
}, },
{ {
"cantidadMaterial": "2", "cantidadMaterial": 2,
"material": "cinta métrica" "material": "Cinta métrica"
} }
] ]
}, },
"listaResMat2": { "listaResMat2": {
"dia": "05", "dia": "20",
"mes": "01", "mes": "01",
"año": "2023", "año": "2023",
"horaInicio": "09:00", "horaInicio": "09:00",
...@@ -52,32 +52,32 @@ ...@@ -52,32 +52,32 @@
"nombreLista": "Pruebas físicas", "nombreLista": "Pruebas físicas",
"materiales": [ "materiales": [
{ {
"cantidadMaterial": "50", "cantidadMaterial": 50,
"material": "conos" "material": "Conos"
}, },
{ {
"cantidadMaterial": "1", "cantidadMaterial": 1,
"material": "cinta métrica" "material": "Cinta métrica"
}, },
{ {
"cantidadMaterial": "3", "cantidadMaterial": 3,
"material": "balones medicinales" "material": "Balones medicinales"
}, },
{ {
"cantidadMaterial": "2", "cantidadMaterial": 2,
"material": "pelotas de goma" "material": "Pelotas de goma"
}, },
{ {
"cantidadMaterial": "4", "cantidadMaterial": 4,
"material": "pelotas de balonmano" "material": "Pelotas de balonmano"
}, },
{ {
"cantidadMaterial": "4", "cantidadMaterial": 4,
"material": "pelotas de baloncesto" "material": "Pelotas de baloncesto"
}, },
{ {
"cantidadMaterial": "4", "cantidadMaterial": 4,
"material": "pelotas de fúbtol" "material": "Pelotas de fúbtol"
} }
] ]
} }
......
materialesLista.js 0 → 100644
import React, { useEffect, Component, useState } from 'react';
import {FlatList, Text, TextInput, View, StyleSheet, TouchableOpacity, Image} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
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,
textInput: []
}
constructor(props) {
super(props);
this.state.listaMat = this.props.route.params.listaMat;
this.state.listaMat.map((item) =>
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) => {
if(text != "") {
let {listaMat} = this.state;
this.state.cantidadTotal = this.state.cantidadTotal + (Number(text) - listaMat[index].cantidadMaterial);
listaMat[index].cantidadMaterial = Number(text);
this.setState({listaMat});
} else {
console.log("Holaaa");
let {textInput} = this.state;
textInput[index] = text;
this.setState({textInput});
}
}
render() {
this.props.navigation.setOptions({title: this.props.route.params.nombreListaMat});
return (
<View style={estilosMaterialesLista.margenes}>
<FlatList
extraData={this.state}
data = {this.state.listaMat}
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("./Imagenes/iconoElim.png")}/>
</TouchableOpacity>
<TextInput style={estilosMaterialesLista.textoMaterial} textAlign={'center'} maxLength={3} keyboardType={'decimal-pad'}
defaultValue={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("./Imagenes/iconoAñadir.png")}/>
</TouchableOpacity>
</View>
</View>
</View>
);
}}
/>
<TouchableOpacity style={estilosMaterialesLista.botonMod} onPress={this.onPress}>
<Text style={estilosMaterialesLista.textoBoton}>MODIFICAR ({this.state.cantidadTotal} materiales)</Text>
</TouchableOpacity>
</View>
);
}
}
/*const Material = ({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: 10, alignSelf: 'center'}}>
<Image style={estilosMaterialesLista.iconos} source={require("./Imagenes/iconoElim.png")}/>
</TouchableOpacity>
<Text style={estilosMaterialesLista.textoMaterial}> {item.cantidadMaterial} </Text>
<TouchableOpacity style={{marginLeft: 10, alignSelf: 'center'}} onPress={()=>
setListMat(listMat[index].cantidadMaterial + 1)}>
<Image style={estilosMaterialesLista.iconos} source={require("./Imagenes/iconoAñadir.png")}/>
</TouchableOpacity>
</View>
</View>
</View>
);
};*/
export default ListaMateriales;
\ No newline at end of file
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