Commit 9c099cdf authored by Florent Chehab's avatar Florent Chehab
Browse files

Merge branch 'university_page' into 'master'

University page

See merge request chehabfl/outgoing_rex!33
parents a065c242 606cb6d7
Pipeline #27072 passed with stages
in 2 minutes and 47 seconds
{
"plugins": {
"autoprefixer": {
"browsers": ["last 2 versions"]
}
}
}
...@@ -3,3 +3,4 @@ export const SAVE_SELECTED_UNIVERSITIES = 'SAVE_SELECTED_UNIVERSITIES'; ...@@ -3,3 +3,4 @@ export const SAVE_SELECTED_UNIVERSITIES = 'SAVE_SELECTED_UNIVERSITIES';
export const SAVE_FILTER_CONFIG = 'SAVE_FILTER_CONFIG'; export const SAVE_FILTER_CONFIG = 'SAVE_FILTER_CONFIG';
export const SAVE_APP_THEME = 'SAVE_APP_THEME'; export const SAVE_APP_THEME = 'SAVE_APP_THEME';
export const SAVE_APP_COLOR_PICKER = 'SAVE_APP_COLOR_PICKER'; export const SAVE_APP_COLOR_PICKER = 'SAVE_APP_COLOR_PICKER';
export const SAVE_UNIVERSITY_BEING_VIEWED = 'SAVE_UNIVERSITY_BEING_VIEWED';
import {
SAVE_UNIVERSITY_BEING_VIEWED
} from "./action-types";
export function saveUniversityBeingViewed(univId) {
return {
type: SAVE_UNIVERSITY_BEING_VIEWED,
univId
};
}
...@@ -14,15 +14,15 @@ import Chip from '@material-ui/core/Chip'; ...@@ -14,15 +14,15 @@ import Chip from '@material-ui/core/Chip';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@material-ui/core/Avatar';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import SchoolIcon from '@material-ui/icons/School'; import SchoolIcon from '@material-ui/icons/School';
import { mainListItems, secondaryListItems } from './template/listItems'; import { mainListItems, secondaryListItems, thirdListItems } from './template/listItems';
import { connect } from "react-redux"; import { connect } from "react-redux";
import MyComponent from './MyComponent' import MyComponent from './MyComponent'
// import route Components here // import route Components here
import { import {
Route, Route,
Redirect
} from 'react-router-dom'; } from 'react-router-dom';
import { import {
...@@ -33,7 +33,7 @@ import { ...@@ -33,7 +33,7 @@ import {
import PageMap from './pages/PageMap'; import PageMap from './pages/PageMap';
import PageHome from './pages/PageHome'; import PageHome from './pages/PageHome';
import PageFilter from './pages/PageFilter'; import PageUniversity from './pages/PageUniversity';
import PageSearch from './pages/PageSearch'; import PageSearch from './pages/PageSearch';
import PageSettings from './pages/PageSettings'; import PageSettings from './pages/PageSettings';
...@@ -90,6 +90,10 @@ const styles = theme => ({ ...@@ -90,6 +90,10 @@ const styles = theme => ({
padding: theme.spacing.unit * 3, padding: theme.spacing.unit * 3,
height: '100vh', height: '100vh',
overflow: 'auto', overflow: 'auto',
paddingTop: "0px"
},
paddingTop: {
paddingTop: "24px"
}, },
chartContainer: { chartContainer: {
marginLeft: -22, marginLeft: -22,
...@@ -156,14 +160,25 @@ class App extends MyComponent { ...@@ -156,14 +160,25 @@ class App extends MyComponent {
<List>{mainListItems}</List> <List>{mainListItems}</List>
<Divider /> <Divider />
<List>{secondaryListItems}</List> <List>{secondaryListItems}</List>
<Divider />
<List>{thirdListItems}</List>
</Drawer> </Drawer>
<main className={classes.content}> <main className={classNames(classes.content, classes.noPaddingTop)}>
<div className={classes.paddingTop}>
<Route path="/app/" exact={true} component={PageHome} /> <Route path="/app/" exact={true} component={PageHome} />
<Route path="/app/search" component={PageSearch} /> <Route path="/app/search" component={PageSearch} />
<Route path="/app/map" component={PageMap} /> <Route path="/app/map" component={PageMap} />
<Route path="/app/filter" component={PageFilter} />
<Route path="/app/settings" component={PageSettings} /> <Route path="/app/settings" component={PageSettings} />
<Route
exact
path="/app/university/"
render={() => (<Redirect to="/app/university/undefined" />)}
/>
</div>
<div >
<Route path="/app/university/:id" component={PageUniversity} />
</div>
</main> </main>
</div> </div>
</React.Fragment> </React.Fragment>
......
...@@ -35,10 +35,10 @@ class MyComponent extends Component { ...@@ -35,10 +35,10 @@ class MyComponent extends Component {
const { props } = this; const { props } = this;
for (let prop_key in props) { for (let prop_key in props) {
let prop = props[prop_key]; let prop = props[prop_key];
if (typeof prop == 'boolean') { // if (typeof prop == 'boolean') {
continue; // continue;
} // }
if (prop && 'fetched' in prop) { if (prop === Object(prop) && 'fetched' in prop) {
out[prop_key] = prop.fetched.data; out[prop_key] = prop.fetched.data;
} }
} }
...@@ -58,10 +58,10 @@ class MyComponent extends Component { ...@@ -58,10 +58,10 @@ class MyComponent extends Component {
const { props } = this; const { props } = this;
for (let el in props) { for (let el in props) {
let prop = props[el]; let prop = props[el];
if (typeof prop == 'boolean') { // if (typeof prop == 'boolean') {
continue; // continue;
} // }
if (prop && val in prop && prop[val]) { if (prop === Object(prop) && val in prop && prop[val]) {
return true; return true;
} }
} }
...@@ -75,7 +75,7 @@ class MyComponent extends Component { ...@@ -75,7 +75,7 @@ class MyComponent extends Component {
if (typeof prop == 'boolean') { if (typeof prop == 'boolean') {
continue; continue;
} }
if (prop && 'fetchHasError' in prop) { if (prop === Object(prop) && 'fetchHasError' in prop) {
if (prop.fetchHasError.status) { if (prop.fetchHasError.status) {
if (prop_key in this.customErrorHandlers) { if (prop_key in this.customErrorHandlers) {
console.log("icicicicici"); console.log("icicicicici");
...@@ -110,7 +110,7 @@ class MyComponent extends Component { ...@@ -110,7 +110,7 @@ class MyComponent extends Component {
if (typeof prop == 'boolean') { if (typeof prop == 'boolean') {
continue; continue;
} }
if (prop && 'fetched' in prop) { if (prop === Object(prop) && 'fetched' in prop) {
if ((!prop.fetched.fetchedAt) || prop.invalidated) { if ((!prop.fetched.fetchedAt) || prop.invalidated) {
if (!prop.isLoading) { if (!prop.isLoading) {
props.fetchData[prop_key](); props.fetchData[prop_key]();
......
...@@ -5,6 +5,7 @@ import createMuiTheme from '@material-ui/core/styles/createMuiTheme'; ...@@ -5,6 +5,7 @@ import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
import { connect } from "react-redux"; import { connect } from "react-redux";
import { BrowserRouter as Router, Route } from 'react-router-dom'; import { BrowserRouter as Router, Route } from 'react-router-dom';
import MyComponent from './MyComponent'; import MyComponent from './MyComponent';
import 'typeface-roboto';
import areSameThemes from '../utils/areSameThemes'; import areSameThemes from '../utils/areSameThemes';
...@@ -43,10 +44,17 @@ class ThemeProvider extends MyComponent { ...@@ -43,10 +44,17 @@ class ThemeProvider extends MyComponent {
} }
} }
myRender() { myRender() {
const font = {typography: {
fontSize: 14,
htmlFontSize: 14
}}
const theme = Object.assign({}, this.state.theme, font)
return ( return (
<div> <div>
<MuiThemeProvider theme={createMuiTheme(this.state.theme)}> <MuiThemeProvider theme={createMuiTheme(theme)}>
<Router> <Router>
{this.props.children} {this.props.children}
</Router> </Router>
......
...@@ -5,6 +5,13 @@ import MyComponent from '../MyComponent' ...@@ -5,6 +5,13 @@ import MyComponent from '../MyComponent'
import { connect } from "react-redux"; import { connect } from "react-redux";
import _ from 'underscore'; import _ from 'underscore';
import { saveSelectedUniversities, saveFilterConfig } from '../../actions/filter'; import { saveSelectedUniversities, saveFilterConfig } from '../../actions/filter';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import { import {
universitiesFetchData, universitiesFetchData,
...@@ -13,25 +20,24 @@ import { ...@@ -13,25 +20,24 @@ import {
countriesFetchData countriesFetchData
} from '../../generated/actions'; } from '../../generated/actions';
const styles = theme => ({
root: {
width: '100%',
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
});
class Filter extends MyComponent { class Filter extends MyComponent {
saveContriesFilterConfig(state) { saveContriesFilterConfig(state) {
this.props.saveConfig({ contriesFilter: state }) this.props.saveConfig({ contriesFilter: state })
} }
// getUnivFromCampus(campus) {
// const { universities } = this.props;
// return universities[campus.univ]
// }
// getCountryFromUniversity(univ) {
// const { countries } = this.props;
// return countries[univ.country]
// }
// getCountryFromCampus(campus) {
// const univ = this.getUnivFromCampus(campus);
// return this.getCountryFromUniversity(univ);
// }
getCountriesWhereThereAreUniversities() { getCountriesWhereThereAreUniversities() {
const { mainCampuses } = this.getAllFetchedData(); const { mainCampuses } = this.getAllFetchedData();
...@@ -62,14 +68,21 @@ class Filter extends MyComponent { ...@@ -62,14 +68,21 @@ class Filter extends MyComponent {
myRender() { myRender() {
const options = _.map(this.getCountriesWhereThereAreUniversities(), const options = _.map(this.getCountriesWhereThereAreUniversities(),
(c) => { return { id: c.iso_alpha2_code, label: c.name } }) (c) => { return { id: c.iso_alpha2_code, label: c.name } })
const { classes } = this.props;
return ( return (
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>Appliquer des filtres</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<DownshiftMultiple <DownshiftMultiple
options={options} options={options}
onChange={(selection) => this.updateSelectedUniversities(selection)} onChange={(selection) => this.updateSelectedUniversities(selection)}
onComponentUnmount={(state) => this.saveContriesFilterConfig(state)} onComponentUnmount={(state) => this.saveContriesFilterConfig(state)}
config={this.props.contriesFilterConfig} config={this.props.contriesFilterConfig}
/> />
</ExpansionPanelDetails>
</ExpansionPanel>
); );
} }
} }
...@@ -100,4 +113,4 @@ const mapDispatchToProps = (dispatch) => { ...@@ -100,4 +113,4 @@ const mapDispatchToProps = (dispatch) => {
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Filter); export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Filter));
...@@ -49,6 +49,7 @@ class UnivMarkers extends MyComponent { ...@@ -49,6 +49,7 @@ class UnivMarkers extends MyComponent {
logo={el.univ_logo} logo={el.univ_logo}
city={el.univ_city} city={el.univ_city}
country={el.univ_country} country={el.univ_country}
univId={el.id}
/> />
</Popup> </Popup>
</Marker> </Marker>
......
...@@ -10,6 +10,7 @@ import Typography from '@material-ui/core/Typography'; ...@@ -10,6 +10,7 @@ import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider'; import Divider from '@material-ui/core/Divider';
import IconAdd from '@material-ui/icons/Add'; import IconAdd from '@material-ui/icons/Add';
import IconClose from '@material-ui/icons/Close'; import IconClose from '@material-ui/icons/Close';
import { Link } from 'react-router-dom';
import MyCardMedia from './MyCardMedia'; import MyCardMedia from './MyCardMedia';
import { withLeaflet } from 'react-leaflet'; import { withLeaflet } from 'react-leaflet';
...@@ -31,7 +32,7 @@ const styles = { ...@@ -31,7 +32,7 @@ const styles = {
class UnivPopupContent extends Component { class UnivPopupContent extends Component {
render() { render() {
const { classes, logo, name, city, country, leaflet } = this.props; const { classes, logo, name, city, country, leaflet, univId } = this.props;
let height = (this.props.logo !== "" ? "140" : "0"); let height = (this.props.logo !== "" ? "140" : "0");
let closeIt = () => leaflet.map.closePopup(); let closeIt = () => leaflet.map.closePopup();
return ( return (
...@@ -55,10 +56,12 @@ class UnivPopupContent extends Component { ...@@ -55,10 +56,12 @@ class UnivPopupContent extends Component {
</CardContent> </CardContent>
</CardActionArea> </CardActionArea>
<CardActions> <CardActions>
<Link to={"/app/university/" + univId} style={{ textDecoration: 'none' }}>
<Button variant="contained" size="small" color="primary"> <Button variant="contained" size="small" color="primary">
< IconAdd /> < IconAdd />
En savoir plus En savoir plus
</Button> </Button>
</Link>
<Button size="small" color="secondary" onClick={() => closeIt()}> <Button size="small" color="secondary" onClick={() => closeIt()}>
< IconClose /> < IconClose />
Fermer Fermer
......
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { lighten, darken } from '@material-ui/core/styles/colorManipulator';
const styles = (theme) => {
const { palette } = theme;
const linkColor = palette.type == 'dark' ? lighten(palette.secondary.main, 0.8) : darken(palette.secondary.main, 0.3);
return {
link: {
color: linkColor,
textDecoration: "none",
borderBottom: "1px dotted"
},
}
}
export default withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<a href={props.href} className={classes.link} target="_blank">
{props.children}
</a>
))
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Filter from '../filter/Filter';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
myPaper: {
padding: 16
}
});
class PageFilter extends React.Component {
render() {
const { classes } = this.props;
return (
<Paper className={classes.myPaper}>
<Grid container spacing={24}>
<Grid item xs={11}>
<Typography variant="display1" gutterBottom>
Filtrer
</Typography>
</Grid>
{/* <Grid item xs={1}>
<UnivMapReloadButton />
</Grid> */}
</Grid>
<Filter />
</Paper>
);
}
}
PageFilter.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(PageFilter);
...@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; ...@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Markdown from '../shared/Markdown';
const styles = theme => ({ const styles = theme => ({
myPaper: { myPaper: {
...@@ -10,15 +11,35 @@ const styles = theme => ({ ...@@ -10,15 +11,35 @@ const styles = theme => ({
} }
}); });
const source = `
Les objectifs de ce service sont :
- 1
- 2
- 3
Âge des données de l'UTC :
| **Feature** | **Support** |
| ------ | ----------- |
| Ancien départs | ✔ |
| Départs possibles | ✔ |
| Informatio sur les universités | ✔ |
[Rendez-vous sur le GitLab de l'UTC !](https://gitlab.utc.fr)
`;
class PageHome extends React.Component { class PageHome extends React.Component {
render() { render() {
const { classes } = this.props; const { classes } = this.props;
return ( return (
<Paper className={classes.myPaper}> <Paper className={classes.myPaper}>
<Typography variant="display1"> <Typography variant="display2">
Accueil du site, coucou :) Bienvenue sur <i>Outgoing REX</i>
</Typography> </Typography>
<Markdown source={source} />
</Paper> </Paper>
); );
......
...@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography'; ...@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
import UnivMap from '../map/UnivMap'; import UnivMap from '../map/UnivMap';
import UnivMapReloadButton from '../map/UnivMapReloadButton'; import UnivMapReloadButton from '../map/UnivMapReloadButton';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Filter from '../filter/Filter';
const styles = theme => ({ const styles = theme => ({
myPaper: { myPaper: {
...@@ -28,6 +29,7 @@ class PageMap extends React.Component { ...@@ -28,6 +29,7 @@ class PageMap extends React.Component {
<UnivMapReloadButton /> <UnivMapReloadButton />
</Grid> </Grid>
</Grid> </Grid>
<Filter />
<UnivMap /> <UnivMap />
</Paper> </Paper>
); );
......
...@@ -5,6 +5,7 @@ import Grid from '@material-ui/core/Grid'; ...@@ -5,6 +5,7 @@ import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Search from '../search/Search'; import Search from '../search/Search';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Filter from '../filter/Filter';
const styles = theme => ({ const styles = theme => ({
myPaper: { myPaper: {
...@@ -23,10 +24,8 @@ class PageSearch extends React.Component { ...@@ -23,10 +24,8 @@ class PageSearch extends React.Component {
Recherche d'une université Recherche d'une université
</Typography> </Typography>
</Grid> </Grid>
{/* <Grid item xs={1}>
<UnivMapReloadButton />
</Grid> */}
</Grid> </Grid>
<Filter />
<Search /> <Search />
</Paper> </Paper>
); );
......
import React from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import MyComponent from '../MyComponent';