@material-ui/core#AccordionDetails JavaScript Examples

The following examples show how to use @material-ui/core#AccordionDetails. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: helper.js    From Queen with MIT License 6 votes vote down vote up
Helper = () => {
  const classes = useStyles();
  return (
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMore />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <MarkdownTypo className={classes.heading}>{D.accordionHelperTitle}</MarkdownTypo>
        <MarkdownTypo className={classes.secondaryHeading}>
          {D.accordionHelperSubtitle}
        </MarkdownTypo>
      </AccordionSummary>
      <AccordionDetails className={classes.accordionDetails}>
        <MarkdownTypo>{D.accordionHelperBody}</MarkdownTypo>
      </AccordionDetails>
    </Accordion>
  );
}
Example #2
Source File: accordions.js    From horondi_client_fe with MIT License 6 votes vote down vote up
Accordions = ({ id, title, text, expanded, handleChange }) => {
  const styles = useStyles();

  return (
    <Accordion
      className={styles.accordion}
      key={id}
      expanded={expanded === id}
      onChange={handleChange(id)}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreOutlined />}
        aria-controls='panel1bh-content'
        id='panel1bh-header'
      >
        <Typography component='span' className={styles.heading}>
          {title}
        </Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography component='span' className={styles.details}>
          {text}
        </Typography>
      </AccordionDetails>
    </Accordion>
  );
}
Example #3
Source File: Panel.js    From Queen with MIT License 5 votes vote down vote up
Panel = ({
  index,
  expanded,
  currentPanel,
  handleChangePanel,
  title,
  variables,
  setPage,
  goToSeePage,
}) => {
  const classes = useStyles(currentPanel)();

  const [localExpanded, setLocalExpanded] = useState(currentPanel);

  const localHandleChange = (event, newExpanded) => {
    setLocalExpanded(newExpanded);
    handleChangePanel(index)(event, newExpanded);
  };

  useEffect(() => {
    setLocalExpanded(expanded);
  }, [expanded]);

  useEffect(() => {
    setLocalExpanded(currentPanel);
  }, [currentPanel]);

  const isNothingToDisplay = vars =>
    Object.entries(variables).filter(([key, value]) => !!value).length === 0;

  const emptyData = isNothingToDisplay(variables);

  return (
    <Accordion expanded={localExpanded} onChange={localHandleChange} className={classes.root}>
      <AccordionSummary className={classes.summary} expandIcon={<ExpandMore />}>
        {title}
      </AccordionSummary>
      <AccordionDetails className={classes.details}>
        {emptyData && <div classNam={classes.details}>{Dictionary.noDataCollected}</div>}
        {!emptyData &&
          Object.entries(variables).map(([key, value]) => {
            if (value)
              return (
                <div className={classes.item}>
                  <div className={classes.itemKey}>{`${key}: `}</div>
                  <div>
                    <b>{`${value}`}</b>
                  </div>
                </div>
              );
            return null;
          })}

        {!currentPanel && !emptyData && (
          <div className={classes.action}>
            <Button className={classes.button} onClick={() => setPage(goToSeePage)}>
              {Dictionary.goSeeItButton}
            </Button>
          </div>
        )}
      </AccordionDetails>
    </Accordion>
  );
}
Example #4
Source File: constructor-list-base-price.js    From horondi_admin with MIT License 5 votes vote down vote up
ConstructorListBasePrice = ({
  handleChange,
  basePriceToAdd,
  setBasePriceToAdd,
  expanded
}) => {
  const styles = useStyles();

  const priceHandleChange = (event) => {
    const { value } = event.target;
    setBasePriceToAdd(Number(value));
  };

  return (
    <Accordion
      expanded={expanded === 'basePrice'}
      onChange={handleChange('basePrice')}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls='basePricebh-content'
        id='basePricebh-header'
      >
        <Typography className={styles.heading}>Базова ціна</Typography>
        <Typography className={styles.secondaryHeading} />
      </AccordionSummary>
      <AccordionDetails>
        <TextField
          data-testid='basePrice'
          variant='outlined'
          className={`${styles.textField}`}
          label='Базова ціна (USD)'
          type='number'
          onChange={priceHandleChange}
          value={basePriceToAdd}
        />
      </AccordionDetails>
    </Accordion>
  );
}
Example #5
Source File: FAQs.jsx    From zubhub with GNU Affero General Public License v3.0 5 votes vote down vote up
/**
 * @function FAQs
 * @author Raymond Ndibe <[email protected]>
 *
 * @todo - describe function's signature
 */
