CreacionComponenteFicha

astro.config.mjs

@@ -7,9 +7,9 @@ export default defineConfig({
   site: 'https://enflujo.com',
   base: '/enflujo-haciendocaminos',
   build: {
-    assets: 'estaticos',
+    assets: 'estaticos'
   },
   vite: {
-    ssr: { noExternal: ['@enflujo/alquimia'] },
-  },
+    ssr: { noExternal: ['@enflujo/alquimia'] }
+  }
 });

procesador/procesador.ts

@@ -6,7 +6,7 @@ import type {
   LLavesMultiples,
   Listas,
   LllavesSingulares,
-  Proyecto,
+  Proyecto
 } from '../src/tipos.ts';
 import { getXlsxStream } from 'xlstream';
 import slugificar from 'slug';
@@ -15,7 +15,7 @@ import { guardarJSON, ordenarListaObjetos } from './ayudas.js';
 const datosEmpiezanEnFila = 2;
 const camposSingulares: Campos = [
   { llave: 'tipos', indice: 1 },
-  { llave: 'roles', indice: 5 },
+  { llave: 'roles', indice: 5 }
 ];
 const camposMultiples: Campos = [
   { llave: 'decadas', indice: 3 },
@@ -25,7 +25,7 @@ const camposMultiples: Campos = [
   { llave: 'temas', indice: 8 },
   { llave: 'objetos', indice: 9 },
   { llave: 'regiones', indice: 10 },
-  { llave: 'lugares', indice: 11 },
+  { llave: 'lugares', indice: 11 }
 ];
 const campos = [...camposSingulares, ...camposMultiples];
 
@@ -42,7 +42,7 @@ const listas: Listas = {
   temas: [],
   objetos: [],
   lugares: [],
-  decadas: [],
+  decadas: []
 };
 
 procesar();
@@ -52,7 +52,7 @@ async function procesar() {
     filePath: './procesador/Listado de proyectos - 60 años dpto antropología .xlsx',
     sheet: 'Proyectos',
     withHeader: false,
-    ignoreEmpty: true,
+    ignoreEmpty: true
   });
 
   let numeroFila = 1;
