Merge branch 'frontend_color' into 'master'

Frontend color

See merge request chehabfl/outgoing_rex!31

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';
+export const SAVE_APP_COLOR_PICKER = 'SAVE_APP_COLOR_PICKER';

frontend/src/actions/theme.js

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

frontend/src/components/App.js

@@ -35,6 +35,7 @@ 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;
 
@@ -157,12 +158,11 @@ class App extends MyComponent {
           </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>
@@ -191,4 +191,4 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
-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/search/Search.js

@@ -31,7 +31,6 @@ class Search extends MyComponent {
   }
 
   getSuggestions(value) {
-    console.log(value)
     const { universities } = this.getAllFetchedData();
     const filter = fuzzysort.go(value, _.map(universities, (univ) => univ), { keys: ['name', 'acronym'] });
     let out;

frontend/src/components/search/UnivList.js

@@ -46,21 +46,18 @@ class UnivList extends React.Component {
 
 
   handleNext = () => {
-    console.log("next")
     this.setState(prevState => ({
       activeStep: prevState.activeStep + 1,
     }));
   };
 
   handleBack = () => {
-    console.log("back")
     this.setState(prevState => ({
       activeStep: prevState.activeStep - 1,
     }));
   };
 
   handleStepChange = activeStep => {
-    console.log("step change")
     this.setState({ activeStep });
   };
 
@@ -75,7 +72,6 @@ class UnivList extends React.Component {
     }
 
     const maxSteps = Math.ceil(numberOfItems / itemsPerPage);
-    console.log("maxSteps", maxSteps, "numberOfItems", numberOfItems, "itemsPerPage");
     return (
       <div className={classes.root}>
         <SwipeableViews

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: 200,
+    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 } = props;
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.appFrame}>
+        <div className={classes.statusBar} />
+        <AppBar position="static" >
+          <Toolbar >
+            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="title" color="inherit">
+              Color sample
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Button variant="fab" className={classes.fab}  color="secondary" >
+          <AddIcon />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+ColorDemo.propTypes = {
+  classes: 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

+// Inspired by 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, saveAppColorPicker } from '../../actions/theme';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
+
+
+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 = this.props.state
+  componentWillUnmount() {
+    this.props.saveColorPicker(this.state);
+  }
+  componentDidMount() {
+    if (JSON.stringify(this.props.state) != JSON.stringify(this.state)) {
+      this.setState(this.props.state);
+    }
+  }
+
+  handleChangeColor = name => event => {
+    const isRgb = string => /#?([0-9a-f]{6})/i.test(string);
+
+    const {
+      target: { value: color },
+    } = event;
+
+    this.setState({
+      [`${name}Input`]: color,
+    });
+
+    if (isRgb(color)) {
+      this.setState({
+        [name]: color,
+      });
+    }
+  };
+
+  handleChangeHue = name => event => {
+    const {
+      target: { value: hue },
+    } = event;
+
+    this.setState(state => {
+      const color = colors[hue][shades[state[`${name}Shade`]]];
+      return {
+        [`${name}Hue`]: hue,
+        [name]: color,
+        [`${name}Input`]: color,
+      };
+    });
+  };
+
+  handleChangeShade = name => (event, shade) => {
+    this.setState(state => {
+      const color = colors[state[`${name}Hue`]][shades[shade]];
+      return {
+        [`${name}Shade`]: shade,
+        [name]: color,
+        [`${name}Input`]: color,
+      };
+    });
+  };
+
+  handleChangeNightMode() {
+    this.setState({
+      darkModeActivated: !this.state.darkModeActivated
+    })
+  }
+
+  handleChangeDocsColors = () => {
+    this.props.saveTheme(this.getThemeFromState());
+  };
+
+  getThemeFromState() {
+    return {
+      palette: {
+        primary: { main: this.state.primary },
+        secondary: { main: this.state.secondary },
+        type: this.state.darkModeActivated ? 'dark' : 'light'
+      },
+    }
+  }
+
+  render() {
+    const { classes, theme } = this.props;
+    const { primaryShade, secondaryShade } = this.state;
+
+    const colorBar = color => {
+      const background = { main: color };
+      theme.palette.augmentColor(background);
+
+      return (
+        <Grid container className={classes.colorBar}>
+          {['dark', 'main', 'light'].map(key => (
+            <div
+              className={classes.colorSquare}
+              style={{ backgroundColor: background[key] }}
+              key={key}
+            >
+              <Typography
+                variant="caption"
+                style={{ color: theme.palette.getContrastText(background[key]) }}
+              >
+                {rgbToHex(background[key])}
+              </Typography>
+            </div>
+          ))}
+        </Grid>
+      );
+    };
+
+    const colorPicker = intent => {
+      const intentInput = this.state[`${intent}Input`];
+      const intentShade = this.state[`${intent}Shade`];
+      const color = this.state[`${intent}`];
+      const caption = intent == 'primary' ? "Couleur primaire" : "Couleur secondaire";
+      return (
+        <Grid item xs={12} sm={6} md={4}>
+          <Typography gutterBottom variant="title">
+            {caption}
+          </Typography>
+          <Input
+            id={intent}
+            value={intentInput}
+            onChange={this.handleChangeColor(intent)}
+            inputProps={{
+              'aria-label': `${capitalize(intent)} color`,
+            }}
+            fullWidth
+          />
+          <div className={classes.sliderContainer}>
+            <Typography id={`${intent}ShadeSliderLabel`}>Nuance :</Typography>
+            <Slider
+              className={classes.slider}
+              value={intentShade}
+              min={0}
+              max={13}
+              step={1}
+              onChange={this.handleChangeShade(intent)}
+              aria-labelledby={`${intent}ShadeSliderLabel`}
+            />
+            <Typography>{shades[intentShade]}</Typography>
+          </div>
+          <div className={classes.swatch}>
+            {hues.map(hue => {
+              const shade = intent === 'primary' ? shades[primaryShade] : shades[secondaryShade];
+              const backgroundColor = colors[hue][shade];
+
+              return (
+                <Tooltip placement="right" title={hue} key={hue}>
+                  <Radio
+                    color="default"
+                    checked={this.state[intent] === backgroundColor}
+                    onChange={this.handleChangeHue(intent)}
+                    value={hue}
+                    name={intent}
+                    aria-labelledby={`tooltip-${intent}-${hue}`}
+                    icon={<div className={classes.radio} style={{ backgroundColor }} />}
+                    checkedIcon={
+                      <div className={classes.radioSelected} style={{ backgroundColor }}>
+                        <CheckIcon style={{ fontSize: 30 }} />
+                      </div>
+                    }
+                  />
+                </Tooltip>
+              );
+            })}
+          </div>
+          {colorBar(color)}
+        </Grid>
+      );
+    };
+
+    const { currentUiTheme } = this.props;
+    const tmp = {
+      palette: {
+        primary: { main: currentUiTheme.palette.primary.main },
+        secondary: { main: currentUiTheme.palette.secondary.main }
+      }
+    }
+    const hasChanges = JSON.stringify(tmp) != JSON.stringify(this.getThemeFromState());
+    return (
+
+      <Grid container spacing={40} className={classes.root}>
+        <Grid item xs={12}>
+          <FormControlLabel
+            labelPlacement='start'
+            label={this.state.darkModeActivated ? 'Désactiver le mode nuit :' : 'Activer le monde nuit : '}
+            control={
+              <Switch
+                checked={this.state.darkModeActivated}
+                onChange={() => this.handleChangeNightMode()}
+                value="Nimportequoi"
+              />
+            }
+          />
+        </Grid>
+        {colorPicker('primary')}
+        {colorPicker('secondary')}
+        <Grid item xs={12} sm={6} md={4}>
+          <MuiThemeProvider theme={createMuiTheme(this.getThemeFromState())}>
+            <ColorDemo />
+          </MuiThemeProvider >
+        </Grid>
+        <Grid item xs={6}>
+          <Button variant="contained" color="secondary" disabled={!hasChanges} onClick={this.handleChangeDocsColors}>
+            Appliquer à tout le site
+          </Button>
+        </Grid>
+        <Grid item xs={6}>
+
+          <Button variant="contained" color="primary" disabled={true} onClick={console.log("click")}>
+            Sauvegarder
+          </Button>
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+ColorTool.propTypes = {
+  classes: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
+};
+
+
+const mapStateToProps = (state) => {
+  return {
+    currentUiTheme: state.app.appTheme,
+    state: state.app.colorPickerState
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    saveTheme: (theme) => dispatch(saveAppTheme(theme)),
+    saveColorPicker: (partialState) => dispatch(saveAppColorPicker(partialState))
+  };
+};
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(ColorTool));

frontend/src/components/settings/Settings.js

+import React from 'react';
+
+import MyComponent from '../MyComponent'
+import { connect } from "react-redux";
+import _ from 'underscore';
+import ColorTools from './ColorTools';
+// import { saveSelectedUniversities, saveSettingsConfig } from '../../actions/Settings';
+
+// import {
+//   universitiesFetchData,
+//   mainCampusesFetchData,
+//   citiesFetchData,
+//   countriesFetchData
+// } from '../../generated/actions';
+
+class Settings extends MyComponent {
+
+  myRender() {
+
+    return (
+        <ColorTools style={{backgroundColor:"#eeeeee"}}></ColorTools>
+        
+