Incorporación de pantalla de añadir reservas de instalaciones + modales de error…

Incorporación de pantalla de añadir reservas de instalaciones + modales de error de datos de entrada

AddReservaInstalacion.js

+/**
+ * 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;