function FAQs(props) {
  const classes = useStyles();

  const [state, setState] = React.useState({
    loading: true,
    faqs: [],
  });

  React.useEffect(() => {
    handleSetState(props.getFaqs({ t: props.t }));
  }, []);

  const handleSetState = obj => {
    if (obj) {
      Promise.resolve(obj).then(obj => {
        setState(state => ({ ...state, ...obj }));
      });
    }
  };

  const { loading, faqs } = state;
  const { t } = props;

  if (loading) {
    return <LoadingPage />;
  } else if (faqs.length > 0) {
    return (
      <Box className={classes.root}>
        <Container className={classes.containerStyle}>
          <Card className={classes.cardStyle}>
            <Typography className={classes.faqsHeadingStyle}>
              {t('faqs.title')}
            </Typography>
            {faqs.map(faq => (
              <Accordion>
                <AccordionSummary
                  expandIcon={
                    <>
                      <Typography>{t('faqs.answer')}</Typography>
                      <ExpandMoreIcon />
                    </>
                  }
                  aria-controls={t('faqs.answer')}
                  id={t('faqs.question')}
                >
                  <Typography className={classes.heading}>
                    {faq.question}
                  </Typography>
                </AccordionSummary>
                <AccordionDetails aria-label={t('faqs.answer')}>
                  <Typography
                    dangerouslySetInnerHTML={{ __html: faq.answer }}
                  ></Typography>
                </AccordionDetails>
              </Accordion>
            ))}
          </Card>
        </Container>
      </Box>
    );
  } else {
    return <ErrorPage error={t('faqs.errors.page_empty')} />;
  }
}
Example #6
Source File: MetaColInfo.js    From Designer-Client with GNU General Public License v3.0 4 votes vote down vote up
export function MetaColInfo(props) {
  const classes = useStyles();
  const [col, setCol] = useState({...props.col});
  const formHeaders = props.formHeaders;

  const getType = (val) => {
    switch (val) {
      case "varchar":
        return "text";
      default:
        return val;
    }
  };

  const getTypeLength = (type) => {
    const parsedType = getType(type);
    if (TypeLengthMap[type]) {
      return TypeLengthMap[type];
    }

    return "";
  }

  const getFormat = (type) => {
    switch (type) {
      case "datetime":
        return "yyyy-MM-dd HH:mm:ss";
      case "date":
        return "yyyy-MM-dd";
      case "time":
        return "HH:mm:ss";
      default:
        return "";
    }
  }

  const isDateType = (type) => {
    return ["datetime", "date", "time"].indexOf(type) < 0;
  }

  const handleChange = (e) => {
    const updatedCol = {
      ...col,
      [e.target.name]: e.target.type === "checkbox" ? e.target.checked : e.target.value,
    };

    setCol(updatedCol);
  };

  return (
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls={`column${col.id} - ${col.columnName}`}
        id={`column-${col.id}`}        
      >
        <div className={classes.headerWrap}>
          <Typography className={classes.heading}>
            {col.columnName}
          </Typography>
          <div>
            {col.type && 
              <Chip size="small" label={`Type: ${col.type}`} variant="outlined" />
            }
          </div>
        </div>        
      </AccordionSummary>
      <AccordionDetails className={classes.formWrap}>
        <FormControl className={classes.formControl}>
          <InputLabel
            htmlFor={`meta-${col.id}-input-originName`}
            className="label"
          >
            {formHeaders[0].name}
          </InputLabel>
          <Input
            id={`meta-${col.id}-input-originName`}
            className="form"
            name="originName"
            value={col.originalColumnName}
            disabled={true}
          />
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel
            htmlFor={`meta-${col.id}-input-columnName`}
            className="label"
          >
            {formHeaders[1].name}
          </InputLabel>
          <Input
            id={`meta-${col.id}-input-columnName`}
            className="form"
            name="columnName"
            value={col.columnName}
            onChange={handleChange}
          />
          <FormHelperText className="helpText">
            {formHeaders[1].tooltip}
          </FormHelperText>
        </FormControl>
        <FormControl className={classes.formControl}>
          <InputLabel id={`label-meta-${col.id}-input-type`} className="label">
            {formHeaders[2].name}
          </InputLabel>
          <Select
            labelId={`label-meta-${col.id}-input-type`}
            id={`meta-${col.id}-input-type`}
            name="type"
            value={getType(col.type)}
            className="form"
            onChange={handleChange}
          >
            <MenuItem value={"int"}>숫자(정수)</MenuItem>
            <MenuItem value={"double"}>숫자(부동소수)</MenuItem>
            <MenuItem value={"text"}>문자</MenuItem>
            <MenuItem value={"datetime"}>날짜(시간포함)</MenuItem>
            <MenuItem value={"date"}>날짜(시간 미포함)</MenuItem>
            <MenuItem value={"time"}>시간(시간 미포함)</MenuItem>
          </Select>
        </FormControl>

        {isDateType(col.type) ? 
          <FormControl className={classes.formControl}>
            <InputLabel htmlFor={`meta-${col.id}-input-length`} className="label">
              {formHeaders[3].name}
            </InputLabel>
            <Input
              id={`meta-${col.id}-input-length`}
              value={col.length || getTypeLength(col.type)}
              name="length"
              className="form"
              onChange={handleChange}
            />
          </FormControl>
          :
          <FormControl className={classes.formControl}>
            <InputLabel htmlFor={`meta-${col.id}-input-format`} className="label">
              {formHeaders[4].name}
            </InputLabel>
            <Input
              id={`meta-${col.id}-input-format`}
              value={col.format || getFormat(col.type)}
              name="format"
              className="form"
              onChange={handleChange}
            />
            <FormHelperText className="helpText">
              {formHeaders[4].tooltip}
            </FormHelperText>
          </FormControl>
        }

        <FormControlLabel
          className={`${classes.formControl} options`}
          control={
            <Checkbox
              id={`meta-${col.id}-input-nullable`}
              checked={col.isNullable}
              name="isNullable"
              onChange={handleChange}
              color="primary"
            />
          }
          label={
            <Typography style={{ fontSize: "0.875rem" }}>빈값 허용</Typography>
          }
        />
        <FormControlLabel
          className={`${classes.formControl} options`}
          control={
            <Checkbox
              id={`meta-${col.id}-input-unique`}
              checked={col.isUnique}
              name="isUnique"
              onChange={handleChange}
              color="primary"
            />
          }
          label={
            <Typography style={{ fontSize: "0.875rem" }}>고유값</Typography>
          }
        />
        <FormControlLabel
          className={`${classes.formControl} options`}
          control={
            <Checkbox
              id={`meta-${col.id}-input-hidden`}
              checked={col.isHidden}
              name="isHidden"
              onChange={handleChange}
              color="primary"
            />
          }
          label={
            <Typography style={{ fontSize: "0.875rem" }}>숨김(미제공)</Typography>
          }
        />
      </AccordionDetails>
    </Accordion>
  )
}
Example #7
Source File: layout.js    From ark-funds-monitor with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {
        let notificationBar;
        if (this.state.errorMessage) {
            notificationBar = <Alert variant="filled" severity="error" onClose={() => { this.setState({ errorMessage: '' }) }}>{this.state.errorMessage}</Alert>
        } else {
            notificationBar = <div></div>
        }
        return (
            <div className="layout-wrapper">
                <div className="header-wrapper">
                    <Header />
                </div>
                <div className="notification-bar-wrapper">
                    {notificationBar}
                </div>
                <div className="accordion-wrapper">
                    <Accordion expanded={this.state.expanded.includes('most-active-stock-panel')} onChange={this.handlePanelChange('most-active-stock-panel')}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="most-active-stock-panel-content"
                            id="most-active-stock-panel-header">

                            <Grid item xs={5} md={4}>
                                <Typography className="accordion-heading">Most Active Stocks</Typography>
                            </Grid>

                            <Grid item xs={7} md={4} className="second-heading-wrapper">
                                <Typography className="accordion-second-heading" component={'span'}>
                                    Most Active Stocks in
                                <FormControl className="days-dropdown">
                                        <Select
                                            labelId="demo-simple-select-placeholder-label-label"
                                            id="demo-simple-select-placeholder-label"
                                            value={this.state.mostActiveDaysRange}
                                            onClick={(e) => this.handleClickDaysRange(e)}
                                            onChange={(e) => this.handleSelectDaysRange(e, 'mostActive')}
                                            MenuProps={{ disableScrollLock: true }}
                                        >
                                            <MenuItem value={1}>1 Day</MenuItem>
                                            <MenuItem value={7}>1 Week</MenuItem>
                                            <MenuItem value={14}>2 Weeks</MenuItem>
                                            <MenuItem value={30}>1 Month</MenuItem>
                                            <MenuItem value={90}>3 Months</MenuItem>
                                            <MenuItem value={10000}>From 11/12/2019</MenuItem>
                                        </Select>
                                    </FormControl>
                                </Typography>
                            </Grid>

                        </AccordionSummary>

                        <AccordionDetails>
                            <div className="most-active-stocks-tabs-wrapper">
                                <MostActiveStocksTabs />
                            </div>
                        </AccordionDetails>

                    </Accordion>

                    <Accordion expanded={this.state.expanded.includes('stock-details-panel')} onChange={this.handlePanelChange('stock-details-panel')}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="stock-details-panel-content"
                            id="stock-details-panel-header">

                            <Grid item xs={5} md={4}>
                                <Typography className="accordion-heading">Stock Details</Typography>
                            </Grid>

                            <Grid item xs={7} md={4} className="second-heading-wrapper">
                                {/* <Typography className="accordion-second-heading" component={'span'}>
                                Chart with ARK Trade History</Typography> */}
                            </Grid>

                        </AccordionSummary>

                        <AccordionDetails>
                            <div className="stock-details-wrapper">
                                <StockDetails />
                            </div>
                        </AccordionDetails>

                    </Accordion>

                    <Accordion expanded={this.state.expanded.includes('data-grid-panel')} onChange={this.handlePanelChange('data-grid-panel')}>
                        <AccordionSummary
                            expandIcon={<ExpandMoreIcon />}
                            aria-controls="data-grid-panel-content"
                            id="data-grid-panel-header">

                            <Grid item xs={5} md={4}>
                                <Typography className="accordion-heading">Transactions Table</Typography>
                            </Grid>

                            <Grid item xs={7} md={4} className="second-heading-wrapper">
                                <Typography className="accordion-second-heading">All ARK Transactions</Typography>
                            </Grid>

                        </AccordionSummary>

                        <AccordionDetails>
                            <DataGrid />
                        </AccordionDetails>

                    </Accordion>

                </div>

                <Grid container className="sticky-footer">

                    <Grid item xs={3} md={3}>
                        <p className="disclaimer">Disclaimer: This web is built for education only.<br></br>The author takes no responsibility for financial decisions.</p>
                    </Grid>

                    <Grid item xs={6} md={6} className="donation-section">
                        <div className="donation" onClick={this.handleDonationSectionClick}>
                            <form action="https://www.paypal.com/donate" method="post" target="_top">
                                <input type="hidden" name="cmd" value="_donations" />
                                <input type="hidden" name="business" value="[email protected]" />
                                <input type="hidden" name="currency_code" value="USD" />
                                <Button size="small" variant="contained" color="primary" className="emoji-submit-button" type="submit" ref={this.coffeeEmoji}>
                                    <span name="submit" role="img" aria-label="coffee">Like this? <br></br>Pls buy me a coffee~☕</span>
                                </Button>
                                <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
                            </form>
                        </div>
                    </Grid>

                    <Grid item xs={3} md={3} className="additonal-info-section">
                        <div className='info-container'>
                            <p className='info-version'>
                                <Button color="secondary">
                                    <a href="https://github.com/KarlZhu-SE/ark-funds-monitor">Github Link</a>
                                </Button>
                                {/* &nbsp;&nbsp;Version: {packageJson.version} */}
                            </p>
                            <p className='info-update-date'>Latest ARK Data: {arkData[0]['Date']}</p>
                        </div>
                    </Grid>
                </Grid>

            </div>
        );
    }
