Settings added, color selection operationnal

frontend/src/actions/action-types.js

 export const SAVE_MAIN_MAP_POSITION = 'SAVE_MAIN_MAP_POSITION';
 export const SAVE_SELECTED_UNIVERSITIES = 'SAVE_SELECTED_UNIVERSITIES';
 export const SAVE_FILTER_CONFIG = 'SAVE_FILTER_CONFIG';
+export const SAVE_APP_THEME = 'SAVE_APP_THEME';

frontend/src/actions/theme.js

+
+import {
+    SAVE_APP_THEME
+} from "./action-types";
+
+
+export function saveAppTheme(theme) {
+    return {
+        type: SAVE_APP_THEME,
+        theme
+    };
+
+}

frontend/src/components/App.js

@@ -22,12 +22,12 @@ import MyComponent from './MyComponent'
 
 // import route Components here
 import {
-    Route,
+  Route,
 } from 'react-router-dom';
 
 import {
-    countriesFetchData,
-    currenciesFetchData,
+  countriesFetchData,
+  currenciesFetchData,
 } from '../generated/actions';
 
 
@@ -35,160 +35,160 @@ import PageMap from './pages/PageMap';
 import PageHome from './pages/PageHome';
 import PageFilter from './pages/PageFilter';
 import PageSearch from './pages/PageSearch';
