Commit 557fe751 authored by Florent Chehab's avatar Florent Chehab

University page added, other components updated to redirect correctly

parent a065c242
Pipeline #26976 passed with stages
in 2 minutes and 46 seconds
......@@ -33,6 +33,7 @@ import {
import PageMap from './pages/PageMap';
import PageHome from './pages/PageHome';
import PageUniversity from './pages/PageUniversity';
import PageFilter from './pages/PageFilter';
import PageSearch from './pages/PageSearch';
import PageSettings from './pages/PageSettings';
......@@ -162,6 +163,7 @@ class App extends MyComponent {
<Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/search" component={PageSearch} />
<Route path="/app/map" component={PageMap} />
<Route path="/app/university/:id" component={PageUniversity} />
<Route path="/app/filter" component={PageFilter} />
<Route path="/app/settings" component={PageSettings} />
</main>
......
......@@ -49,6 +49,7 @@ class UnivMarkers extends MyComponent {
logo={el.univ_logo}
city={el.univ_city}
country={el.univ_country}
univId={el.id}
/>
</Popup>
</Marker>
......
......@@ -10,67 +10,70 @@ import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconAdd from '@material-ui/icons/Add';
import IconClose from '@material-ui/icons/Close';
import { Link } from 'react-router-dom';
import MyCardMedia from './MyCardMedia';
import { withLeaflet } from 'react-leaflet';
const styles = {
card: {
maxWidth: 345,
},
media: {
// ⚠️ object-fit is not supported by IE11.
objectFit: 'cover',
},
hide: {
display: 'none',
}
card: {
maxWidth: 345,
},
media: {
// ⚠️ object-fit is not supported by IE11.
objectFit: 'cover',
},
hide: {
display: 'none',
}
};
class UnivPopupContent extends Component {
render() {
const { classes, logo, name, city, country, leaflet } = this.props;
let height = (this.props.logo !== "" ? "140" : "0");
let closeIt = () => leaflet.map.closePopup();
return (
<Card className={classes.card}>
<CardActionArea>
<MyCardMedia
className={classes.media}
height={height}
url={logo}
title={name}
/>
<Divider />
<CardContent>
<Typography variant="subheading">
{city}, {country}
</Typography>
<Divider />
<Typography gutterBottom variant="headline">
{name}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button variant="contained" size="small" color="primary">
< IconAdd />
En savoir plus
</Button>
<Button size="small" color="secondary" onClick={() => closeIt()}>
< IconClose />
Fermer
</Button>
</CardActions>
</Card>
);
}
render() {
const { classes, logo, name, city, country, leaflet, univId } = this.props;
let height = (this.props.logo !== "" ? "140" : "0");
let closeIt = () => leaflet.map.closePopup();
return (
<Card className={classes.card}>
<CardActionArea>
<MyCardMedia
className={classes.media}
height={height}
url={logo}
title={name}
/>
<Divider />
<CardContent>
<Typography variant="subheading">
{city}, {country}
</Typography>
<Divider />
<Typography gutterBottom variant="headline">
{name}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Link to={"/app/university/" + univId}>
<Button variant="contained" size="small" color="primary">
< IconAdd />
En savoir plus
</Button>
</Link>
<Button size="small" color="secondary" onClick={() => closeIt()}>
< IconClose />
Fermer
</Button>
</CardActions>
</Card>
);
}
}
UnivPopupContent.propTypes = {
classes: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
};
export default withLeaflet(withStyles(styles)(UnivPopupContent));
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
myPaper: {
padding: 16
}
});
class PageUniversity extends React.Component {
render() {
const { classes, match } = this.props;
return (
<Paper className={classes.myPaper}>
<Typography variant="display1">
Université {match.params.id}
</Typography>
</Paper>
);
}
}
PageUniversity.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(PageUniversity);
......@@ -2,11 +2,8 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MobileStepper from '@material-ui/core/MobileStepper';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import _ from 'underscore';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';
......@@ -14,6 +11,7 @@ import Button from '@material-ui/core/Button';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import SwipeableViews from 'react-swipeable-views';
import { Link } from 'react-router-dom';
const styles = theme => ({
......@@ -87,9 +85,11 @@ class UnivList extends React.Component {
<Divider />
{_.map(_.range((page) * itemsPerPage, Math.min((page + 1) * itemsPerPage, numberOfItems)),
univ_ind => (
<ListItem button divider={true} key={univ_ind}>
<ListItemText primary={universitiesToList[univ_ind].name} />
</ListItem>
<Link to={'/app/university/'+universitiesToList[univ_ind].id}>
<ListItem button divider={true} key={univ_ind}>
<ListItemText primary={universitiesToList[univ_ind].name} />
</ListItem>
</Link>
))
}
</List>
......
......@@ -53,13 +53,15 @@ export const mainListItems = (
</ListItem>
</NavLink>
<NavLink to={'/app/university/undefined'}>
<ListItem button>
<ListItemIcon>
<LocationCityIcon />
</ListItemIcon>
<ListItemText primary="Université" />
</ListItem>
</NavLink>
<NavLink to={'/app/settings/'}>
<ListItem button>
<ListItemIcon>
......
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