Example #8
Source File: List.js    From Dog-Book with MIT License 4 votes vote down vote up
MyList = (props) => {
  const classes = useStyles();
  const { breedName, setBreedName, setValue } = props;
  const [breeds, setBreeds] = useState(undefined);
  const [searchValue, setSearchValue] = useState();

  const [expandedPanel, setExpandedPanel] = useState(false);

  const handleAccordionChange = (key) => (event, isExpanded) => {
    setExpandedPanel(isExpanded ? key : false);
  };

  const handleChange = (event) => {
    let value = event.target.value.toLowerCase();
    setSearchValue(value);
  };

  useEffect(() => {
    axios.get("https://dog.ceo/api/breeds/list/all").then((response) => {
      console.log(response.data.message);
      setBreeds(response.data.message);
    });
  }, [searchValue]);

  return (
    <>
    <Scroll showBelow={250} />
      <Grid container justify="flex-end">
        <Grid item xs="12" md="4">
          <AutoSearchComplete
            searchValue={searchValue}
            setSearchValue={setSearchValue}
            breeds={breeds}
            handleChange={(e) => handleChange(e)}
          />
        </Grid>
      </Grid>
      {breeds ? (
        Object.keys(breeds)
          .filter((key) =>
            searchValue !== "" && searchValue !== undefined
              ? key === searchValue
              : "null"
          )
          .map((key, i) => {
            return (
              <Accordion
                key={i}
                style={{ margin: "1rem" }}
                onClick={() => {
                  setBreedName(key);
                }}
                expanded={expandedPanel === key}
                onChange={handleAccordionChange(key)}
              >
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls="panel1a-content"
                  id="key"
                >
                  <Typography
                    style={{ textTransform: "capitalize" }}
                    className={
                      breedName === key
                        ? classes.Accordion_a
                        : classes.Accordion
                    }
                  >
                    {key}
                  </Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <List>
                    {breeds[key].length === 0 ? (
                      <Typography>No Sub-Breads</Typography>
                    ) : (
                      breeds[key].map((breed) => (
                        <ListItem>
                          <ListItemAvatar>
                            <Avatar>
                              <Pets />
                            </Avatar>
                          </ListItemAvatar>
                          <ListItemText primary={breed} />
                        </ListItem>
                      ))
                    )}
                  </List>
                </AccordionDetails>
                <Divider />
                <Box p={2}>
                  <Button
                    variant="contained"
                    color="secondary"
                    onClick={() => setValue(1)}
                  >
                    Select
                  </Button>
                </Box>
              </Accordion>
            );
          })
      ) : (
        <Grid
          container
          direction="row"
          justify="center"
          alignItems="center"
          style={{ height: "60vh" }}
        >
          <Grid item>
            <CircularProgress color="secondary" size="4rem" />
          </Grid>
        </Grid>
      )}
    </>
  );
}
Example #9
Source File: constructor-list-accordion.js    From horondi_admin with MIT License 4 votes vote down vote up
ConstructorListAccordion = ({ option, expanded, handleChange }) => {
  const classes = useStyles();
  const dispatch = useDispatch();

  const {
    selector,
    getItems,
    setOptionToAdd,
    optionToAdd,
    label,
    optionName,
    isRestrictions
  } = option;

  const tableTitles = config.tableHeadRowTitles.constructorElementList;

  const { items, currentPage, rowsPerPage, filter } = useSelector(selector);

  useEffect(() => {
    dispatch(
      getItems({
        pagination: {
          limit: rowsPerPage,
          skip: currentPage * rowsPerPage
        },
        limit: 20,
        skip: currentPage * rowsPerPage,
        filter
      })
    );
  }, [dispatch, currentPage, rowsPerPage, filter]);

  const checkboxChangeHandler = (e, id) => {
    e.stopPropagation();

    const possibleItems = optionToAdd.find((item) => item === id);
    if (possibleItems) {
      setOptionToAdd(optionToAdd.filter((item) => item !== id));
    } else {
      setOptionToAdd([...optionToAdd, id]);
    }
  };

  const elementItems = map(items, (item) => (
    <TableContainerRow
      image={
        item.images.thumbnail
          ? `${config.imagePrefix}${item.images.thumbnail}`
          : ''
      }
      key={item._id}
      id={item._id}
      name={item.name[0].value}
      additionalPrice={item.absolutePrice}
      available={item.available ? 'Так' : 'Ні'}
      showEdit={false}
      showDelete={false}
      showCheckbox
      checkBoxValue={optionToAdd}
      checkboxChangeHandler={checkboxChangeHandler}
    />
  ));

  if (isRestrictions) {
    return (
      <Accordion
        expanded={expanded === optionName}
        onChange={handleChange(optionName)}
      >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls={`${optionName}bh-content`}
          id={`${optionName}bh-header`}
        >
          <Typography className={classes.heading}>{label}</Typography>
          <Typography className={classes.secondaryHeading} />
        </AccordionSummary>
        <AccordionDetails />
      </Accordion>
    );
  }

  return (
    <Accordion
      expanded={expanded === optionName}
      onChange={handleChange(optionName)}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls={`${optionName}bh-content`}
        id={`${optionName}bh-header`}
      >
        <Typography className={classes.heading}>{label}</Typography>
        <Typography className={classes.secondaryHeading} />
      </AccordionSummary>
      <AccordionDetails className={classes.column}>
        {elementItems.length ? (
          <TableContainerGenerator
            pagination
            data-cy={`${optionName}table`}
            tableTitles={tableTitles}
            tableItems={elementItems}
          />
        ) : (
          <p>Відсутні</p>
        )}
      </AccordionDetails>
    </Accordion>
  );
}
Example #10
Source File: constructor-list-pockets.js    From horondi_admin with MIT License 4 votes vote down vote up
ConstructorListPockets = ({
  handleChange,
  restrictionsToAdd,
  setRestrictionsToAdd,
  expanded
}) => {
  const classes = useStyles();
  const commonStyles = useCommonStyles();

  const deleteHandler = (id, positionId) => {
    setRestrictionsToAdd(
      restrictionsToAdd.filter(
        (item) =>
          item.currentPocketWithPosition.pocket._id !== id ||
          item.currentPocketWithPosition.position._id !== positionId
      )
    );
  };

  const elementItems = map(restrictionsToAdd, (item, index) => (
    <TableRow key={index}>
      <TableCell>
        <Avatar
          src={`${config.imagePrefix}${item.currentPocketWithPosition?.pocket.images.thumbnail}`}
        >
          <ImageIcon />
        </Avatar>
      </TableCell>
      <TableCell>
        {item.currentPocketWithPosition?.pocket.name[0].value}
      </TableCell>
      <TableCell>
        {item.currentPocketWithPosition?.position.name[0].value}
      </TableCell>
      <TableCell>
        {item.currentPocketWithPosition?.pocket.absolutePrice}
      </TableCell>
      <TableCell>
        <CustomizedDeleteIcon
          onClickHandler={() => {
            deleteHandler(
              item.currentPocketWithPosition.pocket._id,
              item.currentPocketWithPosition.position._id
            );
          }}
        />
      </TableCell>
    </TableRow>
  ));
  return (
    <Accordion
      expanded={expanded === 'pocket'}
      onChange={handleChange('pocket')}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls='pocketbh-content'
        id='pocketbh-header'
      >
        <Typography className={classes.heading}>Кишені</Typography>
        <Typography className={classes.secondaryHeading} />
      </AccordionSummary>
      <AccordionDetails className={classes.column}>
        {elementItems.length ? (
          <TableContainerGenerator
            pagination
            data-cy='pockettable'
            tableTitles={tableTitles}
            tableItems={elementItems}
          />
        ) : (
          <p className={commonStyles.noRecords}>{NO_POCKET_MESSAGE}</p>
        )}
        <ConstructorListRestrictions
          restrictionsToAdd={restrictionsToAdd}
          setRestrictionsToAdd={setRestrictionsToAdd}
        />
      </AccordionDetails>
    </Accordion>
  );
}
Example #11
Source File: product-description.js    From horondi_client_fe with MIT License 4 votes vote down vote up
ProductDescription = ({ product, currentSizeIndex }) => {
  const styles = useStyles();
  const { mainMaterial, innerMaterial, bottomMaterial, sizes, translationsKey } = product;
  const currentWeight =
    sizes && currentSizeIndex >= 0 ? sizes[currentSizeIndex].size.weightInKg : '';
  const currentVolume =
    sizes && currentSizeIndex >= 0 ? sizes[currentSizeIndex].size.volumeInLiters : '';
  const { t } = useTranslation();

  return (
    <div className={styles.details}>
      <div className={styles.description}>
        <Accordion>
          <AccordionSummary
            expandIcon={<ExpandMoreOutlined />}
            aria-controls='panel1a-content'
            id='panel1a-header'
          >
            <Typography className={styles.title}>
              {t('product.productDescription.description')}{' '}
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography component='div' className={styles.text}>
              {parse(
                String(t(`${translationsKey}.description`))
                  .replace(/&nbsp;/g, '')
                  .replace(/;/g, '. ')
              )}
            </Typography>
          </AccordionDetails>
        </Accordion>
      </div>

      <div className={styles.description}>
        <Accordion>
          <AccordionSummary
            expandIcon={<ExpandMoreOutlined />}
            aria-controls='panel1a-content'
            id='panel1a-header'
          >
            <Typography className={styles.title}>
              {t('product.productDescription.material')}
            </Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography component='div' className={styles.text}>
              <Detail
                subtitle={t('product.productDescription.mainMaterial')}
                description={t(`${mainMaterial.material.translationsKey}.name`)}
              />
              <Detail
                subtitle={t('product.productDescription.innerMaterial')}
                description={t(`${innerMaterial.material.translationsKey}.name`)}
              />
              <Detail
                subtitle={t('product.productDescription.bottomMaterial')}
                description={t(`${bottomMaterial.material.translationsKey}.name`)}
              />
            </Typography>
          </AccordionDetails>
        </Accordion>
      </div>

      <div className={styles.description}>
        {currentVolume && currentWeight && product.available ? (
          <Accordion>
            <AccordionSummary
              expandIcon={<ExpandMoreOutlined />}
              aria-controls='panel1a-content'
              id='panel1a-header'
            >
              <Typography className={styles.title}>
                {t('product.productDescription.measurement')}{' '}
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <Typography component='div' className={styles.text}>
                <Detail
                  subtitle={t('product.weight.volumeLabel')}
                  description={`${currentVolume}`}
                />
                <Detail
                  subtitle={t('product.weight.weightLabel')}
                  description={`${currentWeight}`}
                />
              </Typography>
            </AccordionDetails>
          </Accordion>
        ) : null}
      </div>
    </div>
  );
}
Example #12
Source File: optionChain.jsx    From GraphVega with MIT License 4 votes vote down vote up
render() {
    return(
      <>
      <Card>
        {this.state.loading ? <LinearProgress /> : ""}
        <CardContent>
          <Row>
            <Col sm={{span:3}}>
              <Expiries
                symbol={this.props.quote.symbol} 
                onExpiryChange={this.handleExpiryChange}
              />
            </Col>
            <Col sm={{span:2, offset:5}}>
              <EditLayout onLayoutChange={this.handleLayoutChange}/>
            </Col>
            <Col sm={{span:2}}>
              <Positions 
                positions={this.props.positions}
                onRemovePosition={this.props.onRemovePosition}
              />
            </Col>
          </Row>
        </CardContent>
      </Card>
      <br />
      <Accordion expanded={this.state.displayTable} onChange={this.accChange} >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant="h6" display="block" gutterBottom>
            Option Table 
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Grid container>
            <Grid sm={12}>
              {!this.state.calls[0] ? this.errorMessage() :  
                <OptionTable
                layout={this.state.layout}
                onAddToFlask={this.handleAddToFlask}
                calls={this.state.calls}
                puts={this.state.puts}
                symbol={this.state.symbol}
                expiry={this.state.expiry}
                quote={this.props.quote}
                onAddPosition={this.handleAddPosition}
              />
              }
            </Grid>
          </Grid>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant="h6" display="block" gutterBottom>
            Implied Volatility Skew
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Grid container>
          {!this.state.calls[0] ? this.errorMessage() :
            <>
              <Grid item xs={1}></Grid>
              <Grid item sm={11}>
                <center>
                  <h6>IV skew for&nbsp;
                    <div style={{color:"royalblue", display:"inline"}}>
                      {this.state.symbol} {this.state.expiry} 
                    </div>
                    &nbsp;expiry option chain</h6>
                </center>
                <IVSkewChart data={this.state.ivSkewData}/>
              </Grid>
            </>
          }
          </Grid>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
        >
          <Typography variant="h6" display="block" gutterBottom>
            Greeks
          </Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Grid container>
            <Grid item sm={4}></Grid>
            <Grid item sm={4}>
              {!this.state.calls[0]? "" : 
              <center>
                <Select
                  value={this.state.greeksChart}
                  onChange={this.handleGreeksChartChange}
                >
                  <MenuItem value={"calls"}>calls</MenuItem>
                  <MenuItem value={"puts"}>puts</MenuItem>
                </Select>
              </center>
              }
            </Grid>
            <Grid item sm={4}></Grid>
            {!this.state.calls[0] ? this.errorMessage() :
              <>
                <Grid item sm={1}></Grid>
                <Grid item sm={10}>
                  <br />
                  <center>
                    <h6>Greeks for&nbsp;
                      <div style={{color:"royalblue", display:"inline"}}>
                        {this.state.symbol} {this.state.expiry} 
                      </div>
                      &nbsp;expiry option chain (rounded to 2 places)</h6>
                  </center>
                  <GreeksChart
                    data={this.state.greeksChart === "calls" ? 
                      this.state.callGreeksData :
                      this.state.putGreeksData}
                  />
                </Grid>
              </>
            }
          </Grid>
        </AccordionDetails>
      </Accordion>
      <br />
      </>
    )
  }
