Commit bf38d5f3 authored by Florent Chehab's avatar Florent Chehab

Univ map pop ups ready !

parent b12a29c8
......@@ -64,6 +64,6 @@
63,"Technical University Of Kosice","Kosice","SK","48.73280395","21.244194264458",,,
64,"Chalmers University Of Technology","Goteborg","SE","57.6896523","11.9766811023544",,,
65,"Lulea University Of Technology","Lulea","SE","65.6170445","22.1370606335398",,,
66,"Ecole Polytechnique Federale De Lausanne","Lausanne","CH","46.5186594","6.566561505148","EPFL","https://www.epfl.ch/","https://upload.wikimedia.org/wikipedia/commons/f/f4/Logo_EPFL.svg"
66,"École Polytechnique Fédérale De Lausanne","Lausanne","CH","46.5186594","6.566561505148","EPFL","https://www.epfl.ch/","https://upload.wikimedia.org/wikipedia/commons/f/f4/Logo_EPFL.svg"
67,"National Chiao Tung University","Hsinchu","TW","24.78676765","120.997244116807",,,
68,"National Taiwan University Of Science And Technology","Taipei","TW","25.01350785","121.541707560048",,,
../../../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css
\ No newline at end of file
../../../node_modules/leaflet.markercluster/dist/MarkerCluster.css
\ No newline at end of file
../../../node_modules/leaflet/dist/images
\ No newline at end of file
../../../node_modules/leaflet/dist/leaflet.js
\ No newline at end of file
../../../node_modules/leaflet.markercluster/dist/leaflet.markercluster.js
\ No newline at end of file
import React, { Component } from 'react';
import CardMedia from '@material-ui/core/CardMedia';
class MyCardMedia extends Component {
render() {
const { title, height, url } = this.props;
if (url == "") {
return (<div/>);
}
return (
<CardMedia
component="img"
height={height}
image={url}
title={title}
/>
);
}
}
export default MyCardMedia;
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
const styles = {
card: {
maxWidth: 345,
},
media: {
// ⚠️ object-fit is not supported by IE11.
objectFit: 'cover',
},
};
function ImgMediaCard(props) {
const { classes } = props;
let height = (props.logo !== "" ? "140" : "0");
return (
<Card className={classes.card}>
<CardActionArea>
<CardMedia
component="img"
className={classes.media}
height={height}
image={props.logo}
title={props.name}
/>
<CardContent>
<Typography gutterBottom variant="headline" component="h2">
{props.name}
</Typography>
<Typography component="p">
{props.city} ~ {props.country}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
ImgMediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ImgMediaCard);
\ No newline at end of file
import React, { Component } from 'react';
import React, { Component, forwardRef } from 'react';
import { connect } from "react-redux";
import { Marker, Popup } from 'react-leaflet';
// import MarkerClusterGroup from 'react-leaflet-markercluster';
import UnivCard from './UnivCard';
import UnivPopupContent from './UnivPopupContent';
import {
universitiesFetchData,
......@@ -12,11 +12,9 @@ import {
} from '../../generated/actions';
import MyComponent from '../MyComponent'
class UnivMarkers extends MyComponent {
myRender() {
let { universities,
mainCampuses,
countries,
......@@ -45,13 +43,13 @@ class UnivMarkers extends MyComponent {
return (
selected_main_campus.map((el) => (
<Marker key={el.id} position={[el.lat, el.lon]}>
<Popup>
<UnivCard
<Popup closeButton={false} >
<UnivPopupContent
name={el.univ_name}
logo={el.univ_logo}
city={el.univ_city}
country={el.univ_country}
></UnivCard>
/>
</Popup>
</Marker>
))
......
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
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 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',
}
};
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>
);
}
}
UnivPopupContent.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withLeaflet(withStyles(styles)(UnivPopupContent));
\ No newline at end of file
/* popup */
.leaflet-popup-content-wrapper {
padding: 0px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 0px 0px;
line-height: 1.4;
}
.leaflet-popup-content p {
margin: 0px 0;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
border: 0px solid #999;
}
\ No newline at end of file
......@@ -14,6 +14,7 @@
{% load static %}
<link rel="stylesheet" href="{% static '/frontend/leaflet-dist/leaflet.css' %}"/>
<link rel="stylesheet" href="{% static '/frontend/custom_leaflet.css' %}"/>
<script src="{% static "/frontend/main.js" %}"></script>
<noscript>Cette application nécessite Javascript... Merci de l'activer ou d'utiliser un navigateur approprié.</noscript>
</html>
\ No newline at end of file
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