Laboratoria · gabyh7922 · Jul 30, 2024 · Aug 4, 2024 · Aug 5, 2024 · Aug 5, 2024
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,6 @@
 coverage/
 node_modules/
 .vscode/
-.env
+*.env
+config.js
+package-lock.json
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "babel-jest": "^27.0.1",
     "css": "^3.0.0",
     "eslint": "^8.3.0",
+    "eslint-plugin-import": "^2.29.1",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
     "jest": "^27.0.1",
@@ -35,5 +36,10 @@
     "createdAt": "2024-07-01T22:30:34.915Z",
     "version": "9.1.1",
     "commit": "1843c213affffa12aa456fa8842b6d28f97de2d3"
+  },
+  "dependencies": {
+    "axios": "^1.7.4",
+    "dotenv": "^16.4.5",
+    "openai": "^4.56.0"
   }
-}
+}
diff --git a/src/card.js b/src/card.js
@@ -0,0 +1,30 @@
+import { navigateTo } from '../../router.js';
+
+export const renderCard = (card, full_data = false) => {  //creando la constante para importarla en view.js
+
+  const ul = document.createElement("ul"); //creando el ul
+  ul.classList.add("card"); //agregando la clase card
+  ul.setAttribute("itemscope", ""); // Indicando que es un contenedor de datos
+  ul.setAttribute("itemtype", "https://schema.org/Person"); // Especificando el tipo de datos 
+
+  ul.addEventListener('click', function () {
+    navigateTo('/detail', { id: card['id'] });
+  });
+
+  // revisamos si tiene fecha de la muerte. porque no todos tienen este dato
+  const yearOfDeath = card['facts']['yearOfDeath'] ? card['facts']['yearOfDeath'] : '-';
+  let datos = `
+      <li itemprop="image" class="item"><img src="${card['imageUrl']}" alt="Imagen de ${card['name']}" /></li>
+      <li itemprop="name" class="item">Nombre: ${card['name']}</li>`; //creando tarjeta que contiene informacion, debe ser trabajada en css
+  if (full_data) {
+    datos = datos + `<li itemprop="description" class="item">Descripción: ${card['shortDescription']}</li>
+      <li itemprop="birthDate" class="item">Año de Nacimiento: ${card['facts']['yearOfBirth']}</li>
+      <li itemprop="deathDate" class="item">Fecha de Muerte: ${yearOfDeath}</li>
+      <li itemprop="birthPlace" class="item">Lugar de Nacimiento: ${card['facts']['birthPlace']}</li>
+      <li itemprop="field" class="item">Especialidad: ${card['facts']['mainField']}</li>
+      `;  // si se necesitan todos los datos, se agregan si se pasa el parametro full como true
+  }
+
+  ul.innerHTML = datos; //indicandole al ul que contendra el bloque html de la tarjeta
+  return ul; //retornando div
+}
diff --git a/src/categories.js b/src/categories.js
@@ -0,0 +1,49 @@
+import data from './data/dataset.js'; //importa data
+import { navigateTo } from './router.js';
+
+export function renderCategories(params) {
+
+  const selectBox = document.createElement('select');
+  selectBox.setAttribute('name', 'mainField');
+  selectBox.setAttribute('id', 'mainField');
+  selectBox.setAttribute('data-testid', 'select-filter');
+
+  selectBox.addEventListener('change', function (event) {
+    const selectBoxOrder = document.querySelector('select#orderDir');
+    navigateTo('/', { category: event.target.value, order: selectBoxOrder.value });
+  });
+
+  const uniqueCategories = [];// array que contendra categorias unicas
+
+  // filtrar categorias unicas
+  for (let i = 0; i < data.length; i++) {
+
+    const cardData = data[i];
+    for (const category of cardData['facts']['mainField']) {
+      if (!uniqueCategories.includes(category)) {
+        uniqueCategories.push(category);
+      }
+    }
+  }
+
+  // agregando la primera opcion
+  const defaultOption = document.createElement("option");
+  defaultOption.value = '';
+  defaultOption.text = "- Filtrar por Categoría -";
+  selectBox.add(defaultOption);
+
+  // rellenar el selectBox con opciones de categorias unicas que construimos en arriba
+  for (const uniqueCat of uniqueCategories) {
+    const option = document.createElement("option");
+    option.value = uniqueCat;
+    option.text = uniqueCat;
+
+    if (params.category === uniqueCat) {
+      option.setAttribute('selected', true);
+    }
+
+    selectBox.add(option);
+  }
+
+  return selectBox;
+}
diff --git a/src/data/dataset.js b/src/data/dataset.js
diff --git a/src/imagenes/Captura de Pantalla 2024-08-25 a la(s) 18.51.19.png b/src/imagenes/Captura de Pantalla 2024-08-25 a la(s) 18.51.19.png
diff --git a/src/imagenes/Captura de Pantalla 2024-08-25 a la(s) 19.03.12.png b/src/imagenes/Captura de Pantalla 2024-08-25 a la(s) 19.03.12.png
diff --git a/src/imagenes/imagen1.png b/src/imagenes/imagen1.png
diff --git a/src/imagenes/imagen2.png b/src/imagenes/imagen2.png
diff --git a/src/imagenes/imagen3.png b/src/imagenes/imagen3.png
diff --git a/src/imagenes/imagen4.png b/src/imagenes/imagen4.png
diff --git a/src/imagenes/th.jpeg b/src/imagenes/th.jpeg
diff --git a/thumb.png → src/imagenes/thumb.png b/thumb.png → src/imagenes/thumb.png
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,31 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Dataverse Chat</title>
-    <!--Aquí puedes importar tu archivo de CSS para agregar estilos.-->
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="index.js" type="module"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dataverse Chat</title>
+  <link rel="stylesheet" href="styles/main.css">
+  <!--Aquí puedes importar tu archivo de CSS para agregar estilos.-->
+  <!-- crear carpeta componet colocar todo lo que se vaya a reutilizar tal como renderview para utilizarlo ewn home en carpeta que se llame rendercomponent-->
+</head>
+<body>
+<header>
+  <h1>MUJERES QUE INSPIRAN</h1>
+  <button id="return-home" class="hidden">Volver a principal</button>
+</header>
+
+<main>
+  <div id="root"></div>
+</main>
+
+  <aside id="curious_fact">
+    <h3>Dato curioso:</h3>
+    <h4> Mayor participacion segun su ocupacion calculado en porcentaje es: </h4>
+  </aside>
+  <footer>Creado por : Gaby Hernández</footer>
+  <script src="./index.js" type="module"></script>
+</body>
+
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,19 +1,42 @@
-// En este archivo definirás tus rutas e importarás los componentes que vas a renderizar.
+import Home from './views/home/Home.js';
+import Detail from './views/detail/Detail.js';
+import Error from './views/Error.js';
+import Conference from './views/conference/Conference.js';
 