+import PageSettings from './pages/PageSettings';
 
 const drawerWidth = 240;
 
 const styles = theme => ({
-    root: {
-        display: 'flex',
+  root: {
+    display: 'flex',
+  },
+  toolbar: {
+    paddingRight: 24, // keep right padding when drawer closed
+  },
+  toolbarIcon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    padding: '0 8px',
+    ...theme.mixins.toolbar,
+  },
+  chip: {
+    margin: theme.spacing.unit,
+  },
+  menuButton: {
+    marginRight: 4,
+  },
+  hideIt: {
+    display: 'none',
+  },
+  title: {
+    flexGrow: 1,
+  },
+  drawerPaper: {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  drawerPaperClose: {
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    width: theme.spacing.unit * 7,
+    [theme.breakpoints.up('sm')]: {
+      width: theme.spacing.unit * 9,
     },
-    toolbar: {
-        paddingRight: 24, // keep right padding when drawer closed
-    },
-    toolbarIcon: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-        padding: '0 8px',
-        ...theme.mixins.toolbar,
-    },
-    chip: {
-        margin: theme.spacing.unit,
-    },
-    menuButton: {
-        marginRight: 4,
-    },
-    hideIt: {
-        display: 'none',
-    },
-    title: {
-        flexGrow: 1,
-    },
-    drawerPaper: {
-        position: 'relative',
-        whiteSpace: 'nowrap',
-        width: drawerWidth,
-        transition: theme.transitions.create('width', {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.enteringScreen,
-        }),
-    },
-    drawerPaperClose: {
-        overflowX: 'hidden',
-        transition: theme.transitions.create('width', {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen,
-        }),
-        width: theme.spacing.unit * 7,
-        [theme.breakpoints.up('sm')]: {
-            width: theme.spacing.unit * 9,
-        },
-    },
-    content: {
-        flexGrow: 1,
-        padding: theme.spacing.unit * 3,
-        height: '100vh',
-        overflow: 'auto',
-    },
-    chartContainer: {
-        marginLeft: -22,
-    },
-    tableContainer: {
-        height: 320,
-    },
-    myPaper: {
-        padding: 16
-    },
-    null: {}
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing.unit * 3,
+    height: '100vh',
+    overflow: 'auto',
+  },
+  chartContainer: {
+    marginLeft: -22,
+  },
+  tableContainer: {
+    height: 320,
+  },
+  myPaper: {
+    padding: 16
+  },
+  null: {}
 });
 
 class App extends MyComponent {
-    state = {
-        open: true,
-    };
-
-    handleDrawerOpen = () => {
-        this.setState({ open: true });
-    };
-
-    handleDrawerClose = () => {
-        this.setState({ open: false });
-    };
-
-    myRender() {
-
-        const { classes } = this.props;
-
-        return (
-            <React.Fragment>
-                <CssBaseline />
-                <div className={classes.root}>
-                    <Drawer
-                        variant="permanent"
-                        classes={{
-                            paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
-                        }}
-                        open={this.state.open}
-                    >
-                        <div className={classNames(classes.toolbarIcon)}>
-                            <div className={classNames((!this.state.open) && classes.hideIt, classes.null)}>
-                                <Chip
-                                    avatar={<Avatar> <SchoolIcon /> </Avatar>}
-                                    label="Outgoing REX"
-                                    className={classes.chip}
-                                    color="primary"
-                                />
-                            </div>
-                            <IconButton onClick={this.handleDrawerOpen} className={classNames(classes.menuButton,
-                                this.state.open && classes.hideIt)}>
-                                <MenuIcon />
-                            </IconButton>
-                            <IconButton onClick={this.handleDrawerClose} className={classNames(classes.menuButton,
-                                (!this.state.open) && classes.hideIt)}>
-                                <ChevronLeftIcon />
-                            </IconButton>
-                        </div>
-
-                        <Divider />
-
-                        <List>{mainListItems}</List>
-                        <Divider />
-                        <List>{secondaryListItems}</List>
-                    </Drawer>
-
-                    <main className={classes.content}>
-
-                        <Route path="/app/" exact={true} component={PageHome} />
-                        <Route path="/app/search" component={PageSearch} />
-                        <Route path="/app/map" component={PageMap} />
-                        <Route path="/app/filter" component={PageFilter} />
-
-                    </main>
-                </div>
-            </React.Fragment>
-        );
-    }
+  state = {
+    open: true,
+  };
+
+  handleDrawerOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleDrawerClose = () => {
+    this.setState({ open: false });
+  };
+
+  myRender() {
+
+    const { classes } = this.props;
+
+    return (
+      <React.Fragment>
+        <CssBaseline />
+        <div className={classes.root}>
+          <Drawer
+            variant="permanent"
+            classes={{
+              paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
+            }}
+            open={this.state.open}
+          >
+            <div className={classNames(classes.toolbarIcon)}>
+              <div className={classNames((!this.state.open) && classes.hideIt, classes.null)}>
+                <Chip
+                  avatar={<Avatar> <SchoolIcon /> </Avatar>}
+                  label="Outgoing REX"
+                  className={classes.chip}
+                  color="primary"
+                />
+              </div>
+              <IconButton onClick={this.handleDrawerOpen} className={classNames(classes.menuButton,
+                this.state.open && classes.hideIt)}>
+                <MenuIcon />
+              </IconButton>
+              <IconButton onClick={this.handleDrawerClose} className={classNames(classes.menuButton,
+                (!this.state.open) && classes.hideIt)}>
+                <ChevronLeftIcon />
+              </IconButton>
+            </div>
+
+            <Divider />
+
+            <List>{mainListItems}</List>
+            <Divider />
+            <List>{secondaryListItems}</List>
+          </Drawer>
+
+          <main className={classes.content}>
+            <Route path="/app/" exact={true} component={PageHome} />
+            <Route path="/app/search" component={PageSearch} />
+            <Route path="/app/map" component={PageMap} />
+            <Route path="/app/filter" component={PageFilter} />
+            <Route path="/app/settings" component={PageSettings} />
+          </main>
+        </div>
+      </React.Fragment>
+    );
+  }
 }
 
 App.propTypes = {
-    classes: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired,
 };
 
 
 const mapStateToProps = (state) => {
-    return {
-        countries: state.countries,
-        currencies: state.currencies
-    }
+  return {
+    countries: state.countries,
+    currencies: state.currencies
+  }
 };
 
 const mapDispatchToProps = (dispatch) => {
-    return {
-        fetchData: {
-            countries: () => dispatch(countriesFetchData()),
-            currencies: () => dispatch(currenciesFetchData()),
-        }
-    };
+  return {
+    fetchData: {
+      countries: () => dispatch(countriesFetchData()),
+      currencies: () => dispatch(currenciesFetchData()),
+    }
+  };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(App));
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(App));

frontend/src/components/ThemeProvider.js

