Commit cdc41ee3 authored by Nicolas Fripp's avatar Nicolas Fripp
Browse files

mas avances

parent e21f2526
import React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import { array, func } from 'prop-types';
import ImageIcon from '@mui/icons-material/Image';
import styles from './lista.module.scss';
const ListaJugadores = ({ lista, handleClickLista }) => (
<div className={styles.lista}>
<List>
{lista.map((elem) => (
<ListItem
className={styles.listElem}
key={elem.nombre}
onClick={() => handleClickLista(elem.fechaNac)}
>
<ListItemAvatar>
<Avatar sx={{ width: '100px', height: '100px' }}>
{elem.foto ? <img src={elem.foto} alt="" /> : <ImageIcon />}
</Avatar>
</ListItemAvatar>
<ListItemText primary={elem.nombre} secondary={elem.pais} />
</ListItem>
))}
</List>
</div>
);
ListaJugadores.propTypes = {
lista: array,
handleClickLista: func.isRequired,
};
ListaJugadores.defaultProps = {
lista: [],
};
export { ListaJugadores };
.lista {
width: 500px;
height: 500px;
}
.listElem {
margin-top: 3px;
cursor: pointer;
}
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX fo: <http://purl.org/ontology/fo/>
PREFIX foo: <http://filmontology.org/ontology/1.0/>
prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
prefix owl: <http://www.w3.org/2002/07/owl#>
prefix football: <http://www.football.org/ontologies/2021/football#>
prefix fifa: <http://www.football.org/ontologies/2021/fifa#>
......@@ -6,6 +6,8 @@ import SearchIcon from '@mui/icons-material/Search';
import { Grafica } from 'pages/grafica/grafica';
import { ApiService } from 'networking/api-service';
import { API_ROUTES } from 'networking/api-routes';
import { ListaJugadores } from 'common/lista/lista';
import raw from '../../consultas/consultas.txt';
import styles from './comparacion.module.scss';
const data = [
......@@ -55,19 +57,104 @@ const data = [
const Comparacion = () => {
const [nombre, setNombre] = useState('');
const [listaJugadores, setListaJugadores] = useState([]);
const handleChange = (event) => {
setNombre(event.target.value);
};
const handleClickLista = (fechaNac) => {
// query con nombre
setListaJugadores([]);
fetch(raw)
.then((r) => r.text())
.then(async (text) => {
const request = `${text}
SELECT ?jugador ?nombre ?foto ?pais ?temporada ?fechaNac ?valoracion
WHERE {
?nombreProp rdfs:subPropertyOf football:nombre .
?jugador ?nombreProp ?nombre .
?tieneNac rdfs:subPropertyOf football:nacionalidad .
?jugador ?tieneNac ?pais .
?tieneFecha rdfs:subPropertyOf football:fechaNac .
?jugador ?tieneFecha "${fechaNac}"^^xsd:date .
OPTIONAL {
?tieneVal rdfs:subPropertyOf football:valoracion .
?stats ?tieneVal ?valoracion .
?versionJuego rdfs:subPropertyOf football:versionJuego .
?jugador ?versionJuego ?stats .
?tieneFoto rdfs:subPropertyOf football:foto .
?stats ?tieneFoto ?foto .
?anio rdfs:subPropertyOf football:temporada .
?stats ?anio ?temporada .
}
filter(regex(?nombre, "${nombre}", "i"))
}
LIMIT 10
`;
const response = await ApiService.get(API_ROUTES.EXAMPLE, {
query: request,
});
console.log(response.data.results.bindings);
});
};
const handleSearch = () => {
// llamada a la api
console.log(nombre);
fetch(raw)
.then((r) => r.text())
.then(async (text) => {
const request = `${text}
SELECT ?jugador ?nombre ?foto ?pais ?temporada ?fechaNac
WHERE {
?nombreProp rdfs:subPropertyOf football:nombre .
?jugador ?nombreProp ?nombre .
?tieneNac rdfs:subPropertyOf football:nacionalidad .
?jugador ?tieneNac ?pais .
?tieneFecha rdfs:subPropertyOf football:fechaNac .
?jugador ?tieneFecha ?fechaNac .
?versionJuego rdfs:subPropertyOf football:versionJuego .
?jugador ?versionJuego ?stats .
?tieneFoto rdfs:subPropertyOf football:foto .
?stats ?tieneFoto ?foto .
?anio rdfs:subPropertyOf football:temporada .
?stats ?anio ?temporada .
filter(regex(?nombre, "${nombre}", "i"))
}
LIMIT 10
`;
const response = await ApiService.get(API_ROUTES.EXAMPLE, {
query: request,
});
console.log(response.data.results.bindings);
const lista = [];
response.data.results.bindings.forEach((elem) => {
const nuevo = {
nombre: elem.nombre.value,
foto: elem.foto ? elem.foto.value : undefined,
pais: elem.pais.value,
fechaNac: elem.fechaNac.value,
};
// eslint-disable-next-line no-empty
if (lista.find((nu) => nu.nombre === nuevo.nombre)) {
} else { lista.push(nuevo); }
});
setListaJugadores(lista);
});
};
useEffect(async () => {
const body = 'SELECT ?subject ?predicate ?object WHERE { ?subject ?predicate ?object } LIMIT 25';
const response = await ApiService.get(API_ROUTES.EXAMPLE, {
query: body,
});
console.log(response);
});
return (
<>
......@@ -79,10 +166,12 @@ const Comparacion = () => {
<TextField
label="Nombre del jugador"
onChange={handleChange}
value={nombre}
/>
<IconButton type="submit" className={styles.icon} aria-label="search" onClick={handleSearch}>
<SearchIcon />
</IconButton>
<ListaJugadores lista={listaJugadores} handleClickLista={handleClickLista} />
</center>
<div className={styles.content}>
<div className={styles.ficha}>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment