Añadir plantilla

Base para front

3 files changed, 407 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Pages/Settings/DetailSettings.js b/front/odiparpack/app/containers/Pages/Settings/DetailSettings.js
new file mode 100644
index 0000000..25bad64
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Settings/DetailSettings.js
@@ -0,0 +1,203 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import classNames from 'classnames';
+import SettingsIcon from '@material-ui/icons/SettingsApplications';
+import CloseIcon from '@material-ui/icons/Close';
+import { withStyles } from '@material-ui/core/styles';
+import {
+  AppBar,
+  Grid,
+  Dialog,
+  Toolbar,
+  ListItemText,
+  ListItem,
+  List,
+  ListItemSecondaryAction,
+  Divider,
+  IconButton,
+  Typography,
+  Button,
+  Switch,
+  Slide,
+  InputLabel,
+  MenuItem,
+  FormControl,
+  Select,
+  Checkbox,
+  TextField,
+} from '@material-ui/core';
+import styles from './settings-jss';
+
+
+const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+class DetailSettings extends React.Component {
+  state = {
+    checked: ['switch', 'check2'],
+    option: '',
+  };
+
+  handleToggle = value => () => {
+    const { checked } = this.state;
+    const currentIndex = checked.indexOf(value);
+    const newChecked = [...checked];
+
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+
+    this.setState({
+      checked: newChecked,
+    });
+  };
+
+  handleChange = name => event => {
+    this.setState({
+      [name]: event.target.value,
+    });
+  };
+
+  handleChangeSelection = event => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  render() {
+    const { classes, open, handleClose } = this.props;
+    return (
+      <Dialog
+        fullScreen
+        open={open}
+        onClose={handleClose}
+        TransitionComponent={Transition}
+      >
+        <AppBar className={classes.appBar}>
+          <Toolbar>
+            <IconButton color="inherit" onClick={handleClose} aria-label="Close">
+              <CloseIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" className={classes.flex}>
+              Setting
+            </Typography>
+            <Button color="inherit" onClick={handleClose}>
+              done
+            </Button>
+          </Toolbar>
+        </AppBar>
+        <Grid container justify="center">
+          <Grid item md={8} xs={12}>
+            <List>
+              <ListItem>
+                <ListItemText primary="Switch input" secondary="Odio ac imperdiet luctus" />
+                <ListItemSecondaryAction>
+                  <Switch
+                    onChange={this.handleToggle('switch')}
+                    checked={this.state.checked.indexOf('switch') !== -1}
+                  />
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
+              <ListItem>
+                <ListItemText primary="Another switch input" secondary="Lorem Ipsum" />
+                <ListItemSecondaryAction>
+                  <Switch
+                    onChange={this.handleToggle('switch2')}
+                    checked={this.state.checked.indexOf('switch2') !== -1}
+                  />
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
+              <ListItem>
+                <ListItemText primary="Checkbox input" secondary="Dolor sit amet" />
+                <ListItemSecondaryAction>
+                  <Checkbox
+                    onChange={this.handleToggle('check')}
+                    checked={this.state.checked.indexOf('check') !== -1}
+                  />
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
+              <ListItem>
+                <ListItemText primary="Another checkbox input" secondary="Donec dignissim" />
+                <ListItemSecondaryAction>
+                  <Checkbox
+                    onChange={this.handleToggle('check2')}
+                    checked={this.state.checked.indexOf('check2') !== -1}
+                  />
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
+              <ListItem>
+                <ListItemText primary="Selection field" secondary="Nam posuere accumsan porta" />
+                <ListItemSecondaryAction>
+                  <FormControl className={classes.formControl}>
+                    <InputLabel htmlFor="age-simple">Option</InputLabel>
+                    <Select
+                      value={this.state.option}
+                      onChange={this.handleChangeSelection}
+                      inputProps={{
+                        name: 'option',
+                        id: 'opt-simple',
+                      }}
+                    >
+                      <MenuItem value="">
+                        <em>None</em>
+                      </MenuItem>
+                      <MenuItem value={10}>Option Ten</MenuItem>
+                      <MenuItem value={20}>Option Twenty</MenuItem>
+                      <MenuItem value={30}>Option Thirty</MenuItem>
+                    </Select>
+                  </FormControl>
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
+              <ListItem>
+                <ListItemText primary="Input text" secondary="Donec dignissim, odio ac imperdiet luctus" />
+                <ListItemSecondaryAction>
+                  <TextField
+                    id="name"
+                    label="Name"
+                    className={classes.textField}
+                    value={this.state.name}
+                    onChange={this.handleChange('name')}
+                    margin="normal"
+                  />
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
+              <ListItem>
+                <ListItemText primary="Input text" secondary="Donec dignissim, odio ac imperdiet luctus" />
+                <ListItemSecondaryAction>
+                  <Button variant="outlined" size="small" color="secondary" className={classes.button}>
+                    Action Button
+                  </Button>
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
+              <ListItem>
+                <ListItemText primary="Input text" secondary="Donec dignissim, odio ac imperdiet luctus" />
+                <ListItemSecondaryAction>
+                  <Button variant="outlined" size="small" color="secondary">
+                    <SettingsIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
+                    Action Button Icon
+                  </Button>
+                </ListItemSecondaryAction>
+              </ListItem>
+            </List>
+          </Grid>
+        </Grid>
+      </Dialog>
+    );
+  }
+}
+
+DetailSettings.propTypes = {
+  classes: PropTypes.object.isRequired,
+  open: PropTypes.bool.isRequired,
+  handleClose: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(DetailSettings);
diff --git a/front/odiparpack/app/containers/Pages/Settings/index.js b/front/odiparpack/app/containers/Pages/Settings/index.js
new file mode 100644
index 0000000..2ab94d2
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Settings/index.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import SearchIcon from '@material-ui/icons/Search';
+import SettingsIcon from '@material-ui/icons/SettingsApplications';
+import { withStyles } from '@material-ui/core/styles';
+import settingList from 'ba-api/settingList';
+import { AppBar, Grid, Toolbar, Typography, Button, Icon } from '@material-ui/core';
+import DetailSettings from './DetailSettings';
+import styles from './settings-jss';
+
+
+class Settings extends React.Component {
+  state = {
+    open: false,
+    checked: ['switch', 'check2'],
+    keyword: ''
+  };
+
+  handleToggle = value => () => {
+    const { checked } = this.state;
+    const currentIndex = checked.indexOf(value);
+    const newChecked = [...checked];
+
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+
+    this.setState({
+      checked: newChecked,
+    });
+  };
+
+  handleChange = name => event => {
+    this.setState({
+      [name]: event.target.value,
+    });
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  handleSearch = event => {
+    this.setState({ keyword: event.target.value.toLowerCase() });
+  }
+
+  render() {
+    const title = brand.name;
+    const description = brand.desc;
+    const { classes } = this.props;
+    const { keyword } = this.state;
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <Typography variant="h5" className={classes.title}>
+          <SettingsIcon className={classes.iconTitle} />
+          Appication Settings
+        </Typography>
+        <AppBar position="static" color="inherit" className={classes.searchSettings}>
+          <Toolbar>
+            <div className={classes.flex}>
+              <div className={classes.wrapper}>
+                <div className={classes.search}>
+                  <SearchIcon />
+                </div>
+                <input className={classes.input} placeholder="Find a setting" onChange={(event) => this.handleSearch(event)} />
+              </div>
+            </div>
+          </Toolbar>
+        </AppBar>
+        <section className={classes.settingList}>
+          <Grid container spacing={2}>
+            {settingList.map(menu => {
+              const rawKey = menu.name + menu.caption;
+              if (rawKey.toLowerCase().indexOf(keyword) === -1) {
+                return false;
+              }
+              return (
+                <Grid item md={3} sm={4} xs={12} key={menu.name}>
+                  <Button variant="outlined" onClick={this.handleClickOpen} color="secondary" className={classes.button}>
+                    <Icon className={classes.icon}>{menu.icon}</Icon>
+                    {menu.name}
+                    <Typography variant="caption" noWrap className={classes.info}>
+                      {menu.caption}
+                    </Typography>
+                  </Button>
+                </Grid>
+              );
+            })}
+          </Grid>
+        </section>
+        <DetailSettings open={this.state.open} handleClose={this.handleClose} />
+      </div>
+    );
+  }
+}
+
+Settings.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Settings);
diff --git a/front/odiparpack/app/containers/Pages/Settings/settings-jss.js b/front/odiparpack/app/containers/Pages/Settings/settings-jss.js
new file mode 100644
index 0000000..5424d4e
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Settings/settings-jss.js
@@ -0,0 +1,87 @@
+const styles = theme => ({
+  appBar: {
+    position: 'relative',
+  },
+  flex: {
+    flex: 1,
+  },
+  title: {
+    display: 'block',
+    margin: `${theme.spacing(3)}px 0`,
+    color: theme.palette.common.white,
+  },
+  searchSettings: {
+    marginBottom: theme.spacing(4),
+  },
+  wrapper: {
+    fontFamily: theme.typography.fontFamily,
+    position: 'relative',
+    marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(1),
+    borderRadius: 2,
+    display: 'block',
+  },
+  search: {
+    width: 'auto',
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    font: 'inherit',
+    padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(4)}px`,
+    border: 0,
+    display: 'block',
+    verticalAlign: 'middle',
+    whiteSpace: 'normal',
+    background: 'none',
+    margin: 0, // Reset for Safari
+    color: 'inherit',
+    width: '100%',
+    '&:focus': {
+      outline: 0,
+    },
+  },
+  iconTitle: {
+    position: 'relative',
+    marginRight: theme.spacing(0.5),
+  },
+  button: {
+    display: 'block',
+    width: '100%',
+    background: theme.palette.grey[50],
+    '&:hover': {
+      background: theme.palette.secondary.light
+    },
+    '& $icon': {
+      margin: '0 auto',
+      display: 'block',
+      fontSize: 64
+    },
+    '& $info': {
+      display: 'block',
+      textTransform: 'none',
+      color: theme.palette.grey[500]
+    }
+  },
+  info: {},
+  icon: {},
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120,
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
+  iconSmall: {
+    fontSize: 20,
+  },
+  leftIcon: {
+    marginRight: theme.spacing(1),
+  },
+});
+
+export default styles;