+
+import React from "react";
+import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
+import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import { connect } from "react-redux";
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+
+
+
+class ThemeProvider extends React.Component {
+
+  render() {
+    console.log("ici")
+    return (
+      <div>
+        <MuiThemeProvider theme={createMuiTheme(this.props.theme)}>
+          <Router>
+            {this.props.children}
+          </Router>
+        </MuiThemeProvider>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    theme: state.app.appTheme
+  };
+};
+
+
+export default connect(mapStateToProps)(ThemeProvider);

frontend/src/components/map/UnivMap.js

@@ -36,13 +36,13 @@ class UnivMap extends MyComponent {
     }
 
     saveLeafletInstance = (l) => {
-        this.setState(Object.assign(this.state, {
+        this.setState(Object.assign({},this.state, {
             leaflet_instance: l,
         }))
     }
 
     saveSelectedLayer = (e) => {
-        this.setState(Object.assign(this.state, {
+        this.setState(Object.assign({},this.state, {
             selected_layer: e.name,
         }))
     }

frontend/src/components/pages/PageSettings.js

+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 Settings from '../settings/Settings';
+import Paper from '@material-ui/core/Paper';
+
+const styles = theme => ({
+  myPaper: {
+    padding: 16
+  }
+});
+
+class PageSettings 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>
+              Paramètres
+            </Typography>
+          </Grid>
+        </Grid>
+        <Settings />
+      </Paper>
+    );
+  }
+}
+
+PageSettings.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(PageSettings);

frontend/src/components/settings/ColorDemo.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Typography from '@material-ui/core/Typography';
+import AddIcon from '@material-ui/icons/Add';
+// import MarkdownElement from '@material-ui/docs/MarkdownElement';
+
+const styles = theme => ({
+  root: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  appFrame: {
+    position: 'relative',
+    height: 390,
+    backgroundColor: theme.palette.background.paper,
+  },
+  statusBar: {
+    width: '100%',
+    height: 24,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  code: {
+    marginTop: theme.spacing.unit,
+    '& pre': {
+      margin: '0px !important',
+    },
+  },
+  fab: {
+    position: 'absolute',
+    bottom: theme.spacing.unit * 2,
+    right: theme.spacing.unit * 2,
+  },
+});
+
+function ColorDemo(props) {
+  const { classes, data, theme } = props;
+  const primary = {
+    main: data.primary,
+    output:
+      data.primaryShade === 4
+        ? `${data.primaryHue}`
+        : `{
+      main: '${data.primary}',
+    }`,
+  };
+  const secondary = {
+    main: data.secondary,
+    output:
+      data.secondaryShade === 11
+        ? `${data.secondaryHue}`
+        : `{
+      main: '${data.secondary}',
+    }`,
+  };
+
+  theme.palette.augmentColor(primary);
+  theme.palette.augmentColor(secondary);
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.appFrame}>
+        <div className={classes.statusBar} style={{ backgroundColor: primary.dark }} />
+        <AppBar position="static" style={{ backgroundColor: primary.main }}>
+          <Toolbar style={{ color: primary.contrastText }}>
+            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="title" color="inherit">
+              Color sample
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        {/* <MarkdownElement
+          dir="ltr"
+          className={classes.code}
+          text={`\`\`\`jsx
+{
+  palette: {
+    primary: ${primary.output},
+    secondary: ${secondary.output},
+  },
+}
+\`\`\``}
+        /> */}
+        <Button variant="fab" className={classes.fab} style={{ backgroundColor: secondary.main }}>
+          <AddIcon nativeColor={secondary.contrastText} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+ColorDemo.propTypes = {
+  classes: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(ColorDemo);
\ No newline at end of file

frontend/src/components/settings/ColorTools.js

+// Taken from https://github.com/mui-org/material-ui/blob/master/docs/src/pages/style/color/ColorTool.js
+// MIT Licence and modified
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import compose from 'recompose/compose';
+import { withStyles } from '@material-ui/core/styles';
+import * as colors from '@material-ui/core/colors';
+import Grid from '@material-ui/core/Grid';
+import Input from '@material-ui/core/Input';
+import Radio from '@material-ui/core/Radio';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import CheckIcon from '@material-ui/icons/Check';
+import Slider from '@material-ui/lab/Slider';
+import { rgbToHex } from '@material-ui/core/styles/colorManipulator';
+import { capitalize } from '@material-ui/core/utils/helpers';
+// import actionTypes from 'docs/src/modules/redux/actionTypes';
+import ColorDemo from './ColorDemo';
+import { saveAppTheme } from '../../actions/theme';
+
+const hues = Object.keys(colors).slice(1, 17);
+const shades = [900, 800, 700, 600, 500, 400, 300, 200, 100, 50, 'A700', 'A400', 'A200', 'A100'];
+
+const styles = theme => ({
+  radio: {
+    width: 48,
+    height: 48,
+  },
+  radioSelected: {
+    width: 48,
+    height: 48,
+    border: '1px solid white',
+    color: theme.palette.common.white,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  swatch: {
+    width: 192,
+  },
+  sliderContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit,
+  },
+  slider: {
+    width: 'calc(100% - 80px)',
+  },
+  colorBar: {
+    marginTop: theme.spacing.unit * 2,
+  },
+  colorSquare: {
+    width: 64,
+    height: 64,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+class ColorTool extends React.Component {
+  state = {
+    primary: '#2196f3',
+    secondary: '#f50057',
+    primaryInput: '#2196f3',
+    secondaryInput: '#f50057',
+    primaryHue: 'blue',
+    secondaryHue: 'pink',
+    primaryShade: 4,
+    secondaryShade: 11,
+  };
+
+  handleChangeColor = name => event => {
+    const isRgb = string => /#?([0-9a-f]{6})/i.test(string);
+
+    const {
+      target: { value: color },
+    } = event;
+
+    this.setState({
+      [`${name}Input`]: color,
+    });
+