${especie.nombre_comun}
${especie.nombre_cientifico}
${especie.estado_conservacion}
${especie.descripcion}
`;
return div;
}
function filtrarEspecies() {
const reino = document.getElementById('reino')?.value || '';
const provincia = document.getElementById('provincia')?.value || '';
const conservacion = document.getElementById('conservacion')?.value || '';
const busqueda = document.getElementById('buscar')?.value.toLowerCase().trim() || '';
especiesFiltradas = datosAplicacion.especies.filter(especie => {
const coincideReino = !reino || especie.reino === reino;
const coincideProvincia = !provincia || extraerProvincia(especie.ubicacion) === provincia;
const coincideConservacion = !conservacion || especie.estado_conservacion === conservacion;
const coincideBusqueda = !busqueda ||
especie.nombre_cientifico.toLowerCase().includes(busqueda) ||
especie.nombre_comun.toLowerCase().includes(busqueda) ||
especie.familia.toLowerCase().includes(busqueda) ||
especie.orden.toLowerCase().includes(busqueda) ||
especie.descripcion.toLowerCase().includes(busqueda);
return coincideReino && coincideProvincia && coincideConservacion && coincideBusqueda;
});
mostrarEspecies(especiesFiltradas);
}
function manejarSubmitObservacion(e) {
e.preventDefault();
// Validar campos requeridos
const camposRequeridos = [
'nombre-cientifico', 'nombre-comun', 'reino-form',
'ubicacion', 'fecha-obs', 'observador'
];
let formularioValido = true;
const errores = [];
camposRequeridos.forEach(campoId => {
const campo = document.getElementById(campoId);
if (!campo || !campo.value.trim()) {
formularioValido = false;
errores.push(`El campo ${campo ? campo.previousElementSibling.textContent : campoId} es requerido`);
}
});
if (!formularioValido) {
mostrarMensajeError('Por favor completa todos los campos requeridos:\n' + errores.join('\n'));
return;
}
const nuevaObservacion = {
id: Date.now(),
nombre_cientifico: document.getElementById('nombre-cientifico').value,
nombre_comun: document.getElementById('nombre-comun').value,
reino: document.getElementById('reino-form').value,
familia: document.getElementById('familia').value || 'No especificada',
orden: document.getElementById('orden').value || 'No especificado',
clase: 'No especificada',
ubicacion: document.getElementById('ubicacion').value,
coordenadas: document.getElementById('coordenadas').value ?
document.getElementById('coordenadas').value.split(',').map(c => parseFloat(c.trim())) :
[0, 0],
fecha: document.getElementById('fecha-obs').value,
observador: document.getElementById('observador').value,
descripcion: document.getElementById('descripcion').value || 'Sin descripción adicional',
estado_conservacion: "Dados Insuficientes",
imagen: "nueva-observacion.jpg"
};
// Agregar a la base de datos simulada
datosAplicacion.especies.push(nuevaObservacion);
especiesFiltradas = [...datosAplicacion.especies];
// Simular guardado exitoso
mostrarMensajeExito('¡Observación enviada exitosamente! Será revisada por la comunidad científica.');
// Agregar al foro
agregarObservacionAlForo(nuevaObservacion);
// Limpiar formulario
e.target.reset();
document.getElementById('fecha-obs').valueAsDate = new Date();
// Actualizar display de especies
mostrarEspecies(especiesFiltradas);
}
function mostrarMensajeExito(mensaje) {
mostrarMensaje(mensaje, 'success');
}
function mostrarMensajeError(mensaje) {
mostrarMensaje(mensaje, 'error');
}
function mostrarMensaje(mensaje, tipo) {
// Crear elemento de mensaje
const div = document.createElement('div');
div.className = `status status--${tipo}`;
div.style.position = 'fixed';
div.style.top = '20px';
div.style.right = '20px';
div.style.zIndex = '1000';
div.style.maxWidth = '400px';
div.style.whiteSpace = 'pre-line';
div.textContent = mensaje;
document.body.appendChild(div);
// Remover después de 5 segundos
setTimeout(() => {
div.remove();
}, 5000);
}
function inicializarForo() {
// Crear observaciones del foro basadas en los datos existentes
observacionesForo = datosAplicacion.especies.map((especie, index) => ({
id: especie.id,
autor: especie.observador,
fecha: especie.fecha,
especie: especie.nombre_comun,
nombre_cientifico: especie.nombre_cientifico,
ubicacion: especie.ubicacion,
descripcion: especie.descripcion,
votos: Math.floor(Math.random() * 20) + 1,
comentarios: Math.floor(Math.random() * 5),
validada: index < 3 // Las primeras 3 están validadas
}));
mostrarForo();
}
function mostrarForo() {
const container = document.getElementById('foro-container');
if (!container) return;
container.innerHTML = '';
// Agregar título de sección
const titulo = document.createElement('div');
titulo.innerHTML = `
Observaciones recientes de la comunidad científica. Puedes votar para validar identificaciones.
`;
container.appendChild(titulo);
// Ordenar por fecha más reciente
const observacionesOrdenadas = [...observacionesForo].sort((a, b) =>
new Date(b.fecha) - new Date(a.fecha)
);
observacionesOrdenadas.forEach(observacion => {
const post = crearPostForo(observacion);
container.appendChild(post);
});
}
function crearPostForo(observacion) {
const div = document.createElement('div');
div.className = 'foro-post card';
const fechaFormateada = formatearFecha(observacion.fecha);
const statusObservacion = observacion.validada ?
'
${observacion.especie} (${observacion.nombre_cientifico} )
Ubicación: ${observacion.ubicacion}
${observacion.descripcion}
👍 ${observacion.votos} votos
💬 ${observacion.comentarios} comentarios
${observacion.validada ? '✅ Validada' : 'Validar identificación'}
`;
return div;
}
function agregarObservacionAlForo(observacion) {
const nuevaObservacionForo = {
id: observacion.id,
autor: observacion.observador,
fecha: observacion.fecha,
especie: observacion.nombre_comun,
nombre_cientifico: observacion.nombre_cientifico,
ubicacion: observacion.ubicacion,
descripcion: observacion.descripcion,
votos: 0,
comentarios: 0,
validada: false
};
observacionesForo.unshift(nuevaObservacionForo);
mostrarForo();
// Scroll al foro
setTimeout(() => {
document.getElementById('foro').scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}, 500);
}
function votarObservacion(id) {
const observacion = observacionesForo.find(obs => obs.id === id);
if (observacion && !observacion.validada) {
observacion.votos++;
mostrarForo();
mostrarMensajeExito(`Has votado por la observación de ${observacion.especie}`);
}
}
function validarIdentificacion(id) {
const observacion = observacionesForo.find(obs => obs.id === id);
if (observacion && !observacion.validada) {
observacion.validada = true;
observacion.votos += 5; // Bonus por validación
mostrarForo();
mostrarMensajeExito(`Has validado la identificación de ${observacion.especie}`);
}
}
function mostrarComentarios(id) {
const observacion = observacionesForo.find(obs => obs.id === id);
if (observacion) {
alert(`Comentarios para ${observacion.especie}:\n\n- Excelente fotografía, muy clara la identificación\n- ¿Podrías compartir más detalles del hábitat?\n- Confirmo la identificación, he visto ejemplares similares en la zona`);
}
}
function mejorarMapaInteractivo() {
const mapaContainer = document.querySelector('.mapa-placeholder');
if (!mapaContainer) return;
// Mejorar el contenido del mapa
mapaContainer.innerHTML = `