Skip to content

Commit

Permalink
Añadido buscador
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniel Carpio committed Mar 7, 2021
1 parent 0e6fa8e commit 86ae0cb
Show file tree
Hide file tree
Showing 8 changed files with 1,065 additions and 61 deletions.
738 changes: 736 additions & 2 deletions etsii_agenda/package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion etsii_agenda/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "etsii_agenda",
"version": "0.1.0",
"version": "1.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
Expand All @@ -10,6 +10,7 @@
"@types/node": "^12.20.4",
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.1",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
Expand Down
15 changes: 15 additions & 0 deletions etsii_agenda/src/assets/buscador.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.buscador{
.title{
margin-top: 1%;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
margin-bottom: 0;
}
#buscadorListaEventos{
width: 98%;
padding: 0.25% 1%;
font-size: large;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
}
}
2 changes: 0 additions & 2 deletions etsii_agenda/src/components/Main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react';

import Calendar from './mainComponents/Calendar';
import MenuBasicList from './mainComponents/MenuBasicList';
import Pagination from './mainComponents/Pagination'
import EventList from './mainComponents/EventList';

interface IMainProps { }
Expand All @@ -23,7 +22,6 @@ class Main extends React.Component<IMainProps, IMainState>{
<div id="system-message-container"></div>
<div id="icagenda" className="ic-list-view">
<form id="icagenda-list" name="iclist" action="https://www.informatica.us.es/index.php/eventos-pasados" method="get">
<Pagination />
<EventList />
</form>
</div>
Expand Down
27 changes: 27 additions & 0 deletions etsii_agenda/src/components/mainComponents/Buscador.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react';
import '../../assets/buscador.scss';

interface IBuscadorProps {
textSearch: string,
changeTextSearch: (text: string) => void
}
interface IBuscadorState {

}

class Buscador extends React.Component<IBuscadorProps, IBuscadorState>{

public render() {
return (
<div className='buscador'>
<h3 className='title'>Buscador</h3>
<input id='buscadorListaEventos' onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
this.props.changeTextSearch(e.currentTarget.value);
}} value={this.props.textSearch} />
</div>
);
}

}

export default Buscador;
2 changes: 2 additions & 0 deletions etsii_agenda/src/components/mainComponents/Event.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ class Event extends React.Component<IEventProps, IEventState>{
case 'Jornadas': return '#5ecc2b';
case 'Encuentros': return '#086119';
case 'Días no lectivos': return '#9e9e9e';
case 'Charla': return '#2550cc';
case 'Taller': return '#f0580c';
}
}

Expand Down
265 changes: 229 additions & 36 deletions etsii_agenda/src/components/mainComponents/EventList.tsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,241 @@
import React from 'react';

import Event from './Event';
import Event from './Event';
import Buscador from './Buscador';
import Pagination from './Pagination'

interface IEvent {
enlace: string,
titulo: string,
descripcion: string,
descripcionUrl: string,
urlImagen: string,
dia: number,
mes: number,
anno: number,
lugar: string,
tipo: string,
diaFin: number | null,
mesFin: number | null,
annoFin: number | null
}
interface IEventListProps { }
interface IEventListState { }
interface IEventListState {
eventList: Array<IEvent>,
textSearch: string,
pageNumber: number
}