Example #13
Source File: GameListElement.js    From dipact with GNU General Public License v3.0 4 votes vote down vote up
render() {
		const { classes } = this.props;
		let itemKey = 0;
		let buttons = [];
		if (
			this.state.game.Properties.Open &&
			this.state.game.Properties.ActiveBans &&
			this.state.game.Properties.ActiveBans.length > 0
		) {
			buttons.push(
				<Typography key="banned-notice" style={noticeClass}>
					You can't join because you banned or are banned by a player.
				</Typography>
			);
		}
		if (
			!this.state.game.Properties.Closed &&
			this.state.game.Properties.FailedRequirements
		) {
			buttons.push(
				<Typography
					variant="subtitle2"
					key="requirement-notice"
					style={noticeClass}
				>
					You can't join this game because{" "}
					{this.state.game.Properties.FailedRequirements.map((req) => {
						return this.failureExplanations()[req];
					}).join(" ")}
				</Typography>
			);
		}

		if (!this.state.dead) {
			buttons.push(
				<Button
					variant="outlined"
					style={{
						marginRight: "16px",
						minWidth: "100px",
						marginBottom: "4px",
					}}
					color="primary"
					onClick={this.viewGame}
					key={itemKey++}
				>
					View
				</Button>
			);
			if (this.state.member) {
				buttons.push(
					<Button
						variant="outlined"
						style={{
							marginRight: "16px",
							minWidth: "100px",
							marginBottom: "4px",
						}}
						color="primary"
						onClick={this.renameGame}
						key={itemKey++}
					>
						Rename
					</Button>
				);
			}
		}
		let replaceablePlayers = 0;
					if (this.state.game.Properties.Members !== null) {
					replaceablePlayers = this.state.game.Properties.Members.filter(member => 
  					member.Replaceable == true
					).length;
					} else {
						replaceablePlayers = 0;
					}
		if (!this.state.game.Properties.Closed || replaceablePlayers > 0) {
			buttons.push(
				<Button
					variant="outlined"
					style={{
						marginRight: "16px",
						minWidth: "100px",
						marginBottom: "4px",
					}}
					color="primary"
					onClick={this.shareNative}
					key={itemKey++}
				>
					Invite
				</Button>
			);
		}
		let hasInviteDialog = false;
		this.state.game.Links.forEach((link) => {
			if (link.Rel === "join") {
				if (
					this.state.game.Properties.PhaseLengthMinutes < 60 * 12 ||
					(this.state.game.Properties.NonMovementPhaseLengthMinutes !== 0 &&
						this.state.game.Properties.NonMovementPhaseLengthMinutes < 60 * 12)
				) {
					buttons.unshift(
						<Typography key="deadline-warning" style={warningClass}>
							WARNING: This game has short deadlines (less than 12 hours). If it
							starts while you're unavailable, you might miss parts of the game
							greatly impacting your reliability score.
						</Typography>
					);
				}
				if (
					!this.state.game.Properties.Private &&
					this.state.game.Properties.MinReliability === 0 &&
					Globals.userStats.Properties.Reliability >= 10
				) {
					buttons.unshift(
						<Typography key="reliability-warning" style={warningClass}>
							WARNING: We advise you to join a different game, because this game
							might have (some) absent players. You have high reliability so can
							join a better game.
						</Typography>
					);
				}
				buttons.push(
					<Button
						key={itemKey++}
						variant="outlined"
						color="primary"
						style={{ marginRight: "16px", minWidth: "100px" }}
						onClick={(_) => {
							this.joinGame(link);
						}}
					>
						Join
					</Button>
				);
			} else if (link.Rel === "edit-newest-phase-deadline-at") {
				buttons.push(
					//TODO: Add confirmdialog.js before we accidentally move a turn forwards.. (how?)
					<React.Fragment>
						<Divider style={{marginBottom: "4px"}} />
						<Button
							key={itemKey++}
							variant="contained"
							color="primary"
							style={{
								marginRight: "16px",
								minWidth: "100px",
								marginBottom: "4px",
							}}
							onClick={(_) => {
								this.nextturn(link);
							}}
						>
							End Current Phase
						</Button>
						<Button
							key={itemKey++}
							variant="contained"
							color="primary"
							style={{
								marginRight: "16px",
								minWidth: "100px",
								marginBottom: "4px",
							}}
							onClick={(_) => {
								this.reschedule(link);
							}}
						>
							Change deadline
						</Button>
					</React.Fragment>
				);
			} else if (link.Rel === "leave") {
				buttons.push(
					<Button
						key={itemKey++}
						variant="outlined"
						color="primary"
						style={{
							marginRight: "16px",
							minWidth: "100px",
							marginBottom: "4px",
						}}
						onClick={(_) => {
							this.leaveGame(link);
						}}
					>
						Leave
					</Button>
				);
			} else if (link.Rel === "delete-game") {
				buttons.push(
					//TODO: add confirmdialog.js before we accidentally DELETE THE WHOLE (ONGOING) GAME (how)?
					<Button
						key={itemKey++}
						variant="outlined"
						color="primary"
						style={{
							marginRight: "16px",
							minWidth: "100px",
							marginBottom: "4px",
						}}
						onClick={(_) => {
							this.deleteGame(link);
						}}
					>
						Delete
					</Button>
				);
			} else if (
				link.Rel === "invite-user" ||
				link.Rel.indexOf("uninvite-") === 0
			) {
				hasInviteDialog = true;
			}
		});
		if (hasInviteDialog) {
			buttons.push(
				<Button
					key={itemKey++}
					variant="contained"
					color="primary"
					style={{
						marginRight: "16px",
						minWidth: "100px",
						marginBottom: "4px",
					}}
					onClick={(_) => {
						this.manageInvitations();
					}}
				>
					Assign players
				</Button>
			);
		}
		const buttonDiv = (
			<div
				key={itemKey++}
				style={{
					dispay: "flex",
					justifyContent: "space-evenly",
					marginBottom: "8px",
				}}
			>
				{buttons}
			</div>
		);

		let summary = (
			<div
				style={{
					display: "flex",
					flexDirection: "column",
					width: "100%",

					marginTop: "8px",
				}}
			>
				{((_) => {
					if (this.state.game.Properties.Started && replaceablePlayers == 0) {
						return (
							<React.Fragment>
								{/* IF STARTED */}
								<div
									style={{
										display: "flex",
										flexDirection: "row",
										justifyContent: "space-between",
									}}
								>
									{this.state.member && this.state.member.UnreadMessages > 0 ? (
										<Badge
											key={itemKey++}
											badgeContent={this.state.member.UnreadMessages}
											color="primary"
											style={{
												maxWidth: "calc(100% - 70px)",
											}}
										>
											<Typography
												textroverflow="ellipsis"
												noWrap
												style={{
													color: "rgba(40, 26, 26, 1)",
												}}
											>
												{helpers.gameDesc(this.state.game)}
											</Typography>
										</Badge>
									) : (
										<Typography
											key={itemKey++}
											textroverflow="ellipsis"
											noWrap={true}
											style={{
												minWidth: "60px",
												color: "rgba(40, 26, 26, 1)",
											}}
										>
											{helpers.gameDesc(this.state.game)}
										</Typography>
									)}

									<div
										id="Timer"
										key={itemKey++}
										style={{
											alignSelf: "center",
											display: "flex",
											alignItems: "center",
											color: "#281A1A",
										}}
									>
										{this.state.member &&
										this.state.game.Properties.Started &&
										!this.state.game.Properties.Finished ? (
											this.state.member.NewestPhaseState.OnProbation ? (
												<SvgIcon>
													<path
														d="M2.98188996,2.24133335 L21.3666663,20.6261097 L20.0261097,21.9666663 L19.0573333,20.998 L19,21 L5,21 C3.95,21 3.0822314,20.1799587 3.00551277,19.1486946 L3,19 L3,5 L3.00233335,4.942 L1.64133335,3.58188996 L2.98188996,2.24133335 Z M12,1 C13.235,1 14.2895,1.7581 14.75196,2.828465 L14.82,3 L19,3 C20.05,3 20.9177686,3.82004132 20.9944872,4.85130541 L21,5 L21,17.963 L16.037,13 L17,13 L17,11 L14.037,11 L12.037,9 L17,9 L17,7 L10.037,7 L6.037,3 L9.18,3 C9.579,1.898 10.5917,1.0848 11.80656,1.006235 L12,1 Z M13.0593333,15 L7,15 L7,17 L15.0593333,17 L13.0593333,15 Z M11.0593333,13 L9.06033335,11 L7,11 L7,13 L11.0593333,13 Z M12,3 C11.45,3 11,3.45 11,4 C11,4.55 11.45,5 12,5 C12.55,5 13,4.55 13,4 C13,3.45 12.55,3 12,3 Z"
														id="Shape"
														fill="#b71c1c"
														fillRule="nonzero"
													></path>
												</SvgIcon>
											) : this.state.member.NewestPhaseState.ReadyToResolve ? (
												<SvgIcon>
													<path
														d="M9,0 C10.3,0 11.4,0.84 11.82,2 L11.82,2 L16,2 C17.1045695,2 18,2.8954305 18,4 L18,4 L18,18 C18,19.1045695 17.1045695,20 16,20 L16,20 L2,20 C0.8954305,20 0,19.1045695 0,18 L0,18 L0,4 C0,2.8954305 0.8954305,2 2,2 L2,2 L6.18,2 C6.6,0.84 7.7,0 9,0 Z M13.4347826,7 L7.70608696,12.7391304 L4.56521739,9.60869565 L3,11.173913 L7.70608696,15.8695652 L15,8.56521739 L13.4347826,7 Z M9,2 C8.44771525,2 8,2.44771525 8,3 C8,3.55228475 8.44771525,4 9,4 C9.55228475,4 10,3.55228475 10,3 C10,2.44771525 9.55228475,2 9,2 Z"
														fill="#281A1A"
														id="Combined-Shape"
													></path>
												</SvgIcon>
											) : (
												<StartedAtIcon />
											)
										) : (
											""
										)}
										<Typography
											variant="body2"
											style={{
												paddingLeft: "2px",
												color: "rgba(40, 26, 26, 1)",
											}}
										>
											{this.state.game.Properties.Finished
												? helpers.minutesToDuration(
														-this.state.game.Properties.FinishedAgo /
															1000000000 /
															60,
														true
												  )
												: helpers.minutesToDuration(
														this.state.game.Properties.NewestPhaseMeta[0]
															.NextDeadlineIn /
															1000000000 /
															60,
														true
												  )}
										</Typography>
									</div>
								</div>
								<div key={itemKey++} style={secondRowSummaryClass}>
									<Typography
										textroverflow="ellipsis"
										noWrap={true}
										display="inline"
										variant="caption"
										id="variant"
										style={secondRowSummaryColorClass}
									>
										{this.state.game.Properties.Variant}{" "}
										{helpers.phaseLengthDisplay(this.state.game.Properties)}
									</Typography>
									<div style={summaryIconsAndPhaseClass}>
										<div style={summaryIconsClass}>{this.getIcons()}</div>
										<Typography
											variant="caption"
											style={secondRowSummaryColorClass}
										>
											{this.state.game.Properties.NewestPhaseMeta[0].Season}{" "}
											{this.state.game.Properties.NewestPhaseMeta[0].Year},{" "}
											{this.state.game.Properties.NewestPhaseMeta[0].Type}
										</Typography>
									</div>
								</div>
								{!this.state.member || this.state.game.Properties.Mustered ? (
									""
								) : (this.state.game.Properties.Members || []).find((m) => {
										return m.User.Id === Globals.user.Id;
								  }).NewestPhaseState.ReadyToResolve ? (
									<Typography
										className={this.props.classes.sixteenBySixteenClass}
									>
										Confirmed ready <ConfirmedReadyIcon />
									</Typography>
								) : (
									<Button
										variant="outlined"
										style={{
											marginRight: "16px",
											minWidth: "100px",
											marginBottom: "4px",
										}}
										color="primary"
										onClick={(ev) => {
											ev.stopPropagation();
											helpers
												.safeFetch(
													helpers.createRequest(
														"/Game/" +
															this.state.game.Properties.ID +
															"/Phase/" +
															this.state.game.Properties.NewestPhaseMeta[0]
																.PhaseOrdinal +
															"/PhaseState",
														{
															headers: {
																"Content-Type": "application/json",
															},
															method: "PUT",
															body: JSON.stringify({
																ReadyToResolve: true,
															}),
														}
													)
												)
												.then(this.reloadGame);
										}}
										key={itemKey++}
									>
										Confirm ready
									</Button>
								)}
							</React.Fragment>
						);
					} else {
						return (
							<React.Fragment>
								{/* IF STARTED */}
								<div
									style={{
										display: "flex",
										flexDirection: "row",
										justifyContent: "space-between",
									}}
								>
									<Typography
										key={itemKey++}
										textroverflow="ellipsis"
										noWrap={true}
										style={{}}
									>
										{helpers.gameDesc(this.state.game)}
									</Typography>

									<div
										id="Join"
										key={itemKey++}
										style={{
											alignSelf: "center",
											display: "flex",
											alignItems: "center",
										}}
									>
										<NumMembersIcon style={replaceablePlayers == 0 ? {color: "primary"} : {color: "red"} } />
										<Typography variant="body2" style={replaceablePlayers == 0 ? { paddingLeft: "2px", } : { paddingLeft: "2px", color: "red"}}>
											{replaceablePlayers == 0 ? this.state.game.Properties.NMembers : this.state.game.Properties.NMembers - replaceablePlayers}/
											{this.variant.Properties.Nations.length}{" "}
										</Typography>
									</div>
								</div>
								<div
									style={{
										display: "flex",
										flexDirection: "row",
										justifyContent: "space-between",
									}}
								>
									<Typography
										textroverflow="ellipsis"
										noWrap={true}
										display="inline"
										variant="caption"
										style={{
											color: "rgba(40, 26, 26, 0.7)",
										}}
									>
										{this.state.game.Properties.Variant}{" "}
										{helpers.phaseLengthDisplay(this.state.game.Properties)}
									</Typography>
									<div> {this.getIcons()}</div>
								</div>
							</React.Fragment>
						);
					}
				})()}

				<div></div>
			</div>
		);

		let gameView = (
			<Zoom in={this.state.viewOpen} mountOnEnter unmountOnExit>
				<div
					style={{
						position: "fixed",
						zIndex: 1300,
						right: 0,
						bottom: 0,
						top: 0,
						left: 0,
						background: "#ffffff",
					}}
				>
					<Game
						onChangeReady={this.reloadGame}
						onJoinGame={this.reloadGame}
						onLeaveGame={(_) => {
							if (this.state.game.Properties.Members.length > 1) {
								this.reloadGame();
							} else {
								this.setState({ dead: true });
							}
						}}
						unreadMessagesUpdate={this.reloadGame}
						gamePromise={(reload) => {
							if (reload) {
								return helpers
									.safeFetch(
										helpers.createRequest(
											this.state.game.Links.find((l) => {
												return l.Rel === "self";
											}).URL
										)
									)
									.then((resp) => resp.json());
							} else {
								return new Promise((res, rej) => {
									res(this.state.game);
								});
							}
						}}
						close={this.closeGame}
					/>
				</div>
			</Zoom>
		);

		if (this.props.summaryOnly) {
			return (
				<React.Fragment>
					<div style={{ width: "100%" }} onClick={this.viewGame}>
						{summary}
					</div>
					{this.state.viewOpen ? gameView : ""}
				</React.Fragment>
			);
		}
		return (
			<React.Fragment>
				<Accordion
					key="game-details"
					onChange={(ev, exp) => {
						this.setState({ expanded: exp });
					}}
					square
					style={{
						border: "none",
						boxShadow: "none",
						padding: "0px",
						margin: "0px",
					}}
				>
					<AccordionSummary
						classes={{
							root: classes.accordionSummaryRoot,
							content: classes.accordionSummaryContent,
						}}
						expandIcon={<ExpandIcon />}
					>
						{summary}
					</AccordionSummary>
					<AccordionDetails className={classes.accordionDetails}>
						{this.state.expanded ? (
							<div>
								<div
									style={{
										display: "flex",
										flexDirection: "row",
										justifyContent: "space-between",
										flexWrap: "wrap",
										maxWidth: "960px",
										width: "100%",
										marginBottom: "16px",
									}}
								>
									<div
										style={{
											maxWidth: "460px",
										}}
									>
										{buttonDiv}
										{this.state.dead ? (
											<Typography style={{ color: "red" }}>Deleted</Typography>
										) : (
											""
										)}
										<GameMetadata
											game={this.state.game}
											withKickButtons={true}
											reloadGame={this.reloadGame}
										/>
									</div>
								</div>
								<Divider />
							</div>
						) : (
							""
						)}
					</AccordionDetails>
				</Accordion>
				{this.state.viewOpen ? gameView : ""}
				<NationPreferencesDialog
					parentCB={(c) => {
						this.nationPreferencesDialog = c;
					}}
					onSelected={null}
				/>
				{this.state.member ? (
					<RenameGameDialog
						onRename={this.reloadGame}
						game={this.state.game}
						parentCB={(c) => {
							this.renameGameDialog = c;
						}}
					/>
				) : (
					""
				)}
				{this.state.game.Properties.GameMaster &&
				this.state.game.Properties.GameMaster.Id === Globals.user.Id ? (
					<React.Fragment>
						<RescheduleDialog
							parentCB={(c) => {
								this.rescheduleDialog = c;
							}}
							onSubmit={this.onRescheduleSubmit}
						/>
						<ManageInvitationsDialog
							game={this.state.game}
							parentCB={(c) => {
								this.manageInvitationsDialog = c;
							}}
							reloadGame={this.reloadGame}
						/>
					</React.Fragment>
				) : (
					""
				)}
			</React.Fragment>
		);
	}
