Módulo 2 — Importación de elementos en JavaScript (Adaptado a tu API)

1. Importación de datos

En JavaScript es posible importar datos (constantes, variables, objetos o listas) definidos en otros archivos, o bien cargarlos desde archivos JSON externos. Esto permite mantener la información organizada y separada de la lógica del programa.

En este módulo, los ejemplos se adaptan a la estructura real de tu API: recursos humanos, recursos materiales y activaciones.

Ejemplo: Importación desde otro archivo JavaScript

Archivo data/recursos.js:

// data/recursos.js
export const recursosHumanos = [
  {
    id: 1,
    nombreRecurso: 'Laura Gómez',
    tipoRecurso: 'Humano',
    unidad: 'AGRUSAN',
    comunidadAutonoma: 'Madrid',
    provincia: 'Madrid',
    localidad: 'Pozuelo de Alarcón',
    base: 'General Cavalcanti',
    servicioMedicoReferencia: 'Hospital La Paz',
  },
  {
    id: 2,
    nombreRecurso: 'Javier Ruiz',
    tipoRecurso: 'Humano',
    unidad: 'NAS 11',
    comunidadAutonoma: 'Madrid',
    provincia: 'Madrid',
    localidad: 'Pozuelo de Alarcón',
    base: 'General Cavalcanti.',
    servicioMedicoReferencia: 'Hospital Infanta Sofía',
  },
];

export const recursosMateriales = [
  {
    id: 10,
    nombreRecurso: 'ET 117928',
    tipoRecurso: 'Material',
    unidad: 'AGRUSAN',
    comunidadAutonoma: 'Madrid',
    provincia: 'Madrid',
    localidad: 'Pozuelo de Alarcón',
    base: 'General Cavalcanti',
  },
  {
    id: 11,
    nombreRecurso: 'ET 117929',
    tipoRecurso: 'Material',
    unidad: 'AGRUSAN',
    comunidadAutonoma: 'Madrid',
    provincia: 'Madrid',
    localidad: 'Pozuelo de Alarcón',
    base: 'General Cavalcanti',
  },
];

Archivo gestion/mostrarRecursos.js:

// gestion/mostrarRecursos.js
import { recursosHumanos, recursosMateriales } from '../data/recursos.js';

console.log('Listado de recursos humanos:');
recursosHumanos.forEach((r) => {
  console.log(`- ${r.nombreRecurso} (${r.unidad})`);
});

console.log('\nListado de recursos materiales:');
recursosMateriales.forEach((r) => {
  console.log(`- ${r.nombreRecurso} [${r.base}]`);
});

Salida esperada:

Listado de recursos humanos:
- Laura Gómez (AGRUSAN)
- Javier Ruiz (NAS 11)

Listado de recursos materiales:
- ET 117928 [General Cavalcanti]
- ET 117929 [General Cavalcanti]

Ejemplo: Importación desde un archivo JSON usando fetch()

Archivo data/activaciones.json:

[
  {
    "id": 100,
    "recursoId": 1,
    "fechaHoraInicio": "2025-01-05T08:00:00",
    "fechaHoraFin": "2025-01-05T15:00:00",
    "tipoJornada": "COMPLETA",
    "tipoSituacion": "ACTIVIDAD",
    "observaciones": "Servicio programado"
  },
  {
    "id": 101,
    "recursoId": 10,
    "fechaHoraInicio": "2025-01-05T09:30:00",
    "fechaHoraFin": "2025-01-05T12:00:00",
    "tipoJornada": "PARCIAL",
    "tipoSituacion": "NO_OPERATIVO",
    "observaciones": "Revisión mecánica"
  }
]

Archivo gestion/activaciones.js:

// gestion/activaciones.js
async function cargarActivaciones() {
  try {
    const respuesta = await fetch('../data/activaciones.json');

    if (!respuesta.ok) {
      throw new Error(`Error al cargar los datos: ${respuesta.status}`);
    }

    const activaciones = await respuesta.json();

    console.log('Activaciones registradas:');
    activaciones.forEach((a) => {
      console.log(
        `- Activación #${a.id}: recurso ${a.recursoId} ` + `(${a.tipoSituacion}, ${a.tipoJornada})`
      );
    });
  } catch (error) {
    console.error('No se pudieron cargar las activaciones:', error.message);
  }
}

cargarActivaciones();

Salida esperada:

Activaciones registradas:
- Activación #100: recurso 1 (ACTIVIDAD, COMPLETA)
- Activación #101: recurso 10 (NO_OPERATIVO, PARCIAL)

2. Importación de funciones

Ejemplo adaptado a métricas reales: porcentaje de recursos en situación de actividad.

Archivo utils/calculos.js:

// utils/calculos.js
export function calcularPorcentajeActividad(total, enActividad) {
  return ((enActividad / total) * 100).toFixed(1);
}

export function formatearSituacion(situacion) {
  return situacion
    .toLowerCase()
    .replace('_', ' ')
    .replace(/^\w/, (c) => c.toUpperCase());
}

Archivo reportes/actividadRecursos.js:

// reportes/actividadRecursos.js
import { calcularPorcentajeActividad, formatearSituacion } from '../utils/calculos.js';

const totalRecursos = 20;
const recursosActivos = 15;

console.log(
  `Porcentaje de recursos en ACTIVIDAD: ` +
    `${calcularPorcentajeActividad(totalRecursos, recursosActivos)}%`
);

console.log(`Situación formateada: ${formatearSituacion('BAJA_MEDICA')}`);

Salida esperada:

Porcentaje de recursos en ACTIVIDAD: 75.0%
Situación formateada: Baja medica

3. Importación de clases

Aquí adaptamos el ejemplo a tu modelo real: Recurso es abstracto, así que podemos crear una clase RecursoHumanoJS que emula la estructura de tu API en front.

Archivo models/RecursoHumano.js:

// models/RecursoHumano.js
export class RecursoHumano {
  constructor(id, nombreRecurso, unidad, tipoSituacion) {
    this.id = id;
    this.nombreRecurso = nombreRecurso;
    this.unidad = unidad;
    this.tipoRecurso = 'Humano';
    this.tipoSituacion = tipoSituacion;
  }

  mostrarFicha() {
    console.log(
      `Recurso Humano #${this.id}: ${this.nombreRecurso} ` +
        `- Unidad: ${this.unidad} (${this.tipoSituacion})`
    );
  }
}

Archivo gestion/personal.js:

// gestion/personal.js
import { RecursoHumano } from '../models/RecursoHumano.js';

const tecnico = new RecursoHumano(1, 'Laura Gómez', 'AGRUSAN', 'ACTIVIDAD');
const medico = new RecursoHumano(2, 'Javier Ruiz', 'NAS 11', 'COMISION_SERVICIO');

tecnico.mostrarFicha();
medico.mostrarFicha();

Salida esperada:

Recurso Humano #1: Laura Gómez - Unidad: AGRUSAN (ACTIVIDAD)
Recurso Humano #2: Javier Ruiz - Unidad: NAS 11 (COMISION_SERVICIO)

4. Buenas prácticas

• Usar rutas relativas (./ o ../) para importar módulos locales.
• Incluir siempre la extensión .js en los módulos.
• Organizar el proyecto en carpetas como /data, /utils y /models.
• Usar export default cuando el módulo exporta un único elemento.

Ejemplo adaptado al dominio:

// utils/logger.js
export default function log(mensaje) {
  console.log(`[Sistema Recursos]: ${mensaje}`);
}

// main.js
import log from './utils/logger.js';

log('Sistema de activaciones inicializado.');