class EventList extends React.Component<IEventListProps, IEventListState>{

constructor(props: IEventListProps) {
super(props);
this.state = {
textSearch: '',
pageNumber: 0,
eventList: [
{
enlace: 'https://www.informatica.us.es/index.php/eventos-pasados/450-jornada-anual-de-la-red-de-catedras-telefonica?date=2021-02-25-00-00',
titulo: 'Jornada Anual de la Red de Cátedras Telefónica',
descripcion: 'El próximo jueves 25 de febrero en formato online.',
descripcionUrl: '',
urlImagen: 'https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_admision.jpg',
dia: 25,
mes: 2,
anno: 2021,
lugar: 'Online',
tipo: 'Jornadas',
diaFin: null,
mesFin: null,
annoFin: null
},
{
enlace: 'https://www.informatica.us.es/index.php/eventos-pasados/449-iv-feria-de-practicas-online?date=2021-02-23-00-00',
titulo: 'Feria ONLINE de prácticas de la ETSII',
descripcion: 'IV Feria de Prácticas ONLINE. La Feria de prácticas de la Escuela de Ingeniería Informática de la Universidad',
descripcionUrl: 'https://www.informatica.us.es/index.php/eventos-pasados/449-iv-feria-de-practicas-online',
urlImagen: 'https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_slide1.jpg',
dia: 23,
mes: 2,
anno: 2021,
lugar: '',
tipo: 'Encuentros',
diaFin: null,
mesFin: null,
annoFin: null
},
{
enlace: 'https://www.informatica.us.es/index.php/eventos-pasados/448-la-etsii-cierra-en-navidad',
titulo: 'La ETSII cierra en Navidad',
descripcion: 'Este año, ante la situación actual de la pandemia, la Escuela permanecerá cerrada en Navidad, desde el',
descripcionUrl: 'https://www.informatica.us.es/index.php/eventos-pasados/448-la-etsii-cierra-en-navidad',
urlImagen: 'https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_navidades2015.png',
dia: 23,
mes: 12,
anno: 2020,
lugar: '',
tipo: 'Días no lectivos',
diaFin: 6,
mesFin: 1,
annoFin: 2021
},
{
enlace: 'https://www.informatica.us.es/index.php/eventos-pasados/447-las-jornadas-innosoftdays-se-celebran-en-la-etsii?date=2020-11-27-00-00',
titulo: 'Las jornadas InnosoftDays se celebran en la ETSII',
descripcion: 'Este año las jornadas se celebrarán los días 24, 26 y 27 de noviembre',
descripcionUrl: '',
urlImagen: 'https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_inno.jpg',
dia: 27,
mes: 11,
anno: 2020,
lugar: 'ETSII',
tipo: 'Jornadas',
diaFin: null,
mesFin: null,
annoFin: null
},
{
enlace: 'https://www.informatica.us.es/index.php/eventos-pasados/447-las-jornadas-innosoftdays-se-celebran-en-la-etsii?date=2020-11-26-00-00',
titulo: 'Las jornadas InnosoftDays se celebran en la ETSII',
descripcion: 'Este año las jornadas se celebrarán los días 24, 26 y 27 de noviembre',
descripcionUrl: '',
urlImagen: 'https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_inno.jpg',
dia: 26,
mes: 11,
anno: 2020,
lugar: 'ETSII',
tipo: 'Jornadas',
diaFin: null,
mesFin: null,
annoFin: null
},
{
enlace: 'https://www.informatica.us.es/index.php/eventos-pasados/446-jornada-de-bienvenida-a-estudiantes-de-nuevo-ingreso-2',
titulo: 'Jornada de bienvenida on-line para estudiantes de nuevo ingreso',
descripcion: 'De 10:00h.a 13:00h. Bienvenida ONLINE',
descripcionUrl: '',
urlImagen: 'https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_portadaetsii.png',
dia: 2,
mes: 10,
anno: 2020,
lugar: 'Online',
tipo: 'Jornadas',
diaFin: null,
mesFin: null,
annoFin: null
},
{
enlace: 'https://www.informatica.us.es/index.php/eventos-pasados/442-reunion-informativa-erasmus-20-22',
titulo: 'Reunión Informativa Erasmus 20-21',
descripcion: 'CANCELADO',
descripcionUrl: '',
urlImagen: 'https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_carr-erasmus-general.png',
dia: 23,
mes: 4,
anno: 2020,
lugar: 'Aula A0.12',
tipo: 'Charla',
diaFin: null,
mesFin: null,
annoFin: null
},
{
enlace: 'https://www.informatica.us.es/index.php/eventos-pasados/435-trabajo-en-equipo-y-habilidades-para-la-comunicacion-3',
titulo: 'Destrezas para la búsqueda de empleo',
descripcion: 'CANCELADO',
descripcionUrl: '',
urlImagen: 'https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_sinergiaweb2.png',
dia: 27,
mes: 3,
anno: 2020,
lugar: 'Aula A2.14',
tipo: 'Taller',
diaFin: null,
mesFin: null,
annoFin: null
}
]
}
}

public changeTextSearch = (text: string) => {
this.setState({
...this.state,
textSearch: text
});
}

public changePageNumber = (number: number) => {
this.setState({
...this.state,
pageNumber: number
});
}

public render() {
return (
<div className="ic-list-events ic-clearfix">
<Event
enlace='https://www.informatica.us.es/index.php/eventos-pasados/450-jornada-anual-de-la-red-de-catedras-telefonica?date=2021-02-25-00-00'
titulo='Jornada Anual de la Red de Cátedras Telefónica' descripcion='El próximo jueves 25 de febrero en formato online.'
descripcionUrl='' urlImagen='https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_admision.jpg'
dia={25} mes={2} anno={2021} lugar='Online' tipo='Jornadas' diaFin={null} mesFin={null} annoFin={null}
/>
<Event
enlace='https://www.informatica.us.es/index.php/eventos-pasados/449-iv-feria-de-practicas-online?date=2021-02-23-00-00'
titulo='Feria ONLINE de prácticas de la ETSII' descripcion='IV Feria de Prácticas ONLINE. La Feria de prácticas de la Escuela de Ingeniería Informática de la Universidad'
descripcionUrl='https://www.informatica.us.es/index.php/eventos-pasados/449-iv-feria-de-practicas-online'
urlImagen='https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_slide1.jpg'
dia={23} mes={2} anno={2021} lugar='' tipo='Encuentros' diaFin={null} mesFin={null} annoFin={null}
/>
<Event
enlace='https://www.informatica.us.es/index.php/eventos-pasados/448-la-etsii-cierra-en-navidad'
titulo='La ETSII cierra en Navidad' descripcion='Este año, ante la situación actual de la pandemia, la Escuela permanecerá cerrada en Navidad, desde el'
descripcionUrl='https://www.informatica.us.es/index.php/eventos-pasados/448-la-etsii-cierra-en-navidad'
urlImagen='https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_navidades2015.png'
dia={23} mes={12} anno={2020} lugar='' tipo='Días no lectivos' diaFin={6} mesFin={1} annoFin={2021}
/>
<Event
enlace='https://www.informatica.us.es/index.php/eventos-pasados/447-las-jornadas-innosoftdays-se-celebran-en-la-etsii?date=2020-11-27-00-00'
titulo='Las jornadas InnosoftDays se celebran en la ETSII' descripcion='Este año las jornadas se celebrarán los días 24, 26 y 27 de noviembre'
descripcionUrl='' urlImagen='https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_inno.jpg'
dia={27} mes={11} anno={2020} lugar='ETSII' tipo='Jornadas' diaFin={null} mesFin={null} annoFin={null}
/>
<Event
enlace='https://www.informatica.us.es/index.php/eventos-pasados/447-las-jornadas-innosoftdays-se-celebran-en-la-etsii?date=2020-11-26-00-00'
titulo='Las jornadas InnosoftDays se celebran en la ETSII' descripcion='Este año las jornadas se celebrarán los días 24, 26 y 27 de noviembre'
descripcionUrl='' urlImagen='https://www.informatica.us.es/images/icagenda/thumbs/themes/ic_medium_w300h300q100_inno.jpg'
dia={26} mes={11} anno={2020} lugar='ETSII' tipo='Jornadas' diaFin={null} mesFin={null} annoFin={null}
/>
</div>
<>
<Pagination pageNumber={this.state.pageNumber} changePageNumber={this.changePageNumber}/>
<Buscador textSearch={this.state.textSearch} changeTextSearch={this.changeTextSearch} />

{ this.state.textSearch === '' ?
<div className="ic-list-events ic-clearfix">
{
this.state.eventList
.slice(5 * this.state.pageNumber, 5 + 5 * this.state.pageNumber)
.map((e, index) =>
<Event
key={index}
enlace={e.enlace}
titulo={e.titulo}
descripcion={e.descripcion}
descripcionUrl={e.descripcionUrl}
urlImagen={e.urlImagen}
dia={e.dia}
mes={e.mes}
anno={e.anno}
lugar={e.lugar}
tipo={e.tipo}
diaFin={e.diaFin}
mesFin={e.mesFin}
annoFin={e.annoFin}
/>
)
}
</div>
:
<div className="ic-list-events ic-clearfix">
{
this.state.eventList
.filter(e =>
e.titulo.toUpperCase().includes(this.state.textSearch.toUpperCase()) ||
e.descripcion.toUpperCase().includes(this.state.textSearch.toUpperCase()) ||
e.tipo.toUpperCase().includes(this.state.textSearch.toUpperCase()) ||
e.lugar.toUpperCase().includes(this.state.textSearch.toUpperCase())
)
.slice(0, 5)
.map((e, index) =>
<Event
key={index}
enlace={e.enlace}
titulo={e.titulo}
descripcion={e.descripcion}
descripcionUrl={e.descripcionUrl}
urlImagen={e.urlImagen}
dia={e.dia}
mes={e.mes}
anno={e.anno}
lugar={e.lugar}
tipo={e.tipo}
diaFin={e.diaFin}
mesFin={e.mesFin}
annoFin={e.annoFin}
/>
)
}
</div>
}
</>
);
}

Expand Down
Loading

0 comments on commit 86ae0cb

Please sign in to comment.