diff options
Diffstat (limited to 'front/odiparpack/app/components/Widget')
13 files changed, 1359 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Widget/AlbumWidget.js b/front/odiparpack/app/components/Widget/AlbumWidget.js new file mode 100644 index 0000000..d691361 --- /dev/null +++ b/front/odiparpack/app/components/Widget/AlbumWidget.js @@ -0,0 +1,55 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import InfoIcon from '@material-ui/icons/Info'; +import imgData from 'ba-api/imgData'; +import { GridList, GridListTile, GridListTileBar, IconButton } from '@material-ui/core'; +import PapperBlock from '../PapperBlock/PapperBlock'; +import styles from './widget-jss'; + + +class AlbumWidget extends React.Component { + render() { + const { classes } = this.props; + return ( + <PapperBlock noMargin title="My Albums (4)" whiteBg desc=""> + <div className={classes.albumRoot}> + <GridList cellHeight={180} className={classes.gridList}> + { + imgData.map((tile, index) => { + if (index >= 4) { + return false; + } + return ( + <GridListTile key={index.toString()}> + <img src={tile.img} className={classes.img} alt={tile.title} /> + <GridListTileBar + title={tile.title} + subtitle={( + <span> +by: + {tile.author} + </span> + )} + actionIcon={( + <IconButton className={classes.icon}> + <InfoIcon /> + </IconButton> + )} + /> + </GridListTile> + ); + }) + } + </GridList> + </div> + </PapperBlock> + ); + } +} + +AlbumWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AlbumWidget); diff --git a/front/odiparpack/app/components/Widget/AreaChartWidget.js b/front/odiparpack/app/components/Widget/AreaChartWidget.js new file mode 100644 index 0000000..8e17311 --- /dev/null +++ b/front/odiparpack/app/components/Widget/AreaChartWidget.js @@ -0,0 +1,147 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, createMuiTheme } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import CardGiftcard from '@material-ui/icons/CardGiftcard'; +import FilterVintage from '@material-ui/icons/FilterVintage'; +import LocalCafe from '@material-ui/icons/LocalCafe'; +import Style from '@material-ui/icons/Style'; +import themePallete from 'ba-api/themePalette'; +import { + AreaChart, + Area, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer +} from 'recharts'; +import messageStyles from 'ba-styles/Messages.scss'; +import { data1 } from 'ba-api/chartData'; +import Type from 'ba-styles/Typography.scss'; +import { purple } from '@material-ui/core/colors'; +import { Grid, Chip, Avatar, Divider, CircularProgress, Typography } from '@material-ui/core'; +import styles from './widget-jss'; +import PapperBlock from '../PapperBlock/PapperBlock'; + + +const theme = createMuiTheme(themePallete('magentaTheme')); +const color = ({ + primary: theme.palette.primary.main, + primarydark: theme.palette.primary.dark, + secondary: theme.palette.secondary.main, + secondarydark: theme.palette.secondary.dark, + third: purple[500], + thirddark: purple[900], +}); + +class AreaChartWidget extends PureComponent { + render() { + const { + classes, + } = this.props; + return ( + <PapperBlock whiteBg noMargin title="Top Product Sales" desc=""> + <Grid container spacing={2}> + <Grid item md={8} xs={12}> + <ul className={classes.bigResume}> + <li> + <Avatar className={classNames(classes.avatar, classes.pinkAvatar)}> + <CardGiftcard /> + </Avatar> + <Typography variant="h6"> + 4321 + <Typography>Gift Card</Typography> + </Typography> + </li> + <li> + <Avatar className={classNames(classes.avatar, classes.purpleAvatar)}> + <FilterVintage /> + </Avatar> + <Typography variant="h6"> + 9876 + <Typography>Flowers</Typography> + </Typography> + </li> + <li> + <Avatar className={classNames(classes.avatar, classes.blueAvatar)}> + <LocalCafe /> + </Avatar> + <Typography variant="h6"> + 345 + <Typography>Cups</Typography> + </Typography> + </li> + <li> + <Avatar className={classNames(classes.avatar, classes.tealAvatar)}> + <Style /> + </Avatar> + <Typography variant="h6"> + 996 + <Typography>Name Cards</Typography> + </Typography> + </li> + </ul> + <div className={classes.chartWrap}> + <div className={classes.chartFluid}> + <ResponsiveContainer> + <AreaChart + width={600} + height={300} + data={data1} + margin={{ + top: 5, + right: 30, + left: 20, + bottom: 5 + }} + > + <XAxis dataKey="name" /> + <YAxis /> + <CartesianGrid strokeDasharray="3 3" /> + <Tooltip /> + <Area type="monotone" dataKey="uv" stackId="1" stroke={color.primarydark} fillOpacity="0.8" fill={color.primary} /> + <Area type="monotone" dataKey="pv" stackId="1" stroke={color.secondarydark} fillOpacity="0.8" fill={color.secondary} /> + <Area type="monotone" dataKey="amt" stackId="1" stroke={color.thirddark} fillOpacity="0.8" fill={color.third} /> + </AreaChart> + </ResponsiveContainer> + </div> + </div> + </Grid> + <Grid item md={4} xs={12}> + <Typography variant="button"><span className={Type.bold}>Performance Listing</span></Typography> + <Divider className={classes.divider} /> + <Grid container className={classes.secondaryWrap}> + <Grid item className={classes.centerItem} md={6}> + <Typography gutterBottom>Giftcard Quality</Typography> + <Chip label="Super" className={classNames(classes.chip, messageStyles.bgError)} /> + <CircularProgress variant="determinate" className={classNames(classes.progressCircle, classes.pinkProgress)} size={100} value={70} /> + </Grid> + <Grid className={classes.centerItem} item md={6}> + <Typography gutterBottom>Monitoring Quality</Typography> + <Chip label="Good" className={classNames(classes.chip, messageStyles.bgSuccess)} /> + <CircularProgress variant="determinate" className={classNames(classes.progressCircle, classes.greenProgress)} size={100} value={57} /> + </Grid> + <Grid className={classes.centerItem} item md={6}> + <Typography gutterBottom>Project Complete</Typography> + <Chip label="Poor" className={classNames(classes.chip, messageStyles.bgWarning)} /> + <CircularProgress variant="determinate" className={classNames(classes.progressCircle, classes.orangeProgress)} size={100} value={28} /> + </Grid> + <Grid className={classes.centerItem} item md={6}> + <Typography gutterBottom>Deploy Progress</Typography> + <Chip label="Medium" className={classNames(classes.chip, messageStyles.bgInfo)} /> + <CircularProgress variant="determinate" className={classNames(classes.progressCircle, classes.blueProgress)} size={100} value={70} /> + </Grid> + </Grid> + </Grid> + </Grid> + </PapperBlock> + ); + } +} + +AreaChartWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(AreaChartWidget); diff --git a/front/odiparpack/app/components/Widget/BigChartWidget.js b/front/odiparpack/app/components/Widget/BigChartWidget.js new file mode 100644 index 0000000..718af45 --- /dev/null +++ b/front/odiparpack/app/components/Widget/BigChartWidget.js @@ -0,0 +1,142 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import Dvr from '@material-ui/icons/Dvr'; +import Explore from '@material-ui/icons/Explore'; +import Healing from '@material-ui/icons/Healing'; +import LocalActivity from '@material-ui/icons/LocalActivity'; +import { + ComposedChart, + Line, + Area, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer +} from 'recharts'; +import { data1 } from 'ba-api/chartData'; +import Type from 'ba-styles/Typography.scss'; +import colorfull from 'ba-api/colorfull'; +import { Grid, Avatar, Divider, LinearProgress, Typography } from '@material-ui/core'; +import styles from './widget-jss'; +import PapperBlock from '../PapperBlock/PapperBlock'; + + +const color = ({ + main: colorfull[5], + maindark: '#2196F3', + secondary: colorfull[3], + third: colorfull[0], +}); + +class BigChartWidget extends PureComponent { + render() { + const { + classes, + } = this.props; + return ( + <PapperBlock whiteBg noMargin title="Top Product Sales" desc=""> + <Grid container spacing={2}> + <Grid item md={8} xs={12}> + <ul className={classes.bigResume}> + <li> + <Avatar className={classNames(classes.avatar, classes.pinkAvatar)}> + <Dvr /> + </Avatar> + <Typography variant="h6"> + 1234 + <Typography>Monitors</Typography> + </Typography> + </li> + <li> + <Avatar className={classNames(classes.avatar, classes.purpleAvatar)}> + <Explore /> + </Avatar> + <Typography variant="h6"> + 5678 + <Typography>Compas</Typography> + </Typography> + </li> + <li> + <Avatar className={classNames(classes.avatar, classes.blueAvatar)}> + <Healing /> + </Avatar> + <Typography variant="h6"> + 910 + <Typography>Badges</Typography> + </Typography> + </li> + <li> + <Avatar className={classNames(classes.avatar, classes.tealAvatar)}> + <LocalActivity /> + </Avatar> + <Typography variant="h6"> + 1112 + <Typography>Tickets</Typography> + </Typography> + </li> + </ul> + <div className={classes.chartWrap}> + <div className={classes.chartFluid}> + <ResponsiveContainer> + <ComposedChart + data={data1} + margin={{ + top: 0, + right: 30, + left: 20, + bottom: 20 + }} + > + <CartesianGrid stroke="#f5f5f5" /> + <XAxis dataKey="name" /> + <YAxis /> + <Tooltip /> + <Area type="monotone" dataKey="amt" fill={color.main} stroke={color.maindark} /> + <Bar dataKey="pv" barSize={20} fill={color.secondary} /> + <Line type="monotone" dataKey="uv" stroke={color.third} /> + </ComposedChart> + </ResponsiveContainer> + </div> + </div> + </Grid> + <Grid item md={4} xs={12}> + <Typography variant="button"><span className={Type.bold}>Performance Listing</span></Typography> + <Divider className={classes.divider} /> + <ul className={classes.secondaryWrap}> + <li> + <Typography gutterBottom>Monitoring Quality</Typography> + <LinearProgress variant="determinate" className={classNames(classes.progress, classes.pinkProgress)} value={24} /> + </li> + <li> + <Typography gutterBottom>Compas Speed</Typography> + <LinearProgress variant="determinate" className={classNames(classes.progress, classes.purpleProgress)} value={89} /> + </li> + <li> + <Typography gutterBottom>Total Badges</Typography> + <LinearProgress variant="determinate" className={classNames(classes.progress, classes.orangeProgress)} value={78} /> + </li> + <li> + <Typography gutterBottom>Sold Ticket</Typography> + <LinearProgress variant="determinate" className={classNames(classes.progress, classes.greenProgress)} value={55} /> + </li> + <li> + <Typography gutterBottom>App Performance</Typography> + <LinearProgress variant="determinate" className={classNames(classes.progress, classes.blueProgress)} value={80} /> + </li> + </ul> + </Grid> + </Grid> + </PapperBlock> + ); + } +} + +BigChartWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(BigChartWidget); diff --git a/front/odiparpack/app/components/Widget/CarouselWidget.js b/front/odiparpack/app/components/Widget/CarouselWidget.js new file mode 100644 index 0000000..51dd522 --- /dev/null +++ b/front/odiparpack/app/components/Widget/CarouselWidget.js @@ -0,0 +1,117 @@ +import React from 'react'; +import Slider from 'react-slick'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import ArrowForward from '@material-ui/icons/ArrowForward'; +import ArrowBack from '@material-ui/icons/ArrowBack'; +import carouselData from 'ba-api/carouselData'; +import 'ba-styles/vendors/slick-carousel/slick-carousel.css'; +import 'ba-styles/vendors/slick-carousel/slick.css'; +import 'ba-styles/vendors/slick-carousel/slick-theme.css'; +import { Typography, IconButton, Icon } from '@material-ui/core'; +import styles from './widget-jss'; + + +function SampleNextArrow(props) { + const { onClick } = props; + return ( + <IconButton + className="nav-next" + onClick={onClick} + > + <ArrowForward /> + </IconButton> + ); +} + +SampleNextArrow.propTypes = { + onClick: PropTypes.func, +}; + +SampleNextArrow.defaultProps = { + onClick: undefined, +}; + +function SamplePrevArrow(props) { + const { onClick } = props; + return ( + <IconButton + className="nav-prev" + onClick={onClick} + > + <ArrowBack /> + </IconButton> + ); +} + +SamplePrevArrow.propTypes = { + onClick: PropTypes.func, +}; + +SamplePrevArrow.defaultProps = { + onClick: undefined, +}; + +class CarouselWidget extends React.Component { + render() { + const { classes } = this.props; + const settings = { + dots: true, + infinite: true, + centerMode: false, + speed: 500, + autoplaySpeed: 5000, + pauseOnHover: true, + autoplay: true, + slidesToShow: 3, + slidesToScroll: 1, + responsive: [ + { + breakpoint: 960, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + infinite: true, + dots: true + } + }, + { + breakpoint: 600, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + infinite: true, + dots: true + } + }, + ], + cssEase: 'ease-out', + nextArrow: <SampleNextArrow />, + prevArrow: <SamplePrevArrow /> + }; + return ( + <div className="container custom-arrow"> + <Slider {...settings}> + {carouselData.map((item, index) => ( + <div key={index.toString()}> + <div style={{ backgroundColor: item.background }} className={classes.carouselItem}> + <Icon className={classes.iconBg}>{item.icon}</Icon> + <Typography className={classes.carouselTitle} variant="subtitle1"> + <Icon>{item.icon}</Icon> + {item.title} + </Typography> + <Typography className={classes.carouselDesc}>{item.desc}</Typography> + </div> + </div> + ))} + </Slider> + </div> + ); + } +} + +CarouselWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CarouselWidget); diff --git a/front/odiparpack/app/components/Widget/CounterGroupWidget.js b/front/odiparpack/app/components/Widget/CounterGroupWidget.js new file mode 100644 index 0000000..92856b8 --- /dev/null +++ b/front/odiparpack/app/components/Widget/CounterGroupWidget.js @@ -0,0 +1,101 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { + BarChart, Bar, + AreaChart, Area, + LineChart, Line, + PieChart, Pie, Cell +} from 'recharts'; +import { data1, data2 } from 'ba-api/chartMiniData'; +import colorfull from 'ba-api/colorfull'; +import { red, blue, cyan, lime } from '@material-ui/core/colors'; +import { Grid } from '@material-ui/core'; +import CounterWidget from '../Counter/CounterWidget'; +import styles from './widget-jss'; + + +const colors = [red[300], blue[300], cyan[300], lime[300]]; + +class CounterGroupWidget extends PureComponent { + render() { + const { classes } = this.props; + return ( + <div className={classes.rootCounter}> + <Grid container spacing={3}> + <Grid item xs={6}> + <CounterWidget + color={colorfull[0]} + start={0} + end={105} + duration={3} + title="New Customers" + > + <BarChart width={100} height={40} data={data1}> + <Bar dataKey="uv" fill="#ffffff" /> + </BarChart> + </CounterWidget> + </Grid> + <Grid item xs={6}> + <CounterWidget + color={colorfull[1]} + start={0} + end={321} + duration={3} + title="New Articles" + > + <AreaChart width={100} height={60} data={data1}> + <Area type="monotone" dataKey="uv" stroke="#FFFFFF" fill="rgba(255,255,255,.5)" /> + </AreaChart> + </CounterWidget> + </Grid> + <Grid item xs={6}> + <CounterWidget + color={colorfull[2]} + start={0} + end={67} + duration={3} + title="New Contributor" + > + <LineChart width={100} height={80} data={data1}> + <Line type="monotone" dataKey="pv" stroke="#FFFFFF" strokeWidth={2} /> + </LineChart> + </CounterWidget> + </Grid> + <Grid item xs={6}> + <CounterWidget + color={colorfull[3]} + start={0} + end={80} + duration={3} + title="Average Income" + > + <PieChart width={100} height={100}> + <Pie + data={data2} + cx={50} + cy={50} + dataKey="value" + innerRadius={20} + outerRadius={40} + fill="#FFFFFF" + paddingAngle={5} + > + { + data2.map((entry, index) => <Cell key={index.toString()} fill={colors[index % colors.length]} />) + } + </Pie> + </PieChart> + </CounterWidget> + </Grid> + </Grid> + </div> + ); + } +} + +CounterGroupWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CounterGroupWidget); diff --git a/front/odiparpack/app/components/Widget/CounterIconsWidget.js b/front/odiparpack/app/components/Widget/CounterIconsWidget.js new file mode 100644 index 0000000..9c10850 --- /dev/null +++ b/front/odiparpack/app/components/Widget/CounterIconsWidget.js @@ -0,0 +1,74 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import AccountBox from '@material-ui/icons/AccountBox'; +import ImportContacts from '@material-ui/icons/ImportContacts'; +import Pets from '@material-ui/icons/Pets'; +import Star from '@material-ui/icons/Star'; +import colorfull from 'ba-api/colorfull'; +import { Grid } from '@material-ui/core'; +import CounterWidget from '../Counter/CounterWidget'; +import styles from './widget-jss'; + + +class CounterIconWidget extends PureComponent { + render() { + const { classes } = this.props; + return ( + <div className={classes.rootCounterFull}> + <Grid container spacing={2}> + <Grid item md={3} xs={6}> + <CounterWidget + color={colorfull[0]} + start={0} + end={105} + duration={3} + title="New Customers" + > + <AccountBox className={classes.counterIcon} /> + </CounterWidget> + </Grid> + <Grid item md={3} xs={6}> + <CounterWidget + color={colorfull[1]} + start={0} + end={321} + duration={3} + title="New Articles" + > + <ImportContacts className={classes.counterIcon} /> + </CounterWidget> + </Grid> + <Grid item md={3} xs={6}> + <CounterWidget + color={colorfull[2]} + start={0} + end={67} + duration={3} + title="New Contributor" + > + <Pets className={classes.counterIcon} /> + </CounterWidget> + </Grid> + <Grid item md={3} xs={6}> + <CounterWidget + color={colorfull[3]} + start={0} + end={80} + duration={3} + title="Average Income" + > + <Star className={classes.counterIcon} /> + </CounterWidget> + </Grid> + </Grid> + </div> + ); + } +} + +CounterIconWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(CounterIconWidget); diff --git a/front/odiparpack/app/components/Widget/MapWidget.js b/front/odiparpack/app/components/Widget/MapWidget.js new file mode 100644 index 0000000..37204e9 --- /dev/null +++ b/front/odiparpack/app/components/Widget/MapWidget.js @@ -0,0 +1,60 @@ +import React from 'react'; +import { compose } from 'recompose'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import dummy from 'ba-api/dummyContents'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + Marker, +} from 'react-google-maps'; +import { Paper } from '@material-ui/core'; +import IdentityCard from '../CardPaper/IdentityCard'; +import styles from './widget-jss'; + +const MapWithAMarker = compose( + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap + {...props} + defaultZoom={8} + defaultCenter={{ lat: -34.300, lng: 119.344 }} + > + <Marker + position={{ lat: -34.300, lng: 118.044 }} + /> + </GoogleMap> +)); + +class MapWidget extends React.Component { + render() { + const { classes } = this.props; + return ( + <Paper className={classes.mapWrap}> + <MapWithAMarker + googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" + loadingElement={<div style={{ height: '100%' }} />} + containerElement={<div style={{ height: '400px' }} />} + mapElement={<div style={{ height: '100%' }} />} + /> + <div className={classes.address}> + <IdentityCard + title="Contact and Address" + name={dummy.user.name} + avatar={dummy.user.avatar} + phone="(+8543201213)" + address="Town Hall Building no.45 Block C - ABC Street" + /> + </div> + </Paper> + ); + } +} + +MapWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(MapWidget); diff --git a/front/odiparpack/app/components/Widget/ProfileWidget.js b/front/odiparpack/app/components/Widget/ProfileWidget.js new file mode 100644 index 0000000..3ae3690 --- /dev/null +++ b/front/odiparpack/app/components/Widget/ProfileWidget.js @@ -0,0 +1,54 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import LocalPhone from '@material-ui/icons/LocalPhone'; +import DateRange from '@material-ui/icons/DateRange'; +import LocationOn from '@material-ui/icons/LocationOn'; +import { + List, ListItem, ListItemAvatar, + ListItemText, Divider, Avatar +} from '@material-ui/core'; +import PapperBlock from '../PapperBlock/PapperBlock'; +import styles from './widget-jss'; + + +function ProfileWidget(props) { + const { classes } = props; + return ( + <PapperBlock title="About Me" whiteBg noMargin desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum."> + <Divider className={classes.divider} /> + <List dense className={classes.profileList}> + <ListItem> + <ListItemAvatar> + <Avatar> + <DateRange /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Born" secondary="Jan 9, 1994" /> + </ListItem> + <ListItem> + <ListItemAvatar> + <Avatar> + <LocalPhone /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Phone" secondary="(+62)8765432190" /> + </ListItem> + <ListItem> + <ListItemAvatar> + <Avatar> + <LocationOn /> + </Avatar> + </ListItemAvatar> + <ListItemText primary="Address" secondary="Chicendo Street no.105 Block A/5A - Barcelona, Spain" /> + </ListItem> + </List> + </PapperBlock> + ); +} + +ProfileWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ProfileWidget); diff --git a/front/odiparpack/app/components/Widget/ProgressWidget.js b/front/odiparpack/app/components/Widget/ProgressWidget.js new file mode 100644 index 0000000..c0e6db6 --- /dev/null +++ b/front/odiparpack/app/components/Widget/ProgressWidget.js @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Type from 'ba-styles/Typography.scss'; +import Check from '@material-ui/icons/Check'; +import { withStyles } from '@material-ui/core/styles'; +import { LinearProgress, Paper, Typography, Grid, Avatar, Chip } from '@material-ui/core'; +import styles from './widget-jss'; + + +function ProgressWidget(props) { + const { classes } = props; + return ( + <Paper className={classes.styledPaper} elevation={4}> + <Typography className={classes.title} variant="h5" component="h3"> + <span className={Type.light}>Profile Strength: </span> + <span className={Type.bold}>Intermediate</span> + </Typography> + <Grid container justify="center"> + <Chip + avatar={( + <Avatar> + <Check /> + </Avatar> + )} + label="60% Progress" + className={classes.chipProgress} + color="primary" + /> + </Grid> + <LinearProgress variant="determinate" className={classes.progressWidget} value={60} /> + </Paper> + ); +} + +ProgressWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(ProgressWidget); diff --git a/front/odiparpack/app/components/Widget/SliderWidget.js b/front/odiparpack/app/components/Widget/SliderWidget.js new file mode 100644 index 0000000..1f53780 --- /dev/null +++ b/front/odiparpack/app/components/Widget/SliderWidget.js @@ -0,0 +1,69 @@ +import React from 'react'; +import Type from 'ba-styles/Typography.scss'; +import Slider from 'react-animated-slider'; +import 'ba-styles/vendors/react-animated-slider/react-animated-slider.css'; +import imgApi from 'ba-api/images'; +import avatarApi from 'ba-api/avatars'; + +import { Button, Typography } from '@material-ui/core'; + +const content = [ + { + title: 'Vulputate Mollis Ultricies', + description: + 'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.', + button: 'Read More', + image: imgApi[3], + user: 'Luanda Gjokaj', + userProfile: avatarApi[1] + }, + { + title: 'Tortor Dapibus', + description: + 'Cras mattis consectetur purus sit amet fermentum.', + button: 'Discover', + image: imgApi[15], + user: 'Erich Behrens', + userProfile: avatarApi[8] + }, + { + title: 'Phasellus volutpat', + description: + 'Lorem ipsum dolor sit amet', + button: 'Buy now', + image: imgApi[29], + user: 'Bruno Vizovskyy', + userProfile: avatarApi[10] + } +]; + +const SliderWidget = () => ( + <div> + <Slider className="slider-wrapper short" autoplay={3000}> + {content.map((item, index) => ( + <div + key={index.toString()} + className="slider-content" + style={{ background: `url('${item.image}') no-repeat center center` }} + > + <div className="inner"> + <Typography variant="subtitle1" component="h3" className={Type.light} gutterBottom>{item.title}</Typography> + <Button variant="contained" color="primary"> + {item.button} + </Button> + </div> + <section> + <img src={item.userProfile} alt={item.user} /> + <span> + Posted by + {' '} + <strong>{item.user}</strong> + </span> + </section> + </div> + ))} + </Slider> + </div> +); + +export default SliderWidget; diff --git a/front/odiparpack/app/components/Widget/TableWidget.js b/front/odiparpack/app/components/Widget/TableWidget.js new file mode 100644 index 0000000..47bb7ba --- /dev/null +++ b/front/odiparpack/app/components/Widget/TableWidget.js @@ -0,0 +1,124 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import messageStyles from 'ba-styles/Messages.scss'; +import progressStyles from 'ba-styles/Progress.scss'; +import avatarApi from 'ba-api/avatars'; +import { + Typography, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Chip, + LinearProgress, + Avatar, + Icon, +} from '@material-ui/core'; +import PapperBlock from '../PapperBlock/PapperBlock'; +import styles from './widget-jss'; + + +let id = 0; +function createData(name, avatar, title, type, taskNumber, taskTitle, progress, status) { + id += 1; + return { + id, + name, + avatar, + title, + type, + taskNumber, + taskTitle, + progress, + status, + }; +} + +const data = [ + createData('John Doe', avatarApi[6], 'Front End Developer', 'bug_report', 2214, 'Vivamus sit amet interdum elit', 30, 'Error'), + createData('Jim Doe', avatarApi[8], 'System Analyst', 'flag', 2455, 'Nam sollicitudin dignissim nunc', 70, 'Success'), + createData('Jane Doe', avatarApi[2], 'Back End Developer', 'whatshot', 3450, 'Quisque ut metus sit amet augue rutrum', 50, 'Warning'), + createData('Jack Doe', avatarApi[9], 'CTO', 'settings', 4905, 'Cras convallis lacus orci', 85, 'Info'), + createData('Jessica Doe', avatarApi[5], 'Project Manager', 'book', 4118, 'Aenean sit amet magna vel magna', 33, 'Default'), +]; + +function TableWidget(props) { + const { classes } = props; + const getStatus = status => { + switch (status) { + case 'Error': return messageStyles.bgError; + case 'Warning': return messageStyles.bgWarning; + case 'Info': return messageStyles.bgInfo; + case 'Success': return messageStyles.bgSuccess; + default: return messageStyles.bgDefault; + } + }; + const getProgress = status => { + switch (status) { + case 'Error': return progressStyles.bgError; + case 'Warning': return progressStyles.bgWarning; + case 'Info': return progressStyles.bgInfo; + case 'Success': return progressStyles.bgSuccess; + default: return progressStyles.bgDefault; + } + }; + const getType = type => { + switch (type) { + case 'bug_report': return classes.red; + case 'flag': return classes.indigo; + case 'whatshot': return classes.orange; + case 'settings': return classes.lime; + default: return classes.purple; + } + }; + return ( + <PapperBlock noMargin title="Tracking Table" whiteBg desc="Monitoring Your Team progress. Tracking task, current progress, and task status here."> + <div className={classes.root}> + <Table className={classNames(classes.table)}> + <TableHead> + <TableRow> + <TableCell>Name</TableCell> + <TableCell>Task</TableCell> + </TableRow> + </TableHead> + <TableBody> + {data.map(n => ([ + <TableRow key={n.id}> + <TableCell> + <div className={classes.user}> + <Avatar alt={n.name} src={n.avatar} className={classes.avatar} /> + <div> + <Typography variant="subtitle1">{n.name}</Typography> + <Typography>{n.title}</Typography> + </div> + </div> + </TableCell> + <TableCell> + <div className={classes.taskStatus}> + <Icon className={classNames(classes.taskIcon, getType(n.type))}>{n.type}</Icon> + <a href="#"> + # + {n.taskNumber} + </a> + <Chip label={n.status} className={classNames(classes.chip, getStatus(n.status))} /> + </div> + <LinearProgress variant="determinate" className={getProgress(n.status)} value={n.progress} /> + </TableCell> + </TableRow> + ]) + )} + </TableBody> + </Table> + </div> + </PapperBlock> + ); +} + +TableWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TableWidget); diff --git a/front/odiparpack/app/components/Widget/TaskWidget.js b/front/odiparpack/app/components/Widget/TaskWidget.js new file mode 100644 index 0000000..4136544 --- /dev/null +++ b/front/odiparpack/app/components/Widget/TaskWidget.js @@ -0,0 +1,83 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import CommentIcon from '@material-ui/icons/Comment'; +import { + List, + ListItem, + ListItemSecondaryAction, + ListItemText, + Checkbox, + IconButton, +} from '@material-ui/core'; +import PapperBlock from '../PapperBlock/PapperBlock'; +import styles from './widget-jss'; + + +class TaskWidget extends React.Component { + state = { + checked: [0], + }; + + 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, + }); + }; + + render() { + const { classes } = this.props; + return ( + <PapperBlock title="My Task" whiteBg colorMode desc="All Your to do list. Just check it whenever You done." className={classes.root}> + <List className={classes.taskList}> + {[0, 1, 2, 3, 4].map(value => ( + <Fragment key={value}> + <ListItem + key={value} + role={undefined} + dense + button + onClick={this.handleToggle(value)} + className={ + classNames( + classes.listItem, + this.state.checked.indexOf(value) !== -1 ? classes.done : '' + ) + } + > + <Checkbox + checked={this.state.checked.indexOf(value) !== -1} + tabIndex={-1} + disableRipple + /> + <ListItemText primary={`Task item ${value + 1}`} secondary={`Task description ${value + 1}`} /> + <ListItemSecondaryAction> + <IconButton aria-label="Comments"> + <CommentIcon /> + </IconButton> + </ListItemSecondaryAction> + </ListItem> + </Fragment> + ))} + </List> + </PapperBlock> + ); + } +} + +TaskWidget.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(TaskWidget); diff --git a/front/odiparpack/app/components/Widget/widget-jss.js b/front/odiparpack/app/components/Widget/widget-jss.js new file mode 100644 index 0000000..d553eaa --- /dev/null +++ b/front/odiparpack/app/components/Widget/widget-jss.js @@ -0,0 +1,294 @@ +import colorfull from 'ba-api/colorfull'; + +const styles = theme => ({ + rootCounter: { + flexGrow: 1, + padding: theme.spacing(1.5), + [theme.breakpoints.up('lg')]: { + padding: `${theme.spacing(1.5)}px ${theme.spacing(1)}px`, + }, + [theme.breakpoints.down('xs')]: { + margin: `0 ${theme.spacing(1) * -1.5}px`, + } + }, + rootCounterFull: { + flexGrow: 1, + }, + divider: { + margin: `${theme.spacing(3)}px 0` + }, + dividerBig: { + margin: `${theme.spacing(2)}px 0` + }, + centerItem: {}, + secondaryWrap: { + background: theme.palette.grey[100], + padding: 20, + borderRadius: 4, + justifyContent: 'space-around', + '& > $centerItem': { + position: 'relative', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }, + '& li': { + marginBottom: 30 + }, + '& $chip': { + top: 70, + position: 'absolute', + fontSize: 11, + fontWeight: 400, + } + }, + bigResume: { + marginBottom: 20, + justifyContent: 'space-between', + display: 'flex', + [theme.breakpoints.down('sm')]: { + height: 160, + display: 'block', + }, + '& li': { + paddingRight: 20, + display: 'flex', + alignItems: 'center', + justifyContent: 'flex-start', + [theme.breakpoints.down('sm')]: { + width: '50%', + float: 'left' + }, + }, + }, + avatar: { + width: 50, + height: 50, + marginRight: 10, + '& svg': { + fontSize: 32 + } + }, + pinkAvatar: { + margin: 10, + color: '#fff', + backgroundColor: colorfull[0], + }, + purpleAvatar: { + margin: 10, + color: '#fff', + backgroundColor: colorfull[1], + }, + blueAvatar: { + margin: 10, + color: '#fff', + backgroundColor: colorfull[2], + }, + tealAvatar: { + margin: 10, + color: '#fff', + backgroundColor: colorfull[3], + }, + pinkProgress: { + color: colorfull[0], + '& div': { + backgroundColor: colorfull[0], + } + }, + greenProgress: { + color: colorfull[5], + '& div': { + backgroundColor: colorfull[5], + } + }, + orangeProgress: { + color: colorfull[4], + '& div': { + backgroundColor: colorfull[4], + } + }, + purpleProgress: { + color: colorfull[1], + '& div': { + backgroundColor: colorfull[1], + } + }, + blueProgress: { + color: colorfull[2], + '& div': { + backgroundColor: colorfull[2], + } + }, + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + chip: { + margin: '8px 0 8px auto', + color: '#FFF' + }, + table: { + minWidth: 500, + '& td': { + padding: 10, + } + }, + user: { + display: 'flex', + }, + textCenter: { + textAlign: 'center' + }, + red: {}, + orange: {}, + indigo: {}, + purple: {}, + lime: {}, + taskIcon: { + display: 'block', + textAlign: 'center', + margin: '0 10px', + '&$red': { + color: colorfull[0], + }, + '&$orange': { + color: colorfull[2], + }, + '&$purple': { + color: colorfull[1], + }, + '&$lime': { + color: colorfull[3], + }, + '&$indigo': { + color: colorfull[4], + } + }, + done: {}, + listItem: { + padding: 5, + background: theme.palette.common.white, + boxShadow: theme.shadows[3], + '&:hover': { + backgroundColor: theme.palette.grey[200] + }, + '&$done': { + textDecoration: 'line-through' + } + }, + title: {}, + subtitle: {}, + styledPaper: { + backgroundColor: theme.palette.secondary.main, + padding: 20, + '& $title, & $subtitle': { + color: theme.palette.common.white + } + }, + progressWidget: { + marginTop: 20, + background: theme.palette.secondary.dark, + '& div': { + background: theme.palette.primary.light, + } + }, + chipProgress: { + marginTop: 20, + background: theme.palette.primary.light, + color: theme.palette.secondary.main, + '& div': { + background: colorfull[4], + color: theme.palette.common.white + } + }, + taskStatus: { + display: 'flex', + alignItems: 'center', + '& a': { + textDecoration: 'none', + color: theme.palette.primary.main + } + }, + counterIcon: { + color: theme.palette.common.white, + opacity: 0.7, + fontSize: 84 + }, + progressCircle: { + margin: 20 + }, + itemCarousel: { + textAlign: 'center', + '& img': { + margin: '10px auto' + } + }, + albumRoot: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'space-around', + overflow: 'hidden', + backgroundColor: theme.palette.background.paper, + }, + gridList: { + height: 'auto', + [theme.breakpoints.up('sm')]: { + width: 500, + }, + }, + icon: { + color: 'rgba(255, 255, 255, 0.54)', + }, + img: { + maxWidth: 'none' + }, + mapWrap: { + position: 'relative' + }, + address: { + [theme.breakpoints.up('md')]: { + top: '50%', + right: 60, + position: 'absolute', + transform: 'translate(0, -50%)' + }, + }, + carouselItem: { + margin: '0 5px', + boxShadow: theme.shadows[3], + borderRadius: 4, + overflow: 'hidden', + height: 250, + padding: '60px 20px', + position: 'relative' + }, + iconBg: { + color: theme.palette.common.white, + opacity: 0.25, + position: 'absolute', + bottom: 10, + right: 10, + fontSize: 96 + }, + carouselTitle: { + color: theme.palette.common.white, + display: 'flex', + flexDirection: 'column', + fontWeight: 500, + fontSize: 20 + }, + carouselDesc: { + color: theme.palette.common.white + }, + chartWrap: { + overflow: 'auto', + }, + chartFluid: { + width: '100%', + minWidth: 400, + height: 300, + } +}); + +export default styles; |