Example #14
Source File: GamePlayers.js    From dipact with GNU General Public License v3.0 4 votes vote down vote up
render() {
		const { classes } = this.props;
		if (this.state.open) {
			return (
				<Dialog
					onEntered={helpers.genOnback(this.close)}
					open={this.state.open}
					className="find-game-dialog"
					disableBackdropClick={false}
					classes={{
						paper: classes.paper,
					}}
					onClose={this.close}
				>
					<DialogTitle>Game & Player info</DialogTitle>
					<DialogContent>
						<Typography
							variant="subtitle2"
							style={{ fontWeight: "bold", paddingBottom: "8px" }}
						>
							Game settings
						</Typography>
						<GameMetadata game={this.props.game} noplayerlist="true" />

						<Accordion
							onChange={(ev, exp) => {
								this.setState({ expanded: exp });
								console.log(this);
							}}
							square
							style={{
								border: "none",
								boxShadow: "none",
								padding: "0px",
								margin: "0px",
								position: "inherit",
							}}
						>
							<AccordionSummary
								classes={{
									root: classes.accordionSummaryRoot,
									content: classes.accordionSummaryContent,
								}}
								style={{
									border: "none",
									boxShadow: "none",
									padding: "0px",
									margin: "0px",
								}}	
								expandIcon={<ExpandIcon />}
							>
								<Typography variant="subtitle2" style={{fontWeight: "bold", marginTop: "8px"}}>Variant rules</Typography>
							</AccordionSummary>
							<AccordionDetails className={classes.accordionDetails} style={{padding: "0"}}>
								{this.state.expanded ? (
															<Typography variant="subtitle2" style={{ paddingBottom: "8px" }}>

										

											{this.props.variant.Properties.Rules}
										
									</Typography>
								) : (
									""
								)}
							</AccordionDetails>
						</Accordion>

						<Typography
							variant="subtitle2"
							style={{
								fontWeight: "bold",
								paddingBottom: "8px",
								paddingTop: "8px",
							}}
						>
							Players
						</Typography>
						<Typography variant="subtitle2" style={{ paddingBottom: "8px" }}>
							Banning a player means you'll never play with them again.
						</Typography>
						{this.state.gameStates
							? this.props.game.Properties.Members.map((member) => {
									return (
										<React.Fragment key={member.Nation + "-fragment"}>
											<div
												style={{
													display: "flex",
													width: "100%",
													flexWrap: "wrap",
													marginBottom: "12px",
												}}
											>
												<div
													style={{
														width: "40px",
														height: "40px",
														marginRight: "8px",
													}}
												>
													<UserAvatar
														onNewGameState={this.props.onNewGameState}
														game={this.props.game}
														gameState={
															this.member
																? this.state.gameStates[this.member.Nation]
																: null
														}
														banChange={(_) => {
															this.forceUpdate();
														}}
														user={member.User}
													/>
												</div>

												<div
													style={{
														display: "flex",
														flexDirection: "column",
													}}
												>
													<Typography variant="body1">
														{member.Nation}
													</Typography>
													<Typography variant="subtitle2">
														{member.User.Name}
													</Typography>
												</div>

												<div
													style={{
														marginLeft: "auto",
														display: "flex",
														paddingLeft: "8px",
													}}
												>
													<FormControlLabel
														control={
															<Checkbox
																disabled={
																	!member.User.Id ||
																	member.User.Id === Globals.user.Id
																}
																checked={!!this.state.bans[member.User.Id]}
																onChange={this.toggleBanned(member.User.Id)}
																color="primary"
															/>
														}
														label="Ban"
													/>

													<FormControlLabel
														control={
															<Checkbox
																disabled={
																	!this.member ||
																	member.Nation === this.member.Nation
																}
																checked={
																	this.member &&
																	(
																		this.state.gameStates[this.member.Nation]
																			.Properties.Muted || []
																	).indexOf(member.Nation) !== -1
																}
																onChange={this.toggleMuted(member.Nation)}
																color="primary"
															/>
														}
														label="Mute"
														style={{
															marginRigh: "0px",
														}}
													/>
												</div>
											</div>
										</React.Fragment>
									);
							  })
							: ""}

						<DialogActions className={classes.dialogActions}>
							<Button onClick={this.close} color="primary">
								Close
							</Button>
						</DialogActions>
					</DialogContent>
				</Dialog>
			);
		} else {
			return "";
		}
	}
