SHARE
TWEET

Untitled

a guest Jan 22nd, 2020 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
  3. import clsx from 'clsx';
  4. import ExpansionPanel from '@material-ui/core/ExpansionPanel';
  5. import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
  6. import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
  7. import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
  8. import Typography from '@material-ui/core/Typography';
  9. import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
  10. import Chip from '@material-ui/core/Chip';
  11. import Button from '@material-ui/core/Button';
  12. import Divider from '@material-ui/core/Divider';
  13. import Grid from '@material-ui/core/Grid'
  14. import ButtonSave from '../ButtonSave';
  15. import FaceIcon from '@material-ui/icons/Face';
  16. import DoneIcon from '@material-ui/icons/Done';
  17. import DashboardAddToCarDialog from './DashboardAddToCarDialog';
  18. import { uiStore } from '@/store/UIStore';
  19. import DialogPopout from '../DialogPopout'
  20.  
  21. let testowa = uiStore.testowa
  22. const useStyles = makeStyles((theme: Theme) =>
  23.   createStyles({
  24.     root: {
  25.       width: '100%',
  26.       backgroundColor: "#2f2f2f",
  27.     },
  28.     heading: {
  29.       fontSize: theme.typography.pxToRem(15),
  30.     },
  31.     secondaryHeading: {
  32.       fontSize: theme.typography.pxToRem(15),
  33.       color: theme.palette.text.secondary,
  34.     },
  35.     icon: {
  36.       verticalAlign: 'bottom',
  37.       height: 20,
  38.       width: 20,
  39.     },
  40.     details: {
  41.       alignItems: 'center',
  42.     },
  43.     column: {
  44.       flexBasis: '20%',
  45.     },
  46.     columnlast: {
  47.         flexBasis: '40%'
  48.     },
  49.     helper: {
  50.       borderLeft: `2px solid ${theme.palette.divider}`,
  51.       padding: theme.spacing(1, 2),
  52.     },
  53.     link: {
  54.       color: theme.palette.primary.main,
  55.       textDecoration: 'none',
  56.       '&:hover': {
  57.         textDecoration: 'underline',
  58.       },
  59.     },
  60.     moved: {
  61.         marginLeft: "20px"
  62.     },
  63.     movedmore: {
  64.         marginLeft: "60px"
  65.     },
  66.     userchip: {
  67.         margin: "4px",
  68.         float: "left",
  69.         width: "200px",
  70.     }
  71.   }),
  72. );
  73.  
  74.  
  75.  
  76.  
  77. export default function DetailedExpansionPanel() {
  78.   const classes = useStyles();
  79.   interface ChipData {
  80.     id: number;
  81.     nickname: string;
  82.   }
  83.  
  84.   function RenderCoownersChips(props) {
  85.     const [chipData, setChipData] = React.useState<ChipData[]>(props.data[0]);
  86.     uiStore.vehicles[props.data[1]].coowners = chipData
  87.  
  88.     const handleDelete = (chipToDelete: ChipData) => () => {
  89.       setChipData(chips => chips.filter(chip => chip.id !== chipToDelete.id));
  90.     };
  91.  
  92.     return (
  93.       <div className={classes.root}>
  94.         {chipData.map(data => {
  95.           return (
  96.             <Chip
  97.               key={data.id}
  98.               icon={<FaceIcon />}
  99.               label={data.nickname}
  100.               onDelete={handleDelete(data)}
  101.               className={classes.userchip}
  102.               variant="outlined"
  103.             />
  104.           );
  105.         })}
  106.       </div>
  107.     );
  108.   }
  109.  
  110.   function RenderUsersChips(props) {
  111.     const [chipData, setChipData] = React.useState<ChipData[]>(props.data[0]);
  112.     uiStore.vehicles[props.data[1]].users = chipData
  113.  
  114.     const handleDelete = (chipToDelete: ChipData) => () => {
  115.       setChipData(chips => chips.filter(chip => chip.id !== chipToDelete.id));
  116.     };
  117.  
  118.     return (
  119.       <div className={classes.root}>
  120.         {chipData.map(data => {
  121.           return (
  122.             <Chip
  123.               key={data.id}
  124.               icon={<FaceIcon />}
  125.               label={data.nickname}
  126.               onDelete={handleDelete(data)}
  127.               className={classes.userchip}
  128.               variant="outlined"
  129.             />
  130.           );
  131.         })}
  132.       </div>
  133.     );
  134.   }
  135.  
  136.   class RenderVehicles extends React.Component {
  137.     render() {
  138.  
  139.       let vehicleComponent = uiStore.vehicles.map((veh:any) => {
  140.         return (
  141.         <div>
  142.         <ExpansionPanel key={veh.vid} defaultExpanded style={{borderRadius: "5px"}}>
  143.         <ExpansionPanelSummary
  144.           expandIcon={<ExpandMoreIcon />}
  145.           aria-controls="panel1c-content"
  146.           id="panel1c-header"
  147.           style={{borderBottom: "1px solid #5e5e5e"}}
  148.         >
  149.           <div className={classes.column}>
  150.             <Typography className={classes.heading}>
  151.                 <p className={classes.moved}>
  152.                     <strong>{veh.name}</strong>
  153.                 </p>
  154.             </Typography>
  155.           </div>
  156.           <div className={classes.columnlast}>
  157.             <Typography className={classes.secondaryHeading}>
  158.                 <p className={classes.moved}>
  159.                     <strong>Właściciel pojazdu</strong>
  160.                     <span style={{color: "#6f6f6f"}}> (opcja Prime)</span>
  161.                 </p>
  162.             </Typography>
  163.           </div>
  164.           <div className={classes.columnlast}>
  165.             <Typography className={classes.secondaryHeading}>
  166.                 <p className={classes.movedmore}>
  167.                 <strong>Użytkownicy</strong>
  168.                 <span style={{color: "#6f6f6f"}}> (opcja Premium)</span>
  169.                 </p>
  170.             </Typography>
  171.           </div> <br/>
  172.         </ExpansionPanelSummary>
  173.  
  174.         <ExpansionPanelDetails className={classes.details}>
  175.           <div className={classes.column}>
  176.             <Chip label="ID" style={{ backgroundColor: "#1c1c1c", margin: "4px", width: "80px", border: "2px solid #787878"}}/>
  177.             <Chip label={veh.vid} style={{margin: "4px", width: "80px", border: "2px solid #787878"}}/> <br/>
  178.             <Chip label="Stan" style={{ backgroundColor: "#1c1c1c", margin: "4px", width: "80px", border: "2px solid #787878"}}/>
  179.             <Chip label={veh.condition + "%"} style={{width: "80px", margin: "4px", border: "2px solid #787878"}}/>
  180.           </div >
  181.           <div className={clsx(classes.columnlast, classes.helper)}>
  182.             <Grid>
  183.                 <Chip
  184.                 icon={<FaceIcon />}
  185.                 label={veh.owner.nickname}
  186.                 style={{padding: "0px 10px 0px 10px", backgroundColor: "orange", border: "2px solid #ffb734"}}
  187.                 className={classes.userchip}
  188.                 />
  189.                 <RenderCoownersChips data={[veh.coowners, veh.key]} />
  190.             </Grid>
  191.           </div>
  192.           <div className={clsx(classes.columnlast, classes.helper)}>
  193.             <Typography variant="caption">
  194.                 <Grid>
  195.                     <RenderUsersChips data={[veh.users, veh.key]} />
  196.                 </Grid>
  197.             </Typography>
  198.           </div>
  199.         </ExpansionPanelDetails>
  200.  
  201.         <Divider />
  202.         <ExpansionPanelActions>
  203.           <DialogPopout data={[veh.vid, veh.name]}/>
  204.         </ExpansionPanelActions>
  205.       </ExpansionPanel>
  206.       </div>
  207.         )
  208.       })
  209.       return vehicleComponent
  210.     }
  211.   }
  212.   return (
  213.     <div className={classes.root}>
  214.       <RenderVehicles />
  215.     </div>
  216.   );
  217. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top