@material-ui/core#TableContainer JavaScript Examples
The following examples show how to use
@material-ui/core#TableContainer.
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: index.js From react-material-ui-table-row-drag-and-drop with Creative Commons Zero v1.0 Universal | 8 votes |
|
render() {
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Nr</TableCell>
<TableCell>Label</TableCell>
<TableCell align="right">Text</TableCell>
</TableRow>
</TableHead>
<TableBody component={DroppableComponent(this.onDragEnd)}>
{this.state.items.map((item, index) => (
<TableRow component={DraggableComponent(item.id, index)} key={item.id} >
<TableCell scope="row">{index + 1}</TableCell>
<TableCell>{item.primary}</TableCell>
<TableCell align="right">{item.secondary}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
}
Example #2
| Source File: LeaderboardDialog.js From dipact with GNU General Public License v3.0 | 7 votes |
|
render() {
return (
<Dialog
onEntered={helpers.genOnback(this.props.onClose)}
disableBackdropClick={false}
open={true}
onClose={this.onClose}
>
<DialogTitle>Leaderboard</DialogTitle>
<DialogContent>
<TableContainer component={Paper}>
<Table>
<TableBody>
{this.state.userStats.map((userStat, idx) => {
return this.makeRow(
idx + 1,
userStat.Properties.User
);
})}
</TableBody>
</Table>
</TableContainer>
</DialogContent>
<DialogActions>
<Button onClick={this.onClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
);
}
Example #3
| Source File: DataPreview.js From Otto with MIT License | 6 votes |
|
export default function DataPreview() {
const { state } = useState();
const classes = useStyles();
if (state.sample_dataset == null) {
return null;
}
const metadata = datasetMetadata[state.sample_dataset];
function getFormatted(label, index) {
if (metadata.units) {
return label + " (" + metadata.units[index] + ")";
}
return label;
}
return (
<Grid direction="column" container className={classes.noPadding}>
{/* Data Attributes */}
<Grid item>
<div className={classes.root}>
{chipData(state).map((data, index) => {
return (
<li key={index}>
<Chip label={data} color="primary" className={classes.chip} />
</li>
);
})}
</div>
</Grid>
{/* Table */}
<Grid item className={classes.fullWidth}>
<TableContainer component={Paper} className={classes.table}>
<Table size="small" aria-label="a dense table">
<TableHead>
<TableRow>
{metadata.columns.map((column, index) => (
<TableCell key={index}>
{getFormatted(
metadata.columnsMap
? metadata.columnsMap[column]
: column,
index
)}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{metadata.data.slice(0, 5).map((row, index) => (
<TableRow key={index}>
{metadata.columns.map((column, index) => (
<TableCell key={index} component="th" scope="row">
{row[column]}
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Grid>
</Grid>
);
}
Example #4
| Source File: Table.jsx From Turnip-Calculator with MIT License | 6 votes |
|
Table = ({ filters, patterns, minMaxPattern, quantiles, expanded }) => {
const { t } = useTranslation();
const classes = useStyles();
const { weekDays } = useWeekDays();
return useMemo(
() => (
<Box
bgcolor="bkgs.table"
borderRadius={8}
display="flex"
flexDirection="column"
mt={2}
overflow="hidden"
>
<TableContainer className={classes.container}>
<MaterialTable size="small" padding="none" stickyHeader>
<TableHead>
<TableRow>
<TableCell></TableCell>
<TableCell align="center">{t("Pattern")}</TableCell>
<TableCell align="center">{t("Chance")}</TableCell>
{weekDays.map((day) => (
<TableCell key={day} align="center" colSpan={2}>
{day}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
<DataRows
patterns={patterns}
minMaxPattern={minMaxPattern}
quantiles={quantiles}
filters={filters}
expanded={expanded}
/>
</TableBody>
</MaterialTable>
</TableContainer>
</Box>
),
[
classes.container,
expanded,
filters,
minMaxPattern,
patterns,
quantiles,
t,
weekDays,
]
);
}
Example #5
| Source File: TableView.js From qasong with ISC License | 5 votes |
|
function TableView({
searchResults,
nowPlaying,
setNowPlaying,
queue,
setQueue,
setSearchTableViewMode,
}) {
return (
<Box
mt={4}
id="video-grid"
style={{ maxWidth: "1200px", margin: "0 auto 200px auto" }}
>
<Box m={2}>
<Typography>
Search Results for <i>{searchResults.searchTerm}</i>
</Typography>
<IconButton
edge="end"
title="toggle light/dark theme"
onClick={() => setSearchTableViewMode(false)}
target="_blank"
>
<GridOnIcon />
</IconButton>
</Box>
<Grid container justify="center" alignItems="center">
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell align="center">Play</TableCell>
<TableCell align="center">Queue</TableCell>
<TableCell>Name</TableCell>
<TableCell>Author</TableCell>
<TableCell>View Count</TableCell>
<TableCell align="center">Thumbnail</TableCell>
</TableRow>
</TableHead>
<TableBody>
{searchResults.results.map((video) => {
return (
<VideoRow
key={video.videoId}
video={video}
nowPlaying={nowPlaying}
setNowPlaying={setNowPlaying}
queue={queue}
setQueue={setQueue}
/>
);
})}
</TableBody>
</Table>
</TableContainer>
</Grid>
</Box>
);
}
Example #6
| Source File: events.js From dscbppimt-official-website with MIT License | 5 votes |
|
function Events() {
const classes = useStyles()
const [ Events, setEvents] = useState([]);
const [ upcomingEvents, setUpcomingEvents ] = useState([])
const [ isLoading, setLoading ] = useState(false)
const URL = "https://dscbppimt-cms.herokuapp.com/files/"
useEffect(() => {
const today = new Date()
const todayDate = today.toISOString()
console.log(todayDate)
// 2020-10-11T09:10:30.698Z
setLoading(true);
Axios.get(`https://dscbppimt-cms.herokuapp.com/our-events?Date_gte=${todayDate}&_sort=Date:desc&_limit=2`).then(res => {
console.log(res.data);
setUpcomingEvents(res.data);
setLoading(false)
});
Axios.get(`https://dscbppimt-cms.herokuapp.com/our-events?Date_lt=${todayDate}&_sort=Date:desc`).then(res => {
console.log(res.data);
setEvents(res.data);
setLoading(false)
});
},[])
return (
<Layout>
<Box>
<Container style={{marginBottom : '4em'}}>
<Typography variant="h4" style={{fontWeight : '500', margin : '1em 0px'}}>Our Events</Typography>
<Grid container spacing={2}>
{isLoading ? <Skeleton variant="rect" width="100%" height="150px"/> : upcomingEvents.length !== 0 ? upcomingEvents.map(event => (
<Grid item xs={12} sm={6} md={12} key={event._id}>
<EventCard
Image={URL+(event.Image.formats.thumbnail.url)}
title={event.Title}
speaker={event.Speaker === 'None' ? null : event.Speaker }
description={event.Description}
date={event.Date}
data={event.Image}
register={event.Register}
learn={event.Learn}
/>
</Grid>
)) : <Container style={{width: '100%', textAlign: 'center', margin: '4em 0'}}><Typography align="center" >No Upcoming Events</Typography></Container>}
</Grid>
</Container>
</Box>
<Container style={{padding : '2em'}}>
<Box style={{display : 'flex', justifyContent : 'space-between'}}>
<Typography variant="h6">Past Events</Typography>
</Box>
<TableContainer component={Paper} className={classes.tableContainer}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="center">Event</TableCell>
<TableCell align="center">Speaker</TableCell>
<TableCell align="center">Date</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Events.map((row) => (
<TableRow key={row.Title}>
<TableCell component="th" scope="row" align="center">{row.Title}</TableCell>
<TableCell align="center">{row.Speaker}</TableCell>
<TableCell align="center">{row.Date}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Container>
</Layout>
)
}
Example #7
| Source File: Index.js From Designer-Client with GNU General Public License v3.0 | 5 votes |
|
export function UserIndex() {
const users = useSelector(state => state.users.items);
const loading = useSelector(state => state.users.loading);
const dispatch = useDispatch();
const [deleteModalOpen, setDeleteModalOpen] = useState(false);
const [selectedUserId, setSelectedUserId] = useState(-1);
useEffect(() => {
dispatch(userActions.index());
}, [])
const deleteBtnClick = (userId) => {
setSelectedUserId(userId)
setDeleteModalOpen(true);
}
const deleteUser = () => {
if(selectedUserId <= 0) return;
dispatch(userActions.unregistByAdmin(selectedUserId));
}
return (
<Container>
<PageTitle text={"담당자 관리"} align="left" />
<ActionDialog action={deleteUser} open={deleteModalOpen} setOpen={setDeleteModalOpen} titleText="사용자 탈퇴" actionText="삭제" cancelText="취소">
정말 사용자를 탈퇴 시키시겠습니까?
</ActionDialog>
<TableContainer component={Paper}>
<Table aria-label="custom pagination table">
<TableHead>
<TableRow>
<TableCell align="center">id</TableCell>
<TableCell align="center">Group</TableCell>
<TableCell align="center">로그인ID</TableCell>
<TableCell align="center">Email</TableCell>
<TableCell align="center">권한</TableCell>
<TableCell align="center">가입일</TableCell>
<TableCell/>
</TableRow>
</TableHead>
<TableBody>
{ loading &&
<TableLodingProgress colSpan={6}/>
}
{ !loading && users.length <= 0 &&
<TableEmptyRow colSpan={6} text={`관리가 가능한 사용자가 없습니다.`}/>
}
{ !loading && users.length > 0 && users.map( user => {
return (
<TableRow key={`users-index-table-row-${user.id}`}>
<TableCell align="center">{user.id}</TableCell>
<TableCell align="center">{user.group}</TableCell>
<TableCell align="center">{user.username}</TableCell>
<TableCell align="center">{user.email}</TableCell>
<TableCell align="center">{user.role}</TableCell>
<TableCell align="center">{user.createdAt}</TableCell>
<TableCell align="center">
<Button variant="outlined" size="small" color="primary" component={Link} to={{ pathname: `/users/${user.id}`, state: {user: user}}}>상세보기</Button>
<Button variant="outlined" size="small" color="secondary" onClick={() => deleteBtnClick(user.id)}>삭제</Button>
</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
<Box mt={4} alignItems="center" flexWrap="wrap" style={{textAlign: "center", display: "flex", alignItems: "center", justifyContent: "center"}}>
<Pagination count={100} showFirstButton showLastButton variant="outlined" shape="rounded" size="large" page={Number(1)}/>
</Box>
<Grid container direction="column" justify="flex-end" alignItems="flex-end">
<Grid item>
<Button variant="outlined" color="primary" component={Link} to='/users/new'>
신규 담당자 추가
</Button>
</Grid>
</Grid>
</Container>
)
}
Example #8
| Source File: CertificateListModal.js From akashlytics-deploy with GNU General Public License v3.0 | 5 votes |
|
export function CertificateListModal({ onClose, revokeCertificate }) {
const classes = useStyles();
const { validCertificates, localCert, selectedCertificate } = useCertificate();
return (
<Dialog open={true} onClose={onClose} maxWidth="md" fullWidth>
<DialogTitle>Certificates</DialogTitle>
<DialogContent dividers className={classes.dialogContent}>
<TableContainer>
<Table size="small">
<TableHead>
<TableRow>
<TableCell align="center">Selected</TableCell>
<TableCell align="center">Local cert</TableCell>
<TableCell align="center">Issued on</TableCell>
<TableCell align="center">Expires</TableCell>
<TableCell align="center">Serial</TableCell>
<TableCell align="center"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{validCertificates.map((cert) => (
<TableRow key={cert.serial}>
<TableCell align="center">{cert.serial === selectedCertificate?.serial && <CheckIcon color="primary" />}</TableCell>
<TableCell align="center">{cert.parsed === localCert?.certPem && <CheckIcon color="primary" />}</TableCell>
<TableCell align="center">
<FormattedDate value={cert.pem.issuedOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
</TableCell>
<TableCell align="center">
<FormattedDate value={cert.pem.expiresOn} year="numeric" month="2-digit" day="2-digit" hour="2-digit" minute="2-digit" />
</TableCell>
<TableCell align="center">{cert.serial}</TableCell>
<TableCell align="center">
<Button onClick={() => revokeCertificate(cert)} color="secondary" size="small">
Revoke
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</DialogContent>
<DialogActions>
<Button variant="contained" color="primary" onClick={onClose}>
Close
</Button>
</DialogActions>
</Dialog>
);
}
Example #9
| Source File: BorderedTable.js From Designer-Client with GNU General Public License v3.0 | 5 votes |
|
/**
*
* @param {{container: Component, size: number, headers: string[], rows: Object[]}} props
*/
export default function BorderedTable({ container, size, headers, rows }) {
const classes = useStyles();
return (
<TableContainer component={container}>
<Table size={size}>
{headers && (
<TableHead>
<TableRow>
{headers.map((header) => {
return (
<TableCell key={`table-header-cell-${header}`} className={classes.borderedCell}>
{header}
</TableCell>
);
})}
</TableRow>
</TableHead>
)}
<TableBody>
{rows.map((row) => {
return (
<TableRow key={`table-row-${row[0]}`}>
{row.map((col) => {
return (
<TableCell className={classes.borderedCell} key={`table-cell-${col}`}>
{col}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
);
}
Example #10
| Source File: AuditorsModal.js From akashlytics-deploy with GNU General Public License v3.0 | 5 votes |
|
AuditorsModal = ({ provider, onClose }) => {
const classes = useStyles();
const { auditors } = useAkash();
const onWebsiteClick = (event, website) => {
event.preventDefault();
event.stopPropagation();
window.electron.openUrl(website);
};
return (
<Dialog maxWidth="sm" open={true} onClose={onClose} fullWidth>
<DialogTitle>Audited Attributes</DialogTitle>
<DialogContent dividers className={classes.content}>
<TableContainer>
<Table size="small">
<TableHead>
<TableRow>
<TableCell className={classes.tableHead}>Key</TableCell>
<TableCell className={classes.tableHead}>Value</TableCell>
<TableCell className={classes.tableHead}>Auditors</TableCell>
</TableRow>
</TableHead>
<TableBody>
{provider.attributes.map((a) => {
return (
<TableRow key={a.key}>
<TableCell component="th" scope="row">
{a.key}
</TableCell>
<TableCell>{a.value}</TableCell>
<TableCell>
{a.auditedBy
.filter((x) => auditors.some((y) => y.address === x))
.map((x) => {
const auditor = auditors.find((y) => y.address === x);
return (
<div key={x}>
<Tooltip
classes={{ tooltip: classes.tooltip }}
arrow
interactive
title={
<div>
<LinkTo onClick={(event) => onWebsiteClick(event, auditor.website)} className={classes.websiteLink}>
{auditor.website}
</LinkTo>
<Address address={auditor.address} isCopyable />
</div>
}
>
<Chip label={auditor.name} size="small" className={classes.auditorChip} />
</Tooltip>
</div>
);
})}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</DialogContent>
<DialogActions>
<Button autoFocus variant="contained" onClick={onClose} color="primary" size="small">
Close
</Button>
</DialogActions>
</Dialog>
);
}
Example #11
| Source File: index.js From iiitt with MIT License | 4 votes |
|
export default function Clubs() {
useEffect(() => {
document.getElementsByTagName("title")[0].innerHTML = "Clubs";
}, []);
useEffect(() => {
return () => {
document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
};
}, []);
const [clubs, setClubs] = useState(undefined);
useEffect(() => {
import("../../json/clubs.json").then((data) => {
setClubs(data.data);
});
}, []);
const classes = createStyles();
return (
<div className="page-container">
<Navbar />
<Grid container className={classes.container}>
<Grid item xs={false} sm={1} />
<Grid item xs={12} sm={10}>
<Typography
variant="h2"
component="h2"
gutterBottom
className={classes.themeText}
>
<Box component="span" fontWeight={380}>
Clubs
</Box>
</Typography>
{clubs &&
clubs.map((club) => {
return (
<section className={classes.sectionPadding}>
<Typography
variant="h5"
className={classes.themeText}
gutterBottom
>
<Box component="span" fontWeight="fontWeightBold">
{club.name}
</Box>
</Typography>
<Typography gutterBottom>
<Box
component="span"
className={classes.text}
fontStyle="oblique"
>
{club.motto}
</Box>
</Typography>
<Typography gutterBottom>
<Box
component="span"
fontWeight="fontWeightBold"
className={classes.text}
>
Faculty Incharge: {club.facultyIncharge}
</Box>
</Typography>
<Grid item xs={12} sm={9}>
<TableContainer component={Paper} className={classes.table}>
<Table>
<TableHead>
<TableRow>
{club.header.map((head) => {
return (
<TableCell
className={`${classes.tableCell} ${classes.tableHead}`}
>
{head}
</TableCell>
);
})}
</TableRow>
</TableHead>
<TableBody>
{club.students.map((student) => {
return (
<TableRow className={classes.tableRow}>
<TableCell className={classes.tableCell}>
{student.year}
</TableCell>
<TableCell className={classes.tableCell}>
{student.name}
</TableCell>
{/* {student.game && (
<TableCell className={classes.tableCell}>
{student.game}
</TableCell>
)} */}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</Grid>
</section>
);
})}
</Grid>
<Grid item xs={false} sm={1} />
</Grid>
<Footer />
</div>
);
}
Example #12
| Source File: ListUrls.js From FireShort with MIT License | 4 votes |
|
export default function ListUrls(props) {
const classes = useStyles();
const history = useHistory();
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<Container className={classes.cardGrid} maxWidth="lg">
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
<TableCell
key="curl"
align="left"
style={{
minWidth: "100px",
}}
>
Short URL
</TableCell>
<TableCell
key="action"
align="center"
style={{
minWidth: "100px",
}}
>
Action
</TableCell>
<TableCell
key="lurl"
align="left"
style={{ minWidth: "100px" }}
>
Long URL
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.shortUrls
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((card) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={card.id}>
<TableCell
key="curl"
align="left"
style={{ minWidth: "100px" }}
>
<Tooltip title="Copy to clipboard">
<Button
startIcon={<FileCopyOutlinedIcon />}
onClick={() => {
navigator.clipboard.writeText(
window.location.origin + "/" + card.data.curl
);
}}
classes={{ label: classes.label }}
>
{card.data.curl}
</Button>
</Tooltip>
<Tooltip title={card.data.hits + " Hits"}>
<IconButton onClick={() => { props.openHits(card.data.curl) }} style={{ cursor: "pointer" }}>
<Badge
badgeContent={card.data.hits}
color="secondary"
max={Infinity}
showZero
>
<OpenInBrowser />
</Badge>
</IconButton>
</Tooltip>
</TableCell>
<TableCell
key="action"
align="right"
style={{ minWidth: "100px" }}
>
<ButtonGroup variant="outlined" color="default">
<Tooltip title="Preview link">
<Button
size="small"
color="primary"
href={card.data.lurl}
target="_blank"
>
<VisibilityIcon />
</Button>
</Tooltip>
<Tooltip title="Analytics">
<Button
size='small'
disabled={!card.data.track}
onClick={() => history.push(`/analytics/${card.data.curl}`)}
>
<AnalyticsIcon />
</Button>
</Tooltip>
<Tooltip title="Edit link">
<Button
size="small"
onClick={() =>
props.handleEditShortUrl(card.data.curl)
}
>
<EditIcon />
</Button>
</Tooltip>
<Tooltip title="Delete link">
<Button
size="small"
color="secondary"
onClick={() =>
props.handleDeleteShortUrl(card.data.curl)
}
>
<DeleteForeverIcon />
</Button>
</Tooltip>
<Tooltip title="Toggle link protection">
<Button
size="small"
color="default"
onClick={() => props.toggleSecurity(card.data.curl)}
>
{card.data.locked ? <LockIcon /> : <LockOpenIcon />}
</Button>
</Tooltip>
</ButtonGroup>
</TableCell>
<TableCell
key="lurl"
align="left"
style={{ minWidth: "100px" }}
>
<Box
bgcolor="text.primary"
color="background.paper"
p={2}
style={{
overflowX: "auto",
overflowY: "hidden",
whiteSpace: "nowrap",
}}
>
{card.data.lurl}
</Box>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={props.shortUrls.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
</Container>
);
}
Example #13
| Source File: index.js From iiitt with MIT License | 4 votes |
|
export default function BWC() {
useEffect(() => {
document.getElementsByTagName("title")[0].innerHTML = "BWC";
}, []);
useEffect(() => {
return () => {
document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
};
}, []);
const [bwc, setBwc] = useState(undefined);
const [bwcMeeting, setBwcMeeting] = useState(undefined);
useEffect(() => {
import("../../json/bwc.json").then((data) => {
setBwc(data.data);
});
import("../../json/bwcMeeting.json").then((data) =>
setBwcMeeting(data.data)
);
}, []);
const classes = createStyles();
var ctr = 0;
return (
<div className="page-container">
<Navbar />
<Grid container className={classes.container}>
<Grid item xs={false} sm={1} />
<Grid item xs={12} sm={10}>
<Typography
variant="h2"
component="h2"
gutterBottom
className={classes.themeText}
>
<Box component="span" fontWeight={380}>
BWC
</Box>
</Typography>
<Typography
variant="subtitle1"
gutterBottom
className={classes.title}
>
<Box component="h3" gutterBottom className={classes.themeText}>
Members of BwC
</Box>
</Typography>
{bwc && (
<TableContainer
component={Paper}
className={classes.table}
gutterBottom
>
<Table>
<TableHead>
<TableRow>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
S. No.
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Name
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Designation
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
BWC
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{bwc.map((gov) => {
ctr++;
return (
<TableRow className={classes.tableRow}>
<TableCell className={classes.tableCell}>
{ctr}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.name}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.designation}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.bwc}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
<Typography className={classes.themeText}>
<Box
component="h3"
fontWeight="fontWeightBold"
className={classes.title}
>
BwC Meeting Minutes
</Box>
</Typography>
{bwcMeeting &&
bwcMeeting.map((meet) => {
return (
<section>
<a
href={require(`../../docs/${meet.path}`)}
download={meet.title}
className={classes.link}
>
<Typography
className={`${classes.link} ${classes.themeText}`}
gutterBottom
>
<img
src={require("../../images/news-icon.svg")}
className={classes.download}
/>
<Box component="span" className={classes.meetingTitle}>
{meet.title}
</Box>
</Typography>
</a>
<Typography gutterBottom className={classes.meetingText}>
{meet.description}
</Typography>
</section>
);
})}
</Grid>
<Grid item xs={false} sm={1} />
</Grid>
<Footer />
</div>
);
}
Example #14
| Source File: index.js From iiitt with MIT License | 4 votes |
|
export default function Fc() {
useEffect(() => {
document.getElementsByTagName("title")[0].innerHTML =
"Finance Committee Members";
}, []);
useEffect(() => {
return () => {
document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
};
}, []);
const [fc, setFc] = useState(undefined);
const [fcMeeting, setFcMeeting] = useState(undefined);
useEffect(() => {
import("../../json/fc.json").then((data) => {
setFc(data.data);
});
import("../../json/fcMeeting.json").then((data) => setFcMeeting(data.data));
}, []);
const classes = createStyles();
var ctr = 0;
return (
<div className="page-container">
<Navbar />
<Grid container className={classes.container}>
<Grid item xs={false} sm={1} />
<Grid item xs={12} sm={10}>
<Typography
variant="h2"
component="h2"
gutterBottom
className={classes.themeText}
>
<Box component="span" fontWeight={380}>
Finance Committee Members
</Box>
</Typography>
<Typography
variant="subtitle1"
gutterBottom
className={classes.title}
>
<Box component="h3" gutterBottom className={classes.themeText}>
Members of FC
</Box>
</Typography>
{fc && (
<TableContainer
component={Paper}
className={classes.table}
gutterBottom
>
<Table>
<TableHead>
<TableRow>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
S. No.
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Name
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Designation
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Role
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{fc.map((gov) => {
ctr++;
return (
<TableRow className={classes.tableRow}>
<TableCell className={classes.tableCell}>
{ctr}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.name}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.designation}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.role}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
<Typography className={classes.themeText}>
<Box
component="h3"
fontWeight="fontWeightBold"
className={classes.title}
>
FC Meeting Minutes
</Box>
</Typography>
{fcMeeting &&
fcMeeting.map((meet) => {
return (
<section>
<a
href={require(`../../docs/${meet.path}`)}
download={meet.title}
className={classes.link}
>
<Typography
className={`${classes.link} ${classes.themeText}`}
gutterBottom
>
<img
src={require("../../images/news-icon.svg")}
className={classes.download}
/>
<Box component="span" className={classes.meetingTitle}>
{meet.title}
</Box>
</Typography>
</a>
<Typography gutterBottom>{meet.description}</Typography>
</section>
);
})}
</Grid>
<Grid item xs={false} sm={1} />
</Grid>
<Footer />
</div>
);
}
Example #15
| Source File: index.js From iiitt with MIT License | 4 votes |
|
export default function GenderData() {
useEffect(() => {
document.getElementsByTagName("title")[0].innerHTML = "Gender wise data";
}, []);
useEffect(() => {
return () => {
document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
};
}, []);
const [genderData, setGenderData] = useState(undefined);
useEffect(() => {
import("../../json/genderdata.json").then((data) => {
setGenderData(data);
});
}, []);
const classes = createStyles();
return (
<div className="page-container">
<Navbar />
<Grid container className={classes.container}>
<Grid item xs={false} sm={1} />
<Grid item xs={12} sm={10}>
<Typography
variant="h2"
component="h2"
gutterBottom
className={classes.themeText}
>
<Box component="span" fontWeight={380}>
Gender wise Data
</Box>
</Typography>
<TableContainer component={Paper}>
<Table>
<TableHead className={classes.tableHead}>
<TableRow>
<TableCell className={classes.th} align="center">
Name of IIIT
</TableCell>
<TableCell className={classes.th} colspan="4" align="center">
Enrolment in Tertiary Education
</TableCell>
<TableCell className={classes.th} colspan="4" align="center">
Professional and Technical Workers
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell rowspan="4" className={classes.td} align="center">
IIIT TIRUCHIRAPPALLI
</TableCell>
<TableCell colspan="4" className={classes.td} align="center">
B.Tech.
</TableCell>
<TableCell colspan="4" className={classes.td} align="center">
Faculty
</TableCell>
</TableRow>
<TableRow>
<TableCell colspan="2" className={classes.td} align="center">
CSE
</TableCell>
<TableCell colspan="2" className={classes.td} align="center">
ECE
</TableCell>
<TableCell colspan="2" className={classes.td} align="center">
Regular
</TableCell>
<TableCell colspan="2" className={classes.td} align="center">
Temporary
</TableCell>
</TableRow>
<TableRow>
<TableCell className={classes.td}>Boys</TableCell>
<TableCell className={classes.td}>Girls</TableCell>
<TableCell className={classes.td}>Boys</TableCell>
<TableCell className={classes.td}>Girls</TableCell>
<TableCell className={classes.td}>Male</TableCell>
<TableCell className={classes.td}>Female</TableCell>
<TableCell className={classes.td}>Male</TableCell>
<TableCell className={classes.td}>Female</TableCell>
</TableRow>
<TableRow>
<TableCell className={classes.td}>
{genderData ? genderData.btech.cse.boys : "Loading..."}
</TableCell>
<TableCell className={classes.td}>
{genderData ? genderData.btech.cse.girls : "Loading..."}
</TableCell>
<TableCell className={classes.td}>
{genderData ? genderData.btech.ece.boys : "Loading..."}
</TableCell>
<TableCell className={classes.td}>
{genderData ? genderData.btech.ece.girls : "Loading..."}
</TableCell>
<TableCell className={classes.td}>
{genderData
? genderData.faculty.regular.male
: "Loading..."}
</TableCell>
<TableCell className={classes.td}>
{genderData
? genderData.faculty.regular.female
: "Loading..."}
</TableCell>
<TableCell className={classes.td}>
{genderData
? genderData.faculty.temporary.male
: "Loading..."}
</TableCell>
<TableCell className={classes.td}>
{genderData
? genderData.faculty.temporary.female
: "Loading..."}
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Grid>
<Grid item xs={false} sm={1} />
</Grid>
<Footer />
</div>
);
}
Example #16
| Source File: index.js From iiitt with MIT License | 4 votes |
|
export default function Senate() {
useEffect(() => {
document.getElementsByTagName("title")[0].innerHTML = "Senate";
}, []);
useEffect(() => {
return () => {
document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
};
}, []);
const [senate, setSenate] = useState(undefined);
const [senateMeeting, setSenateMeeting] = useState(undefined);
useEffect(() => {
import("../../json/senate.json").then((data) => {
setSenate(data.data);
});
import("../../json/senateMeeting.json").then((data) =>
setSenateMeeting(data.data)
);
}, []);
const classes = createStyles();
var ctr = 0;
return (
<div className="page-container">
<Navbar />
<Grid container className={classes.container}>
<Grid item xs={false} sm={1} />
<Grid item xs={12} sm={10}>
<Typography
variant="h2"
component="h2"
gutterBottom
className={classes.themeText}
>
<Box component="span" fontWeight={380}>
Senate
</Box>
</Typography>
<Typography
variant="subtitle1"
gutterBottom
className={classes.title}
>
<Box component="h3" gutterBottom className={classes.themeText}>
Members of Senate
</Box>
</Typography>
{senate && (
<TableContainer
component={Paper}
className={classes.table}
gutterBottom
>
<Table>
<TableHead>
<TableRow>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
S. No.
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Name
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Designation
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Senate
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{senate.map((gov) => {
ctr++;
return (
<TableRow className={classes.tableRow}>
<TableCell className={classes.tableCell}>
{ctr}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.name}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.designation}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.senate}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
<Typography className={classes.themeText}>
<Box
component="h3"
fontWeight="fontWeightBold"
className={classes.title}
>
Senate Minutes
</Box>
</Typography>
{senateMeeting &&
senateMeeting.map((meet) => {
return (
<section>
<a
href={require(`../../docs/${meet.path}`)}
download={meet.title}
className={classes.link}
>
<Typography
className={`${classes.link} ${classes.themeText}`}
gutterBottom
>
<img
src={require("../../images/news-icon.svg")}
className={classes.download}
/>
<Box component="span" className={classes.meetingTitle}>
{meet.title}
</Box>
</Typography>
</a>
<Typography gutterBottom>{meet.description}</Typography>
</section>
);
})}
</Grid>
<Grid item xs={false} sm={1} />
</Grid>
<Footer />
</div>
);
}
Example #17
| Source File: index.js From iiitt with MIT License | 4 votes |
|
export default function VlaParticipants(props) {
const pathName = useLocation().pathname;
useEffect(() => {
document.getElementsByTagName("title")[0].innerHTML = "VLA | Participants";
}, []);
useEffect(() => {
return () => {
document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
};
}, []);
const [participants, setParticipants] = useState(undefined);
const [redirect, setRedirect] = useState(false);
useEffect(() => {
import(`../../json/${pathName.slice(1, pathName.length)}.json`)
.then((data) => setParticipants(data.data))
.catch(() => setRedirect(true));
}, []);
const classes = createStyles();
var ctr = 0;
return (
<div className="page-container">
<Navbar src="vla_navbar.json" homeRoute="/vla" />
<Grid container className="container">
<Grid item xs={false} sm={1} />
<Grid item xs={12} sm={10}>
{redirect ? (
<Redirect to="/404" />
) : (
<>
{participants && (
<TableContainer
component={Paper}
className={classes.table}
gutterBottom
>
<Table>
<TableHead>
<TableRow>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
S. No.
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Name
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Designation
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Institute
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
State
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{participants.map((participant) => {
ctr++;
return (
<TableRow className={classes.tableRow}>
<TableCell className={classes.tableCell}>
{ctr}
</TableCell>
<TableCell className={classes.tableCell}>
{participant.name}
</TableCell>
<TableCell className={classes.tableCell}>
{participant.designation}
</TableCell>
<TableCell className={classes.tableCell}>
{participant.institute}
</TableCell>
<TableCell className={classes.tableCell}>
{participant.state}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
</>
)}
</Grid>
<Grid item xs={false} sm={1} />
</Grid>
<Footer />
</div>
);
}
Example #18
| Source File: index.js From iiitt with MIT License | 4 votes |
|
export default function AdmissionContact() {
useEffect(() => {
document.getElementsByTagName("title")[0].innerHTML = "BoG";
}, []);
useEffect(() => {
return () => {
document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
};
}, []);
const [bog, setBog] = useState(undefined);
const [bogMeeting, setBogMeeting] = useState(undefined);
useEffect(() => {
import("../../json/bog.json").then((data) => {
setBog(data.data);
});
import("../../json/bogMeeting.json").then((data) =>
setBogMeeting(data.data)
);
}, []);
const classes = createStyles();
var ctr = 0;
return (
<div className="page-container">
<Navbar />
<Grid container className={classes.container}>
<Grid item xs={false} sm={1} />
<Grid item xs={12} sm={10}>
<Typography
variant="h2"
component="h2"
gutterBottom
className={classes.themeText}
>
<Box component="span" fontWeight={380}>
Board of Governors (BoG)
</Box>
</Typography>
<Typography
variant="subtitle1"
gutterBottom
className={classes.title}
>
<Box component="h3" gutterBottom className={classes.themeText}>
Members of Board of Governors (BoG)
</Box>
</Typography>
{bog && (
<TableContainer
component={Paper}
className={classes.table}
gutterBottom
>
<Table>
<TableHead>
<TableRow>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
S. No.
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Name
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Designation
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{bog.map((gov) => {
ctr++;
return (
<TableRow className={classes.tableRow}>
<TableCell className={classes.tableCell}>
{ctr}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.name}
</TableCell>
<TableCell className={classes.tableCell}>
{gov.designation}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
<Typography className={classes.themeText}>
<Box
component="h3"
fontWeight="fontWeightBold"
className={classes.title}
>
BoG Meeting
</Box>
</Typography>
{bogMeeting &&
bogMeeting.map((meet) => {
return (
<section>
<a
href={require(`../../docs/${meet.path}`)}
download={meet.title}
className={classes.link}
>
<Typography
className={`${classes.link} ${classes.themeText}`}
gutterBottom
>
<img
src={require("../../images/news-icon.svg")}
className={classes.download}
/>
<Box component="span" className={classes.meetingTitle}>
{meet.title}
</Box>
</Typography>
</a>
<Typography gutterBottom>{meet.description}</Typography>
</section>
);
})}
</Grid>
<Grid item xs={false} sm={1} />
</Grid>
<Footer />
</div>
);
}
Example #19
| Source File: index.js From iiitt with MIT License | 4 votes |
|
export default function VlaWorkshops() {
useEffect(() => {
document.getElementsByTagName("title")[0].innerHTML = "VLA | Workshops";
}, []);
useEffect(() => {
return () => {
document.getElementsByTagName("title")[0].innerHTML = "IIIT Trichy";
};
}, []);
const [workshops, setWorkshops] = useState(undefined);
useEffect(() => {
import("../../json/vlaworkshops.json").then((data) =>
setWorkshops(data.data)
);
}, []);
const classes = createStyles();
var ctr = 0;
return (
<div className="page-container">
<Navbar src="vla_navbar.json" homeRoute="/vla" />
<Grid container className={classes.container}>
<Grid item xs={false} sm={1} />
<Grid item xs={12} sm={10}>
<Typography
variant="h2"
component="h2"
gutterBottom
className={classes.themeText}
>
<Box component="span" fontWeight={380}>
Workshops Planned and Completed
</Box>
</Typography>
{workshops && (
<TableContainer
component={Paper}
className={classes.table}
gutterBottom
>
<Table>
<TableHead>
<TableRow>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
S. No.
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Name of the Programme
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Co-ordinator(s) Name
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Start Date
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
End Date
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
No. Of Participants
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Videos
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Brochure
</TableCell>
<TableCell
className={`${classes.tableHead} ${classes.tableCell}`}
>
Summary & Feedback
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{workshops.map((workshop) => {
ctr++;
return (
<TableRow className={classes.tableRow}>
<TableCell className={classes.tableCell}>
{ctr}
</TableCell>
<TableCell className={classes.tableCell}>
{workshop.programmeName}
</TableCell>
<TableCell className={classes.tableCell}>
{workshop.name}
</TableCell>
<TableCell className={classes.tableCell}>
{workshop.startDate}
</TableCell>
<TableCell className={classes.tableCell}>
{workshop.endDate}
</TableCell>
<TableCell className={classes.tableCell}>
{workshop.participantsLink.trim() && (
<Link
to={{
pathname: workshop.participantsLink.trim(),
}}
className={classes.link}
>
{workshop.participants}
</Link>
)}
</TableCell>
<TableCell className={classes.tableCell}>
{workshop.videos.trim() && (
<Link
to={{ pathname: workshop.videos }}
className={classes.link}
>
Videos
</Link>
)}
</TableCell>
<TableCell className={classes.tableCell}>
{workshop.brochure.trim() && (
<a
href={`../../docs/vla/${workshop.brochure}`}
className={classes.link}
download={workshop.brochure}
>
Brochure
</a>
)}
</TableCell>
<TableCell className={classes.tableCell}>
{workshop.summary.trim() && (
<Link
to={{ pathname: workshop.summary }}
className={classes.link}
>
Summary & Feedback
</Link>
)}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
)}
</Grid>
<Grid item xs={false} sm={1} />
</Grid>
<Footer />
</div>
);
}
Example #20
| Source File: ToolbarExtension.js From eSim-Cloud with GNU General Public License v3.0 | 4 votes |
|
// Screen to display information about as keyboard shortcuts, units table and simulation modes
export function HelpScreen ({ open, close }) {
const classes = useStyles()
return (
<div>
<Dialog fullScreen open={open} onClose={close} TransitionComponent={Transition} PaperProps={{
style: {
backgroundColor: '#4d4d4d',
boxShadow: 'none'
}
}} >
<AppBar position="static" elevation={0} className={classes.appBar}>
<Toolbar variant="dense" style={{ backgroundColor: '#404040' }} >
<IconButton edge="start" color="inherit" onClick={close} aria-label="close">
<CloseIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Help
</Typography>
<Button autoFocus color="inherit" onClick={close}>
close
</Button>
</Toolbar>
</AppBar>
<Container maxWidth="lg" className={classes.header}>
<Grid
container
spacing={3}
direction="row"
justify="center"
alignItems="center"
>
<Grid item xs={12} sm={12}>
<Paper className={classes.paper}>
<fieldset style={{ padding: '20px 40px' }}>
<legend>
<Typography variant="h5" align="center" component="p" gutterBottom>
Keyboard Shorcuts
</Typography>
</legend>
<Typography variant="h6" align='left' gutterBottom>
UNDO
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Ctrl + Z
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
REDO
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Ctrl + Shift + Z
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
ZOOM IN
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Ctrl + +
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
ZOOM OUT
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Ctrl + -
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
DEFAULT SIZE
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Ctrl + Y
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
Save Circuit
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Ctrl + S
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
Print Circuit
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Ctrl + P
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
Open Dialog
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Ctrl + O
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
Export as JSON
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Ctrl + E
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
Export as Image
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Ctrl + Shift + E
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
Rotate Component Clockwise
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Alt + Right Arrow
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
Rotate Component Anti-Clockwise
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Alt + Left Arrow
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
Clear All
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
Shift + Del
</Typography>
</fieldset>
</Paper>
</Grid>
<Grid item xs={12} sm={12}>
<Paper className={classes.paper}>
<fieldset style={{ padding: '20px 40px' }}>
<legend>
<Typography variant="h5" align="center" component="p" gutterBottom>
Units Table
</Typography>
</legend>
<Typography>
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<caption>Ngspice scale factors naming conventions</caption>
<TableHead>
<TableRow>
<TableCell align="center">SUFFIX</TableCell>
<TableCell align="center">NAME</TableCell>
<TableCell align="center">FACTOR</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell align="center">T</TableCell>
<TableCell align="center">Tera</TableCell>
<TableCell align="center">10<sup>12</sup></TableCell>
</TableRow>
<TableRow>
<TableCell align="center">G</TableCell>
<TableCell align="center">Giga</TableCell>
<TableCell align="center">10<sup>9</sup></TableCell>
</TableRow>
<TableRow>
<TableCell align="center">Meg</TableCell>
<TableCell align="center">Mega</TableCell>
<TableCell align="center">10<sup>6</sup></TableCell>
</TableRow>
<TableRow>
<TableCell align="center">K</TableCell>
<TableCell align="center">Kilo</TableCell>
<TableCell align="center">10<sup>3</sup></TableCell>
</TableRow>
<TableRow>
<TableCell align="center">mil</TableCell>
<TableCell align="center">Mil</TableCell>
<TableCell align="center">25.4 X 10<sup>-6</sup></TableCell>
</TableRow>
<TableRow>
<TableCell align="center">m</TableCell>
<TableCell align="center">milli</TableCell>
<TableCell align="center">10<sup>-3</sup></TableCell>
</TableRow>
<TableRow>
<TableCell align="center">u</TableCell>
<TableCell align="center">micro</TableCell>
<TableCell align="center">10<sup>-6</sup></TableCell>
</TableRow>
<TableRow>
<TableCell align="center">n</TableCell>
<TableCell align="center">nano</TableCell>
<TableCell align="center">10<sup>-9</sup></TableCell>
</TableRow>
<TableRow>
<TableCell align="center">p</TableCell>
<TableCell align="center">pico</TableCell>
<TableCell align="center">10<sup>-12</sup></TableCell>
</TableRow>
<TableRow>
<TableCell align="center">f</TableCell>
<TableCell align="center">femto</TableCell>
<TableCell align="center">10<sup>-15</sup></TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Typography>
</fieldset>
</Paper>
</Grid>
<Grid item xs={12} sm={12}>
<Paper className={classes.paper}>
<fieldset style={{ padding: '20px 40px' }}>
<legend>
<Typography variant="h5" align="center" component="p" gutterBottom>
Simulation Modes
</Typography>
</legend>
<Typography variant="h6" align='left' gutterBottom>
DC Solver
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
A DC simulation attempts to find a stable DC solution of your circuit.
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
DC Sweep
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
A DC Sweep will plot the DC solution of your circuit across different values of a parameter of a circuit element.
You can sweep any numerical parameter of any circuit element in your circuit.
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
Transient Analysis
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
A Transient analysis does a Time-Domain Simulation of your circuit over a certain period of time.
</Typography>
<Divider />
<Typography variant="h6" align='left' gutterBottom>
AC Analysis
</Typography>
<Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom>
AC Analysis does a small signal analysis of your circuit. The input can be any voltage source or current source.
</Typography>
</fieldset>
</Paper>
</Grid>
</Grid>
</Container>
</Dialog>
</div >
)
}
Example #21
| Source File: file-upload.js From js-miniapp with MIT License | 4 votes |
|
FileUploader = () => {
const classes = useStyles();
const [rows, setRows] = useState([]);
const setFiles = (e) => {
const files = e.target.files;
if (!files) {
return;
}
setRows(
Array.from(files).map((file) => ({
name: file.name,
size: file.size,
type: file.type,
}))
);
};
const numberCommaFormatter = (number) => {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
return (
<Card className={classes.root}>
<Grid className={classes.grid} align="center" justify="center">
<div className={classes.uploader}>
<label className={classes.label} for="files">
(general)
</label>
<input
type="file"
onChange={setFiles}
data-testid="file-input-general"
multiple
/>
</div>
<div className={classes.uploader}>
<label className={classes.label} for="files">
(images)
</label>
<input
type="file"
accept=".jpg,.jpeg,.png,.svg,.gif"
onChange={setFiles}
data-testid="file-input-image"
multiple
/>
</div>
<div className={classes.uploader}>
<label className={classes.label} for="files">
(pdf)
</label>
<input
type="file"
accept=".pdf"
onChange={setFiles}
data-testid="file-input-pdf"
multiple
/>
</div>
</Grid>
<CardContent className={classes.content}>
<TableContainer component={Paper} data-testid="file-table">
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell align="left">Type</TableCell>
<TableCell align="right">Size(Bytes)</TableCell>
<TableCell align="right"></TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="left">{row.type}</TableCell>
<TableCell align="right">
{numberCommaFormatter(row.size)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</CardContent>
</Card>
);
}
Example #22
| Source File: DriverProfile.js From KEDS-Rideshare-KUHacks with MIT License | 4 votes |
|
export default function DriverProfile(props) {
const classes = useStyles();
const [ show, setHide ] = useState(false)
const [ open, setOpen ] = React.useState(false);
const [ web3, setWeb3 ] = useState(props.web3);
const [ loading, isLoading ] = useState(false);
const [ formData, setFormData ] = useState({
name: "",
contact: "",
email: "",
carNo: "",
noOfSeats: 0,
rating: 5
})
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
const handleSuccess = () => {
setOpen(true);
};
function handleChange(event) {
const { id, value } = event.target
setFormData({ ...formData, [ id ]: value })
}
function handleSubmit(event) {
setHide(true)
web3.eth.getAccounts((error, accounts) => {
console.log(accounts);
localStorage.setItem('account', accounts[ 0 ])
localStorage.setItem('name', formData.name)
localStorage.setItem('contact', formData.contact)
localStorage.setItem('email', formData.email)
localStorage.setItem('carNo', "MH1234")
localStorage.setItem('noOfSeats', formData.noOfSeats)
localStorage.setItem('rating', formData.rating)
localStorage.setItem('type', "1")
var n = web3.utils.padRight(web3.utils.fromAscii(formData.name), 64);
var c = web3.utils.padRight(web3.utils.fromAscii(formData.contact), 64);
var e = web3.utils.padRight(web3.utils.fromAscii(formData.email), 64);
var cn = web3.utils.padRight(web3.utils.fromAscii("MH1234"), 64);
props.rideManager.methods.registerDriver(n, c, e, cn, Number(formData.noOfSeats), 1, accounts[ 0 ]).send({ from: accounts[ 0 ] })
.once('receipt', (receipt) => {
console.log(receipt);
isLoading(false);
})
});
handleSuccess()
event.preventDefault();
}
return (
<div>
<Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={open} autoHideDuration={5000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success">
Success Wallet Address {localStorage.getItem('account')}!
</Alert>
</Snackbar>
<GridContainer>
<GridItem xs={12} sm={12} md={7}>
<form onSubmit={handleSubmit}>
<Card>
<CardHeader color="primary">
<h4 className={classes.cardTitleWhite}>Driver Profile</h4>
<p className={classes.cardCategoryWhite}>Complete your profile</p>
</CardHeader>
<CardBody>
<GridContainer>
<GridItem xs={12} sm={12} md={5}>
<CustomInput
inputProps={{
onChange: (e) => handleChange(e),
type: "text"
}}
labelText="Full Name"
id="name"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={12} md={3}>
<CustomInput
inputProps={{
onChange: (e) => handleChange(e),
type: "tel"
}}
labelText="Contact"
id="contact"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<CustomInput
inputProps={{
onChange: (e) => handleChange(e),
type: "email"
}}
labelText="Email Address"
id="email"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<CustomInput
inputProps={{
onChange: (e) => handleChange(e),
type: "text"
}}
labelText="Car Number"
id="carNo"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<CustomInput
inputProps={{
onChange: (e) => handleChange(e),
type: "number"
}}
labelText="Number of Seats"
id="noOfSeats"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
</GridContainer>
</CardBody>
<CardFooter>
<Button color="primary" type="submit">Submit Profile</Button>
</CardFooter>
</Card>
</form>
</GridItem>
{
show && <GridItem xs={12} sm={12} md={5}>
<Card profile>
<CardAvatar profile>
<a href="#pablo" onClick={e => e.preventDefault()}>
<img src={avatar} alt="..." />
</a>
</CardAvatar>
<CardBody profile>
<p className={classes.cardCategory}>DRIVER</p>
<h4 className={classes.cardTitle}>{formData.name}</h4>
<p className={classes.description}>
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="customized table">
<TableBody>
<StyledTableRow>
<StyledTableCell component="th" scope="row">
Contact
</StyledTableCell>
<StyledTableCell align="right">{formData.contact}</StyledTableCell>
</StyledTableRow>
<StyledTableRow>
<StyledTableCell component="th" scope="row">
Email Address
</StyledTableCell>
<StyledTableCell align="right">{formData.email}</StyledTableCell>
</StyledTableRow>
<StyledTableRow>
<StyledTableCell component="th" scope="row">
Car Number
</StyledTableCell>
<StyledTableCell align="right">{formData.carNo}</StyledTableCell>
</StyledTableRow>
<StyledTableRow>
<StyledTableCell component="th" scope="row">
Number of Seats
</StyledTableCell>
<StyledTableCell align="right">{formData.noOfSeats}</StyledTableCell>
</StyledTableRow>
</TableBody>
</Table>
</TableContainer>
</p>
<Button color="primary" round onClick={e => e.preventDefault()}>
Edit
</Button>
</CardBody>
</Card>
</GridItem>
}
</GridContainer>
</div >
);
}
Example #23
| Source File: UserProfile.js From KEDS-Rideshare-KUHacks with MIT License | 4 votes |
|
export default function UserProfile(props) {
const classes = useStyles();
const [ show, setHide ] = useState(false)
const [ open, setOpen ] = React.useState(false);
const [ loading, isLoading ] = useState(false);
const [ web3, setWeb3 ] = useState(props.web3);
const [ formData, setFormData ] = useState({
name: "",
contact: "",
email: "",
})
const handleSuccess = () => {
setOpen(true);
};
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
function handleChange(event) {
const { id, value } = event.target
setFormData({ ...formData, [ id ]: value })
}
async function handleSubmit(event) {
event.preventDefault();
setHide(true)
let accounts = await web3.eth.getAccounts();
localStorage.setItem('account', accounts[ 0 ])
localStorage.setItem('name', formData.name)
localStorage.setItem('contact', formData.contact)
localStorage.setItem('email', formData.email)
localStorage.setItem('type', "0")
var n = web3.utils.padRight(web3.utils.fromAscii(formData.name), 64);
var c = web3.utils.padRight(web3.utils.fromAscii(formData.contact), 64);
var e = web3.utils.padRight(web3.utils.fromAscii(formData.email), 64);
props.rideManager.methods.registerRider(n, c, e, 0, accounts[ 0 ]).send({ from: accounts[ 0 ] })
.once('receipt', (receipt) => {
console.log(receipt);
isLoading(false);
})
handleSuccess()
}
if (loading) {
return <Loader />;
} else {
return (
<div>
<Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={open} autoHideDuration={5000} onClose={handleClose}>
<Alert onClose={handleClose} severity="success">
Success Wallet Address {localStorage.getItem('account')}!
</Alert>
</Snackbar>
<GridContainer>
<GridItem xs={12} sm={12} md={7}>
<form onSubmit={handleSubmit}>
<Card>
<CardHeader color="primary">
<h4 className={classes.cardTitleWhite}>User Profile</h4>
<p className={classes.cardCategoryWhite}>Complete your profile</p>
</CardHeader>
<CardBody>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<CustomInput
inputProps={{
onChange: (e) => handleChange(e),
type: "text"
}}
labelText="Full Name"
id="name"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<CustomInput
inputProps={{
onChange: (e) => handleChange(e),
type: "tel"
}}
labelText="Contact"
id="contact"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={12} md={12}>
<CustomInput
inputProps={{
onChange: (e) => handleChange(e),
type: "email"
}}
labelText="Email Address"
id="email"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
</GridContainer>
</CardBody>
<CardFooter>
<Button color="primary" type="submit">Submit Profile</Button>
</CardFooter>
</Card>
</form>
</GridItem>
{
show && <GridItem xs={12} sm={12} md={5} >
<Card profile>
<CardAvatar profile>
<a href="#pablo" onClick={e => e.preventDefault()}>
<img src={avatar} alt="..." />
</a>
</CardAvatar>
<CardBody profile>
<p className={classes.cardCategory}>USER</p>
<h4 className={classes.cardTitle}>{formData.name}</h4>
<p className={classes.description}>
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="customized table">
<TableBody>
<StyledTableRow>
<StyledTableCell component="th" scope="row">
Contact
</StyledTableCell>
<StyledTableCell align="right">{formData.contact}</StyledTableCell>
</StyledTableRow>
<StyledTableRow>
<StyledTableCell component="th" scope="row">
Email Address
</StyledTableCell>
<StyledTableCell align="right">{formData.email}</StyledTableCell>
</StyledTableRow>
</TableBody>
</Table>
</TableContainer>
</p>
<Button color="primary" round onClick={e => e.preventDefault()}>
Edit
</Button>
</CardBody>
</Card>
</GridItem>
}
</GridContainer>
</div >
);
}
}
Example #24
| Source File: Users.js From virtualdojo-rooms with GNU General Public License v3.0 | 4 votes |
|
function Users() {
const {
currentUser,
users,
error,
changeRoom,
toggleIsMentor,
deleteUser,
userIdsBeingEdited,
} = useContext(store);
const classes = useStyles();
const { t } = useTranslation("translation");
const orderedUsers = users.sort((a, b) => (a.userName > b.userName ? 1 : -1));
const isBeingEdited = useCallback(
(userId) => {
return userIdsBeingEdited.indexOf(userId) >= 0;
},
[userIdsBeingEdited]
);
return (
<>
<ErrorMessage errorCode={error}></ErrorMessage>
<TableContainer
component={Paper}
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<Table className={classes.table} size="small" aria-label="users table">
<TableHead>
<TableRow>
<TableCell colSpan={4}>{t("Name")}</TableCell>
<TableCell align="right">{t("Room")}</TableCell>
<TableCell align="right">{t("Type")}</TableCell>
<TableCell align="right">{t("Change Type")}</TableCell>
<TableCell align="right">{t("Follow Me")}</TableCell>
<TableCell align="right">{t("Follow Ninja")}</TableCell>
<TableCell align="right">{t("Delete Ninja")}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{orderedUsers.map((u) => (
<TableRow key={`${u.userId}${u.isMentor}`}>
<TableCell component="th" scope="row" colSpan={4}>
{u.userName}
</TableCell>
<TableCell align="right">{u.room.roomName}</TableCell>
<TableCell align="right">
{u.isMentor ? "Mentor" : "Ninja"}
</TableCell>
<TableCell align="right">
<IconButton
size="small"
aria-label="promote"
color="primary"
onClick={() => toggleIsMentor(u)}
disabled={
currentUser.userId === u.userId || isBeingEdited(u.userId)
}
>
<Tooltip
title={
u.isMentor ? t("Set As Ninja") : t("Set As Mentor")
}
placement="bottom"
key={u.isMentor}
>
{u.isMentor ? <EmojiIcon /> : <DomainIcon />}
</Tooltip>
</IconButton>
</TableCell>
<TableCell align="right">
<IconButton
size="small"
aria-label="promote"
color="primary"
onClick={() =>
changeRoom(u.userId, currentUser.room.roomId)
}
disabled={
currentUser.room.roomId === u.room.roomId ||
isBeingEdited(u.userId)
}
>
<Tooltip
title={
currentUser.room.roomId === u.room.roomId
? "Same room"
: t("Follow Me")
}
placement="bottom"
key={currentUser.room.roomId === u.room.roomId}
>
{currentUser.room.roomId === u.room.roomId ? (
<ExploreOffIcon />
) : (
<ExploreIcon />
)}
</Tooltip>
</IconButton>
</TableCell>
<TableCell align="right">
<IconButton
size="small"
aria-label="promote"
color="primary"
onClick={() =>
changeRoom(currentUser.userId, u.room.roomId)
}
disabled={
currentUser.room.roomId === u.room.roomId ||
isBeingEdited(u.userId)
}
>
<Tooltip
title={
currentUser.room.roomId === u.room.roomId
? "Same room"
: t("Follow Ninja")
}
placement="bottom"
key={currentUser.room.roomId === u.room.roomId}
>
{currentUser.room.roomId === u.room.roomId ? (
<SupervisedUserCircleIcon />
) : (
<ControlCameraIcon />
)}
</Tooltip>
</IconButton>
</TableCell>
<TableCell align="right">
<IconButton
size="small"
aria-label="promote"
color="primary"
onClick={() => deleteUser(u.userId)}
disabled={
currentUser.userId === u.userId || isBeingEdited(u.userId)
}
>
<Tooltip title={t("Delete Ninja")} placement="bottom">
<DeleteForeverIcon />
</Tooltip>
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
);
}
Example #25
| Source File: List.js From disposable_app with GNU General Public License v2.0 | 4 votes |
|
render() {
const newMails = this.state.emails.filter(email => email.isNew === 'true');
let title = 'Disposable Email';
if (newMails.length > 0) {
title = '(' + newMails.length + ') Disposable Email';
}
return (
<Grid container spacing={3}>
<Helmet>
<title>{title}</title>
</Helmet>
<AppBar position="static">
<Toolbar>
<Typography style={{flex: 1,}}>
Disposable address: <b>{this.state.address}</b>
</Typography>
<Tooltip title="Refresh list">
<IconButton color="inherit" onClick={this.reloadList.bind(this)}>
<RefreshIcon />
</IconButton>
</Tooltip>
<Tooltip title="Logout">
<IconButton color="inherit" onClick={this.logout.bind(this)}>
<ExitToAppIcon />
</IconButton>
</Tooltip>
</Toolbar>
</AppBar>
<Grid item xs={6}>
<Paper elevation={3}>
<div style={{ overflow: 'auto', height: '100vh' }}>
<TableContainer>
<Table stickyHeader size="small">
<TableHead>
<TableRow>
<TableCell>#</TableCell>
<TableCell>From</TableCell>
<TableCell>Subject</TableCell>
<TableCell>Date</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.state.emails.map((email, i) =>
(
<TableRow
hover
selected={email.messageId === this.state.selectedId}
key={email.messageId}
onClick={event => this.handleClick(event, email.messageId)}
>
<TableCell style={email.isNew === 'true' ? {fontWeight:'bold',} : null}>{i+1}</TableCell>
<TableCell style={email.isNew === 'true' ? {fontWeight:'bold',} : null}>{this.senderName(email.commonHeaders.from)}</TableCell>
<TableCell style={email.isNew === 'true' ? {fontWeight:'bold',} : null}>{email.commonHeaders.subject}</TableCell>
<TableCell style={email.isNew === 'true' ? {fontWeight:'bold',} : null}>{email.commonHeaders.date}</TableCell>
</TableRow>
)
)}
{this.state.emails.length === 0 ?
<TableRow>
<TableCell colSpan="4">
<Typography variant="body1">No mails here</Typography>
</TableCell>
</TableRow> : null}
</TableBody>
</Table>
</TableContainer>
</div>
</Paper>
</Grid>
<Grid item xs={6}>
<EmailViewer address={this.state.address} messageId={this.state.selectedId} sessionid={this.state.sessionid} apiEndpoint={this.props.apiEndpoint}/>
</Grid>
</Grid>
)
}
Example #26
| Source File: ListUrls.js From fireshort with MIT License | 4 votes |
|
export default function ListUrls(props) {
const classes = useStyles();
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<Container className={classes.cardGrid} maxWidth="md">
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
<TableCell key="curl" align="left" style={{ minWidth: "100px" }}>
Short URL
</TableCell>
<TableCell key="lurl" align="left" style={{ minWidth: "100px" }}>
Long URL
</TableCell>
<TableCell key="action" align="right" style={{ minWidth: "100px" }}>
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.shortUrls.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((card) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={card.id}>
<TableCell key="curl" align="left" style={{ minWidth: "100px" }}>
<Button
startIcon={
<FileCopyOutlinedIcon />
}
onClick={() => { navigator.clipboard.writeText(window.location.hostname + "/" + card.data.curl) }}
classes={{
label: classes.label
}}
>{card.data.curl}</Button>
</TableCell>
<TableCell key="lurl" align="left" style={{ minWidth: "100px" }}>
<Box bgcolor="text.primary" color="background.paper" p={2} style={{ overflowX: 'auto', overflowY: 'hidden', whiteSpace: "nowrap" }}>
{card.data.lurl}
</Box>
</TableCell>
<TableCell key="action" align="right" style={{ minWidth: "100px" }}>
<ButtonGroup variant="outlined" color="default">
<Button size="small" color="primary" href={card.data.lurl} target="_blank">
<VisibilityIcon />
</Button>
<Button size="small" onClick={() => props.handleEditShortUrl(card.data.curl)}>
<EditIcon />
</Button>
<Button size="small" color="secondary" onClick={() => props.handleDeleteShortUrl(card.data.curl)}>
<DeleteForeverIcon />
</Button>
</ButtonGroup>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={props.shortUrls.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
</Container>
);
}
Example #27
| Source File: StatsDialog.js From dipact with GNU General Public License v3.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<Dialog
onEntered={helpers.genOnback(this.props.onClose)}
disableBackdropClick={false}
open={true}
onClose={this.onClose}
>
<DialogTitle>
{this.props.user.Name}
{this.props.game ? " playing " + this.nation : ""}
</DialogTitle>
<DialogContent>
<FormControlLabel
control={
<Checkbox
disabled={
this.props.user.Id === Globals.user.Id
}
checked={!!Globals.bans[this.props.user.Id]}
onClick={this.toggleBanned}
/>
}
label="Banned"
/>
{this.member ? (
<FormControlLabel
control={
<Checkbox
disabled={
this.props.user.Id ===
Globals.user.Id
}
checked={
(
this.state.gameState.Properties
.Muted || []
).indexOf(this.nation) !== -1
}
onClick={this.toggleMuted}
/>
}
label="Muted"
/>
) : (
""
)}
{this.state.userStats ? (
<TableContainer
component={Paper}
>
<Table>
<TableBody>
{this.makeRow(
"Ranking (position in server wide leaderboard)",
<Button
variant="outlined"
onClick={(_) => {
this.setState({
leaderboardDialogOpen: true,
});
}}
>
{"#" +
(this.state.userStats
.Properties.TrueSkill
.HigherRatedCount +
1)}
</Button>
)}
{this.makeRow(
"TrueSkill rating (calculation based on win/loss history)",
helpers.twoDecimals(
this.state.userStats.Properties
.TrueSkill.Rating
)
)}
{this.makeRow(
"Rating percentile (percentage of active players as good or better)",
"" +
helpers.ratingPercentile(
this.state.userStats
.Properties.TrueSkill
.Rating
) +
"%"
)}
{this.makeRow(
"Reliability (ratio of non NMR phases)",
helpers.twoDecimals(
this.state.userStats.Properties
.Reliability
)
)}
{this.makeRow(
"Quickness (ratio of committed phases)",
helpers.twoDecimals(
this.state.userStats.Properties
.Quickness
)
)}
{this.makeRow(
"Hated (ratio of games resulting in being banned)",
helpers.twoDecimals(
this.state.userStats.Properties
.Hated
)
)}
{this.makeRow(
"Hater (ratio of games resulting in banning someone)",
helpers.twoDecimals(
this.state.userStats.Properties
.Hater
)
)}
{this.makeRow(
"Joined games",
this.state.userStats.Properties
.JoinedGames
)}
{this.makeRow(
"Started games",
this.state.userStats.Properties
.StartedGames
)}
{this.makeRow(
"Finished games",
this.state.userStats.Properties
.FinishedGames
)}
{this.makeRow(
"Abandoned games",
this.state.userStats.Properties
.DroppedGames
)}
{this.makeRow(
"Solo wins",
this.state.userStats.Properties
.SoloGames
)}
{this.makeRow(
"Draws",
this.state.userStats.Properties
.DIASGames
)}
{this.makeRow(
"Eliminations",
this.state.userStats.Properties
.EliminatedGames
)}
</TableBody>
</Table>
</TableContainer>
) : (
""
)}
</DialogContent>
<DialogActions>
<Button
onClick={this.onClose}
color="primary"
>
Close
</Button>
</DialogActions>
</Dialog>
{this.state.leaderboardDialogOpen ? (
<LeaderboardDialog
onClose={(_) => {
this.setState({ leaderboardDialogOpen: false });
}}
/>
) : (
""
)}
</React.Fragment>
);
}
Example #28
| Source File: KailonaTable.js From ehr with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const columnsLength = this.props.columns.length;
const noDataColSpan = this.props.contextMenu ? columnsLength + 1 : columnsLength;
const rowHeight = 50;
const isWayPointAvailable = !this.state.loading && this.state.previousDataLength !== this.props.data.length;
const tableHeight = (this.props.rowsPerPage + 1) * rowHeight;
return (
<Paper style={{ height: `${tableHeight}px`, width: '100%', position: 'relative', overflowY: 'auto' }}>
<TableContainer>
<Table>
<TableHead>
<TableRow>
{this.props.columns.map(col => (
<HeadCell>{col.label}</HeadCell>
))}
{this.props.contextMenu && <HeadCell></HeadCell>}
</TableRow>
</TableHead>
<TableBody>
{this.props.data.map(record => (
<TableRow>
{this.props.columns.map((col, index) => {
let displayText = record[col.key];
if (col.display && typeof col.display === 'function') {
displayText = col.display(record, record[col.key]);
}
return (
<TableCell>
<div>{displayText}</div>
{index === 0 && (
<div>
<Link color="primary">{record.source}</Link>
</div>
)}
</TableCell>
);
})}
{this.props.contextMenu && (
<TableCell>
<IconButton onClick={e => this.toggleContextMenu(e, record)}>
<MoreHoriz />
</IconButton>
</TableCell>
)}
</TableRow>
))}
</TableBody>
<TableFooter>
{this.props.loading && (
<TableRow>
<TableCell colSpan={this.props.columns.length} align="center">
<Loader />
</TableCell>
</TableRow>
)}
{!this.props.loading && (!this.props.data || !this.props.data.length) && (
<TableRow>
<TableCell colSpan={noDataColSpan} align="center">
<Typography variant="h5">{t('ehr', 'No data available')}</Typography>
</TableCell>
</TableRow>
)}
</TableFooter>
</Table>
</TableContainer>
{isWayPointAvailable && (
<div style={{ marginTop: `10px`, height: '20px' }}>
<Waypoint onEnter={this.handleScroll}></Waypoint>
</div>
)}
{this.props.pagination && (
<TablePagination
rowsPerPageOptions={[1, 5, 10, 25]}
component="div"
count={this.props.data.length}
rowsPerPage={this.props.rowsPerPage}
page={this.state.page}
onChangePage={(e, page) => this.props.onChangePage(e, page)}
onChangeRowsPerPage={e => this.props.onChangeRowsPerPage(e)}
/>
)}
<Menu
id="table-context-menu"
anchorEl={this.state.anchorEl}
keepMounted
open={Boolean(this.state.anchorEl)}
onClose={this.handleContextMenuClose}
>
{this.props.contextMenu &&
this.props.contextMenu.map(menuItem => {
return (
<MenuItem onClick={() => this.handleMenuItemClick(menuItem.onClick)}>
<ListItemIcon size="small" style={{ minWidth: '32px' }}>
{menuItem.icon}
</ListItemIcon>
<ListItemText primary={menuItem.label} />
</MenuItem>
);
})}
</Menu>
</Paper>
);
}
Example #29
| Source File: ProviderDetailContent.js From akashlytics-deploy with GNU General Public License v3.0 | 4 votes |
|
ProviderDetailContent = ({ provider, address }) => {
const classes = useStyles();
const activeResources = getTotalProviderResource(provider.active);
const availableResources = getTotalProviderResource(provider.available);
const pendingResources = getTotalProviderResource(provider.pending);
return (
<>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} size="small">
<TableBody>
<TableRow>
<TableCell component="th" scope="row">
<strong>Name</strong>
</TableCell>
<TableCell align="center">{provider.name}</TableCell>
</TableRow>
{address && (
<TableRow>
<TableCell component="th" scope="row">
<strong>Address</strong>
</TableCell>
<TableCell align="center">
<Address address={address} isCopyable />
</TableCell>
</TableRow>
)}
<TableRow>
<TableCell component="th" scope="row">
<strong>Email</strong>
</TableCell>
<TableCell align="center">{provider.email}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
<strong>Website</strong>
</TableCell>
<TableCell align="center">{provider.website}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
<strong>Akash version</strong>
</TableCell>
<TableCell align="center">{provider.akash?.version || "< 0.16.0"}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
<strong>Kube version</strong>
</TableCell>
<TableCell align="center">{provider.kube ? `${provider.kube?.major}.${provider.kube?.minor}` : "unkown"}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
<strong>Platform</strong>
</TableCell>
<TableCell align="center">{provider.kube?.platform || "unkown"}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
<strong>Orders</strong>
</TableCell>
<TableCell align="center">{provider.orderCount}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
<strong>Deployments</strong>
</TableCell>
<TableCell align="center">{provider.deploymentCount}</TableCell>
</TableRow>
<TableRow>
<TableCell component="th" scope="row">
<strong>Leases</strong>
</TableCell>
<TableCell align="center">{provider.leaseCount}</TableCell>
</TableRow>
{provider.error && (
<TableRow>
<TableCell component="th" scope="row">
<strong>Error</strong>
</TableCell>
<TableCell align="center">{provider.error}</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
<Box marginTop="1rem">
<Box marginBottom={1}>
<Typography variant="body2">
<strong>Immediately available resources</strong>
</Typography>
</Box>
<SpecDetail
cpuAmount={roundDecimal(availableResources.cpu - pendingResources.cpu)}
memoryAmount={availableResources.memory - pendingResources.memory}
storageAmount={availableResources.storage - pendingResources.storage}
size="medium"
color="primary"
/>
</Box>
<Box marginTop="1rem">
<Box marginBottom={1}>
<Typography variant="body2">
<Box component="strong" display="flex" alignItems="center">
Available resources{" "}
<Tooltip
classes={{ tooltip: classes.tooltip }}
arrow
interactive
title="Some of these resources might not be available right away because there might be open bids that haven't timed out yet."
>
<InfoIcon className={clsx(classes.tooltipIcon, classes.marginLeft)} />
</Tooltip>
</Box>
</Typography>
</Box>
<SpecDetail
cpuAmount={roundDecimal(availableResources.cpu)}
memoryAmount={availableResources.memory}
storageAmount={availableResources.storage}
size="small"
color="primary"
/>
</Box>
<Box marginTop="1rem">
<Box marginBottom={1}>
<Typography variant="body2">
<strong>Active resources</strong>
</Typography>
</Box>
<SpecDetail
cpuAmount={roundDecimal(activeResources.cpu)}
memoryAmount={activeResources.memory}
storageAmount={activeResources.storage}
size="small"
color="default"
/>
</Box>
<Box marginTop="1rem">
<Box marginBottom={1}>
<Typography variant="body2">
<strong>Pending resources</strong>
</Typography>
</Box>
<SpecDetail
cpuAmount={roundDecimal(pendingResources.cpu)}
memoryAmount={pendingResources.memory}
storageAmount={pendingResources.storage}
size="small"
color="default"
/>
</Box>
<Box marginTop="1rem">
<ProviderAttributes provider={provider} />
</Box>
</>
);
}
