@material-ui/core#Accordion JavaScript Examples
The following examples show how to use
@material-ui/core#Accordion.
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 |
|
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 |
|
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: tagger.js From graphql-sample-apps with Apache License 2.0 | 6 votes |
|
Tagger = ({ tags, onChange, selected, expand }) => {
const classes = useStyles();
return (
<Accordion defaultExpanded={expand}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Filter by Tags</Typography>
</AccordionSummary>
<AccordionDetails className={classes.root}>
<FormControl component="fieldset">
<RadioGroup onClick={onChange} value={selected}>
{tags.map(({ name, value }) => (
<FormControlLabel
key={value}
value={value}
control={<Radio />}
label={name}
/>
))}
</RadioGroup>
</FormControl>
</AccordionDetails>
</Accordion>
);
}
Example #4
| Source File: Panel.js From Queen with MIT License | 5 votes |
|
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 #5
| Source File: FAQs.jsx From zubhub with GNU Affero General Public License v3.0 | 5 votes |
|
/**
* @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: constructor-list-base-price.js From horondi_admin with MIT License | 5 votes |
|
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 #7
| Source File: List.js From Dog-Book with MIT License | 5 votes |
|
useStyles = makeStyles({
Accordion_a: {
color: "red",
},
Accordion: {
color: "black",
},
})
Example #8
| Source File: List.js From Dog-Book with MIT License | 4 votes |
|
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 |
|
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 |
|
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: layout.js From ark-funds-monitor with GNU Affero General Public License v3.0 | 4 votes |
|
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>
{/* Version: {packageJson.version} */}
</p>
<p className='info-update-date'>Latest ARK Data: {arkData[0]['Date']}</p>
</div>
</Grid>
</Grid>
</div>
);
}
Example #12
| Source File: product-description.js From horondi_client_fe with MIT License | 4 votes |
|
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(/ /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 #13
| Source File: optionChain.jsx From GraphVega with MIT License | 4 votes |
|
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
<div style={{color:"royalblue", display:"inline"}}>
{this.state.symbol} {this.state.expiry}
</div>
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
<div style={{color:"royalblue", display:"inline"}}>
{this.state.symbol} {this.state.expiry}
</div>
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 #14
| Source File: MetaColInfo.js From Designer-Client with GNU General Public License v3.0 | 4 votes |
|
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 #15
| Source File: GameListElement.js From dipact with GNU General Public License v3.0 | 4 votes |
|
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 #16
| Source File: GamePlayers.js From dipact with GNU General Public License v3.0 | 4 votes |
|
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 #17
| Source File: GameResults.js From dipact with GNU General Public License v3.0 | 4 votes |
|
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>
);
}