Example #15
Source File: GameResults.js    From dipact with GNU General Public License v3.0 4 votes vote down vote up
render() {
		const { classes } = this.props;
		if (!this.state.open) {
			return "";
		}
		return (
			<Dialog
				onEntered={helpers.genOnback(this.close)}
				open={this.state.open}
				disableBackdropClick={false}
				classes={{
					paper: classes.paper,
				}}
				onClose={this.close}
			>
				<DialogTitle>Game result</DialogTitle>
				<DialogContent style={{ paddingBottom: "0px" }}>
					{this.state.gameResult ? (
						this.state.gameResult.Properties.SoloWinnerMember ? (
							<Typography>
								The game was won by{" "}
								{
									(
										this.props.game.Properties.Members || []
									).find((m) => {
										return (
											m.Nation ===
											this.state.gameResult.Properties
												.SoloWinnerMember
										);
									}).User.Name
								}{" "}
								playing{" "}
								{
									this.state.gameResult.Properties
										.SoloWinnerMember
								}
								.
							</Typography>
						) : (
							<Typography>
								The game was a draw.
								{this.state.gameResult.Properties.Scores[0]
									.Score >
								this.state.gameResult.Properties.Scores[1].Score
									? " " +
									  (
											this.props.game.Properties
												.Members || []
									  ).find((m) => {
											return (
												m.Nation ===
												this.state.gameResult.Properties
													.Scores[0].Member
											);
									  }).User.Name +
									  " earned the highest score as " +
									  this.state.gameResult.Properties.Scores[0]
											.Member +
									  "."
									: ""}
							</Typography>
						)
					) : (
						""
					)}

					<Typography variant="caption">
						Points below are based on the{" "}
						<a
							href="http://windycityweasels.org/tribute-scoring-system/"
							target="_blank"
							rel="noreferrer"
						>
							Tribute
						</a>{" "}
						system.
					</Typography>
					<List>
						{this.state.gameResult
							? this.state.gameResult.Properties.Scores.map(
									(score) => {
										const trueSkill = this.state.trueSkills
											? this.state.trueSkills.Properties.find(
													(l) => {
														return (
															l.Properties
																.Member ===
															score.Member
														);
													}
											  )
											: null;
										return (
											<ListItem
												key={"nation_" + score.Member}
												style={{
													padding: "0px",
													margin: "0px",
												}}
											>
												<Accordion
													square
													style={{
														padding: "0px",
														margin: "0px",
														boxShadow: "none",
														width: "100%",
													}}
												>
													<AccordionSummary
														style={{
															padding: "0px",
															margin: "0px",
															boxShadow: "none",
														}}
														expandIcon={
															<ExpandIcon />
														}
													>
														<div
															style={{
																backgroundColor:
																	"white",
																padding:
																	"0px 0px",
																margin: "0px",
																display: "flex",
																flexWrap:
																	"wrap",
																alignItems:
																	"center",
																width: "100%",
																color: "rgba(40, 26, 26, 0.54)",
															}}
														>
															<NationAvatar
																game={
																	this.props
																		.game
																}
																gameState={
																	this.props
																		.gameState
																}
																newGameState={
																	this.props
																		.newGameState
																}
																nation={
																	score.Member
																}
																variant={
																	this.props
																		.variant
																}
															/>
															<div
																style={{
																	marginLeft:
																		"8px",
																	display:
																		"flex",
																	flexDirection:
																		"column",
																}}
															>
																<Typography
																	variant="subtitle2"
																	color="primary"
																>
																	{
																		score.Member
																	}
																</Typography>
																{this.state
																	.gameResult
																	.Properties
																	.SoloWinnerMember ===
																score.Member ? (
																	<Typography
																		variant="caption"
																		key="solo-winner"
																	>
																		Solo
																		winner
																	</Typography>
																) : (
																	""
																)}
																{this.state
																	.gameResult
																	.Properties
																	.SoloWinnerMember ===
																	"" &&
																(
																	this.state
																		.gameResult
																		.Properties
																		.EliminatedMembers ||
																	[]
																).indexOf(
																	score.Member
																) === -1 &&
																(
																	this.state
																		.gameResult
																		.Properties
																		.NMRMembers ||
																	[]
																).indexOf(
																	score.Member
																) === -1 ? (
																	<Typography
																		variant="caption"
																		key="dias-member"
																	>
																		Draw
																		participant
																	</Typography>
																) : (
																	""
																)}
																{(
																	this.state
																		.gameResult
																		.Properties
																		.EliminatedMembers ||
																	[]
																).indexOf(
																	score.Member
																) !== -1 ? (
																	<Typography
																		variant="caption"
																		key="eliminated-member"
																	>
																		Eliminated
																	</Typography>
																) : (
																	""
																)}
																{(
																	this.state
																		.gameResult
																		.Properties
																		.NMRMembers ||
																	[]
																).indexOf(
																	score.Member
																) !== -1 ? (
																	<Typography
																		variant="caption"
																		key="nmr-member"
																	>
																		Abandoned
																		the game
																	</Typography>
																) : (
																	""
																)}
															</div>
															<div
																style={{
																	display:
																		"flex",
																	flexDirection:
																		"column",
																	alignSelf:
																		"flex-end",
																	marginLeft:
																		"auto",
																}}
															>
																<Typography
																	variant="subtitle2"
																	color="primary"
																	style={{
																		textAlign:
																			"right",
																	}}
																>
																	{helpers.twoDecimals(
																		score.Score
																	)}{" "}
																	points
																</Typography>
																<Typography
																	variant="caption"
																	style={{
																		textAlign:
																			"right",
																	}}
																>
																	{score.SCs}{" "}
																	SCs{" "}
																</Typography>
															</div>
														</div>
													</AccordionSummary>

													<AccordionDetails>
														<div
															style={{
																width: "100%",
															}}
														>
															{score ? (
																<div
																	style={{
																		display:
																			"flex",
																		flexDirection:
																			"column",
																		padding:
																			"0px",
																		margin: "0px",
																		width: "100%",
																	}}
																>
																	<div>
																		{score.Explanation.split(
																			"\n"
																		)
																			.filter(
																				(
																					l
																				) => {
																					return (
																						l.trim() !==
																						""
																					);
																				}
																			)
																			.map(
																				(
																					line
																				) => {
																					const parts =
																						line.split(
																							":"
																						);
																					return (
																						<div
																							style={{
																								display:
																									"flex",
																								justifyContent:
																									"space-between",
																								color: "rgba(40, 26, 26,0.3)",
																							}}
																							key={
																								line
																							}
																						>
																							<Typography variant="subtitle2">
																								{
																									parts[0]
																								}
																							</Typography>
																							<Typography variant="subtitle2">
																								{helpers.twoDecimals(
																									parts[1]
																								)}
																							</Typography>
																						</div>
																					);
																				}
																			)}

																		{trueSkill ? (
																			<div>
																				<div
																					style={{
																						borderTop:
																							"1px solid black",
																						display:
																							"flex",
																						justifyContent:
																							"space-between",
																						padding:
																							"0px",
																						margin: "0px 0px 16px 0px",
																						width: "100%",
																					}}
																				>
																					<Typography variant="subtitle2">
																						Total
																						points
																					</Typography>
																					<Typography variant="subtitle2">
																						{helpers.twoDecimals(
																							score.Score
																						)}
																					</Typography>
																				</div>
																				<div
																					style={{
																						display:
																							"flex",
																						justifyContent:
																							"space-between",
																						padding:
																							"0px",
																						margin: "0px",
																						width: "100%",
																						color: "rgba(40, 26, 26,0.3)",
																					}}
																				>
																					{trueSkill
																						.Properties
																						.Previous instanceof
																					Array ? (
																						<React.Fragment>
																							<Typography variant="subtitle2">
																								Previous
																								rating
																							</Typography>
																							<Typography variant="subtitle2">
																								{helpers.twoDecimals(
																									trueSkill
																										.Properties
																										.Previous[0]
																										.Rating
																								)}
																							</Typography>
																						</React.Fragment>
																					) : (
																						""
																					)}
																				</div>
																				<div
																					style={{
																						display:
																							"flex",
																						justifyContent:
																							"space-between",
																						padding:
																							"0px",
																						margin: "0px",
																						width: "100%",
																						color: "rgba(40, 26, 26,0.3)",
																					}}
																				>
																					{trueSkill
																						.Properties
																						.Previous instanceof
																					Array ? (
																						<React.Fragment>
																							<Typography variant="subtitle2">
																								Points
																								vs
																								Predicted
																								outcome
																							</Typography>
																							<Typography variant="subtitle2">
																								{helpers.twoDecimals(
																									trueSkill
																										.Properties
																										.Rating -
																										trueSkill
																											.Properties
																											.Previous[0]
																											.Rating
																								)}
																							</Typography>
																						</React.Fragment>
																					) : (
																						""
																					)}
																				</div>
																				<div
																					style={{
																						display:
																							"flex",
																						justifyContent:
																							"space-between",
																						padding:
																							"0px",
																						margin: "0px",
																						width: "100%",
																						borderTop:
																							"1px solid black",
																					}}
																				>
																					<Typography variant="subtitle2">
																						New
																						rating
																					</Typography>
																					<Typography variant="subtitle2">
																						{helpers.twoDecimals(
																							trueSkill
																								.Properties
																								.Rating
																						)}
																					</Typography>
																				</div>
																			</div>
																		) : (
																			<div
																				style={{
																					display:
																						"flex",
																					justifyContent:
																						"space-between",
																					padding:
																						"0px",
																					margin: "0px",
																					width: "100%",
																				}}
																			>
																				<div>
																					Total
																					points
																				</div>
																				<div>
																					{helpers.twoDecimals(
																						score.Score
																					)}
																				</div>
																			</div>
																		)}
																	</div>
																</div>
															) : (
																""
															)}
														</div>
													</AccordionDetails>
												</Accordion>
											</ListItem>
										);
									}
							  )
							: ""}
					</List>
					<DialogActions className={classes.dialogActions}>
						<Button onClick={this.close} color="primary">
							Close
						</Button>
					</DialogActions>
				</DialogContent>
			</Dialog>
		);
	}