Añadiendo dinamismo a la pantalla de inicio de usuario a través de los *.json de…

Añadiendo dinamismo a la pantalla de inicio de usuario a través de los *.json de los compañeros de grupo.
parent e07c75c5
......@@ -6,70 +6,130 @@
* @flow strict-local
*/
import React from 'react';
import type {Node} from 'react';
import React, {useState, useEffect} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Image,
TouchableOpacity,
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
const Section = ({children, title}): Node => {
const isDarkMode = useColorScheme() === 'dark';
return (
<View style={styles.sectionContainer}>
<Text
style={[
styles.sectionTitle,
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
{title}
</Text>
<Text
style={[
styles.sectionDescription,
{
color: isDarkMode ? Colors.light : Colors.dark,
},
]}>
{children}
</Text>
</View>
);
};
import { DocumentDirectoryPath, writeFile, readDir, readFile, read } from 'react-native-fs';
const Inicio = ({navigation, route}) => {
{/*Componentes para ver las instalaciones disponibles...*/}
{/*Preparamos los elementos dinamicos del json...*/}
const [files, setFiles] = useState(() => {
(async () => {
try {
var filesArr = JSON.parse("["+await readFile(DocumentDirectoryPath+"/reservasInstalaciones.json")+"]");
filesArr = filesArr.filter(item => item.borrado === "0");
filesArr = filesArr.filter(item => item.usuarioReserva === route.params.id);
setFiles(filesArr);
}catch (e) {
console.log('error', e);
}
})();
return () => null;
}, []);
{/*Consultaremos cada segundo, las posibles actualizaciones que haga sobre los datos la aplicación*/}
const [count, setCount] = useState(0);
useEffect(() => {
// Intervalo de actualizacion
const interval = setInterval(() => {
(async () => {
try {
var filesArr = JSON.parse("["+await readFile(DocumentDirectoryPath+"/reservasInstalaciones.json")+"]");
filesArr = filesArr.filter(item => item.borrado === "0");
filesArr = filesArr.filter(item => item.usuarioReserva === route.params.id);
setFiles(filesArr);
}catch (e) {
console.log('error', e);
}
})();
}, 1000);
const App: () => Node = () => {
// Subscribe for the focus Listener
const unsubscribe = navigation.addListener('focus', () => {
setCount(0);
});
return () => {
// Clear setInterval in case of screen unmount
clearTimeout(interval);
// Unsubscribe for the focus Listener
unsubscribe;
};
}, [navigation]);
{/*Reservas de materiales y guardias*/}
const dateInicio = new Date();
const dateFin = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000); {/*Reservas y guardias de los ultimos 7 dias*/}
const jsonUsuarios = require('./assets/data/load/usuarios.json');
const jsonMateriales = require('./assets/data/load/listaMatRes.json');
const jsonGuardias = require('./assets/data/load/listaGuardias.json');
var countMateriales = 0;
var countGuardias = 0;
var countInstalaciones = 0;
{/*Obtenemos la lista de reservas acotada en fecha*/}
for(let userObject of jsonUsuarios[route.params.id].idListaMaterial){
const horaSeparada = (jsonMateriales[userObject].horaInicio).split(":");
const dateItem = new Date(jsonMateriales[userObject].año, jsonMateriales[userObject].mes-1, jsonMateriales[userObject].dia, horaSeparada[0], horaSeparada[1], 0);
if(dateItem > dateInicio && dateItem < dateFin){
countMateriales++;
}
}
{/*Obtenemos la lista de guardias acotadas a rango de fecha de 7 días*/}
for(let userObject of jsonUsuarios[route.params.id].idGuardias){
const horaSeparada = (jsonGuardias[userObject].horaInicio).split(":");
const dateItem = new Date(jsonGuardias[userObject].año, jsonGuardias[userObject].mes-1, jsonGuardias[userObject].dia, horaSeparada[0], horaSeparada[1], 0);
if(dateItem > dateInicio && dateItem < dateFin){
countGuardias++;
}
}
{/*Obtenemos la lista de instalaciones reservadas a rango de 7 días*/}
for(let userObject of files){
const fechaSeparada = (userObject.fecha).split("/");
const horaSeparada = (userObject.horario).split(" - ")[0].split(":");
const dateItem = new Date(fechaSeparada[2],fechaSeparada[1]-1,fechaSeparada[0],horaSeparada[0],horaSeparada[1], 0);
if(dateItem > dateInicio && dateItem < dateFin){
countInstalaciones++;
}
}
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
const jsonInicio = require('./assets/data/load/usuarios.json');
return (
<View style={[styles.container, { flexDirection: "column" /*Contenedor principal*/}]}>
<View style={{ flex: 1 }}>
<View style={[styles.header, { flexDirection: "row" /*Contenedor de perfil superior*/}]}>
<View style={{ flex: 0.8 }}>
<Image style={styles.perfil} source={require('./assets/img/photoProfiles/default.png')} />
</View>
<TouchableOpacity style={{ flex: 0.8 }} onPress={() => navigation.navigate("Perfil")}>
<Image style={styles.perfil} source={require('./assets/img/photoprofiles/profile.png')} />
</TouchableOpacity>
<View style={{ flex: 2 /*Contenedor de los textos de cabecera*/}}>
<Text style={[styles.bienvenida]}>Bienvenido, Raúl</Text>
<Text style={[styles.bienvenida]}>Bienvenido, {jsonInicio[route.params.id].Nombre}</Text>
<Text style={[styles.nombreCentro]}>IES Jabalcuz</Text>
</View>
</View>
......@@ -82,14 +142,14 @@ const App: () => Node = () => {
<View style={[styles.botonera, { flexDirection: "column" /*Contenedor de las botoneras*/}]}>
<View style={{ flex: 1.5, backgroundColor: "#FCCE90" }}>
<View style={[{flexDirection: "row" }]}>
<TouchableOpacity style={[{flexDirection: "row" }]} onPress={() => navigation.navigate("Guardias")} >
<View style={[styles.botonGuardias, { flex: 1 }]}>
<Image style={styles.iconoGuardias} source={require('./assets/img/icons/alert.png')} />
</View>
<View style={[styles.botonGuardias, { flex: 3 }]}>
<Text style={[styles.textoGuardias]}>Tiene 2 guardias{"\n"}pendientes</Text>
<Text style={[styles.textoGuardias]}>Tiene {countGuardias} guardias{"\n"}pendientes</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{ flex: 0.8, backgroundColor: "white", top: 30 }}>
......@@ -101,14 +161,14 @@ const App: () => Node = () => {
<View style={[styles.botonesHorizonales, { flexDirection: "column"}]}>
<View style={{ flex: 1.4, backgroundColor: "#A1B6FC" }}>
<View style={[styles.contenedorBoton, { flexDirection: "row"}]}>
<TouchableOpacity style={[styles.contenedorBoton, { flexDirection: "row"}]} onPress={() => navigation.navigate("Instalaciones")}>
<View style={{ flex: 0.9}}>
<Text style={[styles.numerosTarea]}>6</Text>
<Text style={[styles.numerosTarea]}>{countInstalaciones}</Text>
</View>
<View style={{ flex: 1.4}}>
<Text style={[styles.textoTarea]}>Instalaciones{"\n"}Rerservadas</Text>
</View>
</View>
</TouchableOpacity>
</View>
......@@ -117,14 +177,14 @@ const App: () => Node = () => {
<View style={{ flex: 1.4, backgroundColor: "#AEE58F" }}>
<View style={[styles.contenedorBoton, { flexDirection: "row"}]}>
<TouchableOpacity style={[styles.contenedorBoton, { flexDirection: "row"}]} onPress={()=>navigation.navigate("Material")}>
<View style={{ flex: 0.9}}>
<Text style={[styles.numerosTarea]}>3</Text>
<Text style={[styles.numerosTarea]}>{countMateriales}</Text>
</View>
<View style={{ flex: 1.4}}>
<Text style={[styles.textoTarea]}>Listas de materiales{"\n"}reservadas</Text>
</View>
</View>
</TouchableOpacity>
</View>
</View>
......@@ -219,6 +279,7 @@ const styles = StyleSheet.create({
width: 85,
height: 85,
resizeMode: 'contain',
borderRadius: 100
},
textoAusencias: {
fontSize: 222.0,
......@@ -228,4 +289,4 @@ const styles = StyleSheet.create({
},
});
export default App;
export default Inicio;
[
{
"horaInicio": "08:00",
"horaFin": "09:00"
},
{
"horaInicio": "09:00",
"horaFin": "10:00"
},
{
"horaInicio": "10:00",
"horaFin": "11:00"
},
{
"horaInicio": "11:00",
"horaFin": "12:00"
},
{
"horaInicio": "12:00",
"horaFin": "13:00"
},
{
"horaInicio": "13:00",
"horaFin": "14:00"
}
]
\ No newline at end of file
{
"guardia1": {
"dia": "19",
"mes": "01",
"año": "2023",
"horaInicio": "10:00",
"horaFin": "11:00",
"clase": "Clase de 1 ESO A",
"tareas": ["Escribir un poema siguiendo las indicaciones del apartado 2 de la página 17 del libro de Lengua",
"Análisis sintáctico de las siguientes frases: \n\n - Me encontré con Pablo en el parque \n\n - Anduve sin rumbo durante un tiempo \n\n - Lo escucho desde que era pequeño",
"Leer y resumir el fragmento de la obra de Romeo y Julieta de la página 65 del libro de Lengua",
"Responda razonadamente las preguntas de la siguiente página relacionadas con el fragmento mencionado"]
},
"guardia2": {
"dia": "20",
"mes": "01",
"año": "2023",
"horaInicio": "11:00",
"horaFin": "12:00",
"clase": "Clase de 2 BACH D",
"tareas": ["Ejercicios 5, 6 y 7 de la página 44 del libro de Lengua"]
},
"guardia3": {
"dia": "20",
"mes": "01",
"año": "2023",
"horaInicio": "09:00",
"horaFin": "10:00",
"clase": "Clase de 2 ESO B",
"tareas":[]
},
"guardia4": {
"dia": "25",
"mes": "01",
"año": "2023",
"horaInicio": "13:00",
"horaFin": "14:00",
"clase": "Clase de 4 ESO B",
"tareas":["Ejercicios 1, 3 y 7 de la página 23 del libro de Ciencias Sociales"]
},
"guardia5": {
"dia": "25",
"mes": "01",
"año": "2023",
"horaInicio": "12:00",
"horaFin": "13:00",
"clase": "Clase de 1 BACH A",
"tareas":["Resumen de la página 43 del libro de Historia"]
}
}
\ No newline at end of file
{
"listaResMat0": {
"dia": "18",
"mes": "1",
"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": "1",
"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": "1",
"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": "Balones de baloncesto"
},
{
"cantidadMaterial": 4,
"material": "Balón de fútbol"
}
]
}
}
\ No newline at end of file
[
{
"nombreMaterial": "Balones de baloncesto",
"cantidades": [
{
"fecha": "15/1/2023",
"hora": "08:00 - 09:00",
"cantidad": 20
},
{
"fecha": "20/1/2023",
"hora": "09:00 - 10:00",
"cantidad": 10
}
]
},
{
"nombreMaterial": "Conos",
"cantidades": [
{
"fecha": "15/1/2023",
"hora": "08:00 - 09:00",
"cantidad": 15
},
{
"fecha": "20/1/2023",
"hora": "09:00 - 10:00",
"cantidad": 20
}
]
},
{
"nombreMaterial": "Balón de fútbol",
"cantidades": [
{
"fecha": "15/1/2023",
"hora": "08:00 - 09:00",
"cantidad": 18
},
{
"fecha": "20/1/2023",
"hora": "09:00 - 10:00",
"cantidad": 21
}
]
},
{
"nombreMaterial": "Cinta métrica",
"cantidades": [
{
"fecha": "15/1/2023",
"hora": "08:00 - 09:00",
"cantidad": 1
},
{
"fecha": "20/1/2023",
"hora": "09:00 - 10:00",
"cantidad": 2
}
]
},
{
"nombreMaterial": "Balones medicinales",
"cantidades": [
{
"fecha": "15/1/2023",
"hora": "08:00 - 09:00",
"cantidad": 5
},
{
"fecha": "20/1/2023",
"hora": "09:00 - 10:00",
"cantidad": 5
}
]
},
{
"nombreMaterial": "Pelotas de goma",
"cantidades": [
{
"fecha": "15/1/2023",
"hora": "08:00 - 09:00",
"cantidad": 7
},
{
"fecha": "20/1/2023",
"hora": "09:00 - 10:00",
"cantidad": 7
}
]
},
{
"nombreMaterial": "Pelotas de balonmano",
"cantidades": [
{
"fecha": "15/1/2023",
"hora": "08:00 - 09:00",
"cantidad": 8
},
{
"fecha": "20/1/2023",
"hora": "09:00 - 10:00",
"cantidad": 16
}
]
}
]
\ No newline at end of file
{
"dgh00001":{
"Telefono": "677490125",
"Nombre": "David",
"Apellidos":"González Hidalgo",
"Password": "qwerty",
"Correo": "dgh00001@gmail.com",
"ImagenPerfil":"vacio",
"idListaMaterial": ["listaResMat0", "listaResMat1", "listaResMat2"],
"idGuardias": ["guardia1", "guardia2", "guardia4"]
},
"icl00001":{
"Telefono": "658968701",
"Nombre": "Isabel",
"Apellidos": "Cazalla Loma",
"Password": "12345",
"Correo": "icl00001@gmail.com",
"ImagenPerfil":"vacio",
"idListaMaterial": [],
"idGuardias": ["guardia3", "guardia5"]
}
}
\ 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