@material-ui/core#ListSubheader JavaScript Examples
The following examples show how to use
@material-ui/core#ListSubheader.
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: customSidebar.js From x-admin-device-donation with MIT License | 6 votes |
|
SidebarWrapper = React.memo(function SidebarWrapper({
activePath,
filteredResources,
}) {
const classes = useStyles();
return (
<>
<UserSidebarHeader className={classes.sidebarHeader} />
<div className={classes.sidebarList}>
{filteredResources.map((item, index) => {
if (item.title)
return (
<ListSubheader key={index}>
<span className={classes.listTitle}>{item.label}</span>
</ListSubheader>
);
if (item.children) {
return (
<VerticalCollapse
key={index}
activePath={activePath}
item={item}
nestedLevel={0}
/>
);
}
return (
<VerticalItem
activePath={activePath}
key={index}
item={item}
nestedLevel={0}
/>
);
})}
</div>
</>
);
})
Example #2
| Source File: OftadehNavGroup.jsx From oftadeh-react-admin with MIT License | 6 votes |
|
OftadehNavGroup = props => {
const { item } = props;
return (
<>
<ListSubheader>{item.title}</ListSubheader>
{item.children && (
<React.Fragment>
{item.children.map(item => (
<React.Fragment key={item.id}>
{item.type === "group" && <NavGroup item={item} />}
{item.type === "collapse" && <OftadehNavCollapse item={item} />}
{item.type === "item" && <OftadehNavItem item={item} />}
{item.type === "link" && <OftadehNavLink item={item} />}
</React.Fragment>
))}
</React.Fragment>
)}
</>
);
}
Example #3
| Source File: BidGroup.js From akashlytics-deploy with GNU General Public License v3.0 | 5 votes |
|
export function BidGroup({
bids,
gseq,
selectedBid,
handleBidSelected,
disabled,
providers,
filteredBids,
deploymentDetail,
isFilteringFavorites,
groupIndex,
totalBids
}) {
const classes = useStyles();
const [resources, setResources] = useState();
const allBidsClosed = bids.every((b) => b.state === "closed");
const fBids = bids.filter((bid) => filteredBids.includes(bid.id));
useEffect(() => {
const currentGroup = deploymentDetail?.groups.find((g) => g.group_id.gseq === parseInt(gseq));
if (currentGroup) {
const resourcesSum = {
cpuAmount: deploymentGroupResourceSum(currentGroup, (r) => parseInt(r.cpu.units.val) / 1000),
memoryAmount: deploymentGroupResourceSum(currentGroup, (r) => parseInt(r.memory.quantity.val)),
storageAmount: deploymentGroupResourceSum(currentGroup, (r) => getStorageAmount(r))
};
setResources(resourcesSum);
}
}, [deploymentDetail, gseq]);
return (
<Paper elevation={4} className={classes.root}>
<List
subheader={
<ListSubheader component="div" className={classes.subHeader}>
<Box display="flex" alignItems="center">
<Typography variant="h6">
<LabelValue label="GSEQ:" value={gseq} />
</Typography>
{resources && (
<Box marginLeft={2}>
<SpecDetail
cpuAmount={resources.cpuAmount}
memoryAmount={resources.memoryAmount}
storageAmount={resources.storageAmount}
color={allBidsClosed ? "default" : "primary"}
size="small"
/>
</Box>
)}
</Box>
<Box display="flex" alignItems="center">
{!!selectedBid && <CheckIcon color="primary" />}
<Box marginLeft="1rem">
{groupIndex + 1} of {totalBids}
</Box>
</Box>
</ListSubheader>
}
>
{fBids.map((bid) => {
const provider = providers && providers.find((x) => x.owner === bid.provider);
return <BidRow key={bid.id} bid={bid} provider={provider} handleBidSelected={handleBidSelected} disabled={disabled} selectedBid={selectedBid} />;
})}
{isFilteringFavorites && fBids.length === 0 && (
<Box padding=".5rem 1rem">
<Alert severity="info" variant="outlined">
<Typography variant="caption">There are no favorite providers for this group...</Typography>
</Alert>
</Box>
)}
</List>
</Paper>
);
}
Example #4
| Source File: FilterListContainer.jsx From covid-trials-dashboard with MIT License | 5 votes |
|
FilterList = () => {
const {
state: { selectedFilters },
dispatch,
} = useContext(store)
const { assets } = useAssets()
const filterOptions = useMemo(() => {
const mapper = {
sponsors: ({ sponsorName }) => sponsorName,
studyCompletionDate: formatDateForHuman,
studyStartDate: formatDateForHuman,
}
return getFilterOptions(assets, {
mapper,
exclude: [
'productId',
'registryLink',
'trialId',
'milestones',
'contact',
'siteLocations',
'countryCodes',
'numSites',
'sources',
'notes',
],
})
}, [assets])
const { t } = useTranslation('filters')
return (
<>
<ListSubheader>{t('filters')}</ListSubheader>
{Object.entries(filterOptions).map(([key, values]) => (
<Filter
key={key}
name={t(sentenceCase(key))}
selected={selectedFilters[key] || []}
options={values}
onSelect={option => dispatch(toggleFilter(key)(option))}
/>
))}
</>
)
}
Example #5
| Source File: ToolbarExtension.js From eSim-Cloud with GNU General Public License v3.0 | 5 votes |
|
function LibraryRow ({ library }) {
const dispatch = useDispatch()
const [open, setopen] = React.useState(false)
const classes = useStyles()
const components = useSelector(state => state.schematicEditorReducer.components)
const handleAppply = (lib) => {
dispatch(fetchLibrary(lib.id))
}
const handleUnapply = (lib) => {
dispatch(removeLibrary(lib.id))
}
const handleOpen = () => {
if (components[library.id].length === 0) { dispatch(fetchComponents(library.id)) }
setopen(!open)
}
return (
<Paper style={{ marginBottom: '.5rem' }}>
<ListSubheader>
<ListItem onClick={handleOpen} >
{open ? <ExpandLess /> : <ExpandMore />}
<ListItemText primary={library.library_name.slice(0, -4)} />
<ListItemSecondaryAction>
{(!library.default && !library.additional) &&
<Button variant="contained" size="small"
style={{ backgroundColor: '#ff1744', color: '#ffffff', margin: '.5rem' }}
onClick={() => { dispatch(deleteLibrary(library.id)) }} hidden={library.default || library.additional} >
Delete
</Button>
}
{library.active
? <Button variant="contained" size="small" color="secondary"
onClick={() => { handleUnapply(library) }} style={{ margin: '.5rem' }}>
Remove
</Button>
: <Button variant="contained" size="small" color="primary"
onClick={() => { handleAppply(library) }} style={{ margin: '.5rem' }}>
Use
</Button>
}
</ListItemSecondaryAction>
</ListItem>
</ListSubheader>
{(components[library.id]) &&
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" style={{ paddingLeft: '1rem', paddingRight: '1rem' }}>
{components[library.id].map(component => {
return (
<ListItem alignItems='center' key={component.id} dense className={classes.nested}>
<ListItemText primary={component.name} secondary={component.description} />
</ListItem>
)
})}
</List>
</Collapse>
}
</Paper>
)
}
Example #6
| Source File: SidebarNav.js From git-insights with MIT License | 5 votes |
|
SidebarNav = props => {
const { pages, className, ...rest } = props;
const classes = useStyles();
return (
<List
{...rest}
className={clsx(classes.root, className)}
>
{pages.map(page => {
if (page.type === 'subheader') {
return (
<ListSubheader>{page.title}</ListSubheader>
);
} else if (page.type === 'divider') {
return (
<Divider className={classes.divider}/>
);
} else {
return (
<ListItem
className={classes.item}
disableGutters
key={page.title}
>
<Button
activeClassName={classes.active}
className={classes.button}
component={CustomRouterLink}
to={page.href}
>
<div className={classes.icon}>{page.icon}</div>
{page.title}
</Button>
</ListItem>
);
}
})}
</List>
);
}
Example #7
| Source File: SideNav.jsx From mfe-webpack-demo with MIT License | 5 votes |
|
export default function SideNav() {
const classes = useStyles();
return (
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper
}}
anchor="left"
>
<div className={classes.toolbar}>
<Typography variant="h6">SideNav</Typography>
</div>
<Divider />
<List>
<ListSubheader>Demo Pages</ListSubheader>
<ListItem button component={Link} to="/">
<ListItemText primary="Main" />
</ListItem>
<ListItem button component={Link} to="/ui-library">
<ListItemText primary="UI Library" />
</ListItem>
<ListItem button component={Link} to="/dialog">
<ListItemText primary="Dialog" />
</ListItem>
<ListItem button component={Link} to="/routing/foo">
<ListItemText primary="Routing" />
</ListItem>
<ListSubheader>Apps</ListSubheader>
<ListItem button component="a" href="http://localhost:3001">
<ListItemText primary="App #1" secondary="http://localhost:3001" />
</ListItem>
<ListItem button component="a" href="http://localhost:3002">
<ListItemText primary="App #2" secondary="http://localhost:3002" />
</ListItem>
<ListItem button component="a" href="http://localhost:3003">
<ListItemText primary="App #3" secondary="http://localhost:3003" />
</ListItem>
</List>
</Drawer>
);
}
Example #8
| Source File: SideNav.jsx From module-federation-examples with MIT License | 5 votes |
|
export default function SideNav() {
const classes = useStyles();
return (
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
anchor="left"
>
<div className={classes.toolbar}>
<Typography variant="h6">SideNav</Typography>
</div>
<Divider />
<List>
<ListSubheader>Demo Pages</ListSubheader>
<ListItem button component={Link} to="/">
<ListItemText primary="Main" />
</ListItem>
<ListItem button component={Link} to="/ui-library">
<ListItemText primary="UI Library" />
</ListItem>
<ListItem button component={Link} to="/dialog">
<ListItemText primary="Dialog" />
</ListItem>
<ListItem button component={Link} to="/svelte">
<ListItemText primary="Svelte Page" />
</ListItem>
<ListItem button component={Link} to="/routing/foo">
<ListItemText primary="Routing" />
</ListItem>
<ListSubheader>Apps</ListSubheader>
<ListItem button component="a" href="http://localhost:3001">
<ListItemText primary="App #1" secondary="http://localhost:3001" />
</ListItem>
<ListItem button component="a" href="http://localhost:3002">
<ListItemText primary="App #2" secondary="http://localhost:3002" />
</ListItem>
<ListItem button component="a" href="http://localhost:3003">
<ListItemText primary="App #3" secondary="http://localhost:3003" />
</ListItem>
<ListItem button component="a" href="http://localhost:3004">
<ListItemText primary="App #4" secondary="http://localhost:3004" />
</ListItem>
<ListItem button component="a" href="http://localhost:3005">
<ListItemText primary="App #5" secondary="http://localhost:3005" />
</ListItem>
</List>
</Drawer>
);
}
Example #9
| Source File: contributors.js From GSOD.Contributors_website with Mozilla Public License 2.0 | 5 votes |
|
GetContributors = () => {
const classes = useStyles();
const [hasError, setErrors] = useState(false);
const [contributors, setContributors] = useState([]);
const [loading, setLoading] = useState(false)
useEffect(() => {
let mounted = true;
setLoading(true)
fetch("https://api.github.com/repos/moja-global/FLINT/contributors",
{headers: { 'Authorization': 'Bearer '+process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN,}})
.then(res => res.json()).then(
res => {
if(mounted && contributors.length == 0){
setContributors(res);
setLoading(false)
console.log(contributors);}}
).catch(err => {
setLoading(false)})
return () => mounted = false;
}, [contributors])
return (
<div className={classes.root}>
<Grid container>
<Grid xs={12}>
<h1> All Contributors List</h1>
<p> Contribute to Moja Global and get featured in this list!</p>
</Grid>
</Grid>
<GridList cellHeight={160} className={classes.gridList} cols={4}>
<GridListTile key="Subheader" cols={4} style={{ height: 'auto' }}>
<ListSubheader component="div">All contributors</ListSubheader>
</GridListTile>
{contributors.map( contributor => (
<GridListTile key={contributor.id} >
<img src={contributor.avatar_url} alt={contributor.login} />
<GridListTileBar
title={contributor.login}
subtitle={<span>Contributions: {contributor.contributions}</span>}
actionIcon={
<IconButton href={contributor.url} aria-label={`info about ${contributor.login}`} className={classes.icon}>
<InfoIcon />
</IconButton>
}
/>
</GridListTile>
))
}
</GridList>
</div>
);
}
Example #10
| Source File: MobileNavigation.jsx From archeage-tools with The Unlicense | 4 votes |
|
render() {
const {
mobile,
setMobile,
darkMode,
setDarkMode,
menuItems,
session,
myAccountUrl,
open,
handleOpen,
handleClose,
openDialog,
hideAds,
setHideAds,
} = this.props;
const { expanded } = this.state;
return (
<>
{mobile &&
<IconButton color="inherit" aria-label="Open Drawer" onClick={handleOpen}>
<MenuIcon />
</IconButton>}
<Drawer anchor="right" open={mobile && open} onClose={handleClose}>
<List
style={{ width: 250 }}
subheader={<ListSubheader component={Paper}>ArcheAge Tools</ListSubheader>}
>
{navigation.map(navLink => [
<ListItem
button
onClick={navLink.children ? this.handleExpand(navLink.name) : () => push(navLink.path)}
key={navLink.name}
>
<ListItemIcon><span className={cn('nav-icon', navLink.name)} /></ListItemIcon>
<ListItemText primary={navLink.name} />
{navLink.children && (expanded[navLink.name] ? <ExpandLessIcon /> : <ExpandMoreIcon />)}
</ListItem>,
<Collapse in={expanded[navLink.name]} timeout="auto" unmountOnExit key={`collapse-${navLink.name}`}>
<List component="div" disablePadding className="nested-list">
{navLink.path && navLink.mobileName &&
<Link
to={navLink.path}
color="inherit"
onClick={handleClose}
underline="none"
>
<ListItem button>
<ListItemText primary={navLink.mobileName} />
</ListItem>
</Link>}
{navLink.children && navLink.children.map(child => (
<Link
to={child.path}
color="inherit"
key={`${navLink.name}-${child.name}`}
onClick={handleClose}
underline="none"
>
<ListItem button>
<ListItemText primary={child.name} />
</ListItem>
</Link>
))}
</List>
</Collapse>,
])}
<Divider />
<ListItem button onClick={this.handleExpand('Account')}>
<ListItemIcon>
{session.avatarSrc
? <Avatar
src={session.avatarSrc}
className={cn('avatar', 'nav-icon', { [session.avatarPlatform]: true })}
/>
: <span className="nav-icon Account" />}
</ListItemIcon>
<ListItemText primary={session.username || 'Account'} />
{expanded.Account ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</ListItem>
<Collapse in={expanded.Account} timeout="auto" unmountOnExit>
<List component="div" disablePadding className="nested-list">
{session.isAuthenticated && !session.verified &&
<MuiLink href={myAccountUrl} color="inherit" underline="none" onClick={handleClose}>
<ListItem button className="nested-icon">
<ListItemIcon><WarningIcon className="verify-warn" /></ListItemIcon>
<ListItemText primary="E-mail is not verified." />
</ListItem>
</MuiLink>}
{menuItems}
</List>
</Collapse>
<ListItem button onClick={this.handleExpand('Settings')}>
<ListItemIcon><span className="nav-icon Settings" /></ListItemIcon>
<ListItemText primary="Settings" />
{expanded.Settings ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</ListItem>
<Collapse in={expanded.Settings} timeout="auto" unmountOnExit>
<List component="div" disablePadding className="nested-list-icons">
<ListItem button onClick={() => openDialog(DIALOG_MY_GAME)}>
<ListItemIcon><ListAltIcon /></ListItemIcon>
<ListItemText primary="My ArcheAge" />
</ListItem>
<ListItem button onClick={() => setDarkMode(!darkMode)}>
<ListItemIcon>{darkMode ? <BrightnessHighIcon /> : <Brightness4Icon />}</ListItemIcon>
<ListItemText primary={darkMode ? 'Light Mode' : 'Dark Mode'} />
</ListItem>
<ListItem button onClick={() => {
setMobile(false);
handleClose();
}}>
<ListItemIcon><DesktopWindowsIcon /></ListItemIcon>
<ListItemText primary="Switch to Desktop" />
</ListItem>
<ListItem button onClick={() => setHideAds(!hideAds)}>
<ListItemIcon>{hideAds ? <VisibilityIcon /> : <VisibilityOffIcon />}</ListItemIcon>
<ListItemText primary={hideAds ? 'Show Ads' : 'Hide Ads'} />
</ListItem>
</List>
</Collapse>
<Divider />
<ListItem>
<div style={{ margin: 'auto' }}>
<DiscordButton />
</div>
</ListItem>
<ListItem>
<div style={{ margin: 'auto' }}>
<DonateButton />
</div>
</ListItem>
</List>
</Drawer>
</>
);
}
Example #11
| Source File: NotificationsPopover.js From course-manager with MIT License | 4 votes |
|
export default function NotificationsPopover() {
const anchorRef = useRef(null);
const [open, setOpen] = useState(false);
const [notifications, setNotifications] = useState(NOTIFICATIONS);
const totalUnRead = notifications.filter((item) => item.isUnRead === true).length;
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleMarkAllAsRead = () => {
setNotifications(
notifications.map((notification) => ({
...notification,
isUnRead: false
}))
);
};
return (
<>
<IconButton
ref={anchorRef}
onClick={handleOpen}
color={open ? 'primary' : 'default'}
sx={{
...(open && {
bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
})
}}
>
<Badge badgeContent={totalUnRead} color="error">
<Icon icon={bellFill} width={20} height={20} />
</Badge>
</IconButton>
<MenuPopover
open={open}
onClose={handleClose}
anchorEl={anchorRef.current}
sx={{ width: 360 }}
>
<Box sx={{ display: 'flex', alignItems: 'center', py: 2, px: 2.5 }}>
<Box sx={{ flexGrow: 1 }}>
<Typography variant="subtitle1">Notifications</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
You have {totalUnRead} unread messages
</Typography>
</Box>
{totalUnRead > 0 && (
<Tooltip title=" Mark all as read">
<IconButton color="primary" onClick={handleMarkAllAsRead}>
<Icon icon={doneAllFill} width={20} height={20} />
</IconButton>
</Tooltip>
)}
</Box>
<Divider />
<Scrollbar sx={{ height: { xs: 340, sm: 'auto' } }}>
<List
disablePadding
subheader={
<ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
New
</ListSubheader>
}
>
{notifications.slice(0, 2).map((notification) => (
<NotificationItem key={notification.id} notification={notification} />
))}
</List>
<List
disablePadding
subheader={
<ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
Before that
</ListSubheader>
}
>
{notifications.slice(2, 5).map((notification) => (
<NotificationItem key={notification.id} notification={notification} />
))}
</List>
</Scrollbar>
<Divider />
<Box sx={{ p: 1 }}>
<Button fullWidth disableRipple component={RouterLink} to="#">
View All
</Button>
</Box>
</MenuPopover>
</>
);
}
Example #12
| Source File: SettingsDialog.js From budgie-stream with MIT License | 4 votes |
|
SettingsDialog = (props) => {
const { app } = useContext(ClientContext);
const [appInfo] = app;
const [sampleRate, setSampleRate] = useState(Store.get("samplerate"));
const { close } = props;
const classes = useStyles();
const handleSampleChange = (e) => {
setSampleRate(e.target.value);
};
const handleOnClose = () => {
Store.set("samplerate", sampleRate);
close();
};
return (
<Dialog
fullScreen
open={props.open}
onClose={close}
TransitionComponent={Transition}
>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton
edge="start"
color="inherit"
onClick={close}
aria-label="close"
>
<CloseIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
SETTINGS
</Typography>
<Button autoFocus color="inherit" onClick={handleOnClose}>
SAVE
</Button>
</Toolbar>
</AppBar>
<List>
<ListSubheader>App Info</ListSubheader>
<ListItem>
<ListItemText
primary="Budgie Version"
secondary={appInfo.appVersion}
/>
</ListItem>
<ListItem>
<ListItemText primary="Local IP" secondary={appInfo.ip} />
</ListItem>
<Divider />
<ListSubheader>Settings</ListSubheader>
<ListItem>
<TextField
label="Sample Rate (hz)"
type="number"
className={classes.textField}
value={sampleRate || 48000}
onChange={handleSampleChange}
InputLabelProps={{
shrink: true,
}}
/>
</ListItem>
<ListItem>
<FormControl className={classes.formControl}>
<InputLabel>Source</InputLabel>
<Tooltip title="Source selection is under development">
<Select disabled>
<MenuItem>Source 1</MenuItem>
<MenuItem>Source 2</MenuItem>
</Select>
</Tooltip>
</FormControl>
</ListItem>
</List>
</Dialog>
);
}
Example #13
| Source File: NavigationItems.js From SESTA-FMS with GNU Affero General Public License v3.0 | 4 votes |
|
function NavigationItems(props) {
var mount = false;
const [open, setOpen] = React.useState(true);
const [anchorEl, setAnchorEl] = React.useState(null);
const [moduleStates, setModuleStates] = React.useState({});
const [modules, setModules] = React.useState([]);
const isMobile = window.innerWidth < 500;
const { className, ...rest } = props;
const theme = useTheme();
const [openMenu, setOpenMenu] = React.useState(true);
const isDesktop = useMediaQuery(theme.breakpoints.up("lg"), {
defaultMatches: true,
});
const classes = useStyles();
useEffect(() => {
if (
!props.location.pathname.includes("/members") ||
!props.location.pathname.includes("/activities") ||
!props.location.pathname.includes("/loans") ||
!props.location.pathname.includes("/users") ||
!props.location.pathname.includes("/reports") ||
!props.location.pathname.includes("/summary-report") ||
!props.location.pathname.includes("/activity-report") ||
props.location.pathname !== "/"
) {
if (openMenu !== true) {
setOpenMenu(true);
}
} else {
setOpenMenu(false);
}
if (
props.location.pathname.includes("/members") ||
props.location.pathname.includes("/activities") ||
props.location.pathname.includes("/loans") ||
props.location.pathname.includes("/users") ||
props.location.pathname.includes("/reports") ||
props.location.pathname.includes("/summary-report") ||
props.location.pathname.includes("/activity-report") ||
props.location.pathname === "/"
) {
if (openMenu == true) {
setOpenMenu(false);
}
} else {
setOpenMenu(true);
}
}, []);
const updateMenuItemState = (moduleId) => {
let moduleStatesArr = { ...moduleStates };
map(modules, (module, key) => {
if (module.id === moduleId)
moduleStatesArr[module.id]["open"] = !moduleStates[module.id]["open"];
});
setModuleStates(moduleStatesArr);
};
const handleClick = () => {
setOpenMenu(!openMenu);
};
const masterMenu = () => {
return renderSideMenu1();
return masterMenu;
};
const renderSideMenu1 = () => {
let masterMenu = [];
let otherMenu = [];
let moduleArray = [
"Fpos",
"SHGs",
"Villages",
"Village Organizations",
"States",
"Pgs",
"Countries",
"Loan Purpose",
"Activity Types",
];
let nav1 = map(modules, (module, key) => {
if (module.modules.length <= 0) {
if (moduleArray.includes(module.name)) {
masterMenu.push(
<Collapse in={openMenu} timeout="auto" unmountOnExit>
<ListItem className={clsx(classes.subMenuList, className)}>
<NavigationItem link={module.url} text={module.name} />
</ListItem>
</Collapse>
);
} else {
otherMenu.push(
<NavigationItem
link={module.url}
text={module.name}
icon={module.icon_class}
/>
);
}
} else {
return (
<div>
<NavigationItem
text={module.name}
icon={module.icon_class}
showopen="true"
open={moduleStates[module["id"]].open}
clicked={() => updateMenuItemState(module.id)}
/>
<Collapse
in={moduleStates[module["id"]].open}
timeout="auto"
unmountOnExit
>
<List component="div" disablePadding>
{map(module.modules, (submodule, subkey) => {
return (
<NavigationItem
link={submodule.url}
text={submodule.name}
icon={submodule.icon_class}
nested="true"
/>
);
})}
</List>
</Collapse>
</div>
);
}
});
return (
<React.Fragment>
{otherMenu}
{auth.getUserInfo().role.name !== "CSP (Community Service Provider)" ? (
<List
subheader={
<ListSubheader
component="div"
id="nested-list-subheader"
button
onClick={handleClick}
className={clsx(classes.masterMenuSubHeader, className)}
>
<QueuePlayNextIcon
className={clsx(classes.masterMenuIcon, className)}
></QueuePlayNextIcon>
<span
id="master-menu-label"
className={clsx(classes.masterMenuSpan, className)}
>
Masters{" "}
</span>
{openMenu ? (
<ExpandMore
className={clsx(classes.masterMenuExtendIcon, className)}
/>
) : (
<ArrowForwardIosIcon
style={{ fontSize: "medium" }}
className={clsx(classes.masterMenuExtendIcon, className)}
/>
)}
</ListSubheader>
}
>
{masterMenu}
</List>
) : (
""
)}
</React.Fragment>
);
};
const renderSideMenu = () => {
let nav = map(modules, (module, key) => {
if (module.modules.length <= 0) {
return (
<NavigationItem
link={module.url}
text={module.name}
icon={module.icon_class}
/>
);
} else {
return (
<div>
<NavigationItem
text={module.name}
icon={module.icon_class}
showopen="true"
open={moduleStates[module["id"]].open}
clicked={() => updateMenuItemState(module.id)}
/>
<Collapse
in={moduleStates[module["id"]].open}
timeout="auto"
unmountOnExit
>
<List component="div" disablePadding>
{map(module.modules, (submodule, subkey) => {
return (
<NavigationItem
link={submodule.url}
text={submodule.name}
icon={submodule.icon_class}
nested="true"
/>
);
})}
</List>
</Collapse>
</div>
);
}
});
return nav;
};
useEffect(() => {
let userInfo = auth.getUserInfo();
mount = true;
const fetchData = async () => {
await axios
.get(
process.env.REACT_APP_SERVER_URL +
"modules?_sort=order:ASC&module_null=true&displayNavigation=true&is_active=true&roles.id_in=" +
userInfo.role.id,
{
headers: {
Authorization: "Bearer " + auth.getToken(),
},
}
)
.then((res) => {
let moduleStatesArr = {};
map(res.data, (module, key) => {
if (module.id in moduleStatesArr === false)
moduleStatesArr[module.id] = {};
moduleStatesArr[module.id] = { open: false };
});
if (mount) setModuleStates(moduleStatesArr);
if (mount) setModules(res.data);
});
};
fetchData();
return () => {
mount = false;
};
}, []);
return (
<Aux>
<List component="nav" className={clsx(classes.root, className)}>
{masterMenu()}
{!isDesktop ? (
<Aux>
<NavigationItem
link="/my-account"
text="My account"
icon="account_circle"
/>
<NavigationItem
clicked={() => {
auth.clearAppStorage();
props.history.push("/login");
}}
link="javascript:void(0);"
text="Logout"
icon="exit_to_app"
/>
</Aux>
) : (
""
)}
</List>
</Aux>
);
}
Example #14
| Source File: GameMasterStart.js From dipact with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<React.Fragment>
{this.hasGameMastered() ? (
<div
style={{
height: "calc(100vh - 60px)",
overflowY: "scroll",
}}
>
<List
style={{
maxWidth: "940px",
margin: "auto",
marginBottom: "64px",
}}
>
<li key="mastered-started" id="mastered-started-container">
<ul style={{ paddingInlineStart: 0 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingRight: "8px",
}}
>
<ListSubheader
style={{
backgroundColor: "white",
zIndex: "2",
marginBottom: "2px",
height: "44px",
color: "rgba(40, 26, 26, 0.56)",
}}
>
Ongoing games managed by me
</ListSubheader>
</div>
<ListItem
style={{
padding: "0px 16px 4px 16px",
width: "100%",
}}
>
<GameList
limit={128}
contained={true}
withDetails={true}
url={this.props.urls["mastered-started-games"]}
onPhaseMessage={(_) => {
this.masteredStartedGamesList.refresh();
this.masteredFinishedGamesList.refresh();
}}
parentCB={(c) => {
this.masteredStartedGamesList = c;
}}
onFilled={(_) => {
document.getElementById(
"mastered-started-container"
).style.display = "block";
}}
onEmpty={(_) => {
document.getElementById(
"mastered-started-container"
).style.display = "none";
}}
/>
</ListItem>
</ul>
</li>
<li key="mastered-staging" id="mastered-staging-container">
<ul style={{ paddingInlineStart: 0 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingRight: "8px",
}}
>
<ListSubheader
style={{
backgroundColor: "white",
zIndex: "2",
marginBottom: "2px",
height: "44px",
color: "rgba(40, 26, 26, 0.56)",
}}
>
Forming games managed by me
</ListSubheader>
</div>
<ListItem
style={{
padding: "0px 16px",
}}
>
<GameList
limit={128}
contained={true}
onPhaseMessage={(_) => {
this.masteredStartedGamesList.reload();
this.masteredStagingGamesList.reload();
}}
onFilled={(_) => {
document.getElementById(
"mastered-staging-container"
).style.display = "block";
}}
withDetails={true}
onEmpty={(_) => {
document.getElementById(
"mastered-staging-container"
).style.display = "none";
}}
parentCB={(c) => {
this.masteredStagingGamesList = c;
}}
url={this.props.urls["mastered-staging-games"]}
/>
</ListItem>
</ul>
</li>
<li key="mastered-finished" id="mastered-finished-container">
<ul style={{ paddingInlineStart: 0 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingRight: "8px",
}}
>
<ListSubheader
style={{
backgroundColor: "white",
zIndex: "2",
marginBottom: "2px",
height: "44px",
color: "rgba(40, 26, 26, 0.56)",
}}
>
Finished games managed by me
</ListSubheader>
<Button onClick={this.props.renderMasteredFinishedGames}>
View all
</Button>
</div>
<ListItem
style={{
padding: "0px 16px 4px 16px",
}}
>
<GameList
contained={true}
parentCB={(c) => {
this.masteredFinishedGamesList = c;
}}
onFilled={(_) => {
document.getElementById(
"mastered-finished-container"
).style.display = "block";
}}
onEmpty={(_) => {
document.getElementById(
"mastered-finished-container"
).style.display = "none";
}}
url={this.props.urls["mastered-finished-games"]}
limit={8}
/>
</ListItem>
</ul>
</li>
</List>
<AppBar
position="fixed"
color="primary"
style={{ top: "auto", bottom: 0 }}
>
<Toolbar style={{ justifyContent: "space-around" }}>
<Button
style={{ margin: 4 }}
variant="outlined"
color="secondary"
key="create"
onClick={(_) => {
this.createGameDialog.setState({
open: true,
});
}}
>
Create game
</Button>
</Toolbar>
</AppBar>
</div>
) : (
<React.Fragment>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "calc(100vh - 54px)",
overflowY: "scroll",
backgroundColor: "#FDE2B5",
}}
>
<div
id="top"
style={{
margin: "auto",
width: "100%",
maxWidth: "400px",
alignSelf: "center",
display: "flex",
flexDirection: "column",
}}
>
<Typography
variant="h5"
style={{ alignSelf: "center", padding: "16px" }}
>
My Managed Games
</Typography>
<Typography
variant="body2"
style={{
margin: "0px 16px 16px 16px",
}}
>
Games which you manage as Game Master (GM) will appear here.
<br />
<br />
As GM, you manage a game: who can join (as what nation), time
(set deadlines, pause and resume), active players (kick and
replace).
<br />
This is for tournaments or games with friends, but not for
public games (risk of abuse).
</Typography>
<Button
style={{
margin: "16px auto",
minWidth: "200px",
}}
color="primary"
variant="outlined"
key="create"
onClick={(_) => {
this.createGameDialog.setState({
open: true,
});
}}
>
Create new game
</Button>
</div>
<div id="bottom">
<div
style={{
backgroundImage: `url(${BattleGroundSvgPath})`,
height: "72px",
}}
>
<div
style={{
backgroundImage: `url(${CommanderSvgPath})`,
backgroundRepeat: "no-repeat",
height: "72px",
}}
></div>
</div>
<div
style={{
backgroundColor: "#291B1B",
display: "flex",
flexDirection: "column",
paddingBottom: "124px",
}}
></div>
</div>
</div>
</React.Fragment>
)}
<CreateGameDialog
gameCreated={(game) => {
if (game.Properties.GameMasterEnabled) {
//TODO: IF GAMEMASTERGAME CLOSE THE CREATEGAMEDIALOG
} else {
//TODO: IF NO GAMEMASTERGAME CLOSE THE CREATEGAMEDIALOG AND LOAD START.JS AS ACTIVITY
}
}}
parentCB={(c) => {
this.createGameDialog = c;
}}
/>
</React.Fragment>
);
}
Example #15
| Source File: OrderList.js From dipact with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<>
<Container maxWidth="md" style={{ overflowY: "scroll" }}>
<List>
{this.props.variant.Properties.Nations.slice()
.sort((n1, n2) => {
if (
this.props.member &&
n1 === this.props.member.Nation
) {
return -1;
} else if (
this.props.member &&
n2 === this.props.member.Nation
) {
return 1;
} else {
if (n1 < n2) {
return -1;
} else if (n2 < n1) {
return 1;
} else {
return 0;
}
}
})
.map((nation) => {
const phaseState =
this.state.phaseStates[nation];
const hasLink =
phaseState &&
phaseState.Links &&
phaseState.Links.find((l) => {
return l.Rel === "update";
});
const SCs = (
this.props.phase.Properties.SCs || []
).filter((sc) => {
return sc.Owner === nation;
}).length;
return (
<li key={"nation_" + nation}>
<ul style={{ paddingLeft: "0px" }}>
<ListSubheader
style={{
backgroundColor: "white",
padding: "8px 16px",
margin: "0px",
display: "flex",
flexWrap: "wrap",
color: "rgba(40, 26, 26, 0.54)",
}}
>
{" "}
<NationAvatar
nation={nation}
variant={this.props.variant}
gameState={
this.props.gameState
}
onNewGameState={
this.props
.onNewGameState
}
game={this.props.game}
style={{
border: `1px solid ${helpers.natCol(
nation,
this.props.variant
)}`,
}}
/>
<span
style={{
lineHeight: "1.2em",
marginLeft: "8px",
}}
>
<Typography
variant="body1"
color="primary"
>
{nation}
{this.props.member &&
this.props.member
.Nation ===
nation &&
hasLink
? " (You)"
: ""}
</Typography>
<div>
{SCs} supply center
{SCs === 1 ? "" : "s"}
<div>
{this.props
.member &&
this.props.member
.Nation ===
nation &&
hasLink &&
this.props.phase
.Properties
.SoloSCCount ? (
<React.Fragment>
{"(" +
this
.props
.phase
.Properties
.SoloSCCount +
" to win"}
{")"}
</React.Fragment>
) : (
""
)}
</div>
{this.buildMessage(
nation
)}{" "}
{/* TODO: What does this do? How does it render? */}
</div>
</span>
{phaseState ? (
<React.Fragment>
<div
style={{
flexGrow: "100",
}}
/>
<div
style={{
alignSelf:
"center",
}}
>
<Tooltip title="Confirmed their orders">
<SvgIcon
style={{
display:
phaseState
.Properties
.ReadyToResolve
? "inherit"
: "none",
}}
color="primary"
>
<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"
id="order_confirmed"
></path>
</SvgIcon>
</Tooltip>
{!phaseState ||
(this.props
.member &&
this.props
.member
.Nation ===
nation &&
hasLink) ? (
""
) : (
<Tooltip title="Wants a draw">
<SvgIcon
color="primary"
style={{
paddingLeft:
"8px",
display:
phaseState
.Properties
.WantsDIAS
? "inherit"
: "none",
}}
>
<path d="M2.98188996,2.24133335 L3.88833335,3.148 L3.8,3.23743687 L20.7705627,20.2079996 L20.8593333,20.119 L21.3666663,20.6261097 L20.0261097,21.9666663 L14.4292636,16.3704135 C14.0775047,16.5664056 13.6995541,16.7212717 13.301866,16.8285576 L13,16.9 L13,19.08 C15.489899,19.4617845 15.9132657,21.2212572 15.9852522,21.8085585 L16,22 L8,22 L8.00876781,21.8621764 C8.05962111,21.354459 8.40542355,19.5936066 10.7568801,19.1228674 L11,19.08 L11,16.9 C9.11538462,16.5153846 7.61908284,15.0767751 7.15117205,13.224249 L7.1,13 L4,13 C2.95,13 2.0822314,12.1799587 2.00551277,11.1486946 L2,11 L2,4 L2.06033335,4 L1.64133335,3.58188996 L2.98188996,2.24133335 Z M17,2 L17,4 L22,4 L22,11 C22,12.05 21.1799587,12.9177686 20.1486946,12.9944872 L20,13 L16.9,13 C16.852859,13.2309911 16.7898842,13.4561487 16.7122542,13.6742943 L6.99933335,3.962 L7,2 L17,2 Z M4.06033335,6 L4,6 L4,11 L7,11 L6.99933335,8.939 L4.06033335,6 Z M20,6 L17,6 L17,11 L20,11 L20,6 Z"></path>
</SvgIcon>
</Tooltip>
)}
<Tooltip title="Did not send orders">
<SvgIcon
color="primary"
style={{
paddingLeft:
"8px",
color: "#b71c1c",
display:
phaseState
.Properties
.OnProbation
? "inherit"
: "none",
}}
>
<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"></path>
</SvgIcon>
</Tooltip>
</div>
</React.Fragment>
) : (
""
)}
{this.props.member &&
this.props.member.Nation ===
nation &&
hasLink ? (
<div
style={{
alignSelf: "center",
marginLeft: "auto",
}}
>
<Button
color="primary"
variant="outlined"
style={{
padding:
"4px 8px",
margin: "4px 0px",
}}
onClick={this.toggleDIAS(
nation
)}
>
<Checkbox
checked={
phaseState
.Properties
.WantsDIAS
}
disabled={
!phaseState.Links ||
!phaseState.Links.find(
(l) => {
return (
l.Rel ===
"update"
);
}
)
}
style={{
padding:
"0px 8px 0px 0px",
}}
color="primary"
/>
Accept draw
<SvgIcon
style={{
paddingLeft:
"8px",
}}
>
<path
d={
phaseState
.Properties
.WantsDIAS
? "M2.98188996,2.24133335 L3.88833335,3.148 L3.8,3.23743687 L20.7705627,20.2079996 L20.8593333,20.119 L21.3666663,20.6261097 L20.0261097,21.9666663 L14.4292636,16.3704135 C14.0775047,16.5664056 13.6995541,16.7212717 13.301866,16.8285576 L13,16.9 L13,19.08 C15.489899,19.4617845 15.9132657,21.2212572 15.9852522,21.8085585 L16,22 L8,22 L8.00876781,21.8621764 C8.05962111,21.354459 8.40542355,19.5936066 10.7568801,19.1228674 L11,19.08 L11,16.9 C9.11538462,16.5153846 7.61908284,15.0767751 7.15117205,13.224249 L7.1,13 L4,13 C2.95,13 2.0822314,12.1799587 2.00551277,11.1486946 L2,11 L2,4 L2.06033335,4 L1.64133335,3.58188996 L2.98188996,2.24133335 Z M17,2 L17,4 L22,4 L22,11 C22,12.05 21.1799587,12.9177686 20.1486946,12.9944872 L20,13 L16.9,13 C16.852859,13.2309911 16.7898842,13.4561487 16.7122542,13.6742943 L6.99933335,3.962 L7,2 L17,2 Z M4.06033335,6 L4,6 L4,11 L7,11 L6.99933335,8.939 L4.06033335,6 Z M20,6 L17,6 L17,11 L20,11 L20,6 Z"
: "M17 4V2H7V4H2V11C2 12.1 2.9 13 4 13H7.1C7.5 14.96 9.04 16.5 11 16.9V19.08C8 19.54 8 22 8 22H16C16 22 16 19.54 13 19.08V16.9C14.96 16.5 16.5 14.96 16.9 13H20C21.1 13 22 12.1 22 11V4H17M4 11V6H7V11L4 11M20 11L17 11V6H20L20 11Z"
}
></path>
</SvgIcon>
</Button>
</div>
) : (
""
)}
</ListSubheader>
<List>
{(
this.state.orders[nation] ||
[]
).map((order) => {
return (
<ListItem
key={order.Parts.join(
","
)}
>
<ListItemText>
{helpers.humanizeOrder(
this.props
.variant,
order.Parts
)}
{(
order.Inconsistencies ||
[]
).map(
(incon) => {
return (
<div
style={{
color: "#f44336",
fontSize:
"14px",
}}
key={
incon
}
>
{this.presentInconsistency(
incon
)}
</div>
);
}
)}
</ListItemText>
{this.state
.resolutions[
order.Parts[0]
] ? (
<ListItemText
style={{
textAlign:
"right",
fontSize:
"14px",
color: "#f44336",
}}
>
{this.presentResult(
this
.state
.resolutions[
order
.Parts[0]
]
.Resolution
)}
</ListItemText>
) : (
""
)}
</ListItem>
);
})}
{this.props.member &&
this.props.member.Nation ===
nation
? this.state.homelessInconsistencies.map(
(incon) => {
if (
incon.Province
) {
return (
<ListItem
key={
incon.Province
}
style={{
color: "#f44336",
}}
>
<ListItemText>
{helpers.provName(
this
.props
.variant,
incon.Province
)}
:{" "}
{incon.Inconsistencies.map(
(
msg
) => {
return this.presentInconsistency(
msg
);
}
).join(
", "
)}
</ListItemText>
</ListItem>
);
} else {
return (
<ListItem
key={incon.Inconsistencies.join(
","
)}
style={{
color: "f44336",
}}
>
<ListItemText>
{incon.Inconsistencies.map(
(
msg
) => {
return this.presentInconsistency(
msg
);
}
).join(
", "
)}
</ListItemText>
</ListItem>
);
}
}
)
: ""}
</List>
</ul>
</li>
);
})}
</List>
</Container>
{this.props.phase &&
!this.props.phase.Properties.Resolved &&
this.props.member &&
this.state.phaseStates[this.props.member.Nation] ? (
<AppBar
style={{
padding: "16px 48px",
position: "sticky",
display: "flex",
alignItems: "center",
bottom: "0px",
zIndex: 1201,
}}
>
<Button
color="secondary"
variant="contained"
style={{ padding: "6px 16px", width: "214px" }}
onClick={this.toggleReady(this.props.member.Nation)}
>
<Checkbox
style={{ padding: "0px 8px 0px 0px" }}
disabled={
this.state.phaseStates[
this.props.member.Nation
].Properties.NoOrders
}
checked={
this.state.phaseStates[
this.props.member.Nation
].Properties.ReadyToResolve
}
color="primary"
/>
Confirm orders
</Button>
<Typography variant="caption">
{this.state.phaseStates[this.props.member.Nation]
.Properties.NoOrders
? "You have no orders to give this turn"
: "When you're ready for the next turn"}
</Typography>
</AppBar>
) : (
""
)}
</>
);
}
Example #16
| Source File: Start.js From dipact with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<React.Fragment>
{this.hasPlayed() ? (
<div
style={{
height: "calc(100vh - 60px)",
overflowY: "scroll",
}}
>
<div>
</div>
<NewsDialog />
<List style={{ maxWidth: "940px", margin: "auto", marginBottom: "64px" }}>
<li key="started" id="my-started-container">
<ul style={{ paddingInlineStart: 0 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingRight: "8px",
}}
>
<ListSubheader
style={{
backgroundColor: "white",
zIndex: "2",
marginBottom: "2px",
height: "44px",
color: "rgba(40, 26, 26, 0.56)",
}}
>
My ongoing games
</ListSubheader>
</div>
<ListItem
style={{
padding: "0px 16px 4px 16px",
width: "100%",
}}
>
<GameList
limit={128}
contained={true}
url={
this.props.urls[
"my-started-games"
]
}
onPhaseMessage={(_) => {
this.myStartedGamesList.refresh();
this.myFinishedGamesList.refresh();
}}
parentCB={(c) => {
this.myStartedGamesList = c;
}}
onFilled={(_) => {
document.getElementById(
"my-started-container"
).style.display = "block";
}}
onEmpty={(_) => {
document.getElementById(
"my-started-container"
).style.display = "none";
}}
/>
</ListItem>
</ul>
</li>
<li key="staging" id="my-staging-container">
<ul style={{ paddingInlineStart: 0 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingRight: "8px",
}}
>
<ListSubheader
style={{
backgroundColor: "white",
zIndex: "2",
marginBottom: "2px",
height: "44px",
color: "rgba(40, 26, 26, 0.56)",
}}
>
My forming games
</ListSubheader>
</div>
<ListItem
style={{
padding: "0px 16px",
}}
>
<GameList
limit={128}
contained={true}
onPhaseMessage={(_) => {
this.myStartedGamesList.reload();
this.myStagingGamesList.reload();
}}
onFilled={(_) => {
document.getElementById(
"my-staging-container"
).style.display = "block";
}}
withDetails={true}
onEmpty={(_) => {
document.getElementById(
"my-staging-container"
).style.display = "none";
}}
parentCB={(c) => {
this.myStagingGamesList = c;
}}
url={
this.props.urls[
"my-staging-games"
]
}
/>
</ListItem>
</ul>
</li>
<li key="finished" id="my-finished-container">
<ul style={{ paddingInlineStart: 0 }}>
<div
style={{
display: "flex",
justifyContent: "space-between",
paddingRight: "8px",
}}
>
<ListSubheader
style={{
backgroundColor: "white",
zIndex: "2",
marginBottom: "2px",
height: "44px",
color: "rgba(40, 26, 26, 0.56)",
}}
>
My finished games
</ListSubheader>
<Button
onClick={
this.props.renderMyFinishedGames
}
>
View all
</Button>
</div>
<ListItem
style={{
padding: "0px 16px 4px 16px",
}}
>
<GameList
contained={true}
parentCB={(c) => {
this.myFinishedGamesList = c;
}}
onFilled={(_) => {
document.getElementById(
"my-finished-container"
).style.display = "block";
}}
onEmpty={(_) => {
document.getElementById(
"my-finished-container"
).style.display = "none";
}}
url={
this.props.urls[
"my-finished-games"
]
}
limit={8}
/>
</ListItem>
</ul>
</li>
</List>
<AppBar
position="fixed"
color="primary"
style={{ top: "auto", bottom: 0 }}
>
<Toolbar style={{ justifyContent: "space-around" }}>
<Button
key="new-game"
onClick={(_) => {
this.setState({
newGameFormOpen:
!this.state.newGameFormOpen,
});
}}
variant="contained"
color="secondary"
>
New game
{this.state.newGameFormOpen ? (
<ExpandIcon />
) : (
""
)}
</Button>
</Toolbar>
<Slide
mountOnEnter
unmountOnExit
direction="up"
in={this.state.newGameFormOpen}
>
<Toolbar style={{ flexDirection: "column" }}>
<Button
style={{ margin: 4 }}
variant="outlined"
color="secondary"
key="find-open"
onClick={this.props.findOpenGame}
>
Browse open games
</Button>
<Button
style={{ margin: 4 }}
variant="outlined"
color="secondary"
key="find-private"
onClick={this.props.findPrivateGame}
>
Find game
</Button>
<Button
style={{ margin: 4 }}
variant="outlined"
color="secondary"
key="create"
onClick={(_) => {
this.createGameDialog.setState({
open: true,
});
}}
>
Create game
</Button>
</Toolbar>
</Slide>
</AppBar>
</div>
) : (
<React.Fragment>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "calc(100vh - 54px)",
overflowY: "scroll",
backgroundColor: "#FDE2B5",
}}
>
<div
id="top"
style={{
margin: "auto",
width: "100%",
maxWidth: "400px",
alignSelf: "center",
display: "flex",
flexDirection: "column",
}}
>
<img
alt="Diplity logo dark"
style={{
width: "calc(100% - 48px)",
maxWidth: "340px",
margin: "24px",
}}
src={LogoDarkSvgPath}
/>
<Typography
variant="body2"
style={{
margin: "0px 16px 0px 16px",
}}
>
Welcome! Diplomacy games are all about human
interaction, so they usually take or even
start after many days. Before joining your
first game, we strongly advise you to read
the rules.
</Typography>
<Button
style={{
margin: "16px auto",
minWidth: "200px",
}}
color="primary"
variant="outlined"
key="find-open"
href="https://diplicity.notion.site/How-to-play-39fbc4d1f1924c928c3953095062a983"
target="_blank"
>
Read the rules
</Button>
</div>
<div id="bottom">
<div
style={{
backgroundImage: `url(${SoldiersSvgPath})`,
height: "72px",
}}
></div>
<div
style={{
backgroundColor: "#291B1B",
display: "flex",
flexDirection: "column",
paddingBottom: "24px",
}}
>
<Button
style={{
margin: "4px auto",
minWidth: "200px",
}}
variant="outlined"
color="secondary"
key="find-open"
onClick={this.props.findOpenGame}
>
Browse open games
</Button>
<Button
style={{
margin: "4px auto",
minWidth: "200px",
}}
variant="outlined"
color="secondary"
key="find-private"
onClick={this.props.findPrivateGame}
>
Find game
</Button>
<Button
style={{
margin: "4px auto",
minWidth: "200px",
}}
variant="outlined"
color="secondary"
key="create"
onClick={(_) => {
this.createGameDialog.setState({
open: true,
});
}}
>
Create game
</Button>
</div>
</div>
</div>
</React.Fragment>
)}
<CreateGameDialog
gameCreated={(game) => {
if (game.Properties.GameMasterEnabled) {
//this.masteredStagingGamesList.reload();
//TODO: IF NO GAMEMASTERGAME CLOSE THE CREATEGAMEDIALOG AND LOAD GAME MASTER PAGE
} else {
this.myStagingGamesList.reload();
//TODO: IF NO GAMEMASTERGAME CLOSE THE CREATEGAMEDIALOG
}
}}
parentCB={(c) => {
this.createGameDialog = c;
}}
/>
<ErrorsDialog
key="errors-dialog"
parentCB={(c) => {
this.errorsDialog = c;
}}
/>
</React.Fragment>
);
}