@@ -105,7 +105,7 @@ async function procesar() {
                         conteo: 1,
                         indice: i,
                         tipo: llaveALlenar,
-                        slug,
+                        slug
                       });
                     } else {
                       existe.conteo++;
@@ -169,7 +169,7 @@ async function procesar() {
 function procesarFila(fila: string[]) {
   const nombreProyecto = fila[0].trim();
   const respuesta: Proyecto = {
-    nombre: { nombre: nombreProyecto, slug: slugificar(nombreProyecto) },
+    nombre: { nombre: nombreProyecto, slug: slugificar(nombreProyecto) }
   };
   const años = validarAño(`${fila[2]}`.trim());
   if (años) respuesta.años = años;
@@ -220,7 +220,7 @@ function validarAño(valorAño: string) {
   const añoProcesado: Año = {
     años: [],
     tipo: 'singular',
-    valor: '',
+    valor: ''
   };
 
   if (valorAño.includes(',')) {

src/componentes/Ficha.astro

@@ -0,0 +1,60 @@
+---
+
+---
+
+<section id="contenedorFicha">
+  <button id="cerrar">X</button>
+  <h2 id="tituloFicha"></h2>
+  <div id="conteoFicha"></div>
+  <h3>Regiones</h3>
+  <ul id="listaRegiones"></ul>
+  <h3>Categorías</h3>
+  <ul id="listaTipos"></ul>
+  <h3>Líderes de Proyectos</h3>
+  <ul id="listaLideres"></ul>
+  <h3>Roles</h3>
+  <ul id="listaRoles"></ul>
+  <h3>Participantes</h3>
+  <ul id="listaParticipantes"></ul>
+  <h3>Ramas</h3>
+  <ul id="listaRamas"></ul>
+  <h3>Temas</h3>
+  <ul id="listaTemas"></ul>
+  <h3>Objetos</h3>
+  <ul id="listaObjetos"></ul>
+  <h3>Lugares</h3>
+  <ul id="listaLugares"></ul>
+  <h3>Decadas</h3>
+  <ul id="listaDecadas"></ul>
+</section>
+
+<script>
+  const botonCerrarFicha = document.getElementById('cerrar') as HTMLDivElement;
+  const ficha = document.getElementById('contenedorFicha') as HTMLDivElement;
+
+  botonCerrarFicha.onclick = () => {
+    ficha.style.display = 'none';
+  };
+</script>
+
+<style lang="scss">
+  #contenedorFicha {
+    height: 80vh;
+    width: 50vw;
+    position: absolute;
+    display: none;
+    overflow-y: scroll;
+    left: 50vw;
+    background-color: var(--papelViejo);
+    z-index: 3;
+    padding: 10px;
+    border-radius: 1.5%;
+    border: 3.5px solid var(--colorFuente);
+  }
+
+  #cerrar {
+    position: absolute;
+    left: 45vw;
+    background-color: (--chalecoCafe);
+  }
+</style>

src/pages/index.astro

@@ -4,10 +4,13 @@ import Mapa from '@/componentes/Mapa.astro';
 import Plantilla from '@/plantillas/Plantilla.astro';
 import listas from '../../estaticos/listas.json';
 import LineaTiempo from '@/componentes/LineaTiempo.astro';
+import Ficha from '@/componentes/Ficha.astro';
 ---
 
 <Plantilla>
   <main>
+    <Ficha />
+
     <div id="contenedorListas" class="todoVisible">
       <ListaNodos id="regiones" titulo="Regiones" lista={listas.regiones} />
       <ListaNodos id="tipos" titulo="Categorías" lista={listas.tipos} />
@@ -30,17 +33,56 @@ import LineaTiempo from '@/componentes/LineaTiempo.astro';
 <script>
   const contenedorListas = document.getElementById('contenedorListas') as HTMLDivElement;
   const nodos = document.querySelectorAll<HTMLLIElement>('.nodo');
+  const fichaTitulo = document.getElementById('tituloFicha') as HTMLDivElement;
+  const ficha = document.getElementById('contenedorFicha') as HTMLDivElement;
+  const conteoFicha = document.getElementById('conteoFicha') as HTMLDivElement;
 
   nodos.forEach((nodo) => {
     const nodosConectados: HTMLLIElement[] = [];
     const conexiones = nodo.dataset.con?.split(',');
     const contenedor = nodo.parentElement;
 
+    //listas independedientes de cada tipo de elemento/nodo
+    const nodosRegiones: HTMLLIElement[] = [];
+    const nodosCategorias: HTMLLIElement[] = [];
+    const nodosLideres: HTMLLIElement[] = [];
+    const nodosRoles: HTMLLIElement[] = [];
+    const nodosParticipantes: HTMLLIElement[] = [];
+    const nodosRamas: HTMLLIElement[] = [];
+    const nodosTemas: HTMLLIElement[] = [];
+    const nodosObjetos: HTMLLIElement[] = [];
+    const nodosLugares: HTMLLIElement[] = [];
+    const nodosDecadas: HTMLLIElement[] = [];
+
     if (conexiones) {
       conexiones.forEach((id) => {
         const elemento = document.getElementById(id) as HTMLLIElement;
 
-        if (elemento) nodosConectados.push(elemento);
+        //Guardar elementos en lista correspondiente a categoria.
+        if (elemento) {
+          nodosConectados.push(elemento);
+          if (id.split('_')[0] == 'regiones') {
+            nodosRegiones.push(elemento);
+          } else if (id.split('_')[0] == 'tipos') {
+            nodosCategorias.push(elemento);
+          } else if (id.split('_')[0] == 'lideres') {
+            nodosLideres.push(elemento);
+          } else if (id.split('_')[0] == 'roles') {
+            nodosRoles.push(elemento);
+          } else if (id.split('_')[0] == 'participantes') {
+            nodosParticipantes.push(elemento);
+          } else if (id.split('_')[0] == 'ramas') {
+            nodosRamas.push(elemento);
+          } else if (id.split('_')[0] == 'temas') {
+            nodosTemas.push(elemento);
+          } else if (id.split('_')[0] == 'objetos') {
+            nodosObjetos.push(elemento);
+          } else if (id.split('_')[0] == 'lugares') {
+            nodosLugares.push(elemento);
+          } else if (id.split('_')[0] == 'decadas') {
+            nodosDecadas.push(elemento);
+          }
+        }
       });
     }
 
@@ -61,6 +103,114 @@ import LineaTiempo from '@/componentes/LineaTiempo.astro';
       nodo.classList.remove('visible');
       contenedorListas.classList.add('todoVisible');
     };
+
+    nodo.onclick = () => {
+      const titulo = nodo.querySelector<HTMLTitleElement>('.nombre');
+      fichaTitulo.innerText = titulo ? titulo.innerText : '';
+      const conteo = nodo.querySelector<HTMLSpanElement>('.conteo');
+      conteoFicha.innerText = conteo ? conteo.innerText : '';
+      ficha.style.display = 'block';
+
+      //regiones
+      const ulRegiones = document.getElementById('listaRegiones');
+      ulRegiones!.innerHTML = '';
+      nodosRegiones.forEach((nodo) => {
+        let li = document.createElement('li');
+        const nodoRegion = nodo.querySelector<HTMLTitleElement>('.nombre');
+        li.innerText = nodoRegion ? nodoRegion.innerText : '';
+        ulRegiones?.appendChild(li);
+      });
+
+      //categorias
+      const ulCategorias = document.getElementById('listaTipos');
+      ulCategorias!.innerHTML = '';
+      nodosCategorias.forEach((nodo) => {
+        let li = document.createElement('li');
+        const nodoCategoria = nodo.querySelector<HTMLTitleElement>('.nombre');
+        li.innerText = nodoCategoria ? nodoCategoria.innerText : '';
+        ulCategorias?.appendChild(li);
+      });
+
+      //lideres
+      const ulLideres = document.getElementById('listaLideres');
+      ulLideres!.innerHTML = '';
+      nodosLideres.forEach((nodo) => {
+        let li = document.createElement('li');
+        const nodoLider = nodo.querySelector<HTMLTitleElement>('.nombre');
+        li.innerText = nodoLider ? nodoLider.innerText : '';
+        ulLideres?.appendChild(li);
+      });
+
+      //roles
+      const ulRoles = document.getElementById('listaRoles');
+      ulRoles!.innerHTML = '';
+      nodosRoles.forEach((nodo) => {
+        let li = document.createElement('li');
+        const nodoRol = nodo.querySelector<HTMLTitleElement>('.nombre');
+        li.innerText = nodoRol ? nodoRol.innerText : '';
+        ulRoles?.appendChild(li);
+      });
+
+      //participantes
+      const ulParticipantes = document.getElementById('listaParticipantes');
+      ulParticipantes!.innerHTML = '';
+      nodosParticipantes.forEach((nodo) => {
+        let li = document.createElement('li');
+        const nodoParticipante = nodo.querySelector<HTMLTitleElement>('.nombre');
+        li.innerText = nodoParticipante ? nodoParticipante.innerText : '';
+        ulParticipantes?.appendChild(li);
+      });
+
+      //ramas
+      const ulRamas = document.getElementById('listaRamas');
+      ulRamas!.innerHTML = '';
+      nodosRamas.forEach((nodo) => {
+        let li = document.createElement('li');
+        const nodoRama = nodo.querySelector<HTMLTitleElement>('.nombre');
+        li.innerText = nodoRama ? nodoRama.innerText : '';
+        ulRamas?.appendChild(li);
+      });
+
+      //temas
+      const ulTemas = document.getElementById('listaTemas');
+      ulTemas!.innerHTML = '';
+      nodosTemas.forEach((nodo) => {
+        let li = document.createElement('li');
+        const nodoTema = nodo.querySelector<HTMLTitleElement>('.nombre');
+        li.innerText = nodoTema ? nodoTema.innerText : '';
+        ulTemas?.appendChild(li);
+      });
+
+      //objetos
+      const ulObjetos = document.getElementById('listaObjetos');
+      ulObjetos!.innerHTML = '';
+      nodosObjetos.forEach((nodo) => {
+        let li = document.createElement('li');
+        const nodoObjeto = nodo.querySelector<HTMLTitleElement>('.nombre');
+        li.innerText = nodoObjeto ? nodoObjeto.innerText : '';
+        ulObjetos?.appendChild(li);
+      });
+
+      //lugares
+      const ulLugares = document.getElementById('listaLugares');
+      ulLugares!.innerHTML = '';
+      nodosLugares.forEach((nodo) => {
+        let li = document.createElement('li');
+        const nodoLugar = nodo.querySelector<HTMLTitleElement>('.nombre');
+        li.innerText = nodoLugar ? nodoLugar.innerText : '';
+        ulLugares?.appendChild(li);
+      });
+
+      //decadas
+      const ulDecadas = document.getElementById('listaDecadas');
+      ulDecadas!.innerHTML = '';
+      nodosDecadas.forEach((nodo) => {
+        let li = document.createElement('li');
+        const nodoDecada = nodo.querySelector<HTMLTitleElement>('.nombre');
+        li.innerText = nodoDecada ? nodoDecada.innerText : '';
+        ulDecadas?.appendChild(li);
+      });
+    };
   });
 </script>
 

src/utilidades/lugares.ts

@@ -1,5 +1,5 @@
 // https://www.latlong.net/
 export const coordenadas = {
   Cundinamarca: { lat: 4.7818, lon: -73.970757 },
-  Nariño: { lat: 1.20019, lon: -77.278099 },
+  Nariño: { lat: 1.20019, lon: -77.278099 }
 };