-/*
-import Example from './views/Example.js';
-
-Ejemplo de definición de rutas:
+// Importa otras vistas según sea necesario
+import { setRootEl, setRoutes, onURLChange } from './router.js';
 
+// Define las rutas y las vistas asociadas
 const routes = {
-    "/": Example,
-    ...
-}
-*/
-
-/*
-TODO:
-1.- Definir rutas en router.
-2.- Pasar "root element" a router.
-3.- Invocar el router para renderizar la vista correcta.
-*/
+  '/': Home,
+  '/detail': Detail,
+  '/error': Error,
+  '/conference': Conference,
+  // Agrega más rutas y vistas aquí
+};
+
+// Configura las rutas
+setRoutes(routes);
+
+// Asigna el elemento raíz donde se renderizarán las vistas
+window.addEventListener("DOMContentLoaded", () => {
+  // Supongamos que tu elemento raíz en el HTML es un div con id 'root'
+  const rootElement = document.getElementById('root');
+  setRootEl(rootElement);
+
+
+
+  // Maneja la carga de la página inicial
+  onURLChange(window.location);
+
+  // Escucha los cambios de URL (navegación)
+  window.onpopstate = () => onURLChange(window.location);
+
+  const getBackHome = document.getElementsByTagName("header")[0];
+  getBackHome.addEventListener('click', function () {
+    document.location.href = "/";
+  });
+
+
+
+});
diff --git a/src/lib/apiKey.js b/src/lib/apiKey.js
@@ -0,0 +1,30 @@
+export const getApiKey = () => {
+  // Obtener la API KEY desde Local Storage
+  try {
+    const api_key = localStorage.getItem('apiKey');
+    if (!api_key) {
+      throw new Error('Api Key not defined!');
+    }
+    return api_key;
+  } catch (error) {
+    const api_key = prompt("Por favor ingresa una Open AI Key");
+
+    // Validar que la clave tiene la longitud correcta
+    if (!api_key || api_key.length <= 160) {
+      alert("Api Key invalida, por favor ingresa una Open AI api key");
+      return null; // Detener la recursión si la clave no es válida
+    }
+
+    setApiKey(api_key);
+    return api_key; // Retornar la clave válida
+  }
+};
+
+export const setApiKey = (key) => {
+  // Guardar la API KEY en Local Storage
+  try {
+    sessionStorage.setItem('apiKey', key);//permite almacenar datos de forma persistente en el navegador.
+  } catch (error) {
+    alert('Error al guardar la API KEY:', error);
+  }
+};
diff --git a/src/lib/datafunctions.js b/src/lib/datafunctions.js
@@ -0,0 +1,49 @@
+export const filterData = (data,value='') => {
+
+  // filtrar tarjetas
+  // Si estamos filtrando por una categoría específica
+  if( value ){
+    return data.filter((cardData)=>cardData['facts']['mainField'].includes(value));
+  }
+  else{
+    // por defecto mostrar todos los datos
+    return data;
+  }
+}
+
+// ORDENAR DATOS
+export const sortData = (data,sortOrder='asc') => {
+
+  // ordenar por nombre
+
+  if( sortOrder === 'desc'){
+    data.sort((a,b)=>b.name.localeCompare(a.name));
+  }
+  else{
+    // ordenar ascendiente por defecto
+    data.sort((a,b)=>a.name.localeCompare(b.name));
+  }
+
+
+  return data;
+}
+
+// STATS
+export const computeStats = (data) => {
+  // Usar reduce para contar las ocurrencias de cada campo
+  const fieldCounts = data.reduce((acc, card) => {
+    card.facts.mainField.forEach(dato => {
+      acc[dato] = (acc[dato] || 0) + 1;
+    });
+    return acc;
+  }, {});
+
+  const totalItems = data.length;
+
+  // Calcular los porcentajes
+  const fieldPercentages = Object.fromEntries(
+    Object.entries(fieldCounts).map(([key, value]) => [key, `${Math.round((value / totalItems) * 100)}%`])
+  );
+
+  return fieldPercentages;
+}
diff --git a/src/router.js b/src/router.js
@@ -0,0 +1,81 @@
+let ROUTES = {};
+let rootEl;
+
+export const setRootEl = (el) => {
+  rootEl = el;
+};
+
+export const setRoutes = (routes) => {
+  if (typeof routes !== 'object') {
+    throw new Error('Routes should be an object.');
+  }
+  if (!routes['/error']) {
+    throw new Error('Routes should define an /error route.');
+  }
+  ROUTES = routes;
+};
+
+const queryStringToObject = (queryString) => {
+  const params = new URLSearchParams(queryString);
+  const queryObject = {};
+  for (const [key, value] of params) {
+    queryObject[key] = value;
+  }
+  return queryObject;
+};
+
+const renderView = (pathname, props = {}) => {
+  if (!rootEl) {
+    throw new Error('Root element is not set.');
+  }
+
+  // Clear the root element
+  rootEl.innerHTML = '';
+
+  // Find the correct view in ROUTES for the pathname
+  const view = ROUTES[pathname] || ROUTES['/error'];
+
+  // Render the correct view passing the value of props
+  const viewEl = view(props);
+
+  // Add the view element to the DOM root element
+  rootEl.appendChild(viewEl);
+};
+
+export const navigateTo = (pathname, props = {}) => {
+  // Update window history with pushState
+  window.history.pushState({}, pathname, window.location.origin + pathname + objectToQueryString(props));
+  // Render the view with the pathname and props
+  renderView(pathname, props);
+};
+
+export const onURLChange = (location) => {
+  const { pathname, search } = location;
+  // Convert the search params to an object
+  const queryObject = queryStringToObject(search);
+  // Render the view with the pathname and query object
+  renderView(pathname, queryObject);
+};
+
+export const objectToQueryString = (props) => {
+  if (Object.keys(props).length !== 0) {
+    let str = '?';
+    for (const i in props) {
+      str += i + '=' + props[i] + '&';
+    }
+
+    if (str.endsWith("&")) {
+      str = str.slice(0, -1);
+    }
+
+    return str;
+  }
+  else {
+    return '';
+  }
+}
+
+// Set up the popstate event listener for back/forward navigation
+window.onpopstate = () => {
+  onURLChange(window.location);
+};