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';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {Text, View, SafeAreaView, Image, StyleSheet, Dimensions, ScrollView, TouchableOpacity} from 'react-native';
import BotonAñadir from './BotonAñadir.js';
import ListaMateriales from './materialesLista.js';
const styles = StyleSheet.create({
margenTextoListas: {
......@@ -16,8 +17,8 @@ const styles = StyleSheet.create({
marginBottom: 2
},
lineaFecha: {
borderBottomColor: '#C0CCDA',
borderBottomWidth: StyleSheet.hairlineWidth
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#C0CCDA'
},
listaMaterialContenedor: {
flexDirection: 'row',
......@@ -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}>{diasSemana[dateReserva.getDay()]}, {dateReserva.getDate()} de {meses[dateReserva.getMonth()]} de {dateReserva.getFullYear()}</Text>}
{/* Se dibuja una línea horizontal */}
<View style={styles.lineaFecha}></View>
<View style={styles.lineaFecha} />
</View>
);
}
return null;
}
ListaReserva (id, horaInicio, horaFin, nombreLista, listaMateriales) {
ListaReserva (horaInicio, horaFin, nombreLista, listaMateriales) {
const materiales = listaMateriales.map((mat) =>
mat.cantidadMaterial + " " + mat.material + ", "
)
return (
<View style={{flex: 1}}>
<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}>
({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("./Imagenes/iconoBorrarMaterial.png")}></Image>
</TouchableOpacity>
......@@ -101,7 +104,7 @@ class ListaReservaMaterial extends Component {
{/* 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(id, horaInicio, horaFin, nombreLista, materiales)}
{this.ListaReserva(horaInicio, horaFin, nombreLista, materiales)}
</View>
);
}
......@@ -116,6 +119,7 @@ class ListaReservaMaterial extends Component {
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)
......@@ -144,6 +148,14 @@ const BarraTitulo = () => {
title: 'Reservas de material',
headerShadowVisible: false
}}/>
<Stack.Screen
name="Materiales"
component={ListaMateriales}
options = {{
title: '',
headerStyle: { backgroundColor: '#7D9BFF' },
headerTintColor: 'white'
}}/>
</Stack.Navigator>
</NavigationContainer>
);
......
listaMatRes.json
{
"listaResMat0": {
"dia": "02",
"dia": "19",
"mes": "01",
"año": "2023",
"horaInicio": "10:00",
......@@ -8,21 +8,21 @@
"nombreLista": "Juegos de Baloncesto",
"materiales": [
{
"cantidadMaterial": "10",
"material": "balones de baloncesto"
"cantidadMaterial": 10,
"material": "Balones de baloncesto"
},
{
"cantidadMaterial": "50",
"material": "conos"
"cantidadMaterial": 50,
"material": "Conos"
},
{
"cantidadMaterial": "1",
"material": "cinta métrica"
"cantidadMaterial": 1,
"material": "Cinta métrica"
}
]
},
"listaResMat1": {
"dia": "5",
"dia": "20",
"mes": "01",
"año": "2023",
"horaInicio": "11:00",
......@@ -30,21 +30,21 @@
"nombreLista": "Juegos de Fútbol",
"materiales": [
{
"cantidadMaterial": "1",
"material": "balón de fútbol"
"cantidadMaterial": 1,
"material": "Balón de fútbol"
},
{
"cantidadMaterial": "20",
"material": "conos"
"cantidadMaterial": 20,
"material": "Conos"
},
{
"cantidadMaterial": "2",
"material": "cinta métrica"
"cantidadMaterial": 2,
"material": "Cinta métrica"
}
]
},
"listaResMat2": {
"dia": "05",
"dia": "20",
"mes": "01",
"año": "2023",
"horaInicio": "09:00",
......@@ -52,32 +52,32 @@
"nombreLista": "Pruebas físicas",
"materiales": [
{
"cantidadMaterial": "50",
"material": "conos"
"cantidadMaterial": 50,
"material": "Conos"
},
{
"cantidadMaterial": "1",
"material": "cinta métrica"
"cantidadMaterial": 1,
"material": "Cinta métrica"
},
{
"cantidadMaterial": "3",
"material": "balones medicinales"
"cantidadMaterial": 3,
"material": "Balones medicinales"
},
{
"cantidadMaterial": "2",
"material": "pelotas de goma"
"cantidadMaterial": 2,
"material": "Pelotas de goma"
},
{
"cantidadMaterial": "4",
"material": "pelotas de balonmano"
"cantidadMaterial": 4,
"material": "Pelotas de balonmano"
},
{
"cantidadMaterial": "4",
"material": "pelotas de baloncesto"
"cantidadMaterial": 4,
"material": "Pelotas de baloncesto"
},
{
"cantidadMaterial": "4",
"material": "pelotas de fúbtol"
"cantidadMaterial": 4,
"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