Skip to content

Commit

Permalink
Merge pull request #22 from enflujo/mostrar-proyctos
Browse files Browse the repository at this point in the history
😵 Mostrar proyectos
  • Loading branch information
anattolia authored Feb 9, 2024
2 parents 278f2eb + 39cb36d commit c521c26
Show file tree
Hide file tree
Showing 20 changed files with 9,594 additions and 315 deletions.
2 changes: 1 addition & 1 deletion estaticos/listas.json

Large diffs are not rendered by default.

9,178 changes: 9,177 additions & 1 deletion estaticos/proyectos.json

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,23 @@
"astro": "astro",
"lint": "prettier --check .",
"lint:fix": "prettier --write --list-different .",
"datos": "nodemon ./procesador/procesador.ts"
"datos": "nodemon --exec node --loader ts-node/esm ./procesador/procesador.ts"
},
"dependencies": {
"@astrojs/check": "^0.4.1",
"@astrojs/check": "^0.5.2",
"@enflujo/alquimia": "^2.0.0",
"astro": "^4.2.8",
"astro": "^4.3.5",
"mapbox-gl": "^3.1.2",
"nanostores": "^0.9.5",
"typescript": "^5.3.3"
},
"devDependencies": {
"@types/geojson": "^7946.0.14",
"@types/mapbox-gl": "^2.7.20",
"@types/node": "^20.11.13",
"@types/node": "^20.11.17",
"@types/slug": "^5.0.7",
"nodemon": "^3.0.3",
"prettier": "^3.2.4",
"prettier": "^3.2.5",
"sass": "^1.70.0",
"slug": "^8.2.3",
"ts-node": "^10.9.2",
Expand Down
Binary file not shown.
8 changes: 7 additions & 1 deletion procesador/procesador.ts
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@ async function procesar() {
}

proyectos.forEach((proyecto) => {
const id = proyecto.id;

campos.forEach((campoRelacion) => {
const datosRelacion = proyecto[campoRelacion.llave];

Expand Down Expand Up @@ -125,6 +127,10 @@ async function procesar() {
if (elementoALlenar) {
const existe = elementoALlenar.relaciones.find((obj) => obj.slug === slug);

if (!elementoALlenar.proyectos.includes(id)) {
elementoALlenar.proyectos.push(id);
}

if (!existe) {
elementoALlenar.relaciones.push({
conteo: 1,
Expand Down Expand Up @@ -262,7 +268,7 @@ function validarValorSingular(valor: string, lista: ElementoLista[]) {
const existe = lista.find((obj) => obj.slug === slug);

if (!existe) {
lista.push({ nombre, conteo: 1, slug, relaciones: [] });
lista.push({ nombre, conteo: 1, slug, relaciones: [], proyectos: [] });
} else {
existe.conteo++;
}
Expand Down
Binary file not shown.
12 changes: 8 additions & 4 deletions src/componentes/Cabezote.astro
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,13 @@
<span class="lineaMenu"></span>
<span class="lineaMenu"></span>
</div>

<div id="encabezado">
<h1>Haciendo Caminos</h1>
<div id="botonVista">Proyectos</div>
<ul>
<li class="botonVista">Proyectos</li>
<ul class="botonVista">Egresados</ul>
</ul>
</div>
</nav>

Expand All @@ -34,7 +38,7 @@
position: fixed;
top: 0;
width: 100%;
height: 50px;
height: var(--altoMenu);
color: var(--textoClaro);
z-index: 9;
text-transform: uppercase;
Expand Down Expand Up @@ -79,7 +83,7 @@
}

// Botón para cambiar de vista (proyectos / egresados)
#botonVista {
.botonVista {
cursor: pointer;

&:hover {
Expand All @@ -88,7 +92,7 @@
}

#menuListas {
height: 100%;
height: var(--altoMenu);
width: 50px;
background-color: var(--resaltadoVerde);
display: flex;
Expand Down
18 changes: 17 additions & 1 deletion src/componentes/Ficha.astro
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,28 @@
</section>

<script>
const botonCerrarFicha = document.getElementById('cerrarFicha') as HTMLDivElement;
const ficha = document.getElementById('contenedorFicha') as HTMLDivElement;
const lista = document.getElementById('listaFicha') as HTMLTitleElement;
const botonCerrarFicha = document.getElementById('cerrarFicha') as HTMLDivElement;
import { datosFicha } from '@/utilidades/cerebro';

const titulo = document.getElementById('tituloFicha') as HTMLParagraphElement;

botonCerrarFicha.onclick = () => {
ficha.style.display = 'none';
};

datosFicha.subscribe((datos) => {
if (!datos.visible) {
ficha.style.display = 'none';
return;
}

ficha.style.display = 'block';

lista.innerText = datos.lista ? datos.lista : '';
titulo.innerText = datos.titulo ? datos.titulo : '';
});
</script>

<style lang="scss" is:global>
Expand Down
2 changes: 1 addition & 1 deletion src/componentes/Introduccion.astro
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
@media screen and (min-width: $corte3) {
#introduccion {
width: 30vw;
right: 10px;
left: 10px;
padding: 2em 5em;
}
}
Expand Down
47 changes: 27 additions & 20 deletions src/componentes/LineaTiempo.astro
Original file line number Diff line number Diff line change
Expand Up @@ -32,32 +32,39 @@ tiempo.forEach((marca, i) => {
});
---

<div id="contenedorGrafica">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<g id="decadas">
<div id="contenedorLineaTiempo">
<div id="contenedorGrafica">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<g id="decadas">
{
decadas.map((decada, i) => (
<rect x={`${i * anchoDecada}%`} y="0" width={`${anchoDecada}%`} height={`${altoDecada(decada.conteo)}px`} />
))
}

<path d={datosLinea}></path>
</g>
</svg>

<svg id="marcas" width="100%" height="100%">
{
decadas.map((decada, i) => (
<rect x={`${i * anchoDecada}%`} y="0" width={`${anchoDecada}%`} height={`${altoDecada(decada.conteo)}px`} />
tiempo.map((marca) => (
<text style={`transform:translate(${posX(+marca.nombre)}%, ${posY(marca.conteo)}%)`} x="0" y="0">
{marca.nombre}
</text>
))
}

<path d={datosLinea}></path>
</g>
</svg>

<svg id="marcas" width="100%" height="100%">
{
tiempo.map((marca) => (
<text style={`transform:translate(${posX(+marca.nombre)}%, ${posY(marca.conteo)}%)`} x="0" y="0">
{marca.nombre}
</text>
))
}
</svg>
</svg>
</div>
</div>

<style lang="scss">
@import '@/scss/constantes';
#contenedorLineaTiempo {
position: absolute;
bottom: 0;
width: 100vw;
}

#contenedorGrafica {
height: 170px;
position: relative;
Expand Down
1 change: 1 addition & 0 deletions src/componentes/ListaNodos.astro
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const { lista, titulo, id } = Astro.props;
id={`${id}_${i}`}
class="nodo"
data-con={`${elemento.relaciones.map((rel) => `${rel.tipo}_${rel.indice}`)}`}
data-proyectos={elemento.proyectos}
>
<h3 class="nombre">{elemento.nombre}</h3>
<div class="barra">
Expand Down
90 changes: 90 additions & 0 deletions src/componentes/Listas.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
---
import ListaNodos from '@/componentes/ListaNodos.astro';
import listas from '../../estaticos/listas.json';
---

<div id="contenedorListas" class="todoVisible">
<ListaNodos id="regiones" titulo="Regiones" lista={listas.regiones} />
<ListaNodos id="tipos" titulo="Categorías" lista={listas.tipos} />
<ListaNodos id="lideres" titulo="Líderes de Proyectos" lista={listas.lideres} />
<ListaNodos id="roles" titulo="Roles" lista={listas.roles} />
<ListaNodos id="participantes" titulo="Participantes" lista={listas.participantes} />
<ListaNodos id="ramas" titulo="Ramas" lista={listas.ramas} />
<ListaNodos id="temas" titulo="Temas" lista={listas.temas} />
<ListaNodos id="objetos" titulo="Objetos" lista={listas.objetos} />
<ListaNodos id="municipios" titulo="Municipios" lista={listas.municipios} />
<ListaNodos id="decadas" titulo="Decadas" lista={listas.decadas} />
</div>

<script>
const nodos = document.querySelectorAll<HTMLLIElement>('.nodo');
import { datosFicha } from '@/utilidades/cerebro';

nodos.forEach((nodo) => {
const nodosConectados: HTMLLIElement[] = [];
const proyectosConectados: HTMLLIElement[] = [];
const conexiones = nodo.dataset.con?.split(',');
const proyectos = nodo.dataset.proyectos?.split(',');
const contenedor = nodo.parentElement;

if (proyectos) {
proyectos.forEach((idProyecto) => {
const proyecto = document.getElementById(`proyecto_${idProyecto}`) as HTMLLIElement;

if (proyecto) {
proyectosConectados.push(proyecto);
}
});
}

if (conexiones) {
conexiones.forEach((id) => {
const elemento = document.getElementById(id) as HTMLLIElement;

//Guardar elementos en lista correspondiente a categoria.
if (elemento) {
nodosConectados.push(elemento);
}
});
}

nodo.onmouseenter = () => {
nodosConectados.forEach((nodo) => {
nodo.classList.add('visible', 'explotado');
});

proyectosConectados.forEach((nodo) => {
nodo.classList.add('resaltado');
});

contenedor?.classList.add('mantener');
nodo.classList.add('visible');
};

nodo.onmouseleave = () => {
nodosConectados.forEach((nodo) => {
nodo.classList.remove('visible', 'explotado');
});

proyectosConectados.forEach((nodo) => {
nodo.classList.remove('resaltado');
});

contenedor?.classList.remove('mantener');
nodo.classList.remove('visible');
};

nodo.onclick = () => {
const listaElegida = nodo.parentElement;
const titulo = nodo.querySelector<HTMLTitleElement>('.nombre');
const conteo = nodo.querySelector<HTMLSpanElement>('.conteo');

datosFicha.set({
visible: true,
lista: listaElegida ? listaElegida.dataset.lista : '',
titulo: titulo?.innerText,
conteo: conteo ? conteo.innerText : ''
});
};
});
</script>
9 changes: 1 addition & 8 deletions src/componentes/Mapa.astro
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
---
interface Props {
/* max: number;
paises: FeatureCollection;
ubicaciones: FeatureCollection; */
}
---

<div id="contenedorMapa"></div>

<script>
import type { FeatureCollection, Point } from 'geojson';
import mapbox from 'mapbox-gl';
import type { GeoJSONSource } from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
// import iconoImagen from '~/assets/imgs/icono-imagen.svg';

const urlBase = import.meta.env.BASE_URL;
const contenedorMapa = document.getElementById('contenedorMapa') as HTMLDivElement;
Expand Down
50 changes: 50 additions & 0 deletions src/componentes/Proyectos.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
import proyectos from '../../estaticos/proyectos.json';
---

<div id="listaProyectos">
<h2 id="titulo">Proyectos</h2>

<ul>
{
proyectos.map((proyecto) => (
<li id={`proyecto_${proyecto.id}`} class="nodoProyecto" data-id={proyecto.id}>
{proyecto.nombre.nombre}
</li>
))
}
</ul>
</div>

<script>
import { datosProyectos, datosFicha } from '@/utilidades/cerebro';
const nodosProyectos = document.querySelectorAll<HTMLLIElement>('.nodoProyecto');
const conteoFicha = document.getElementById('conteoFicha') as HTMLDivElement;

datosProyectos.subscribe((datos) => {
if (!datos.length) return;

nodosProyectos.forEach((nodoProyecto) => {
// Está muy feito pero por ahora...
// Poner título de proyecto en ficha

nodoProyecto.onclick = () => {
const contenedorTitulo = document.getElementById('contenedorTitulo') as HTMLDivElement;
contenedorTitulo.style.flexBasis = '100%';
conteoFicha.style.display = 'none';

const id = nodoProyecto.dataset.id;
if (!id) return;
const datosProyecto = datos.find((proyecto) => `${proyecto.id}` === id);

if (!datosProyecto) return;

datosFicha.set({
visible: true,
lista: 'Proyecto',
titulo: datosProyecto.nombre.nombre
});
};
});
});
</script>
Loading

0 comments on commit c521c26

Please sign in to comment.