Proyecto completo TDDM - 18-01-2023

parent 48896eae
Showing with 4385 additions and 2 deletions
[android]
target = Google Inc.:Google APIs:23
[maven_repositories]
central = https://repo1.maven.org/maven2
BUNDLE_PATH: "vendor/bundle"
BUNDLE_FORCE_RUBY_PLATFORM: 1
module.exports = {
root: true,
extends: '@react-native-community',
};
[ignore]
; We fork some components by platform
.*/*[.]android.js
; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/
; Ignore polyfills
node_modules/react-native/Libraries/polyfills/.*
; Flow doesn't support platforms
.*/Libraries/Utilities/LoadingView.js
.*/node_modules/resolve/test/resolver/malformed_package_json/package\.json$
[untyped]
.*/node_modules/@react-native-community/cli/.*/.*
[include]
[libs]
node_modules/react-native/interface.js
node_modules/react-native/flow/
[options]
emoji=true
exact_by_default=true
format.bracket_spacing=false
module.file_ext=.js
module.file_ext=.json
module.file_ext=.ios.js
munge_underscores=true
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
[lints]
sketchy-null-number=warn
sketchy-null-mixed=warn
sketchy-number=warn
untyped-type-import=warn
nonstrict-import=warn
deprecated-type=warn
unsafe-getters-setters=warn
unnecessary-invariant=warn
signature-verification-failure=warn
[strict]
deprecated-type
nonstrict-import
sketchy-null
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import
[version]
^0.170.0
# OSX
#
.DS_Store
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml
*.hprof
# node.js
#
node_modules/
npm-debug.log
yarn-error.log
# BUCK
buck-out/
\.buckd/
*.keystore
!debug.keystore
# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://docs.fastlane.tools/best-practices/source-control/
*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots
# Bundle artifact
*.jsbundle
# Ruby / CocoaPods
/ios/Pods/
/vendor/bundle/
module.exports = {
arrowParens: 'avoid',
bracketSameLine: true,
bracketSpacing: false,
singleQuote: true,
trailingComma: 'all',
};
{}
\ No newline at end of file
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React, {useState} from 'react';
import type {Node} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Button,
TextInput,
Image,
TouchableOpacity,
Alert
} from 'react-native';
import {
Colors,
DebugInstructions,
Header,
LearnMoreLinks,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {Picker} from '@react-native-picker/picker';
import DateTimePicker from '@react-native-community/datetimepicker';
import DatePicker from 'react-native-date-picker';
import * as RNFS from 'react-native-fs';
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>
);
};
{/*Arreglo para la fecha del calendario...*/}
function format(inputDate) {
let date, month, year;
date = inputDate.getDate();
month = inputDate.getMonth()+1;
year = inputDate.getFullYear();
date = date
.toString()
.padStart(2, '0');
month = month
.toString()
.padStart(2, '0');
return `${date}/${month}/${year}`;
};
{/*Funcion para añadir datos en el sistema...*/}
function insertData(usuario, idInstalacion, fecha, horario, idActual, navigation, route){
//const jsonReservasInstalaciones = require('./assets/data/load/reservasInstalaciones.json');
//const idActual = Object.keys(jsonReservasInstalaciones).length;
//Aqui tenemos el JSON para cargar en el fichero de reservas
var json = '{"id":'+(idActual+1)+',"usuarioReserva":"'+usuario+'","idInstalacion":"'+idInstalacion+'","fecha":"'+fecha+'","horario":"'+horario+'","borrado":"0"}';
//Antes de cargar el fichero... podemos comprobar los estados del sistema...
if(horario == 0 || typeof(horario) == "undefined"){
//Aviso de Error
//Obtener los datos necesarios para realizar el JSON... (Nota: borrado=0 y debemos saber el último identificador)
Alert.alert(
'Error en Operación',
"Debe seleccionar una hora de las disponibles",
[
{
text: 'Aceptar',
style: 'cancel',
},
],
);
}else{
//Comprobaciones con el horario...
//Convertimos la fecha a interpretacion
const fechaSeparada = fecha.split("/");
const horaSeparada = horario.split(" - ")[0].split(":");
const date1 = new Date(fechaSeparada[2],fechaSeparada[1]-1,fechaSeparada[0],horaSeparada[0],horaSeparada[1]);
const actual = new Date();
if((actual > date1)){
Alert.alert(
'Error en Operación',
"Debe seleccionar una fecha/hora futura",
[
{
text: 'Aceptar',
style: 'cancel',
},
],
);
}else{
//TODO!: Falta comprobar el dia de la semana... para realizar la reserva...
//EN ESTE PUNTO... SE HA COMPROBADO TANTO EL HORARIO, COMO LA FECHA... SE PROCEDE A INSERTAR EL JSON...
const path = RNFS.DocumentDirectoryPath+"/reservasInstalaciones.json";
//PASO 1: Comprobamos que no existe el fichero... si existe, usamos append
RNFS.exists(path)
.then( (exists) => {
if(exists) {
console.log("Se sobreescribe el fichero...");
RNFS.appendFile(path, ","+json, 'utf8');
}else{
console.log("Se inicializa el fichero...");
RNFS.writeFile(path, json, 'utf8');
}
});
Alert.alert(
"Instalacion Reservada",
"Instalacion reservada con éxito.",
[
{
text: 'Aceptar',
onPress: () => navigation.goBack(),
style: 'accept',
},
],
);
//TODO: Refrescar la vista de datos
}
}
}
const AddReservaInstalacion = ({navigation, route}) => {
{/*Preparamos los elementos dinamicos del json...*/}
const [files, setFiles] = useState(() => {
(async () => {
try {
const filesArr = JSON.parse("["+await RNFS.readFile(RNFS.DocumentDirectoryPath+"/reservasInstalaciones.json")+"]");
setFiles(filesArr);
}catch (e) {
console.log('error', e);
}
})();
return () => null;
}, []);
const idActual = files.length;
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
{/*Inicializacion del datepicker*/}
const [date, setDate] = useState(new Date());
const [open, setOpen] = useState(false);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate;
setDate(currentDate);
};
{/*Cargamos los datos de las instalaciones desde JSON*/}
const jsonInstalaciones = require('./assets/data/load/instalaciones.json');
const elementos = Object.keys(jsonInstalaciones).length;
{/*Inicializacion de la lista 1...*/}
const [selectedInstallation, setSelectedInstallation] = useState([1]);
{/*Inicializacion de la lista 2...*/}
const [selectedHorario, setSelectedHorario] = useState();
return (
<ScrollView contentContainerStyle={[{flexGrow: 1, justifyContent:'space-between'}]}>
<View style={[styles.container, { flexDirection: "column"}]}>
{/*Primer elemento: Desplegable...*/}
<View style={[{ flexDirection: "column", backgroundColor:"transparent" /*Contenedor de perfil superior*/}]}>
<View style={[styles.selector]}>
<Text style={[styles.leyenda]}>Selecciona una instalación</Text>
{<Picker mode="dropdown" selectedValue={selectedInstallation} onValueChange={(itemValue, itemIndex) => setSelectedInstallation(itemValue)}>
{ Object.keys(jsonInstalaciones).map((item)=>
<Picker.Item label={jsonInstalaciones[item].NombreSala} value={item} key={item} />
)}
</Picker>}
<View style={[styles.hr]} />
</View>
</View>
{/*Segundo elemento: Selecto de fecha...*/}
<View style={[{flexDirection: "column", backgroundColor:"transparent" /*Contenedor de perfil superior*/}]}>
<View style={[styles.selector]}>
<Text style={[styles.leyenda]}>Fecha de Reserva</Text>
<TouchableOpacity style={[styles.datePicker, { flexDirection: "row"}]} onPress={() => setOpen(true)}>
<View style={{ flex: 0.9, backgroundColor: "transparent"}}>
<Text style={[styles.dateText]}> {format(date)}</Text>
</View>
<View style={{ flex: 0.1, backgroundColor: "transparent"}}>
<Image style={styles.calendar} source={require('./assets/img/icons/Calendario.png')} />
</View>
<DatePickerAddReservaInstalaciones open={open} setOpen={setOpen} date={date} setDate={setDate} />
</TouchableOpacity>
<View style={[styles.hr2]} />
</View>
</View>
{/*Tercer elemento: Desplegable...*/}
<View style={[{flexDirection: "column", marginTop:15, backgroundColor:"transparent" /*Contenedor de perfil superior*/}]}>
<View style={[styles.selector]}>
<Text style={[styles.leyenda]}>Hora de Reserva</Text>
{<Picker mode="dropdown" selectedValue={selectedHorario} onValueChange={(itemValue, itemIndex) => setSelectedHorario(itemValue)}>
<Picker.Item label="Seleccione una hora..." value="0" />
{ Object.keys(jsonInstalaciones[selectedInstallation].Horarios).map((item)=>
<Picker.Item label={jsonInstalaciones[selectedInstallation].Horarios[item]} value={jsonInstalaciones[selectedInstallation].Horarios[item]} key={jsonInstalaciones[selectedInstallation].Horarios[item]}/>
)}
</Picker>}
<View style={[styles.hr]} />
</View>
</View>
<View style={[{flex: 1, backgroundColor:"transparent" /*Contenedor de perfil superior*/}]}/ >
{/*Cuarto elemento: Botón...*/}
<TouchableOpacity style={styles.Boton} onPress={() => insertData(route.params.id, selectedInstallation, format(date), selectedHorario, idActual, navigation, route)}>
<Text style={{color:'white', fontWeight: 'bold'}}>RESERVAR INSTALACION</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
};
{/*Estilo del selector de fecha*/}
const DatePickerAddReservaInstalaciones = (props) => {
return (
<DatePicker
modal
open={props.open}
date={props.date}
locale='es'
mode='date'
title="Selecciona una fecha"
confirmText='Confirmar'
cancelText='Cancelar'
onConfirm={(date) => {
props.setOpen(false)
props.setDate(date)
}}
onCancel={() => {
props.setOpen(false)
}}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
leyenda: {
fontSize: 12.0,
color: '#8492A6',
top: 10
},
hr: {
borderColor: 'black',
borderBottomWidth: 0.4,
bottom: 7
},
picker: {
textAlign: 'right'
},
datePicker: {
textAlign: 'right',
marginTop: 10,
top: 5
},
dateText: {
fontSize: 15.0,
color: 'black'
},
calendar: {
width: 22,
height: 22,
resizeMode: 'contain',
},
hr2: {
borderColor: 'black',
borderBottomWidth: 0.4,
bottom: -15
},
Boton:{
marginTop:40,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#7D9BFF',
height:45,
borderRadius:3
}
});
export default AddReservaInstalacion;
import * as React from 'react';
import { View, Modal, ScrollView, TextInput, StyleSheet, Image, TouchableOpacity, Text } from 'react-native';
import { StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaView } from 'react-native-safe-area-context';
const Stack = createNativeStackNavigator();
/**
* @brief Se comprueba si los datos introducidos corresponden a algun usuario registrado
* @param {string} userName identificador de usuario de la cuenta
* @param {string} password contraseña de la cuenta
* @param {function} setM funcion para cambiar el estado del modal
* @returns la siguiente vista o un modal dependiendo si las credenciales son correctas
*/
function ComprobacionAuth(userName, password, setM, navigation){
const jsonInicio = require('./assets/data/load/usuarios.json');
const data = jsonInicio[userName];
if(data){ // se comprueba si el usuario existe
if(jsonInicio[userName].Password == password){ // se verifica si la contraseña se corresponde con el usuario registrado en la plataforma
return navigation.dispatch(
StackActions.replace('TabBar',{id: userName})
); // se navega al tabbar que es quien mantiene el resto de la navegacion
}else{
return setM(true);
}
}else{
return setM(true);
}
}
/**
* @brief Presenta el contenido de la vista del Login
* @returns El contenido de la vista del Login
*/
function App({navigation}) {
const [identificador, setIdentificador] = React.useState("");
const [pass, setPass] = React.useState("");
const [m, setM] = React.useState(false);
return (
<ScrollView>
<SafeAreaView style={estilos.ContenedorTexto}>
<View style={estilos.CentrarModal}>
<Modal transparent={true} visible={m} animationType={'fade'}>
<View style={estilos.CentrarModal}>
<View style={estilos.VistaModal}>
<Text style={estilos.TituloModal}>Login</Text>
<Text style={estilos.TextoModal}>Alguna de las credenciales no es correcta</Text>
<TouchableOpacity onPress={()=>setM(false)}>
<Text style={estilos.BotonAceptar}>ACEPTAR</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
<View style={{justifyContent: 'center', alignItems: 'center', padding:'5%'}}>
<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>
<TextInput secureTextEntry={true} style={estilos.EntradaTexto} placeholder = "Contraseña" onChangeText={(valor) => setPass(valor)}></TextInput>
</View>
<TouchableOpacity style={estilos.Boton} onPress={() => ComprobacionAuth(identificador, pass, setM, navigation)}>
<Text style={{color:'white', fontWeight: 'bold', fontSize:15}}>INICIAR SESIÓN</Text>
</TouchableOpacity>
</SafeAreaView>
</ScrollView>
);
}
// Conjunto de estilos empleados en la vista del Login
const estilos = StyleSheet.create({
EntradaTexto: {
borderBottomWidth: 1,
borderBottomColor: "#B5B2B2",
paddingBottom: 15,
},
ContenedorTexto:{
padding: 18,
justifyContent: 'center',
backgroundColor: '#FFFFFF'
},
Logo:{
width:220,
height:220,
resizeMode:'contain'
},
Boton:{
marginTop:40,
alignContent:'center',
alignItems:'center',
justifyContent:'center',
backgroundColor:'#7D9BFF',
height:45,
borderRadius:3
},
CentrarModal: {
flex: 1,
backgroundColor: "rgba(1,1,1,0.5)",
justifyContent: "center",
alignItems: "center"
},
VistaModal: {
width:330,
height:180,
margin: 20,
backgroundColor: "white",
borderRadius: 1,
padding: 35,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
BotonAceptar: {
marginTop: 25,
textAlign: "right",
color:"#47525E"
},
TextoModal: {
color:"#47525E"
},
TituloModal:{
fontWeight:"bold",
color:"#47525E",
fontSize:20,
paddingBottom:25
}
});
export default App;
\ No newline at end of file
import React from "react";
import { StyleSheet, Image, View, TouchableOpacity } from "react-native";
/**
* @brief Mantiene todos los estilos aplicados a esta vista
*/
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
}
});
/**
* Componente que contiene el botón que permite añadir una reserva de material o instalacion
*/
const BotonAñadir = (props) => {
return(
<TouchableOpacity style={estilosBoton.botonPos} onPress={()=> props.class.setModalAdd()}>
<View style={estilosBoton.contenedorBoton}>
<Image style={estilosBoton.contenedorImage} source={require("./assets/img/icons/iconoAdd.png")}></Image>
</View>
</TouchableOpacity>
);
}
export default BotonAñadir;
import React from "react";
import { StyleSheet, View, Text, ScrollView } from "react-native";
/**
* Funcion que muestra la descripcion de la guardia seleccionada
* @param navigation propiedad que permite la navegacion entre vistas
* @param route propiedad con la que se puede acceder a los atributos pasados entre vistas
* @returns vista con la descripcion de la guardia indicando las actividades a realizar para ese dia
*/
function DescripcionGuardia({navigation, route}){
React.useEffect (() => {
navigation.setOptions({title: "Guardia: " + route.params.cl});
})
const tareas = route.params.t.map((tarea) =>
tarea + "\n\n"
)
return(
<ScrollView style={styles.contenedor}>
<View style={{flex: 1}}>
<Text style = {styles.tituloSeccion}>Día de la guardia</Text>
<View style={[styles.separador, {marginRight: 20}]} />
<View style={styles.contenedorSeccion}>
<View style={styles.contenidoSeccion}>
<Text style = {styles.textoSeccion}>
{route.params.fec}
</Text>
</View>
</View>
<Text style = {styles.tituloSeccion}>Hora de la guardia</Text>
<View style={[styles.separador, {marginRight: 20}]} />
<View style={styles.contenedorSeccion}>
<View style={styles.contenidoSeccion}>
<Text style = {styles.textoSeccion}>
{route.params.horaIni} - {route.params.horaF}
</Text>
</View>
</View>
<Text style = {styles.tituloSeccion}>Tareas a realizar</Text>
<View style={[styles.separador, {marginRight: 20}]}/>
<View style={styles.contenedorSeccion}>
<View style={styles.contenidoSeccion}>
{tareas.length != 0 ?
<Text style = {styles.textoSeccion}>{tareas}</Text>:
<Text style = {styles.textoSeccion}>No hay ninguna actividad por realizar</Text>
}
</View>
</View>
</View>
</ScrollView>
);
}
// Conjunto de estilos empleados en la vista de la descripcion de la guardia
const styles = StyleSheet.create({
contenedor: {
marginTop: 10,
marginLeft: 20
},
contenedorSeccion: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: 12,
marginBottom: 26,
paddingLeft: 20
},
contenidoSeccion: {
width: '94%',
paddingRight: 50
},
tituloSeccion: {
fontSize: 15,
color: '#1f2d3d',
marginBottom: 2.5
},
textoSeccion: {
fontSize: 15,
color: '#8492A6',
marginBottom: 2.5
},
separador: {
paddingBottom: 2.5,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#C0CCDA'
}
})
export default DescripcionGuardia;
\ No newline at end of file
source 'https://rubygems.org'
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
ruby '2.7.4'
gem 'cocoapods', '~> 1.11', '>= 1.11.2'
GEM
remote: https://rubygems.org/
specs:
CFPropertyList (3.0.5)
rexml
activesupport (6.1.5.1)
concurrent-ruby (~> 1.0, >= 1.0.2)
i18n (>= 1.6, < 2)
minitest (>= 5.1)
tzinfo (~> 2.0)
zeitwerk (~> 2.3)
addressable (2.8.0)
public_suffix (>= 2.0.2, < 5.0)
algoliasearch (1.27.5)
httpclient (~> 2.8, >= 2.8.3)
json (>= 1.5.1)
atomos (0.1.3)
claide (1.1.0)
cocoapods (1.11.3)
addressable (~> 2.8)
claide (>= 1.0.2, < 2.0)
cocoapods-core (= 1.11.3)
cocoapods-deintegrate (>= 1.0.3, < 2.0)
cocoapods-downloader (>= 1.4.0, < 2.0)
cocoapods-plugins (>= 1.0.0, < 2.0)
cocoapods-search (>= 1.0.0, < 2.0)
cocoapods-trunk (>= 1.4.0, < 2.0)
cocoapods-try (>= 1.1.0, < 2.0)
colored2 (~> 3.1)
escape (~> 0.0.4)
fourflusher (>= 2.3.0, < 3.0)
gh_inspector (~> 1.0)
molinillo (~> 0.8.0)
nap (~> 1.0)
ruby-macho (>= 1.0, < 3.0)
xcodeproj (>= 1.21.0, < 2.0)
cocoapods-core (1.11.3)
activesupport (>= 5.0, < 7)
addressable (~> 2.8)
algoliasearch (~> 1.0)
concurrent-ruby (~> 1.1)
fuzzy_match (~> 2.0.4)
nap (~> 1.0)
netrc (~> 0.11)
public_suffix (~> 4.0)
typhoeus (~> 1.0)
cocoapods-deintegrate (1.0.5)
cocoapods-downloader (1.6.3)
cocoapods-plugins (1.0.0)
nap
cocoapods-search (1.0.1)
cocoapods-trunk (1.6.0)
nap (>= 0.8, < 2.0)
netrc (~> 0.11)
cocoapods-try (1.2.0)
colored2 (3.1.2)
concurrent-ruby (1.1.10)
escape (0.0.4)
ethon (0.15.0)
ffi (>= 1.15.0)
ffi (1.15.5)
fourflusher (2.3.1)
fuzzy_match (2.0.4)
gh_inspector (1.1.3)
httpclient (2.8.3)
i18n (1.10.0)
concurrent-ruby (~> 1.0)
json (2.6.1)
minitest (5.15.0)
molinillo (0.8.0)
nanaimo (0.3.0)
nap (1.1.0)
netrc (0.11.0)
public_suffix (4.0.7)
rexml (3.2.5)
ruby-macho (2.5.1)
typhoeus (1.4.0)
ethon (>= 0.9.0)
tzinfo (2.0.4)
concurrent-ruby (~> 1.0)
xcodeproj (1.21.0)
CFPropertyList (>= 2.3.3, < 4.0)
atomos (~> 0.1.3)
claide (>= 1.0.2, < 2.0)
colored2 (~> 3.1)
nanaimo (~> 0.3.0)
rexml (~> 3.2.4)
zeitwerk (2.5.4)
PLATFORMS
ruby
DEPENDENCIES
cocoapods (~> 1.11, >= 1.11.2)
RUBY VERSION
ruby 2.7.4p191
BUNDLED WITH
2.2.27
import React, {Component} from 'react';
import {Text, View, SafeAreaView, Image, StyleSheet, ScrollView, TouchableOpacity} from 'react-native';
const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
const diasSemana = ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"]
class Guardias extends Component {
// Mantiene el estado de las variables de la vista
state = {
fechaAgrupar: ""
}
// Constructor
constructor(props) {
super(props)
}
/**
* Función que comprueba si una guardia está agrupada dentro de la fecha actual
* @param dateReserva fecha de la guardia (dia, mes y año)
* @param fechaActual 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 la guardia coincide con el día actual*/}
<View>
{dateReserva.getDate() == fechaActual.getDate() && dateReserva.getMonth() == fechaActual.getMonth() && dateReserva.getFullYear() == fechaActual.getFullYear() ?
<Text style={estilos.tituloSeccion}>Hoy, {diasSemana[dateReserva.getDay()]}, {dateReserva.getDate()} de {meses[dateReserva.getMonth()]} de {dateReserva.getFullYear()}</Text>:
<Text style={estilos.tituloSeccion}>{diasSemana[dateReserva.getDay()]}, {dateReserva.getDate()} de {meses[dateReserva.getMonth()]} de {dateReserva.getFullYear()}</Text>}
{/* Se dibuja una línea horizontal */}
</View>
<View style={estilos.separador}></View>
</View>
);
}
return null;
}
/**
* Método que permite visualizar la lista de guardias
* @param horaInicio hora de inicio de la guardia
* @param horaFin hora de fin de la guardia
* @param clase nombre de la clase donde se situa la guardia
* @param tareas actividades que tienen que realizar los alumnos de la clase de guardia
* @param dateReserva fecha de la guardia
* @return vista con lista de guardias que tiene el usuario asignadas
*/
ListaGuardia (horaInicio, horaFin, clase, tareas, dateReserva) {
const fecha = dateReserva.getDate() + " de " + meses[dateReserva.getMonth()] + " de " + dateReserva.getFullYear()
return (
<View style={{flex: 1}}>
<View style={estilos.contenedorSeccion}>
{/* Visualización de la lista de guardias */}
<View style={estilos.contenidoSeccion}>
<Text style = {estilos.tituloSeccion}>
{clase}
</Text>
<Text style={estilos.textoSeccion}>Hora: {horaInicio} - {horaFin} </Text>
</View>
{/* Visualización del icono a partir del cual se puede mostrar la informacion de la guardia */}
<TouchableOpacity style={{alignSelf: 'center'}} onPress={()=> this.props.navigation.navigate('Guardia', {horaIni:horaInicio, horaF:horaFin, cl:clase, t: tareas, fec: fecha})}>
<Image style={estilos.iconoFlecha} source={require("./assets/img/icons/flechaAzul.png")}></Image>
</TouchableOpacity>
</View>
</View>
);
}
/**
* Método que permite comprobar si la fecha de la guardia es superior a la fecha actual
* @param id id de la guardia
* @param dia dia de la guardia
* @param mes mes de la guardia
* @param año año de la guardia
* @param fechaActual fecha actual
* @param horaInicio hora de inicio de la guardia
* @param horaFin hora de fin de la guardia
* @param clase nombre de la clase que esta de guardia
* @param tareas actividades que tiene que realizar el alumnado de la clase de guardia
*/
ComprobarFechaActual(id, dia, mes, año, fechaActual, horaInicio, horaFin, clase, tareas) {
const dateReserva = new Date(año, mes - 1, dia, 23, 59, 59)
if(dateReserva >= fechaActual) {
return (
<View style={{marginRight: 20}} key={id}>
{/* Los datos se supondrán que son obtenidos de manera ordenada por fecha */}
{this.ComprobarFecha(dateReserva, fechaActual)}
{/* Se carga la lista con las guardias */}
{this.ListaGuardia(horaInicio, horaFin, clase, tareas, dateReserva)}
</View>
);
}
return null;
}
// Método render
render() {
// se extraen los datos del json
const datosJson = require("./assets/data/load/listaGuardias.json")
const usuarios = require("./assets/data/load/usuarios.json")
const idGuardia = usuarios[this.props.route.params.id].idGuardias
// Se obtiene la fecha actual
const dateActual = new Date()
return (
<SafeAreaView style={{flex: 1}}>
<ScrollView style={estilos.margenLista}>
{/* Se comprueba si la fecha de la guardia es inferior a la fecha actual */}
{idGuardia.map((guardia) =>
this.ComprobarFechaActual(guardia, datosJson[guardia].dia, datosJson[guardia].mes, datosJson[guardia].año, dateActual, datosJson[guardia].horaInicio,
datosJson[guardia].horaFin, datosJson[guardia].clase, datosJson[guardia].tareas)
)}
</ScrollView>
</SafeAreaView>
);
}
}
// Conjunto de estilos empleados en la vista las guardias
const estilos = StyleSheet.create({
margenLista: {
marginTop: 10,
marginLeft: 20
},
tituloSeccion: {
fontSize: 14,
color: '#1f2d3d',
marginBottom: 2
},
separador: {
paddingBottom: 1,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#C0CCDA'
},
contenedorSeccion: {
flexDirection: 'row',
justifyContent: 'center',
marginTop: 12,
marginBottom: 26,
paddingLeft: 20
},
contenidoSeccion: {
width: '94%',
paddingRight: 50
},
textoSeccion: {
fontSize: 14,
color: "#8492A6"
},
iconoFlecha: {
width: 25,
height: 25,
}
});
export default Guardias;
\ No newline at end of file
# Instalación de la aplicación
Para el desarrollo de la plataforma se ha utilizado la siguiente configuración:
* Python: 3.10.0
* Java JDK: 11.0.2
* Node JS: 14.18.1
* npm: 6.14.15
* Versión React-Native: 0.68.2
* Emulador Android (Android Virtual Device):
* Android: 12.
* API: 31.
* Tipo de dispositivo: Nexus 6.
A continuación, se presenta el procedimiento seguido desde cero para configurar e instalar el proyecto:
Para poder utilizar este proyecto, es necesario tener instalada la versión 3.10.0 de Python y la versión 14.18.1 de Node JS, que se puede instalar a través del gestor de paquetes de nvm (Windows y Linux). Por supuesto, es necesario estar empleando Java JDK 11.0.2 o superior, donde en caso de no tenerlo hay que instalarlo y modificar las variables de entorno del sistema para que tome la nueva versión.
Una vez se tenga todo configurado, será necesario crear el emulador a partir del cual se va a visualizar el desarrollo realizado, en este caso habrá que descargarse Android Studio. Una vez descargado, se crea un emulador accediendo a Device Manager. Primero se selecciona el tipo de dispositivo, en este caso, Nexus 6. Después, se determina la imagen a emplear: S (Android 12 y API 31). Finalmente, se crea el dispositivo.
Tras realizar esto, se crea el proyecto de React-Native. Para ello, se accede al cmd y se escribe la siguiente orden: `react-native init nombreApp --version 0.68.2`, donde `nombreApp` es el nombre de la aplicación. Una vez se cree el proyecto, se accede a la carpeta creada y se ejecuta metro: `react-native start`. Por último, en otra consola se inicia el emulador: `react-naive run-android`.
**Nota:** La configuración e instalación se ha realizado en el sistema operativo Windows.
## Dependencias
En el presente punto, se muestran las dependencias utilizadas durante la elaboración del proyecto. Se debe tener presente que se recomienda verificar que todas estas dependencias se encuentran instaladas en el proyecto descargado:
* Navigation. Permite la navegación entre las distintas pantallas que componen la aplicación.`npm install @react-navigation/native @react-navigation/native-stack` `npm install react-native-screens react-native-safe-area-context`.
* Tab bar. Permite la navegación entre las distintas ventanas que componen el tab bar `npm install @react-navigation/bottom-tabs`.
* DatePicker. Se incluirá un datePicker en la aplicación, para que el usuario sea capaz de seleccionar una determinada fecha de reserva: `npm i react-native-date-picker`.
* Picker. Este elemento permitirá seleccionar una hora de reserva de entre un conjunto de rangos horarios procedentes del backend de la aplicación: `npm install @react-native-picker/picker --save`.
* FileSystem. Con este componente se dota de persistencia a la aplicación, permitiendo que extienda su funcionalidad a través del sistema de ficheros del dispositivo. Para instalar ésta dependencia, es necesario ejecutar el siguiente comando: `npm install react-native-fs --save`.
## Estructura del proyecto
La estructura seguida para el desarrollo del proyecto es la siguiente:
```
/proyecto
/assets
/img
/icons
/photoprofiles
/installations
/data
/modified
*.json
/load
*.json
*.js
```
Donde se tiene:
* El código fuente (ficheros .js) se ha depositado en la carpeta raíz del proyecto.
* Sobre la raíz del proyecto, se ha creado una carpeta `assets`, que contiene los recursos del proyecto (.json e imágenes). Dentro de esta carpeta, se encuentran los siguientes subdirectorios:
* `data/load`. que contienen los .json que serán cargados desde la aplicación.
* `data/modified`. Este subdirectorio almacena los ficheros .json que han sido modificados, con objeto de simular las acciones de eliminar, modificar y añadir listas de reservas de material deportivo o instalaciones.
* `img`. Este subdirectorio contendrá el logo de la aplicación. Sobre esta carpeta se han creado los siguientes subdirectorios:
* `img/icons`. Esta carpeta contendrá los iconos que han sido utilizados en la aplicación.
* `img/photoprofile`. Este subdirectorio contendrá las imágenes asociadas al perfil de los distintos usuarios.
* `img/photoprofile`. Esta ruta almacena los recursos gráficos que se utilizan como ayuda para localizar la instalación que ha solicitado el usuario de la aplicación.
import React, {useState, useEffect} from 'react';
import {
StyleSheet,
Text,
useColorScheme,
View,
Image,
TouchableOpacity,
} from 'react-native';
import {
Colors,
} from 'react-native/Libraries/NewAppScreen';
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);
// 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*/}
if(files.length != 0){
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*/}]}>
<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, {jsonInicio[route.params.id].Nombre}</Text>
<Text style={[styles.nombreCentro]}>IES Jabalcuz</Text>
</View>
</View>
</View>
<View style={{ flex: 4.6 }}>
<Text style={[styles.estaSemana]}>Esta semana</Text>
<View style={[styles.hr /*_______________________________________*/]}/>
<View style={[styles.botonera, { flexDirection: "column" /*Contenedor de las botoneras*/}]}>
<View style={{ flex: 1.5, backgroundColor: "#FCCE90" }}>
<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 {countGuardias} guardias{"\n"}pendientes</Text>
</View>
</TouchableOpacity>
</View>
<View style={{ flex: 0.8, backgroundColor: "white", top: 30 }}>
<View style={[styles.hr2 /*_______________________________________*/]}/>
</View>
<View style={{ flex: 3.2 }}>
<View style={[styles.botonesHorizonales, { flexDirection: "column"}]}>
<View style={{ flex: 1.4, backgroundColor: "#A1B6FC" }}>
<TouchableOpacity style={[styles.contenedorBoton, { flexDirection: "row"}]} onPress={() => navigation.navigate("Instalaciones")}>
<View style={{ flex: 0.9}}>
<Text style={[styles.numerosTarea]}>{countInstalaciones}</Text>
</View>
<View style={{ flex: 1.4}}>
<Text style={[styles.textoTarea]}>Instalaciones{"\n"}reservadas</Text>
</View>
</TouchableOpacity>
</View>
<View style={{ flex: 0.2 }} />
<View style={{ flex: 1.4, backgroundColor: "#AEE58F" }}>
<TouchableOpacity style={[styles.contenedorBoton, { flexDirection: "row"}]} onPress={()=>navigation.navigate("Material")}>
<View style={{ flex: 0.9}}>
<Text style={[styles.numerosTarea]}>{countMateriales}</Text>
</View>
<View style={{ flex: 1.4}}>
<Text style={[styles.textoTarea]}>Listas de materiales{"\n"}reservadas</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
<View style={{ flex: 0.5 }} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
header: {
flex: 1,
padding: 0,
},
botonera: {
flex: 1,
padding: 0,
},
botonesHorizonales: {
flex: 1,
padding: 0,
},
hr: { /*Linea divisoria baso "Esta Semana"*/
borderWidth: 0.5,
borderColor: 'grey',
marginTop: 3,
marginBottom: 10,
},
hr2: { /*Linea divisoria que separa los dos tipos de botones */
borderWidth: 0.6,
borderColor: 'grey',
marginTop: 0,
marginBottom: 0,
},
estaSemana: {
fontSize: 18.0,
color: '#8492A6',
},
bienvenida: {
fontSize: 30.0,
color: '#1F2D3D',
top: 5
},
nombreCentro: {
fontSize: 19.0,
color: '#8492A6',
top: 7
},
numerosTarea: {
fontSize: 70.0,
textAlign: 'center',
color: '#1F2D3D',
bottom: 2,
marginRight: 13,
},
textoTarea: {
fontSize: 22.0,
color: '#1F2D3D',
textAlign: 'right',
marginRight: 15,
top: 19
},
contenedorBoton: {
flex: 1,
marginLeft: 15,
marginTop: 10,
},
botonGuardias: {
marginTop: 35
},
textoGuardias: {
fontSize: 20.0,
color: '#1F2D3D',
textAlign: 'right',
marginRight: 35,
bottom: 5
},
iconoGuardias: {
width: 80,
height: 80,
resizeMode: 'contain',
bottom: 20,
left: 40
},
perfil: {
width: 85,
height: 85,
resizeMode: 'contain',
borderRadius: 100
},
textoAusencias: {
fontSize: 222.0,
color: '#1F2D3D',
textAlign: 'center',
top: 20
},
});
export default Inicio;
import React, {useState, useEffect} from 'react';
import {
StyleSheet,
Text,
useColorScheme,
View,
Image,
Dimensions,
FlatList,
TouchableOpacity,
Alert,
} from 'react-native';
import {
Colors,
} from 'react-native/Libraries/NewAppScreen';
import { DocumentDirectoryPath, writeFile, readDir, readFile, read } from 'react-native-fs';
{/*Para ajustar los elementos al ancho-alto de la ventana del dispositivo*/}
const win = Dimensions.get('window');
const ratio = win.width/541; //541 is actual image width
function eliminarElemento(idElemento, usuarioReserva, idInstalacion, fecha, horario, nombreSala){
//Preguntamos antes de hacer una orden destructiva
Alert.alert(
"Advertencia",
"¿Desea eliminar la reserva de la sala '"+nombreSala+"' ?",
[
{
text: 'Cancelar',
style: 'cancel'
},
{
text: 'Aceptar',
onPress: (async () => {
try {
// +++++++++++++ ELIMINACION ++++++++++++
//Con el id del elemento en marcha, sólo nos queda modificar su atributo de eliminación de item...
// ++++++++++++++++++++++++++++++++++++++
//Obtenemos el fichero primigenio
var filesArr = await readFile(DocumentDirectoryPath+"/reservasInstalaciones.json");
//Buscamos patron y remplazamiento
var stringBuscar = '{"id":'+idElemento+',"usuarioReserva":"'+usuarioReserva+'","idInstalacion":"'+idInstalacion+'","fecha":"'+fecha+'","horario":"'+horario+'","borrado":"0"}';
var replace = '{"id":'+idElemento+',"usuarioReserva":"'+usuarioReserva+'","idInstalacion":"'+idInstalacion+'","fecha":"'+fecha+'","horario":"'+horario+'","borrado":"1"}';
//Machacamos
filesArr = filesArr.replace(stringBuscar, replace);
//Ejecutamos al fichero
await writeFile(DocumentDirectoryPath+"/reservasInstalaciones.json", filesArr);
//Mensaje de borrado...
Alert.alert(
"Elemento Eliminado",
"La sala '"+nombreSala+"' se ha eliminado con éxito.",
[
{
text: 'Aceptar',
style: 'accept',
},
],
);
}catch (e) {
console.log('error', e);
}
})
},
],
{
cancelable: true,
}
);
}
const Instalaciones = ({navigation, route}) => {
{/*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);
// 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]);
{/*Ahora, le toca a los 2 json: El de reservas y el de instalaciones... y filtramos por el usuario activo y por las reservas sin borrar*/}
const jsonInstalaciones = require('./assets/data/load/instalaciones.json');
var jsonReservasInstalaciones = files;
{/*Falta el cribado de tiempo con la fecha actual...*/}
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
{/*Recursos gráficos de la aplicacion de reservas de instalaciones*/}
const recursos = {
"polideportiva_derecha.jpg": {
uri: require('./assets/img/installations/polideportiva_derecha.jpg')
},
"polideportiva_izquierda.jpg": {
uri: require('./assets/img/installations/polideportiva_izquierda.jpg')
},
"polideportiva_interior.jpg": {
uri: require('./assets/img/installations/polideportiva_interior.jpg')
},
"sala_musica.jpg": {
uri: require('./assets/img/installations/sala_musica.jpg')
},
"sala_informatica.jpg": {
uri: require('./assets/img/installations/sala_informatica.jpg')
},
};
return (
<View style={{flex: 1, backgroundColor:'rgba(52, 52, 52, 0.1)'}}>
<FlatList
data={jsonReservasInstalaciones}
renderItem={({item}) => <View style={[styles.container, { flex: 1, backgroundColor: "#EFF2F7" }]}>
<Image style={styles.imagen} source={recursos[jsonInstalaciones[item.idInstalacion].ImagenRecurso].uri} />
<View style={[styles.containerTexto, { flex: 0.27, backgroundColor: "white" }]}>
<Text style={[styles.textoPista]}>{jsonInstalaciones[item.idInstalacion].NombreSala}</Text>
<Text style={[styles.textoInfoPista]}>Rervada: {item.fecha} / Hora: {item.horario}</Text>
<TouchableOpacity onPress={() => eliminarElemento(item.id, route.params.id, item.idInstalacion, item.fecha, item.horario, jsonInstalaciones[item.idInstalacion].NombreSala)}><Text style={[styles.textoAnular]}>CANCELAR RESERVA</Text></TouchableOpacity>
</View>
</View>}
keyExtractor={item => item.id}
ListEmptyComponent = {<Text style={[styles.noReservas]}>No hay reservas disponibles.</Text>}
/>
<TouchableOpacity style={styles.botonPos} onPress={() => navigation.navigate('AddReservaInstalacion', {id: route.params.id})}>
<View style={styles.contenedorBoton}>
<Image style={styles.contenedorImage} source={require("./assets/img/icons/iconoAdd.png")}></Image>
</View>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
containerTexto: {
width: win.width-20,
left: 10,
top: 5,
height: win.height/6
},
imagen: {
width: win.width-20,
height: win.height/4,
resizeMode: 'cover',
left: 10,
top: 5,
},
textoPista: {
fontSize: 25.0,
color: '#47525E',
left: 25,
top: 10
},
textoInfoPista: {
fontSize: 13.0,
color: '#8492A6',
left: 25,
top: 15
},
textoAnular: {
fontSize: 15.0,
color: '#F95F62',
left: 25,
top: 25
},
noReservas: {
fontSize: 25.0,
color: '#F95F62',
left: 25,
top: 10,
marginBottom: 20
},
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
}
});
export default Instalaciones;
import React, {useState} from 'react';
import { View, Image, Modal, StyleSheet, TouchableOpacity, Text, TextInput } from 'react-native';
import DatePicker from 'react-native-date-picker';
import { Picker } from '@react-native-picker/picker';
const meses = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"]
/**
* Modal que permite introducir el nombre de la nueva lista, fecha y hora de reserva
* @param {class} props Clase que contiene los materiales del usuario
*/
const ModalAddListaMat = (props) => {
const [textoNombreLista, setTextoNombreLista] = useState("");
const [date, setDate] = useState(new Date()); //Fecha de reserva
const [open, setOpen] = useState(false); //Booleano utilizado para abrir el modal que permite indicar la fecha
const [cFVis, setCFVis] = useState(false); // Booleano utilizado para mostrar un texto que indica que el usuario no ha introducido el nombre de la lista
const rangosHorarios = require("./assets/data/load/RangoHorarios.json")
const [hora, setHora] = useState(rangosHorarios[0].horaInicio + " - " + rangosHorarios[0].horaFin); //Hora de reserva
return (
<Modal transparent={true} visible={props.class.state.modalAdd} animationType={'fade'}>
<View style={estiloModalAddListaMat.CentrarModal}>
<View style={estiloModalAddListaMat.VistaModal}>
{/* Título del modal que permite introducir una nueva lista de materiales */}
<Text style={estiloModalAddListaMat.TituloModal}>Añadir lista</Text>
{/* Nombre de la lista de materiales */}
<Text style={estiloModalAddListaMat.TextoModal}>Indique el nombre de la lista</Text>
<TextInput style={[estiloModalAddListaMat.input, estiloModalAddListaMat.textoInput, {height: 35}]}
onChangeText={(text) => setTextoNombreLista(text)}
placeholder='Nombre de la lista' />
{/* Fecha de reserva de la lista de materiales */}
<Text style={estiloModalAddListaMat.TextoModal}>Seleccione una fecha</Text>
<View style={[estiloModalAddListaMat.input, estiloModalAddListaMat.contenedorFecha]}>
<Text style={estiloModalAddListaMat.textoInput}>{date.getDate()} de {meses[date.getMonth()]} de {date.getFullYear()}</Text>
<TouchableOpacity onPress={() => setOpen(true)}>
<Image style={estiloModalAddListaMat.iconoCalendario} source={require("./assets/img/icons/Calendario.png")}></Image>
</TouchableOpacity>
<DatePickerAddListaMat open={open} setOpen={setOpen} date={date} setDate={setDate} />
</View>
{/* Hora de reserva de la lista de materiales */}
<Text style={estiloModalAddListaMat.TextoModal}>Seleccione una hora</Text>
<View style={estiloModalAddListaMat.input}>
<Picker mode='dropdown'
selectedValue={hora}
onValueChange={(itemValue) => setHora(itemValue)}
style={estiloModalAddListaMat.picker}>
{rangosHorarios.map((rangoHor) =>
<Picker.Item key={rangoHor.horaInicio + " - " + rangoHor.horaFin}
style={estiloModalAddListaMat.textoInput}
label={rangoHor.horaInicio + " - " + rangoHor.horaFin}
value={rangoHor.horaInicio + " - " + rangoHor.horaFin} />
)}
</Picker>
</View>
{/* Si al pulsar sobre el botón crear lista no se han incluido todos los campos, se muestra un texto informátivo */}
<CamposFaltantes cFVis={cFVis} />
{/* Botónes de crear lista y cancelar la creación */}
<View style={estiloModalAddListaMat.contenedorBotones}>
<TouchableOpacity onPress={() => {
if(textoNombreLista == "") {
setCFVis(true)
} else {
props.class.setModalAdd()
props.class.props.navigation.navigate("Reserva de material", {fechaRes: date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear(), horaRes: hora, setJson: ()=> props.class.setJson("añadir", false)});
}
}}>
<Text style={{color: "#47525E", marginLeft: 15}}>CREAR LISTA</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
setCFVis(false)
props.class.setModalAdd()
}}>
<Text style={{color: "#F95F62"}}>CANCELAR</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
}
/**
* Devuelve un texto indicando al usuario que no ha introducido el nombre de la lista de reserva de material, en caso necesario
* @param {cFVis} props Booleano utilizado para mostrar un texto que indica que el usuario no ha introducido el nombre de la lista
* @returns
*/
const CamposFaltantes = (props) => {
if(props.cFVis) {
return <Text style={{color: "#F95F62", fontSize: 12}}>Se debe rellenar el nombre de la lista</Text>
} else {
return <Text></Text>
}
}
/**
* Picker que permite a un usuario escoger una fecha
* @param {open, date} props booleano utilizado para indicar si se debe introducir una fecha y fecha actual
*/
const DatePickerAddListaMat = (props) => {
return (
<DatePicker
modal
open={props.open}
date={props.date}
locale='es'
mode='date'
title="Selecciona una fecha"
confirmText='Confirmar'
cancelText='Cancelar'
onConfirm={(date) => {
props.setOpen(false)
props.setDate(date)
}}
onCancel={() => {
props.setOpen(false)
}}
/>
);
}
/**
* @brief Mantiene todos los estilos aplicados a esta vista
*/
const estiloModalAddListaMat = StyleSheet.create({
CentrarModal: {
flex: 1,
backgroundColor: "rgba(1,1,1,0.5)",
justifyContent: "center",
alignItems: "center"
},
VistaModal: {
width:330,
height:360,
margin: 10,
backgroundColor: "white",
borderRadius: 1,
padding: 25,
},
TituloModal:{
fontWeight:"bold",
color:"#47525E",
fontSize:20,
marginBottom:25
},
TextoModal: {
fontSize: 10,
color:"#8492A6",
},
contenedorFecha: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
marginLeft: 3,
height: 27
},
input: {
borderBottomWidth: 1,
borderBottomColor: "#B5B2B2",
paddingBottom: 5,
marginBottom: 15
},
textoInput: {
color:"#47525E",
fontSize: 14
},
picker: {
marginLeft: -13,
marginRight: -15,
marginBottom: -15,
marginTop: -4
},
contenedorBotones: {
flexDirection: 'row-reverse',
bottom: 20,
right: 20,
position: 'absolute'
},
iconoCalendario: {
width: 19,
height: 19
},
});
export default ModalAddListaMat;
\ No newline at end of file
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 App from './App';
import ListaMateriales from './materialesLista';
import ListaMaterialesSis from './materialesListaSis';
import DescripcionGuardia from './DescripcionGuardia';
import AddReservaInstalacion from './AddReservaInstalacion';
const Stack = createNativeStackNavigator();
/**
* @brief Funcion que mantiene las pantallas que forman parte de la navegacion de la aplicacion
* @returns la pantalla correspondiente en funcion del flujo de navegacion definido
*/
function Navegacion() {
const ref = React.useRef(null);
const tema = DefaultTheme;
tema.colors.background = 'white';
return (
<NavigationContainer ref={ref}>
<Stack.Navigator initialRouteName="App">
{/* Pantalla de inicio de sesion */}
<Stack.Screen name="Inicio de sesión" component={App}
options={{ headerStyle:{ backgroundColor: '#7D9BFF' }, headerTitleStyle: {
color: 'white'
}}} />
{/* Vista con el Tab Bar */}
<Stack.Screen name="TabBar" component={TabBar} options={{"headerShown": false}}/>
{/* Pantalla que permite modificar la contraseña */}
<Stack.Screen name="Contraseña" component={Password} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}/>
{/* Pantalla con el listado de materiales a reservar */}
<Stack.Screen
name="Materiales"
component={ListaMateriales}
options = {({route}) => ({
title: route.params.nombreListaMat,
headerStyle: { backgroundColor: '#7D9BFF' },
headerTintColor: 'white'
})}/>
{/* Pantalla con el listado de materiales del sistema */}
<Stack.Screen
name="Reserva de material"
component={ListaMaterialesSis}
options = {{
headerStyle: { backgroundColor: '#7D9BFF' },
headerTintColor: 'white'
}}/>
{/* Pantalla para la reserva de instalaciones */}
<Stack.Screen
name="AddReservaInstalacion"
component={AddReservaInstalacion}
options = {({route}) => ({
title: "Reserva de instalaciones",
headerStyle: { backgroundColor: '#7D9BFF' },
headerTintColor: 'white',
id: route.params.id,
})}/>
{/* Pantalla que mantiene la descripcion de las guardias del usuario */}
<Stack.Screen name="Guardia" component={DescripcionGuardia} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default Navegacion;
\ No newline at end of file
import * as React from 'react';
import { View, Text, TextInput, StyleSheet, TouchableOpacity, Modal } from 'react-native';
/**
* @brief Funcion que verifica si los datos incluidos al modificar la contraseña estan correctos
* @param navigation propiedad que permite la navegacion entre vistas
* @param route propiedad con la que se puede acceder a los atributos pasados entre vistas
* @param contr atributo que contiene la contraseña actual del usuario
* @param nuevaContr variable que mantiene la nueva contraseña
* @param rNuevaContr variable que mantiene la nueva contraseña repetida
* @param setModal funcion que permite activar el modal
* @param setTextModal funcion que permite cambiar el texto mostrado en el modal
* @returns la visualizacion del modal o la pantalla del perfil
*/
function CheckPassword(navigation, route, contr, nuevaContr, rNuevaContr, setModal, setTextModal){
const jsonInicio = require('./assets/data/load/usuarios.json');
if(jsonInicio[route.params.id].Password == contr){ // se comprueba si la contraseña es la del usuario
if(nuevaContr != contr){ // se verifica que la nueva contraseña no es igual a la actual
// se comprueba si la contraseña repetida es igual a la nueva y estas no son nulas
if(nuevaContr == rNuevaContr && (nuevaContr != "" || rNuevaContr != "")){
return navigation.goBack();
}else{
setTextModal("La contraseña no coincide o no se han introducido todos los campos.");
}
}else{
setTextModal("La nueva contraseña no puede ser como la actual.");
}
}else{
setTextModal("La contraseña no coincide.");
}
setModal(true);
}
/**
* @brief Modal que muestra el motivo por el que no se puede efectuar el cambio de contraseña
* @param props propiedades para poder mostrar, ocultar y mostrar la informacion del modal
* @returns vista con el modal informativo
*/
const Modales = (props) => {
return (
<Modal transparent={true} visible={props.modal} animationType={'fade'}>
<View style={estilos.CentrarModal}>
<View style={estilos.VistaModal}>
{/* Titulo del modal */}
<Text style={estilos.TituloModal}>Contraseña</Text>
{/* Cuerpo del modal */}
<Text style={estilos.TextoModal}>{props.textModal}</Text>
{/* Boton aceptar */}
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'flex-end'}}>
<TouchableOpacity onPress={()=>props.setModal(false)}>
<Text style={estilos.BotonAceptar}>ACEPTAR</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
}
/**
* @brief Funcion que mantiene la vista completa del cambio de contraseña
* @param navigation propiedad que permite la navegacion entre vistas
* @param route propiedad con la que se puede acceder a los atributos pasados entre vistas
* @returns la vista con los campos de texto para efectuar el cambio de contraseña
*/
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>
{/* Entradas de texto para realizar el cambio de contraseña*/}
<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>
{/* Boton para realizar el cambio de contraseña */}
<View style={{position: 'absolute', bottom: 25, width:'100%', alignSelf:'center'}}>
<TouchableOpacity style={estilos.Boton} onPress={() => CheckPassword(navigation, route, contrAct, nuevaContr, rNuevaContr, setModal, setTextModal)}>
<Text style={{color:'white', fontWeight: 'bold', fontSize:15}}>CONFIRMAR</Text>
</TouchableOpacity>
</View>
</View>
);
}
// Conjunto de estilos empleados en la vista del cambio de contraseña
const estilos = StyleSheet.create({
Boton:{
alignContent:'center',
alignItems:'center',
justifyContent:'center',
backgroundColor:'#7D9BFF',
height:45,
borderRadius:3
},
EntradaTexto: {
borderBottomWidth: 1,
borderBottomColor: "#B5B2B2",
paddingBottom: 1,
paddingTop:30,
fontSize:16
},
CentrarModal: {
flex: 1,
backgroundColor: "rgba(1,1,1,0.5)",
justifyContent: "center",
alignItems: "center",
},
VistaModal: {
width:330,
height:190,
margin: 20,
backgroundColor: "white",
borderRadius: 1,
padding: 35,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
BotonAceptar: {
marginTop: 25,
textAlign: "left",
color:"#47525E",
fontSize:15
},
BotonCancelar:{
marginTop: 25,
textAlign: "left",
color:"#FF676A"
},
TextoModal: {
color:"#47525E",
fontSize:16
},
TituloModal:{
fontWeight:"bold",
color:"#47525E",
fontSize:21,
paddingBottom:25
}
}
)
export default Password;
\ No newline at end of file
import * as React from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity, Modal, TextInput, ScrollView } from 'react-native';
// Mapa que mantiene el conjunto de imagenes empleadas en la aplicacion
const imagenes = {
vacio: require('./assets/img/photoprofiles/profile.png')
}
/**
* @brief Modal para permitir el cambio de numero de telefono
* @param props propiedades necesarias para mostrar u ocultar el modal
* @returns vista con el modal del cambio de contraseña
*/
const CambioTelefono = (props) => {
return(<View style={estilos.CentrarModal}>
<Modal transparent={true} visible={props.modal} animationType={'fade'}>
<View style={estilos.CentrarModal}>
<View style={estilos.VistaModal}>
{/* Titulo del modal */}
<Text style={[estilos.TituloModal, {marginTop:7}]}>Modificar teléfono</Text>
{/* Campo de texto */}
<TextInput style={estilos.EntradaTexto} keyboardType="number-pad" placeholder="Nuevo teléfono"></TextInput>
{/* Botones del modal */}
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'flex-end'}}>
<TouchableOpacity onPress={()=>props.setModal(false)}>
<Text style={estilos.BotonAceptar}>ACEPTAR</Text>
</TouchableOpacity>
<TouchableOpacity style= {{paddingLeft:15}} onPress={()=>props.setModal(false)}>
<Text style={estilos.BotonCancelar}>CANCELAR</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</View>
);
}
/**
* @brief Modal presentado en el momento de cerrar la sesion activa
* @param props propiedades necesarias para mostrar u ocultar el modal
* @returns vista con el modal de confirmacion del cierre de sesion
*/
const CloseSession = (props) => {
return(
<Modal transparent={true} visible={props.modalS} animationType={'fade'}>
<View style={estilos.CentrarModal}>
<View style={estilos.VistaModal}>
{/* Titulo del modal */}
<Text style={estilos.TituloModal}>
<Image style={{width:36, height:36}} source={require("./assets/img/icons/advertencia.png")}></Image>
{'\t'}Cerrar sesión
</Text>
{/* Cuerpo del modal */}
<Text style={estilos.TextoModal}>¿Está seguro que desea cerrar la sesión activa?</Text>
{/* Botones del modal */}
<View style={{flexDirection:'row', alignItems:'center', justifyContent:'flex-end'}}>
<TouchableOpacity onPress={()=>props.navigation.reset({index: 0, routes: [{name: 'Inicio de sesión'},],})}>
<Text style={estilos.BotonAceptar}>ACEPTAR</Text>
</TouchableOpacity>
<TouchableOpacity style= {{paddingLeft:15}} onPress={()=>props.setModalS(false)}>
<Text style={estilos.BotonCancelar}>CANCELAR</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
}
/**
* @brief Funcion que mantiene la vista del perfil de usuario
* @param navigation propiedad que permite la navegacion entre vistas
* @param route propiedad con la que se puede acceder a los atributos pasados entre vistas
* @returns vista con la informacion del perfil de usuario
*/
function Perfil({navigation, route}){
const jsonInicio = require('./assets/data/load/usuarios.json');
const [modal, setModal] = React.useState(false);
const [modalS, setModalS] = React.useState(false);
return(
<ScrollView>
<View style={{padding: 18}}>
{/* Modales */}
<CambioTelefono modal={modal} setModal={setModal} />
<CloseSession modalS={modalS} setModalS={setModalS} navigation={navigation} />
{/* Imagen de perfil */}
<View style={estilos.ContenedorLogo}>
<Image style={estilos.Logo} source={imagenes[jsonInicio[route.params.id].ImagenPerfil]} />
<Text style={estilos.Nombre}>{jsonInicio[route.params.id].Nombre} {jsonInicio[route.params.id].Apellidos}</Text>
</View>
{/* Correo electronico */}
<View style={estilos.ContenedorElemento}>
<Text style={estilos.TituloLista}>Email</Text>
<Text>{jsonInicio[route.params.id].Correo}</Text>
</View>
{/* Telefono del usuario */}
<View style={estilos.ContenedorElemento}>
<View style={estilos.contenedor}>
<View>
<Text style={estilos.TituloLista}>Teléfono</Text>
<Text>{jsonInicio[route.params.id].Telefono}</Text>
</View>
<TouchableOpacity onPress={() => setModal(true)}>
<Image style={{height:20, width:20}} source={require('./assets/img/icons/editar.png')} />
</TouchableOpacity>
</View>
</View>
{/* Cambio de contraseña */}
<View style={estilos.ContenedorElemento}>
<View style={estilos.contenedor}>
<View>
<Text style={estilos.TituloLista}>Contraseña</Text>
<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('./assets/img/icons/flecha.png')} />
</TouchableOpacity>
</View>
</View>
{/* Boton de cierre de sesion */}
<TouchableOpacity style={estilos.Boton} onPress={() => setModalS(true)}>
<Text style={{color:'white', fontWeight: 'bold', fontSize:15}}>CERRAR SESIÓN</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
}
// Conjunto de estilos empleados en la vista del perfil de usuario
const estilos = StyleSheet.create({
contenedor: {
flexDirection:'row',
alignItems:'center',
justifyContent:'space-between'
},
ContenedorLogo:{
alignContent:'center',
alignItems:'center',
paddingTop:25,
paddingBottom: 25
},
Logo:{
borderRadius:80,
width:160,
height:160,
resizeMode:'contain'
},
Nombre:{
fontSize:22,
color:'gray'
},
TituloLista:{
fontSize:16,
color:"black"
},
ContenedorElemento:{
paddingTop:20
},
Boton:{
marginTop:40,
alignContent:'center',
alignItems:'center',
justifyContent:'center',
backgroundColor:'#FF676A',
height:45,
borderRadius:3
},
CentrarModal: {
flex: 1,
backgroundColor: "rgba(1,1,1,0.5)",
justifyContent: "center",
alignItems: "center",
},
VistaModal: {
width:330,
height:195,
backgroundColor: "white",
borderRadius: 1,
padding: 35,
paddingTop: 20,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
BotonAceptar: {
marginTop: 25,
textAlign: "left",
color:"#47525E",
fontSize:15
},
BotonCancelar:{
marginTop: 25,
textAlign: "left",
color:"#FF676A",
fontSize:15
},
TextoModal: {
fontSize:16,
color:"#47525E"
},
TituloModal:{
fontWeight:"bold",
color:"#47525E",
fontSize:21,
paddingBottom:25
},
EntradaTexto: {
borderBottomWidth: 1,
borderBottomColor: "#B5B2B2",
paddingBottom: 10,
fontSize:16
}
});
export default Perfil;
\ No newline at end of file
# AGI
# Proyecto TDDM
AGI es una plataforma para la gestión de guardias del profesorado, así como permite efectuar la reserva de instalaciones y materiales deportivos. El público objetivo de esta aplicación son los profesores que trabajan en los centros educativos. La idea es mantener en una sola plataforma múltiples utilidades que emplean frecuentemente este tipo de profesionales.
Repositorio del proyecto de Tecnologías de Desarrollo para Dispositivos Móviles. Gestión de App para Centros Educativos.
Esta aplicación está desarrollada sobre el framework de React Native, escrita en JavaScript, haciendo uso de componentes JSX, que permite utilizar una sintaxis similar a HTML. La potencialidad que ofrece este framework permite implementar aplicaciones nativas desde una misma base de código.
## Inicio de sesión
En el momento de iniciar la aplicación, se visualizará una pantalla con dos campos de texto, donde se requerirá un nombre de usuario y una contraseña. Aquí el usuario deberá insertar el identificador y la contraseña dada por su organización para poder acceder a la plataforma. Se presupone que es la organización es quien genera los perfiles de los profesores, por ello, no se da la opción a los usuarios a registrarse previamente.
## Inicio
Una vez se inicia sesión en la aplicación, se presenta al usuario la vista principal de la aplicación en la que podrá contemplar información relacionada con las reservas de instalaciones, materiales deportivos y gestión de guardias que tiene para esa semana. Concretamente, se mostrará un dashboard en el que el usuario podrá visualizar la cantidad de reservas de instalaciones y listas de reservas de material realizadas en la semana actual. A su vez, se mostrará el número de guardias pendientes que tiene para esa misma semana.
Asimismo, en esta pantalla, como rasgo 'personalizable' de la aplicación, aparecerá el nombre e imagen de perfil del usuario que servirá también a modo de retroalimentación, tras haber iniciado sesión.
Además, en la parte inferior de la pantalla, se dispone de un Tab Bar para poder navegar entre las diferentes vistas que componen la aplicación.
## Guardias
En esta pantalla, al igual que sucedía con la visualización de la lista de reservas de material deportivo, se mostrarán las guardias, agrupadas por fecha, que un usuario tendrá asignadas desde el día actual. Para cada guardia, se mostrará el nombre de la clase y la hora a la que deberá asistir el profesor para cubrir dicha guardia.
Además, se podrá acceder a más información relativa a una guardia concreta, si se pulsa sobre el icono situado a la derecha de la misma. En esta ocasión, se mostrará la clase y hora asociada, así como la fecha y las tareas que los alumnos deberán realizar.
Cabe destacar que, para poder acceder a esta vista se puede ir desde el elemento correspondiente en el Tab Bar o desde la vista de Inicio, a través del botón que indica el número de guardias que tiene que realizar.
## Reservas de instalaciones
Las reservas de instalaciones, es el punto troncal de la aplicación mediante la cual, se pueden realizar las reservas de los espacios de trabajo de una forma fácil y sencilla. El funcionamiento es sencillo:
En primera instancia, se encuentra la pantalla de los espacios reservados por el usuario. Los espacios son ordenados en función de las peticiones temporales del usuario, que se realizan a través del botón de añadir.
En la parte inferior derecha de la pantalla, se localiza el botón de añadir una nueva reserva. Pulsando sobre el mencionado botón, aparece un menú contextual en el que el usuario, con unos sencillos toques, realiza la reserva de la instalación.
Para mayor fiabilidad, de las operaciones, los cambios se reflejan al instante, proporcionando al usuario, una buena experiencia de usuario en la aplicación.
## Reservas de material
Para realizar la reserva se material se ha estimado que los recursos se reserven de forma agrupada haciendo uso de listas. Por ello, en esta pantalla se visualizarán, desde el día actual, todas las listas de material, agrupadas por fecha, que el usuario hubiera creado. Para cada lista se visualizará la hora, el nombre de la lista y los materiales reservados, contenidos en ella.
Dentro de esta vista, será posible eliminar una lista de material, pulsando sobre el icono situado a la derecha de cada lista, modificar los materiales contenidos en la lista o añadir una nueva lista. En caso de que un usuario desee añadir una nueva lista, se deberá introducir su nombre, así como la fecha y la hora de la reserva.
Una vez se hayan proporcionado todos los datos, se mostrará un listado que contendrá los materiales del sistema. En esta vista, el usuario podrá seleccionar la cantidad deseada pulsando sobre los iconos "+" y "-". La modificación de la lista de reserva de material se realizará de forma similar a la inclusión de materiales, mencionada anteriormente. En cualquier caso, se tendrá presente la cantidad máxima de materiales disponibles en el sistema para dicho día y a esa hora.
## Perfil
El usuario puede visualizar su información personal accediendo a la pantalla de Perfil, a la cual se puede ir desde el Tab Bar o pulsando sobre la imagen de perfil situada en la pantalla de Inicio. En esta vista se presenta su imagen de perfil, junto con información personal del usuario que ha ingresado en la plataforma (nombre y apellidos, teléfono y correo electrónico del usuario).
Dentro de esta vista, será posible modificar el número de teléfono del propio usuario. En este caso, se mostrará un modal donde se le solicite al usuario el nuevo número de teléfono.
También, se le permitirá al usuario la posibilidad de realizar el cambio de contraseña. En esta ocasión, se visualizará una nueva pantalla con tres campos de texto, uno para indicar la contraseña actual del usuario (como elemento de seguridad) y los otros dos que deberán contener la nueva contraseña para poder efectuar el cambio. En el supuesto en el que alguno de los datos introducidos no sea el adecuado, se mostrará un modal indicando el motivo.
Por último, se facilita un botón en la parte inferior de la vista desde donde el usuario podrá cerrar la sesión activa. Antes de finalizar la sesión, se mostrará un modal donde se pregunte al usuario si realmente desea cerrar la sesión activa. Si la respuesta es afirmativa, se visualizará la pantalla de inicio de sesión.
import React from "react";
import { Image } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import listaMatRes from './listaMatRes.js';
import Perfil from "./Perfil.js";
import Guardias from "./Guardias.js";
import Inicio from "./Inicio.js";
import Instalaciones from "./Instalaciones.js";
const tabBar = createBottomTabNavigator(); // Tab bar
/**
* Componente que incorpora el tab bar de la aplicación
* @param route id del usuario logueado
*/
const TabBar = ({route}) => {
return(
<tabBar.Navigator >
{/* Vista de inicio */}
<tabBar.Screen name="Inicio" component={Inicio} initialParams={{id: route.params.id}}
options={{
tabBarIcon: ({size, color}) => {
return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/IconoInicio.png")}/>
},
headerShown: false
}}/>
{/* Vista que contienen guardias que el usuario debera atender */}
<tabBar.Screen name="Guardias" component={Guardias} initialParams={{id: route.params.id}}
options={{
tabBarIcon: ({size, color}) => {
return <Image style={{width: size, height: size, tintColor: color}} source={require("./assets/img/icons/guardias.png")}/>
},
headerTitle: "Mis guardias",
tabBarLabel: "Guardias"
}}/>
{/* Vista de reservas de instalaciones */}
<tabBar.Screen name="Instalaciones" component={Instalaciones} 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")}/>
},
headerTitle: "Reservas de instalaciones",
tabBarLabel: "Instalaciones"
}}/>
{/* Vista de reservas de material */}
<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")}/>
},
headerTitle: "Reservas de material",
tabBarLabel: "Material",
headerShadowVisible: false
}}/>
{/* Vista con informacion del perfil de usuario */}
<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>
);
}
export default TabBar;
\ No newline at end of file
/**
* @format
*/
import 'react-native';
import React from 'react';
import App from '../App';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
renderer.create(<App />);
});
# To learn about Buck see [Docs](https://buckbuild.com/).
# To run your application with Buck:
# - install Buck
# - `npm start` - to start the packager
# - `cd android`
# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
# - `buck install -r android/app` - compile, install and run application
#
load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
lib_deps = []
create_aar_targets(glob(["libs/*.aar"]))
create_jar_targets(glob(["libs/*.jar"]))
android_library(
name = "all-libs",
exported_deps = lib_deps,
)
android_library(
name = "app-code",
srcs = glob([
"src/main/java/**/*.java",
]),
deps = [
":all-libs",
":build_config",
":res",
],
)
android_build_config(
name = "build_config",
package = "com.proyecto",
)
android_resource(
name = "res",
package = "com.proyecto",
res = "src/main/res",
)
android_binary(
name = "app",
keystore = "//android/keystores:debug",
manifest = "src/main/AndroidManifest.xml",
package_type = "debug",
deps = [
":app-code",
],
)
"""Helper definitions to glob .aar and .jar targets"""
def create_aar_targets(aarfiles):
for aarfile in aarfiles:
name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
lib_deps.append(":" + name)
android_prebuilt_aar(
name = name,
aar = aarfile,
)
def create_jar_targets(jarfiles):
for jarfile in jarfiles:
name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
lib_deps.append(":" + name)
prebuilt_jar(
name = name,
binary_jar = jarfile,
)
No preview for this file type
# Add project specific ProGuard rules here.
# By default, the flags in this file are appended to flags specified
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
# You can edit the include path and order by changing the proguardFiles
# directive in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html
# Add any project specific keep options here:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application
android:usesCleartextTraffic="true"
tools:targetApi="28"
tools:ignore="GoogleAppIndexingWarning">
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
</application>
</manifest>
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* <p>This source code is licensed under the MIT license found in the LICENSE file in the root
* directory of this source tree.
*/
package com.proyecto;
import android.content.Context;
import com.facebook.flipper.android.AndroidFlipperClient;
import com.facebook.flipper.android.utils.FlipperUtils;
import com.facebook.flipper.core.FlipperClient;
import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
import com.facebook.react.ReactInstanceEventListener;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.modules.network.NetworkingModule;
import okhttp3.OkHttpClient;
public class ReactNativeFlipper {
public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
if (FlipperUtils.shouldEnableFlipper(context)) {
final FlipperClient client = AndroidFlipperClient.getInstance(context);
client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
client.addPlugin(new ReactFlipperPlugin());
client.addPlugin(new DatabasesFlipperPlugin(context));
client.addPlugin(new SharedPreferencesFlipperPlugin(context));
client.addPlugin(CrashReporterPlugin.getInstance());
NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
NetworkingModule.setCustomClientBuilder(
new NetworkingModule.CustomClientBuilder() {
@Override
public void apply(OkHttpClient.Builder builder) {
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
}
});
client.addPlugin(networkFlipperPlugin);
client.start();
// Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
// Hence we run if after all native modules have been initialized
ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
if (reactContext == null) {
reactInstanceManager.addReactInstanceEventListener(
new ReactInstanceEventListener() {
@Override
public void onReactContextInitialized(ReactContext reactContext) {
reactInstanceManager.removeReactInstanceEventListener(this);
reactContext.runOnNativeModulesQueueThread(
new Runnable() {
@Override
public void run() {
client.addPlugin(new FrescoFlipperPlugin());
}
});
}
});
} else {
client.addPlugin(new FrescoFlipperPlugin());
}
}
}
}
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.proyecto">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
package com.proyecto;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "Proyecto";
}
/**
* Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and
* you can specify the rendered you wish to use (Fabric or the older renderer).
*/
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new MainActivityDelegate(this, getMainComponentName());
}
public static class MainActivityDelegate extends ReactActivityDelegate {
public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
super(activity, mainComponentName);
}
@Override
protected ReactRootView createRootView() {
ReactRootView reactRootView = new ReactRootView(getContext());
// If you opted-in for the New Architecture, we enable the Fabric Renderer.
reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
return reactRootView;
}
}
}
package com.proyecto;
import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.config.ReactFeatureFlags;
import com.facebook.soloader.SoLoader;
import com.proyecto.newarchitecture.MainApplicationReactNativeHost;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
private final ReactNativeHost mNewArchitectureNativeHost =
new MainApplicationReactNativeHost(this);
@Override
public ReactNativeHost getReactNativeHost() {
if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
return mNewArchitectureNativeHost;
} else {
return mReactNativeHost;
}
}
@Override
public void onCreate() {
super.onCreate();
// If you opted-in for the New Architecture, we enable the TurboModule system
ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
}
/**
* Loads Flipper in React Native templates. Call this in the onCreate method with something like
* initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
*
* @param context
* @param reactInstanceManager
*/
private static void initializeFlipper(
Context context, ReactInstanceManager reactInstanceManager) {
if (BuildConfig.DEBUG) {
try {
/*
We use reflection here to pick up the class that initializes Flipper,
since Flipper library is not available in release mode
*/
Class<?> aClass = Class.forName("com.proyecto.ReactNativeFlipper");
aClass
.getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
.invoke(null, context, reactInstanceManager);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
}
}
package com.proyecto.newarchitecture;
import android.app.Application;
import androidx.annotation.NonNull;
import com.facebook.react.PackageList;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
import com.facebook.react.bridge.JSIModulePackage;
import com.facebook.react.bridge.JSIModuleProvider;
import com.facebook.react.bridge.JSIModuleSpec;
import com.facebook.react.bridge.JSIModuleType;
import com.facebook.react.bridge.JavaScriptContextHolder;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.UIManager;
import com.facebook.react.fabric.ComponentFactory;
import com.facebook.react.fabric.CoreComponentsRegistry;
import com.facebook.react.fabric.EmptyReactNativeConfig;
import com.facebook.react.fabric.FabricJSIModuleProvider;
import com.facebook.react.uimanager.ViewManagerRegistry;
import com.proyecto.BuildConfig;
import com.proyecto.newarchitecture.components.MainComponentsRegistry;
import com.proyecto.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate;
import java.util.ArrayList;
import java.util.List;
/**
* A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both
* TurboModule delegates and the Fabric Renderer.
*
* <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
* `newArchEnabled` property). Is ignored otherwise.
*/
public class MainApplicationReactNativeHost extends ReactNativeHost {
public MainApplicationReactNativeHost(Application application) {
super(application);
}
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
// TurboModules must also be loaded here providing a valid TurboReactPackage implementation:
// packages.add(new TurboReactPackage() { ... });
// If you have custom Fabric Components, their ViewManagers should also be loaded here
// inside a ReactPackage.
return packages;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
@NonNull
@Override
protected ReactPackageTurboModuleManagerDelegate.Builder
getReactPackageTurboModuleManagerDelegateBuilder() {
// Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary
// for the new architecture and to use TurboModules correctly.
return new MainApplicationTurboModuleManagerDelegate.Builder();
}
@Override
protected JSIModulePackage getJSIModulePackage() {
return new JSIModulePackage() {
@Override
public List<JSIModuleSpec> getJSIModules(
final ReactApplicationContext reactApplicationContext,
final JavaScriptContextHolder jsContext) {
final List<JSIModuleSpec> specs = new ArrayList<>();
// Here we provide a new JSIModuleSpec that will be responsible of providing the
// custom Fabric Components.
specs.add(
new JSIModuleSpec() {
@Override
public JSIModuleType getJSIModuleType() {
return JSIModuleType.UIManager;
}
@Override
public JSIModuleProvider<UIManager> getJSIModuleProvider() {
final ComponentFactory componentFactory = new ComponentFactory();
CoreComponentsRegistry.register(componentFactory);
// Here we register a Components Registry.
// The one that is generated with the template contains no components
// and just provides you the one from React Native core.
MainComponentsRegistry.register(componentFactory);
final ReactInstanceManager reactInstanceManager = getReactInstanceManager();
ViewManagerRegistry viewManagerRegistry =
new ViewManagerRegistry(
reactInstanceManager.getOrCreateViewManagers(reactApplicationContext));
return new FabricJSIModuleProvider(
reactApplicationContext,
componentFactory,
new EmptyReactNativeConfig(),
viewManagerRegistry);
}
});
return specs;
}
};
}
}
package com.proyecto.newarchitecture.components;
import com.facebook.jni.HybridData;
import com.facebook.proguard.annotations.DoNotStrip;
import com.facebook.react.fabric.ComponentFactory;
import com.facebook.soloader.SoLoader;
/**
* Class responsible to load the custom Fabric Components. This class has native methods and needs a
* corresponding C++ implementation/header file to work correctly (already placed inside the jni/
* folder for you).
*
* <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
* `newArchEnabled` property). Is ignored otherwise.
*/
@DoNotStrip
public class MainComponentsRegistry {
static {
SoLoader.loadLibrary("fabricjni");
}
@DoNotStrip private final HybridData mHybridData;
@DoNotStrip
private native HybridData initHybrid(ComponentFactory componentFactory);
@DoNotStrip
private MainComponentsRegistry(ComponentFactory componentFactory) {
mHybridData = initHybrid(componentFactory);
}
@DoNotStrip
public static MainComponentsRegistry register(ComponentFactory componentFactory) {
return new MainComponentsRegistry(componentFactory);
}
}
package com.proyecto.newarchitecture.modules;
import com.facebook.jni.HybridData;
import com.facebook.react.ReactPackage;
import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.soloader.SoLoader;
import java.util.List;
/**
* Class responsible to load the TurboModules. This class has native methods and needs a
* corresponding C++ implementation/header file to work correctly (already placed inside the jni/
* folder for you).
*
* <p>Please note that this class is used ONLY if you opt-in for the New Architecture (see the
* `newArchEnabled` property). Is ignored otherwise.
*/
public class MainApplicationTurboModuleManagerDelegate
extends ReactPackageTurboModuleManagerDelegate {
private static volatile boolean sIsSoLibraryLoaded;
protected MainApplicationTurboModuleManagerDelegate(
ReactApplicationContext reactApplicationContext, List<ReactPackage> packages) {
super(reactApplicationContext, packages);
}
protected native HybridData initHybrid();
native boolean canCreateTurboModule(String moduleName);
public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder {
protected MainApplicationTurboModuleManagerDelegate build(
ReactApplicationContext context, List<ReactPackage> packages) {
return new MainApplicationTurboModuleManagerDelegate(context, packages);
}
}
@Override
protected synchronized void maybeLoadOtherSoLibraries() {
if (!sIsSoLibraryLoaded) {
// If you change the name of your application .so file in the Android.mk file,
// make sure you update the name here as well.
SoLoader.loadLibrary("proyecto_appmodules");
sIsSoLibraryLoaded = true;
}
}
}
THIS_DIR := $(call my-dir)
include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
# If you wish to add a custom TurboModule or Fabric component in your app you
# will have to include the following autogenerated makefile.
# include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
include $(CLEAR_VARS)
LOCAL_PATH := $(THIS_DIR)
# You can customize the name of your application .so file here.
LOCAL_MODULE := proyecto_appmodules
LOCAL_C_INCLUDES := $(LOCAL_PATH)
LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp)
LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)
# If you wish to add a custom TurboModule or Fabric component in your app you
# will have to uncomment those lines to include the generated source
# files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni)
#
# LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
# LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
# LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
# Here you should add any native library you wish to depend on.
LOCAL_SHARED_LIBRARIES := \
libfabricjni \
libfbjni \
libfolly_futures \
libfolly_json \
libglog \
libjsi \
libreact_codegen_rncore \
libreact_debug \
libreact_nativemodule_core \
libreact_render_componentregistry \
libreact_render_core \
libreact_render_debug \
libreact_render_graphics \
librrc_view \
libruntimeexecutor \
libturbomodulejsijni \
libyoga
LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall
include $(BUILD_SHARED_LIBRARY)
#include "MainApplicationModuleProvider.h"
#include <rncore.h>
namespace facebook {
namespace react {
std::shared_ptr<TurboModule> MainApplicationModuleProvider(
const std::string moduleName,
const JavaTurboModule::InitParams &params) {
// Here you can provide your own module provider for TurboModules coming from
// either your application or from external libraries. The approach to follow
// is similar to the following (for a library called `samplelibrary`:
//
// auto module = samplelibrary_ModuleProvider(moduleName, params);
// if (module != nullptr) {
// return module;
// }
// return rncore_ModuleProvider(moduleName, params);
return rncore_ModuleProvider(moduleName, params);
}
} // namespace react
} // namespace facebook
#pragma once
#include <memory>
#include <string>
#include <ReactCommon/JavaTurboModule.h>
namespace facebook {
namespace react {
std::shared_ptr<TurboModule> MainApplicationModuleProvider(
const std::string moduleName,
const JavaTurboModule::InitParams &params);
} // namespace react
} // namespace facebook
#include "MainApplicationTurboModuleManagerDelegate.h"
#include "MainApplicationModuleProvider.h"
namespace facebook {
namespace react {
jni::local_ref<MainApplicationTurboModuleManagerDelegate::jhybriddata>
MainApplicationTurboModuleManagerDelegate::initHybrid(
jni::alias_ref<jhybridobject>) {
return makeCxxInstance();
}
void MainApplicationTurboModuleManagerDelegate::registerNatives() {
registerHybrid({
makeNativeMethod(
"initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid),
makeNativeMethod(
"canCreateTurboModule",
MainApplicationTurboModuleManagerDelegate::canCreateTurboModule),
});
}
std::shared_ptr<TurboModule>
MainApplicationTurboModuleManagerDelegate::getTurboModule(
const std::string name,
const std::shared_ptr<CallInvoker> jsInvoker) {
// Not implemented yet: provide pure-C++ NativeModules here.
return nullptr;
}
std::shared_ptr<TurboModule>
MainApplicationTurboModuleManagerDelegate::getTurboModule(
const std::string name,
const JavaTurboModule::InitParams &params) {
return MainApplicationModuleProvider(name, params);
}
bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule(
std::string name) {
return getTurboModule(name, nullptr) != nullptr ||
getTurboModule(name, {.moduleName = name}) != nullptr;
}
} // namespace react
} // namespace facebook
#include <memory>
#include <string>
#include <ReactCommon/TurboModuleManagerDelegate.h>
#include <fbjni/fbjni.h>
namespace facebook {
namespace react {
class MainApplicationTurboModuleManagerDelegate
: public jni::HybridClass<
MainApplicationTurboModuleManagerDelegate,
TurboModuleManagerDelegate> {
public:
// Adapt it to the package you used for your Java class.
static constexpr auto kJavaDescriptor =
"Lcom/proyecto/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;";
static jni::local_ref<jhybriddata> initHybrid(jni::alias_ref<jhybridobject>);
static void registerNatives();
std::shared_ptr<TurboModule> getTurboModule(
const std::string name,
const std::shared_ptr<CallInvoker> jsInvoker) override;
std::shared_ptr<TurboModule> getTurboModule(
const std::string name,
const JavaTurboModule::InitParams &params) override;
/**
* Test-only method. Allows user to verify whether a TurboModule can be
* created by instances of this class.
*/
bool canCreateTurboModule(std::string name);
};
} // namespace react
} // namespace facebook
#include "MainComponentsRegistry.h"
#include <CoreComponentsRegistry.h>
#include <fbjni/fbjni.h>
#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
#include <react/renderer/components/rncore/ComponentDescriptors.h>
namespace facebook {
namespace react {
MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {}
std::shared_ptr<ComponentDescriptorProviderRegistry const>
MainComponentsRegistry::sharedProviderRegistry() {
auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
// Custom Fabric Components go here. You can register custom
// components coming from your App or from 3rd party libraries here.
//
// providerRegistry->add(concreteComponentDescriptorProvider<
// AocViewerComponentDescriptor>());
return providerRegistry;
}
jni::local_ref<MainComponentsRegistry::jhybriddata>
MainComponentsRegistry::initHybrid(
jni::alias_ref<jclass>,
ComponentFactory *delegate) {
auto instance = makeCxxInstance(delegate);
auto buildRegistryFunction =
[](EventDispatcher::Weak const &eventDispatcher,
ContextContainer::Shared const &contextContainer)
-> ComponentDescriptorRegistry::Shared {
auto registry = MainComponentsRegistry::sharedProviderRegistry()
->createComponentDescriptorRegistry(
{eventDispatcher, contextContainer});
auto mutableRegistry =
std::const_pointer_cast<ComponentDescriptorRegistry>(registry);
mutableRegistry->setFallbackComponentDescriptor(
std::make_shared<UnimplementedNativeViewComponentDescriptor>(
ComponentDescriptorParameters{
eventDispatcher, contextContainer, nullptr}));
return registry;
};
delegate->buildRegistryFunction = buildRegistryFunction;
return instance;
}
void MainComponentsRegistry::registerNatives() {
registerHybrid({
makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid),
});
}
} // namespace react
} // namespace facebook
#pragma once
#include <ComponentFactory.h>
#include <fbjni/fbjni.h>
#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
#include <react/renderer/componentregistry/ComponentDescriptorRegistry.h>
namespace facebook {
namespace react {
class MainComponentsRegistry
: public facebook::jni::HybridClass<MainComponentsRegistry> {
public:
// Adapt it to the package you used for your Java class.
constexpr static auto kJavaDescriptor =
"Lcom/proyecto/newarchitecture/components/MainComponentsRegistry;";
static void registerNatives();
MainComponentsRegistry(ComponentFactory *delegate);
private:
static std::shared_ptr<ComponentDescriptorProviderRegistry const>
sharedProviderRegistry();
static jni::local_ref<jhybriddata> initHybrid(
jni::alias_ref<jclass>,
ComponentFactory *delegate);
};
} // namespace react
} // namespace facebook
#include <fbjni/fbjni.h>
#include "MainApplicationTurboModuleManagerDelegate.h"
#include "MainComponentsRegistry.h"
JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
return facebook::jni::initialize(vm, [] {
facebook::react::MainApplicationTurboModuleManagerDelegate::
registerNatives();
facebook::react::MainComponentsRegistry::registerNatives();
});
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2014 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
android:insetTop="@dimen/abc_edit_text_inset_top_material"
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
<selector>
<!--
This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
-->
<item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
<item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
</selector>
</inset>
<resources>
<string name="app_name">Proyecto</string>
</resources>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
</style>
</resources>
import org.apache.tools.ant.taskdefs.condition.Os
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "31.0.0"
minSdkVersion = 21
compileSdkVersion = 31
targetSdkVersion = 31
if (System.properties['os.arch'] == "aarch64") {
// For M1 Users we need to use the NDK 24 which added support for aarch64
ndkVersion = "24.0.8215888"
} else {
// Otherwise we default to the side-by-side NDK version from AGP.
ndkVersion = "21.4.7075529"
}
}
repositories {
google()
mavenCentral()
}
dependencies {
classpath("com.android.tools.build:gradle:7.0.4")
classpath("com.facebook.react:react-native-gradle-plugin")
classpath("de.undercouch:gradle-download-task:4.1.2")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
mavenCentral {
// We don't want to fetch react-native from Maven Central as there are
// older versions over there.
content {
excludeGroup "com.facebook.react"
}
}
google()
maven { url 'https://www.jitpack.io' }
}
}
# Project-wide Gradle settings.
# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.
# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html
# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true
# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app's APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true
# Automatically convert third-party libraries to use AndroidX
android.enableJetifier=true
# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.125.0
# Use this property to specify which architecture you want to build.
# You can also override it from the CLI using
# ./gradlew <task> -PreactNativeArchitectures=x86_64
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
# Use this property to enable support to the new architecture.
# This will allow you to use TurboModules and the Fabric render in
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
newArchEnabled=false
No preview for this file type
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
#!/bin/sh
#
# Copyright © 2015-2021 the original authors.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# https://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
##############################################################################
#
# Gradle start up script for POSIX generated by Gradle.
#
# Important for running:
#
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
# noncompliant, but you have some other compliant shell such as ksh or
# bash, then to run this script, type that shell name before the whole
# command line, like:
#
# ksh Gradle
#
# Busybox and similar reduced shells will NOT work, because this script
# requires all of these POSIX shell features:
# * functions;
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
# * compound commands having a testable exit status, especially «case»;
# * various built-in commands including «command», «set», and «ulimit».
#
# Important for patching:
#
# (2) This script targets any POSIX shell, so it avoids extensions provided
# by Bash, Ksh, etc; in particular arrays are avoided.
#
# The "traditional" practice of packing multiple parameters into a
# space-separated string is a well documented source of bugs and security
# problems, so this is (mostly) avoided, by progressively accumulating
# options in "$@", and eventually passing that to Java.
#
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
# see the in-line comments for details.
#
# There are tweaks for specific operating systems such as AIX, CygWin,
# Darwin, MinGW, and NonStop.
#
# (3) This script is generated from the Groovy template
# https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
# within the Gradle project.
#
# You can find Gradle at https://github.com/gradle/gradle/.
#
##############################################################################
# Attempt to set APP_HOME
# Resolve links: $0 may be a link
app_path=$0
# Need this for daisy-chained symlinks.
while
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
[ -h "$app_path" ]
do
ls=$( ls -ld "$app_path" )
link=${ls#*' -> '}
case $link in #(
/*) app_path=$link ;; #(
*) app_path=$APP_HOME$link ;;
esac
done
APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
APP_NAME="Gradle"
APP_BASE_NAME=${0##*/}
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD=maximum
warn () {
echo "$*"
} >&2
die () {
echo
echo "$*"
echo
exit 1
} >&2
# OS specific support (must be 'true' or 'false').
cygwin=false
msys=false
darwin=false
nonstop=false
case "$( uname )" in #(
CYGWIN* ) cygwin=true ;; #(
Darwin* ) darwin=true ;; #(
MSYS* | MINGW* ) msys=true ;; #(
NONSTOP* ) nonstop=true ;;
esac
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM.
if [ -n "$JAVA_HOME" ] ; then
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
# IBM's JDK on AIX uses strange locations for the executables
JAVACMD=$JAVA_HOME/jre/sh/java
else
JAVACMD=$JAVA_HOME/bin/java
fi
if [ ! -x "$JAVACMD" ] ; then
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
else
JAVACMD=java
which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
Please set the JAVA_HOME variable in your environment to match the
location of your Java installation."
fi
# Increase the maximum file descriptors if we can.
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
case $MAX_FD in #(
max*)
MAX_FD=$( ulimit -H -n ) ||
warn "Could not query maximum file descriptor limit"
esac
case $MAX_FD in #(
'' | soft) :;; #(
*)
ulimit -n "$MAX_FD" ||
warn "Could not set maximum file descriptor limit to $MAX_FD"
esac
fi
# Collect all arguments for the java command, stacking in reverse order:
# * args from the command line
# * the main class name
# * -classpath
# * -D...appname settings
# * --module-path (only if needed)
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
# For Cygwin or MSYS, switch paths to Windows format before running java
if "$cygwin" || "$msys" ; then
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
JAVACMD=$( cygpath --unix "$JAVACMD" )
# Now convert the arguments - kludge to limit ourselves to /bin/sh
for arg do
if
case $arg in #(
-*) false ;; # don't mess with options #(
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
[ -e "$t" ] ;; #(
*) false ;;
esac
then
arg=$( cygpath --path --ignore --mixed "$arg" )
fi
# Roll the args list around exactly as many times as the number of
# args, so each arg winds up back in the position where it started, but
# possibly modified.
#
# NB: a `for` loop captures its iteration list before it begins, so
# changing the positional parameters here affects neither the number of
# iterations, nor the values presented in `arg`.
shift # remove old arg
set -- "$@" "$arg" # push replacement arg
done
fi
# Collect all arguments for the java command;
# * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
# shell script including quotes and variable substitutions, so put them in
# double quotes to make sure that they get re-expanded; and
# * put everything else in single quotes, so that it's not re-expanded.
set -- \
"-Dorg.gradle.appname=$APP_BASE_NAME" \
-classpath "$CLASSPATH" \
org.gradle.wrapper.GradleWrapperMain \
"$@"
# Use "xargs" to parse quoted args.
#
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
#
# In Bash we could simply go:
#
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
# set -- "${ARGS[@]}" "$@"
#
# but POSIX shell has neither arrays nor command substitution, so instead we
# post-process each arg (as a line of input to sed) to backslash-escape any
# character that might be a shell metacharacter, then use eval to reverse
# that process (while maintaining the separation between arguments), and wrap
# the whole thing up as a single "set" statement.
#
# This will of course break if any of these variables contains a newline or
# an unmatched quote.
#
eval "set -- $(
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
xargs -n1 |
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
tr '\n' ' '
)" '"$@"'
exec "$JAVACMD" "$@"
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@if "%DEBUG%" == "" @echo off
@rem ##########################################################################
@rem
@rem Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
if "%OS%"=="Windows_NT" setlocal
set DIRNAME=%~dp0
if "%DIRNAME%" == "" set DIRNAME=.
set APP_BASE_NAME=%~n0
set APP_HOME=%DIRNAME%
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
if defined JAVA_HOME goto findJavaFromJavaHome
set JAVA_EXE=java.exe
%JAVA_EXE% -version >NUL 2>&1
if "%ERRORLEVEL%" == "0" goto execute
echo.
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:findJavaFromJavaHome
set JAVA_HOME=%JAVA_HOME:"=%
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
if exist "%JAVA_EXE%" goto execute
echo.
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
echo.
echo Please set the JAVA_HOME variable in your environment to match the
echo location of your Java installation.
goto fail
:execute
@rem Setup the command line
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
:end
@rem End local scope for the variables with windows NT shell
if "%ERRORLEVEL%"=="0" goto mainEnd
:fail
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
rem the _cmd.exe /c_ return code!
if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
exit /b 1
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega
rootProject.name = 'Proyecto'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
includeBuild('../node_modules/react-native-gradle-plugin')
if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
include(":ReactAndroid")
project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
}
{
"name": "Proyecto",
"displayName": "Proyecto"
}
\ No newline at end of file
[
{
"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
{
"1":{
"NombreSala": "Aula de Informática",
"LimiteReservas": "2",
"DiaReserva": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"Horarios": ["08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00"],
"ImagenRecurso": "sala_informatica.jpg",
},
"2":{
"NombreSala": "Pista deportiva derecha",
"LimiteReservas": "2",
"DiaReserva": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"Horarios": ["08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00"],
"ImagenRecurso": "polideportiva_derecha.jpg",
},
"3":{
"NombreSala": "Pista deportiva izquierda",
"LimiteReservas": "2",
"DiaReserva": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"Horarios": ["08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00"],
"ImagenRecurso": "polideportiva_izquierda.jpg",
},
"4":{
"NombreSala": "Aula de Música",
"LimiteReservas": "2",
"DiaReserva": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"Horarios": ["08:30 - 09:30", "09:30 - 10:30", "10:30 - 11:30", "11:30 - 12:30", "12:30 - 13:30", "13:30 - 14:30"],
"ImagenRecurso": "sala_musica.jpg",
}
}
\ 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
[
{
"id": 1,
"usuarioReserva": "dgh00001",
"idInstalacion": "1",
"fecha": "25-01-2023",
"horario": "13:00 - 14:00",
"borrado": "0"
},
{
"id": 2,
"usuarioReserva": "dgh00001",
"idInstalacion": "2",
"fecha": "25-01-2023",
"horario": "12:00 - 13:00",
"borrado": "1"
},
{
"id": 3,
"usuarioReserva": "icl00001",
"idInstalacion": "4",
"fecha": "25-01-2023",
"horario": "13:00 - 14:00",
"borrado": "0"
},
{
"id": 4,
"usuarioReserva": "icl00001",
"idInstalacion": "1",
"fecha": "25-01-2023",
"horario": "12:00 - 13:00",
"borrado": "0"
},
]
\ 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
{
"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"
}
]
},
"listaResMat3": {
"dia": "20",
"mes": "1",
"año": "2023",
"horaInicio": "09:00",
"horaFin": "10:00",
"nombreLista": "Pruebas de velocidad",
"materiales": [
{
"cantidadMaterial": 10,
"material": "Conos"
},
{
"cantidadMaterial": 1,
"material": "Cinta métrica"
},
{
"cantidadMaterial": 7,
"material": "Pelotas de goma"
}
]
}
}
\ No newline at end of file
{
"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": "Balones de baloncesto"
},
{
"cantidadMaterial": 4,
"material": "Balón de fútbol"
}
]
}
}
\ 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": 30,
"material": "Conos"
},
{
"cantidadMaterial": 1,
"material": "Cinta métrica"
},
{
"cantidadMaterial": 3,
"material": "Balones medicinales"
},
{
"cantidadMaterial": 2,
"material": "Pelotas de goma"
},
{
"cantidadMaterial": 2,
"material": "Pelotas de balonmano"
},
{
"cantidadMaterial": 4,
"material": "Balones de baloncesto"
},
{
"cantidadMaterial": 4,
"material": "Balón de fútbol"
}
]
}
}
\ No newline at end of file
{
"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": 30,
"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
{
"dgh00001":{
"Telefono": "677490125",
"Nombre": "David",
"Apellidos":"González Hidalgo",
"Password": "qwerty",
"Correo": "dgh00001@gmail.com",
"ImagenPerfil":"vacio",
"idListaMaterial": ["listaResMat1", "listaResMat2", "listaResMat3"],
"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
{
"dgh00001":{
"Telefono": "677490125",
"Nombre": "David",
"Apellidos": "González Hidalgo",
"Password": "qwerty",
"Correo": "dgh00001@gmail.com",
"ImagenPerfil":"vacio",
"idListaMaterial": ["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
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
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