diff options
Diffstat (limited to 'front/odiparpack/app/containers/Pages/Settings')
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; |