diff options
author | Sunil Shetye | 2021-09-28 14:07:13 +0530 |
---|---|---|
committer | Sunil Shetye | 2021-10-01 11:37:02 +0530 |
commit | 15b2d48459e19cd8fca2545f4b2f28bc7d1ee087 (patch) | |
tree | fc4e6a0208a8fb8f529523776f33aa97e83e6b8e | |
parent | 18662727eef0a46500bcad45bada9f560527c4f9 (diff) | |
download | Common-Interface-Project-15b2d48459e19cd8fca2545f4b2f28bc7d1ee087.tar.gz Common-Interface-Project-15b2d48459e19cd8fca2545f4b2f28bc7d1ee087.tar.bz2 Common-Interface-Project-15b2d48459e19cd8fca2545f4b2f28bc7d1ee087.zip |
fixes using command
npx standard --fix
38 files changed, 1040 insertions, 1041 deletions
diff --git a/blocks/eda-frontend/src/App.js b/blocks/eda-frontend/src/App.js index 94cee9ca..e802cd41 100644 --- a/blocks/eda-frontend/src/App.js +++ b/blocks/eda-frontend/src/App.js @@ -24,15 +24,19 @@ function PrivateRoute ({ component: Component, ...rest }) { useEffect(() => dispatch(loadUser()), [dispatch]) - return <Route {...rest} render={props => { - if (auth.isLoading) { - return <CircularProgress style={{ margin: '50vh 50vw' }} /> - } else if (!auth.isAuthenticated) { - return <Redirect to="/login" /> - } else { - return <Component {...props} /> - } - }} /> + return ( + <Route + {...rest} render={props => { + if (auth.isLoading) { + return <CircularProgress style={{ margin: '50vh 50vw' }} /> + } else if (!auth.isAuthenticated) { + return <Redirect to='/login' /> + } else { + return <Component {...props} /> + } + }} + /> + ) } // Public routes accessible to all users. [ e.g. editor, gallery ] @@ -42,17 +46,21 @@ function PublicRoute ({ component: Component, restricted, nav, ...rest }) { useEffect(() => dispatch(loadUser()), [dispatch]) - return <Route {...rest} render={props => { - if (auth.isLoading) { - return <CircularProgress style={{ margin: '50vh 50vw' }} /> - } else if (auth.isAuthenticated && restricted) { - return <Redirect to="/dashboard" /> - } else if (nav) { - return (<><Navbar /><Component {...props} /></>) - } else { - return <Component {...props} /> - } - }} /> + return ( + <Route + {...rest} render={props => { + if (auth.isLoading) { + return <CircularProgress style={{ margin: '50vh 50vw' }} /> + } else if (auth.isAuthenticated && restricted) { + return <Redirect to='/dashboard' /> + } else if (nav) { + return (<><Navbar /><Component {...props} /></>) + } else { + return <Component {...props} /> + } + }} + /> + ) } function App () { @@ -60,17 +68,16 @@ function App () { // Handles Routing for an application <HashRouter> <Switch> - <PublicRoute exact path="/login" restricted={true} nav={false} component={Login} /> - <PublicRoute exact path="/signup" restricted={true} nav={false} component={SignUp} /> - <PublicRoute exact path="/" restricted={false} nav={true} component={Home} /> + <PublicRoute exact path='/login' restricted nav={false} component={Login} /> + <PublicRoute exact path='/signup' restricted nav={false} component={SignUp} /> + <PublicRoute exact path='/' restricted={false} nav component={Home} /> {localStorage.getItem(process.env.REACT_APP_NAME + '_token') !== null - ? <PublicRoute exact path="/editor" restricted={false} nav={false} component={SchematicEditor} /> - : <Route path="/editor" component={SchematicEditor} /> - } - <PublicRoute exact path="/simulator/ngspice" restricted={false} nav={true} component={Simulator} /> - <PublicRoute exact path="/gallery" restricted={false} nav={true} component={Gallery} /> - <PrivateRoute path="/dashboard" component={Dashboard} /> - <PublicRoute restricted={false} nav={true} component={NotFound} /> + ? <PublicRoute exact path='/editor' restricted={false} nav={false} component={SchematicEditor} /> + : <Route path='/editor' component={SchematicEditor} />} + <PublicRoute exact path='/simulator/ngspice' restricted={false} nav component={Simulator} /> + <PublicRoute exact path='/gallery' restricted={false} nav component={Gallery} /> + <PrivateRoute path='/dashboard' component={Dashboard} /> + <PublicRoute restricted={false} nav component={NotFound} /> </Switch> </HashRouter> ) diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js b/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js index 5649d5b6..d1e56c4e 100644 --- a/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js +++ b/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js @@ -37,16 +37,16 @@ function MainCard () { <Typography className={classes.title} gutterBottom> Welcome to your EDA Dashboard </Typography> - <Typography variant="h5" component="h2"> + <Typography variant='h5' component='h2'> Welcome {auth.user.username}... </Typography> </CardContent> <CardActions> <Button component={RouterLink} - to="/dashboard/schematics" - color="primary" - size="small" + to='/dashboard/schematics' + color='primary' + size='small' > {button} </Button> @@ -64,10 +64,10 @@ export default function DashboardHome () { <> <Grid container - direction="row" - justify="flex-start" - alignItems="flex-start" - alignContent="center" + direction='row' + justify='flex-start' + alignItems='flex-start' + alignContent='center' spacing={3} > {/* User Dashboard Home Header */} @@ -77,7 +77,7 @@ export default function DashboardHome () { <Grid item xs={12}> <Card style={{ padding: '7px 15px' }} className={classes.mainHead}> - <Typography variant="subtitle1" gutterBottom> + <Typography variant='subtitle1' gutterBottom> Hey {auth.user.username} , {typography} </Typography> </Card> diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js index 34d58b5f..571759c5 100644 --- a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js +++ b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js @@ -67,9 +67,9 @@ export default function DashSidebar (props) { </Hidden> <List> <ListItem - alignItems="flex-start" + alignItems='flex-start' component={RouterLink} - to="/dashboard" + to='/dashboard' style={{ marginTop: '15px' }} className={classes.sideItem} button @@ -83,45 +83,45 @@ export default function DashSidebar (props) { <ListItemText primary={auth.user.username} secondary={ - <React.Fragment> + <> <Typography - component="span" - variant="body2" - color="textSecondary" + component='span' + variant='body2' + color='textSecondary' > Contributor </Typography> - </React.Fragment> + </> } /> </ListItem> <ListItem component={RouterLink} - to="/dashboard/profile" + to='/dashboard/profile' className={classes.sideItem} button divider > - <ListItemText primary='My Profile'/> + <ListItemText primary='My Profile' /> </ListItem> <ListItem component={RouterLink} - to="/dashboard/schematics" + to='/dashboard/schematics' className={classes.sideItem} button > - <ListItemText primary={button}/> + <ListItemText primary={button} /> </ListItem> {/* List name of saved schematics */} - <List className={classes.nestedSearch} > + <List className={classes.nestedSearch}> <InputBase className={classes.input} placeholder={placeholder} /> </List> - <div className={classes.nested} > + <div className={classes.nested}> {schematics.map((sch) => ( <ListItem key={sch.save_id} button> <ListItemText primary={`${sch.name}`} /> diff --git a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js index 564bc035..777df535 100644 --- a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js +++ b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js @@ -20,7 +20,7 @@ function TabPanel (props) { return ( <div - role="tabpanel" + role='tabpanel' hidden={value !== index} id={`scrollable-auto-tabpanel-${index}`} aria-labelledby={`scrollable-auto-tab-${index}`} @@ -69,13 +69,13 @@ export default function ProgressPanel () { const typography = 'You have not created any ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME return ( <div className={classes.root}> - <AppBar position="static"> + <AppBar position='static'> <Tabs value={value} onChange={handleChange} - variant="scrollable" - scrollButtons="auto" - aria-label="scrollable auto tabs example" + variant='scrollable' + scrollButtons='auto' + aria-label='scrollable auto tabs example' > <Tab label={tab} {...a11yProps(0)} /> </Tabs> @@ -85,13 +85,13 @@ export default function ProgressPanel () { <TabPanel value={value} index={0}> {schematics.length !== 0 ? <Grid - container - direction="row" - justify="flex-start" - alignItems="flex-start" - alignContent="center" - spacing={3} - > + container + direction='row' + justify='flex-start' + alignItems='flex-start' + alignContent='center' + spacing={3} + > {schematics.slice(0, 4).map( (sch) => { return ( @@ -102,10 +102,9 @@ export default function ProgressPanel () { } )} </Grid> - : <Typography variant="button" display="block" gutterBottom> + : <Typography variant='button' display='block' gutterBottom> {typography} , Create your first one now... - </Typography> - } + </Typography>} </TabPanel> </div> ) diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js index 63b469a6..6d2a0f97 100644 --- a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js +++ b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js @@ -31,7 +31,7 @@ const useStyles = makeStyles((theme) => ({ } })) function Alert (props) { - return <MuiAlert elevation={6} variant="filled" {...props} /> + return <MuiAlert elevation={6} variant='filled' {...props} /> } // Schematic delete snackbar @@ -48,15 +48,16 @@ function SimpleSnackbar ({ open, close, sch }) { autoHideDuration={6000} onClose={close} > - <Alert icon={false} severity="warning" color="error" style={{ width: '100%' }} action={ - <> - <Button size="small" aria-label="close" color="inherit" onClick={() => { dispatch(deleteSchematic(sch.save_id)) }}> - Yes - </Button> - <Button size="small" aria-label="close" color="inherit" onClick={close}> - NO - </Button> - </> + <Alert + icon={false} severity='warning' color='error' style={{ width: '100%' }} action={ + <> + <Button size='small' aria-label='close' color='inherit' onClick={() => { dispatch(deleteSchematic(sch.save_id)) }}> + Yes + </Button> + <Button size='small' aria-label='close' color='inherit' onClick={close}> + NO + </Button> + </> } > {'Delete ' + sch.name + ' ?'} @@ -73,13 +74,13 @@ SimpleSnackbar.propTypes = { // Display schematic updated status (e.g : updated 2 hours ago...) function timeSince (jsonDate) { - var json = jsonDate + const json = jsonDate - var date = new Date(json) + const date = new Date(json) - var seconds = Math.floor((new Date() - date) / 1000) + const seconds = Math.floor((new Date() - date) / 1000) - var interval = Math.floor(seconds / 31536000) + let interval = Math.floor(seconds / 31536000) if (interval > 1) { return interval + ' years' @@ -105,8 +106,8 @@ function timeSince (jsonDate) { // Display schematic created date (e.g : Created On 29 Jun 2020) function getDate (jsonDate) { - var json = jsonDate - var date = new Date(json) + const json = jsonDate + const date = new Date(json) const dateTimeFormat = new Intl.DateTimeFormat('en', { year: 'numeric', month: 'short', day: '2-digit' }) const [{ value: month }, , { value: day }, , { value: year }] = dateTimeFormat.formatToParts(date) return `${day}-${month}-${year}` @@ -145,11 +146,11 @@ export default function SchematicCard ({ sch }) { title={sch.name} /> <CardContent> - <Typography variant="body2" component="p"> + <Typography variant='body2' component='p'> {sch.description} </Typography> {/* Display updated status */} - <Typography variant="body2" color="textSecondary" component="p" style={{ margin: '5px 0px 0px 0px' }}> + <Typography variant='body2' color='textSecondary' component='p' style={{ margin: '5px 0px 0px 0px' }}> Updated {timeSince(sch.save_time)} ago... </Typography> </CardContent> @@ -157,20 +158,20 @@ export default function SchematicCard ({ sch }) { <CardActions> <Button - target="_blank" + target='_blank' component={RouterLink} to={'/editor?id=' + sch.save_id} - size="small" - color="primary" + size='small' + color='primary' > Launch in Editor </Button> {/* Display delete option */} - <Tooltip title='Delete' placement="bottom" arrow> + <Tooltip title='Delete' placement='bottom' arrow> <DeleteIcon color='secondary' - fontSize="small" + fontSize='small' style={{ marginLeft: 'auto' }} onClick={() => { handleSnacClick() }} /> @@ -178,10 +179,10 @@ export default function SchematicCard ({ sch }) { <SimpleSnackbar open={snacOpen} close={handleSnacClose} sch={sch} /> {/* Display share status */} - <Tooltip title={!sch.shared ? 'SHARE OFF' : 'SHARE ON'} placement="bottom" arrow> + <Tooltip title={!sch.shared ? 'SHARE OFF' : 'SHARE ON'} placement='bottom' arrow> <ShareIcon color={!sch.shared ? 'disabled' : 'primary'} - fontSize="small" + fontSize='small' style={{ marginRight: '10px' }} /> </Tooltip> diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js index fa17d2b5..387a8054 100644 --- a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js +++ b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js @@ -38,21 +38,21 @@ function MainCard () { <Typography className={classes.title} gutterBottom> {typography1} </Typography> - <Typography variant="h5" component="h2"> + <Typography variant='h5' component='h2'> {typography2} </Typography> </CardContent> <CardActions> <Button - target="_blank" + target='_blank' component={RouterLink} - to="/editor" - size="small" - color="primary" + to='/editor' + size='small' + color='primary' > Create New </Button> - <Button size="small" color="secondary"> + <Button size='small' color='secondary'> Load More </Button> </CardActions> @@ -77,10 +77,10 @@ export default function SchematicsList () { <> <Grid container - direction="row" - justify="flex-start" - alignItems="flex-start" - alignContent="center" + direction='row' + justify='flex-start' + alignItems='flex-start' + alignContent='center' spacing={3} > {/* User Dashboard My Schematic Header */} @@ -103,12 +103,11 @@ export default function SchematicsList () { </> : <Grid item xs={12}> <Card style={{ padding: '7px 15px' }} className={classes.mainHead}> - <Typography variant="subtitle1" gutterBottom> + <Typography variant='subtitle1' gutterBottom> Hey {auth.user.username} , {typography1} </Typography> </Card> - </Grid> - } + </Grid>} </Grid> </> ) diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js index 550e207c..6888dbd2 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js @@ -16,7 +16,7 @@ export default function ComponentProperties () { const dispatch = useDispatch() useEffect(() => { - setVal(parameter_values) + setVal(parameter_values) }, [parameter_values]) const getInputValues = (evt) => { @@ -31,25 +31,27 @@ export default function ComponentProperties () { dispatch(setCompProperties(id, val)) } - const link1 = name + ' Parameters'; - const link2 = 'Set ' + process.env.REACT_APP_BLOCK_NAME + ' Parameters'; - const link3 = 'No ' + name + ' Parameters'; + const link1 = name + ' Parameters' + const link2 = 'Set ' + process.env.REACT_APP_BLOCK_NAME + ' Parameters' + const link3 = 'No ' + name + ' Parameters' return ( <div style={isOpen ? {} : { display: 'none' }}> <ListItem> - { compProperties !== undefined ? <ListItemText primary={link1} /> : <ListItemText primary={link3} /> } + {compProperties !== undefined ? <ListItemText primary={link1} /> : <ListItemText primary={link3} />} </ListItem> { Object.keys(val).map((keyName, i) => { if (keyName.match(/^p[0-9]*_value$/)) { - let rootKeyName = keyName.substr(0, 4) - let type_id = rootKeyName + '_type'; + const rootKeyName = keyName.substr(0, 4) + const type_id = rootKeyName + '_type' if (compProperties !== undefined && compProperties[rootKeyName] !== null && compProperties[type_id] !== null) { - return <ListItem key={i}> - <TextField id={keyName} label={compProperties[rootKeyName]} value={val[keyName] || ''} size='small' variant='outlined' onChange={getInputValues} /> - </ListItem> + return ( + <ListItem key={i}> + <TextField id={keyName} label={compProperties[rootKeyName]} value={val[keyName] || ''} size='small' variant='outlined' onChange={getInputValues} /> + </ListItem> + ) } } @@ -59,7 +61,7 @@ export default function ComponentProperties () { { compProperties !== undefined && <ListItem> - <Button size='small' variant="contained" color="primary" onClick={setProps}>{link2}</Button> + <Button size='small' variant='contained' color='primary' onClick={setProps}>{link2}</Button> </ListItem> } diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js index f54a6698..f002b944 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js @@ -41,7 +41,7 @@ const useStyles = makeStyles((theme) => ({ })) const searchOptions = { - NAME: 'name__istartswith', + NAME: 'name__istartswith' } export default function ComponentSidebar ({ compRef }) { @@ -145,15 +145,15 @@ export default function ComponentSidebar ({ compRef }) { <ListItem> <TextField - id="standard-number" + id='standard-number' placeholder={link2} - variant="outlined" - size="small" + variant='outlined' + size='small' value={searchText} onChange={handleSearchText} InputProps={{ startAdornment: ( - <InputAdornment position="start"> + <InputAdornment position='start'> <SearchIcon /> </InputAdornment> ) @@ -162,22 +162,23 @@ export default function ComponentSidebar ({ compRef }) { </ListItem> - <div style={{ maxHeight: '70vh', overflowY: 'auto', overflowX: 'hidden' }} > + <div style={{ maxHeight: '70vh', overflowY: 'auto', overflowX: 'hidden' }}> {searchText.length !== 0 && searchedComponentList.length !== 0 && searchedComponentList.map((component, i) => { - return (<ListItemIcon key={i}> - <SideComp component={component} /> - </ListItemIcon>) + return ( + <ListItemIcon key={i}> + <SideComp component={component} /> + </ListItemIcon> + ) } - ) - } + )} <ListItem> <Loader - type="TailSpin" - color="#F44336" + type='TailSpin' + color='#F44336' height={100} width={100} visible={loading} @@ -186,8 +187,7 @@ export default function ComponentSidebar ({ compRef }) { {!loading && searchText.length !== 0 && isSearchedResultsEmpty && - <span style={{ margin: '20px' }}>{link3}</span> - } + <span style={{ margin: '20px' }}>{link3}</span>} {/* Collapsing List Mapped by Libraries fetched by the API */} {searchText.length === 0 && @@ -199,8 +199,8 @@ export default function ComponentSidebar ({ compRef }) { <span className={classes.head}>{library.name}</span> {collapse[library.id] ? <ExpandLess /> : <ExpandMore />} </ListItem> - <Collapse in={collapse[library.id]} timeout={'auto'} unmountOnExit mountOnEnter exit={false}> - <List component="div" disablePadding dense > + <Collapse in={collapse[library.id]} timeout='auto' unmountOnExit mountOnEnter exit={false}> + <List component='div' disablePadding dense> {/* Chunked Blocks of Library */} { @@ -209,9 +209,11 @@ export default function ComponentSidebar ({ compRef }) { <ListItem key={componentChunk[0].id} divider> { componentChunk.map((component) => { - return (<ListItemIcon key={component.name}> - <SideComp component={component} /> - </ListItemIcon>) + return ( + <ListItemIcon key={component.name}> + <SideComp component={component} /> + </ListItemIcon> + ) } ) } @@ -225,8 +227,7 @@ export default function ComponentSidebar ({ compRef }) { </div> ) } - ) - } + )} </div> </List> </div> @@ -235,9 +236,9 @@ export default function ComponentSidebar ({ compRef }) { <List> <ListItem button divider> <h2 style={{ margin: '5px auto 5px 5px' }}>Simulation Modes</h2> - <Tooltip title="close"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={() => { dispatch(toggleSimulate()) }}> - <CloseIcon fontSize="small" /> + <Tooltip title='close'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={() => { dispatch(toggleSimulate()) }}> + <CloseIcon fontSize='small' /> </IconButton> </Tooltip> </ListItem> @@ -248,7 +249,7 @@ export default function ComponentSidebar ({ compRef }) { ) } -export function ComponentImages() { +export function ComponentImages () { const component_images = useSelector(state => state.schematicEditorReducer.component_images) const dispatch = useDispatch() @@ -260,7 +261,7 @@ export function ComponentImages() { return ( <div> - {(component_images !== undefined) && component_images.forEach((image) => { new Image().src = '/django_static/' + image; })} + {(component_images !== undefined) && component_images.forEach((image) => { new Image().src = '/django_static/' + image })} </div> ) } diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Header.js b/blocks/eda-frontend/src/components/SchematicEditor/Header.js index 388a0bda..b103e209 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/Header.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/Header.js @@ -81,11 +81,11 @@ function SimpleSnackbar ({ open, close, message }) { onClose={close} message={message} action={ - <React.Fragment> - <IconButton size="small" aria-label="close" color="inherit" onClick={close}> - <CloseIcon fontSize="small" /> + <> + <IconButton size='small' aria-label='close' color='inherit' onClick={close}> + <CloseIcon fontSize='small' /> </IconButton> - </React.Fragment> + </> } /> </div> @@ -172,8 +172,8 @@ function Header () { // handle display format of last saved status function getDate (jsonDate) { - var json = jsonDate - var date = new Date(json) + const json = jsonDate + const date = new Date(json) const dateTimeFormat = new Intl.DateTimeFormat('en', { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }) const [{ value: month }, , { value: day }, , { value: hour }, , { value: minute }, , { value: second }] = dateTimeFormat.formatToParts(date) return `${day} ${month} ${hour}:${minute}:${second}` @@ -195,20 +195,20 @@ function Header () { const typography1 = 'Share Your ' + process.env.REACT_APP_DIAGRAM_NAME const typography2 = 'My ' + process.env.REACT_APP_DIAGRAMS_NAME return ( - <Toolbar variant="dense" color="default"> + <Toolbar variant='dense' color='default'> <SimpleSnackbar open={snacOpen} close={handleSnacClose} message={message} /> {/* Display logo */} - <IconButton edge="start" className={classes.button} color="primary"> + <IconButton edge='start' className={classes.button} color='primary'> <Avatar alt={altImage} src={logo} className={classes.small} /> </IconButton> <Typography - variant="h6" - color="inherit" + variant='h6' + color='inherit' noWrap className={classes.toolbarTitle} > - <Link color="inherit" target='_blank' component={RouterLink} to="/"> + <Link color='inherit' target='_blank' component={RouterLink} to='/'> {link} </Link> </Typography> @@ -217,7 +217,7 @@ function Header () { <Hidden xsDown> <Input className={classes.input} - color="secondary" + color='secondary' value={schSave.title === 'Untitled' ? 'Untitled' : schSave.title} onChange={titleHandler} inputProps={{ 'aria-label': 'SchematicTitle' }} @@ -229,17 +229,16 @@ function Header () { ? <> {(schSave.isSaved === true && schSave.details.save_time !== undefined) ? <Typography - variant="body2" - style={{ margin: '0px 15px 0px auto', paddingTop: '5px', color: '#8c8c8c' }} - > + variant='body2' + style={{ margin: '0px 15px 0px auto', paddingTop: '5px', color: '#8c8c8c' }} + > Last Saved : {getDate(schSave.details.save_time)} {/* Display last saved status for saved schematics */} </Typography> - : <></> - } + : <></>} <Button - size="small" + size='small' variant={shared !== true ? 'outlined' : 'contained'} - color="primary" + color='primary' className={schSave.isSaved === true && schSave.details.save_time !== undefined ? classes.button : classes.rightBlock} startIcon={<ShareIcon />} onClick={handleShare} @@ -247,44 +246,41 @@ function Header () { <Hidden xsDown>Share</Hidden> </Button> </> - : <></> - } + : <></>} {/* Share dialog box to get share url */} <Dialog open={openShare} onClose={handleShareClose} - aria-labelledby="share-dialog-title" - aria-describedby="share-dialog-description" + aria-labelledby='share-dialog-title' + aria-describedby='share-dialog-description' > - <DialogTitle id="share-dialog-title">{typography1}</DialogTitle> + <DialogTitle id='share-dialog-title'>{typography1}</DialogTitle> <DialogContent> - <DialogContentText id="share-dialog-description"> + <DialogContentText id='share-dialog-description'> <FormControlLabel - control={<Switch checked={shared} onChange={handleShareChange} name="shared" />} - label=": Sharing On" + control={<Switch checked={shared} onChange={handleShareChange} name='shared' />} + label=': Sharing On' /> </DialogContentText> - <DialogContentText id="share-dialog-description"> + <DialogContentText id='share-dialog-description'> {shared === true ? <input - ref={textAreaRef} - value={`${window.location.protocol}\\\\${window.location.host}/eda/#/editor?id=${schSave.details.save_id}`} - readOnly - /> - : <> Turn On sharing </> - } + ref={textAreaRef} + value={`${window.location.protocol}\\\\${window.location.host}/eda/#/editor?id=${schSave.details.save_id}`} + readOnly + /> + : <> Turn On sharing </>} </DialogContentText> </DialogContent> <DialogActions> {shared === true && document.queryCommandSupported('copy') - ? <Button onClick={copyToClipboard} color="primary" autoFocus> + ? <Button onClick={copyToClipboard} color='primary' autoFocus> Copy url </Button> - : <></> - } - <Button onClick={handleShareClose} color="primary" autoFocus> + : <></>} + <Button onClick={handleShareClose} color='primary' autoFocus> close </Button> </DialogActions> @@ -293,22 +289,22 @@ function Header () { {/* Display login option or user menu as per authenticated status */} { (!auth.isAuthenticated ? (<Button - size="small" + size='small' component={RouterLink} - to="/login" + to='/login' style={{ marginLeft: 'auto' }} - color="primary" - variant="outlined" - > + color='primary' + variant='outlined' + > Login </Button>) : (<> <IconButton - edge="start" - color="primary" - aria-controls="simple-menu" - aria-haspopup="true" + edge='start' + color='primary' + aria-controls='simple-menu' + aria-haspopup='true' onClick={handleClick} > <Avatar className={classes.purple}> @@ -316,7 +312,7 @@ function Header () { </Avatar> </IconButton> <Menu - id="simple-menu" + id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} @@ -327,7 +323,7 @@ function Header () { <MenuItem target='_blank' component={RouterLink} - to="/dashboard" + to='/dashboard' onClick={handleClose} > <ListItemText primary={auth.user.username} secondary={auth.user.email} /> @@ -335,7 +331,7 @@ function Header () { <MenuItem target='_blank' component={RouterLink} - to="/dashboard/profile" + to='/dashboard/profile' onClick={handleClose} > My Profile @@ -343,19 +339,20 @@ function Header () { <MenuItem target='_blank' component={RouterLink} - to="/dashboard/schematics" + to='/dashboard/schematics' onClick={handleClose} > {typography2} </MenuItem> <MenuItem onClick={() => { store.dispatch(logout(history)) - }}> + }} + > Logout </MenuItem> </Menu> </> - ) + ) ) } </Toolbar> diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js index 43f03a81..5c84a80b 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js @@ -1,6 +1,6 @@ -import 'mxgraph/javascript/src/css/common.css'; +import 'mxgraph/javascript/src/css/common.css' -import mxGraphFactory from 'mxgraph'; +import mxGraphFactory from 'mxgraph' import store from '../../../redux/store' import dot from '../../../static/dot.gif' import blockstyle from '../../../static/style.json' @@ -10,7 +10,7 @@ import ToolbarTools from './ToolbarTools.js' import KeyboardShorcuts from './KeyboardShorcuts.js' import { SideBar } from './SideBar.js' -var graph +let graph const { mxGraph, @@ -35,10 +35,10 @@ const { mxCellRenderer, mxConstraintHandler, mxImage -} = new mxGraphFactory(); +} = new mxGraphFactory() -function configureStylesheet(graph) { - graph.stylesheet.styles = blockstyle; +function configureStylesheet (graph) { + graph.stylesheet.styles = blockstyle } export default function LoadGrid (container, sidebar, outline) { @@ -76,8 +76,8 @@ export default function LoadGrid (container, sidebar, outline) { mxConnectionHandler.prototype.waypointsEnabled = true mxGraph.prototype.resetEdgesOnConnect = false mxConstants.SHADOWCOLOR = '#C0C0C0' - var joinNodeSize = 7 - var strokeWidth = 2 + const joinNodeSize = 7 + const strokeWidth = 2 // Replaces the port image mxConstraintHandler.prototype.pointImage = new mxImage(dot, 10, 10) @@ -87,13 +87,13 @@ export default function LoadGrid (container, sidebar, outline) { // Creates the outline (navigator, overview) for moving // around the graph in the top, right corner of the window. - var outln = new mxOutline(graph, outline) + const outln = new mxOutline(graph, outline) // To show the images in the outline, uncomment the following code outln.outline.labelsVisible = true outln.outline.setHtmlLabels(true) graph.addListener(mxEvent.DOUBLE_CLICK, function (sender, evt) { - var cell = evt.getProperty('cell') + const cell = evt.getProperty('cell') if (cell !== undefined && cell.CellType === 'Component') { store.dispatch(getCompProperties(cell)) } else { @@ -124,7 +124,7 @@ export default function LoadGrid (container, sidebar, outline) { // This can be extended as shown in portrefs.html example to allow for per-port // incoming/outgoing direction. graph.getAllConnectionConstraints = function (terminal) { - var geo = (terminal != null) ? this.getCellGeometry(terminal.cell) : null + const geo = (terminal != null) ? this.getCellGeometry(terminal.cell) : null if ((geo != null ? !geo.relative : false) && this.getModel().isVertex(terminal.cell) && this.getModel().getChildCount(terminal.cell) === 0) { return [new mxConnectionConstraint(new mxPoint(0, 0.5), false), new mxConnectionConstraint(new mxPoint(1, 0.5), false)] @@ -138,7 +138,7 @@ export default function LoadGrid (container, sidebar, outline) { if (this.graph.getModel().isEdge(cell)) { return true } else { - var geo = (cell != null) ? this.graph.getCellGeometry(cell) : null + const geo = (cell != null) ? this.graph.getCellGeometry(cell) : null return (geo != null) ? geo.relative : false } @@ -150,18 +150,18 @@ export default function LoadGrid (container, sidebar, outline) { // Adds a special tooltip for edges graph.setTooltips(true) - var getTooltipForCell = graph.getTooltipForCell + const getTooltipForCell = graph.getTooltipForCell graph.getTooltipForCell = function (cell) { - var tip = '' + let tip = '' if (cell != null) { - var src = this.getModel().getTerminal(cell, true) + const src = this.getModel().getTerminal(cell, true) if (src != null) { tip += this.getTooltipForCell(src) + ' ' } - var parent = this.getModel().getParent(cell) + const parent = this.getModel().getParent(cell) if (this.getModel().isVertex(parent)) { tip += this.getTooltipForCell(parent) + '.' @@ -169,7 +169,7 @@ export default function LoadGrid (container, sidebar, outline) { tip += getTooltipForCell.apply(this, arguments) - var trg = this.getModel().getTerminal(cell, false) + const trg = this.getModel().getTerminal(cell, false) if (trg != null) { tip += ' ' + this.getTooltipForCell(trg) @@ -180,13 +180,13 @@ export default function LoadGrid (container, sidebar, outline) { } // Switch for black background and bright styles - var invert = false + const invert = false if (invert) { container.style.backgroundColor = 'black' // White in-place editor text color - var mxCellEditorStartEditing = mxCellEditor.prototype.startEditing + const mxCellEditorStartEditing = mxCellEditor.prototype.startEditing mxCellEditor.prototype.startEditing = function (cell, trigger) { mxCellEditorStartEditing.apply(this, arguments) @@ -198,12 +198,12 @@ export default function LoadGrid (container, sidebar, outline) { mxGraphHandler.prototype.previewColor = 'white' } - var labelBackground = (invert) ? '#000000' : '#FFFFFF' - var fontColor = (invert) ? '#FFFFFF' : '#000000' - var strokeColor = (invert) ? '#C0C0C0' : '#000000' + const labelBackground = (invert) ? '#000000' : '#FFFFFF' + const fontColor = (invert) ? '#FFFFFF' : '#000000' + const strokeColor = (invert) ? '#C0C0C0' : '#000000' // var fillColor = (invert) ? 'none' : '#FFFFFF' - var style = graph.getStylesheet().getDefaultEdgeStyle() + let style = graph.getStylesheet().getDefaultEdgeStyle() delete style.endArrow style.strokeColor = strokeColor style.labelBackgroundColor = labelBackground @@ -235,15 +235,15 @@ export default function LoadGrid (container, sidebar, outline) { SideBar(graph, sidebar) KeyboardShorcuts(graph) - //NetlistInfoFunct(graph) + // NetlistInfoFunct(graph) ToolbarTools(graph) store.subscribe(() => { - var id = store.getState().componentPropertiesReducer.id - var parameter_values = store.getState().componentPropertiesReducer.parameter_values - var displayProperties = store.getState().componentPropertiesReducer.displayProperties - var cellList = graph.getModel().cells - var c = cellList[id] + const id = store.getState().componentPropertiesReducer.id + const parameter_values = store.getState().componentPropertiesReducer.parameter_values + const displayProperties = store.getState().componentPropertiesReducer.displayProperties + const cellList = graph.getModel().cells + const c = cellList[id] if (c !== undefined) { c.parameter_values = parameter_values c.displayProperties = displayProperties @@ -251,27 +251,27 @@ export default function LoadGrid (container, sidebar, outline) { }) // Wire-mode - var checkbox = { + const checkbox = { checked: false } - //document.body.appendChild(checkbox) - //mxUtils.write(document.body, 'Wire Mode') + // document.body.appendChild(checkbox) + // mxUtils.write(document.body, 'Wire Mode') // Starts connections on the background in wire-mode - var connectionHandlerIsStartEvent = graph.connectionHandler.isStartEvent + const connectionHandlerIsStartEvent = graph.connectionHandler.isStartEvent graph.connectionHandler.isStartEvent = function (me) { return checkbox.checked || connectionHandlerIsStartEvent.apply(this, arguments) } // Avoids any connections for gestures within tolerance except when in wire-mode // or when over a port - var connectionHandlerMouseUp = graph.connectionHandler.mouseUp + const connectionHandlerMouseUp = graph.connectionHandler.mouseUp graph.connectionHandler.mouseUp = function (sender, me) { if (this.first != null && this.previous != null) { - var point = mxUtils.convertPoint(this.graph.container, me.getX(), me.getY()) - var dx = Math.abs(point.x - this.first.x) - var dy = Math.abs(point.y - this.first.y) + const point = mxUtils.convertPoint(this.graph.container, me.getX(), me.getY()) + const dx = Math.abs(point.x - this.first.x) + const dy = Math.abs(point.y - this.first.y) if (dx < this.graph.tolerance && dy < this.graph.tolerance) { // Selects edges in non-wire mode for single clicks, but starts @@ -310,17 +310,17 @@ export default function LoadGrid (container, sidebar, outline) { // Computes the position of edge to edge connection points. mxGraphView.prototype.updateFixedTerminalPoint = function (edge, terminal, source, constraint) { - var pt = null + let pt = null if (constraint != null) { pt = this.graph.getConnectionPoint(terminal, constraint) } if (pt == null) { - var s = this.scale - var tr = this.translate - var orig = edge.origin - var geo = this.graph.getCellGeometry(edge.cell) + const s = this.scale + const tr = this.translate + const orig = edge.origin + const geo = this.graph.getCellGeometry(edge.cell) pt = geo.getTerminalPoint(source) // Computes edge-to-edge connection point @@ -330,16 +330,16 @@ export default function LoadGrid (container, sidebar, outline) { // Finds nearest segment on edge and computes intersection if (terminal != null && terminal.absolutePoints != null) { - var seg = mxUtils.findNearestSegment(terminal, pt.x, pt.y) + const seg = mxUtils.findNearestSegment(terminal, pt.x, pt.y) // Finds orientation of the segment - var p0 = terminal.absolutePoints[seg] - var pe = terminal.absolutePoints[seg + 1] - var horizontal = (p0.x - pe.x === 0) + const p0 = terminal.absolutePoints[seg] + const pe = terminal.absolutePoints[seg + 1] + const horizontal = (p0.x - pe.x === 0) // Stores the segment in the edge state - var key = (source) ? 'sourceConstraint' : 'targetConstraint' - var value = (horizontal) ? 'horizontal' : 'vertical' + const key = (source) ? 'sourceConstraint' : 'targetConstraint' + const value = (horizontal) ? 'horizontal' : 'vertical' edge.style[key] = value // Keeps the coordinate within the segment bounds @@ -365,15 +365,15 @@ export default function LoadGrid (container, sidebar, outline) { } // Sets source terminal point for edge-to-edge connections. mxConnectionHandler.prototype.createEdgeState = function (me) { - var edge = this.graph.createEdge() + const edge = this.graph.createEdge() if (this.sourceConstraint != null && this.previous != null) { edge.style = mxConstants.STYLE_EXIT_X + '=' + this.sourceConstraint.point.x + ';' + mxConstants.STYLE_EXIT_Y + '=' + this.sourceConstraint.point.y + ';' } else if (this.graph.model.isEdge(me.getCell())) { - var scale = this.graph.view.scale - var tr = this.graph.view.translate - var pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x, + const scale = this.graph.view.scale + const tr = this.graph.view.translate + const pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x, this.graph.snap(me.getGraphY() / scale) - tr.y) edge.geometry.setTerminalPoint(pt, true) } @@ -388,33 +388,32 @@ export default function LoadGrid (container, sidebar, outline) { // Updates target terminal point for edge-to-edge connections. try { - var mxConnectionHandlerUpdateCurrentState = mxConnectionHandler.prototype.updateCurrentState - mxConnectionHandler.prototype.updateCurrentState = function (me) { - try { - mxConnectionHandlerUpdateCurrentState.apply(this, arguments) - } - catch(err) { - } - if (this.edgeState != null) { - this.edgeState.cell.geometry.setTerminalPoint(null, false) + const mxConnectionHandlerUpdateCurrentState = mxConnectionHandler.prototype.updateCurrentState + mxConnectionHandler.prototype.updateCurrentState = function (me) { + try { + mxConnectionHandlerUpdateCurrentState.apply(this, arguments) + } catch (err) { + } + if (this.edgeState != null) { + this.edgeState.cell.geometry.setTerminalPoint(null, false) - if (this.shape != null && this.currentState != null && + if (this.shape != null && this.currentState != null && this.currentState.view.graph.model.isEdge(this.currentState.cell)) { - var scale = this.graph.view.scale - var tr = this.graph.view.translate - var pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x, - this.graph.snap(me.getGraphY() / scale) - tr.y) - this.edgeState.cell.geometry.setTerminalPoint(pt, false) + const scale = this.graph.view.scale + const tr = this.graph.view.translate + const pt = new mxPoint(this.graph.snap(me.getGraphX() / scale) - tr.x, + this.graph.snap(me.getGraphY() / scale) - tr.y) + this.edgeState.cell.geometry.setTerminalPoint(pt, false) + } } } - } } - catch(e){ + } catch (e) { console.log(e) } // Updates the terminal and control points in the cloned preview. mxEdgeSegmentHandler.prototype.clonePreviewState = function (point, terminal) { - var clone = mxEdgeHandler.prototype.clonePreviewState.apply(this, arguments) + const clone = mxEdgeHandler.prototype.clonePreviewState.apply(this, arguments) clone.cell = clone.cell.clone() if (this.isSource || this.isTarget) { @@ -432,27 +431,27 @@ export default function LoadGrid (container, sidebar, outline) { return clone } - var mxEdgeHandlerConnect = mxEdgeHandler.prototype.connect + const mxEdgeHandlerConnect = mxEdgeHandler.prototype.connect mxEdgeHandler.prototype.connect = function (edge, terminal, isSource, isClone, me) { - var result = null - var model = this.graph.getModel() + let result = null + const model = this.graph.getModel() // var parent = model.getParent(edge) model.beginUpdate() try { result = mxEdgeHandlerConnect.apply(this, arguments) - var geo = model.getGeometry(result) + let geo = model.getGeometry(result) if (geo != null) { geo = geo.clone() - var pt = null + let pt = null if (model.isEdge(terminal)) { pt = this.abspoints[(this.isSource) ? 0 : this.abspoints.length - 1] pt.x = pt.x / this.graph.view.scale - this.graph.view.translate.x pt.y = pt.y / this.graph.view.scale - this.graph.view.translate.y - var pstate = this.graph.getView().getState( + const pstate = this.graph.getView().getState( this.graph.getModel().getParent(edge)) if (pstate != null) { @@ -474,9 +473,9 @@ export default function LoadGrid (container, sidebar, outline) { return result } - var mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker + const mxConnectionHandlerCreateMarker = mxConnectionHandler.prototype.createMarker mxConnectionHandler.prototype.createMarker = function () { - var marker = mxConnectionHandlerCreateMarker.apply(this, arguments) + const marker = mxConnectionHandlerCreateMarker.apply(this, arguments) // Uses complete area of cell for new connections (no hotspot) marker.intersects = function (state, evt) { @@ -518,9 +517,9 @@ export default function LoadGrid (container, sidebar, outline) { return marker } - var mxEdgeHandlerCreateMarker = mxEdgeHandler.prototype.createMarker + const mxEdgeHandlerCreateMarker = mxEdgeHandler.prototype.createMarker mxEdgeHandler.prototype.createMarker = function () { - var marker = mxEdgeHandlerCreateMarker.apply(this, arguments) + const marker = mxEdgeHandlerCreateMarker.apply(this, arguments) // Adds in-place highlighting when reconnecting existing edges marker.highlight.highlight = this.graph.connectionHandler.marker.highlight.highlight @@ -528,9 +527,9 @@ export default function LoadGrid (container, sidebar, outline) { return marker } - var mxGraphGetCellStyle = mxGraph.prototype.getCellStyle + const mxGraphGetCellStyle = mxGraph.prototype.getCellStyle mxGraph.prototype.getCellStyle = function (cell) { - var style = mxGraphGetCellStyle.apply(this, arguments) + let style = mxGraphGetCellStyle.apply(this, arguments) if (style != null && this.model.isEdge(cell)) { style = mxUtils.clone(style) @@ -552,7 +551,7 @@ export default function LoadGrid (container, sidebar, outline) { ResistorShape.prototype.constructor = ResistorShape ResistorShape.prototype.redrawPath = function (path, x, y, w, h, isForeground) { - var dx = w / 16 + const dx = w / 16 if (isForeground) { path.moveTo(0, h / 2) @@ -574,9 +573,9 @@ export default function LoadGrid (container, sidebar, outline) { mxEdgeStyle.WireConnector = function (state, source, target, hints, result) { // Creates array of all way- and terminalpoints - var pts = state.absolutePoints - var horizontal = true - var hint = null + const pts = state.absolutePoints + let horizontal = true + let hint = null // Gets the initial connection from the source terminal or edge if (source != null && state.view.graph.model.isEdge(source.cell)) { @@ -585,7 +584,7 @@ export default function LoadGrid (container, sidebar, outline) { horizontal = source.style.portConstraint !== 'vertical' // Checks the direction of the shape and rotates - var direction = source.style[mxConstants.STYLE_DIRECTION] + const direction = source.style[mxConstants.STYLE_DIRECTION] if (direction === 'north' || direction === 'south') { horizontal = !horizontal @@ -594,7 +593,7 @@ export default function LoadGrid (container, sidebar, outline) { // Adds the first point // TODO: Should move along connected segment - var pt = pts[0] + let pt = pts[0] if (pt == null && source != null) { pt = new mxPoint(state.view.getRoutingCenterX(source), state.view.getRoutingCenterY(source)) @@ -602,7 +601,7 @@ export default function LoadGrid (container, sidebar, outline) { pt = pt.clone() } - var first = pt + const first = pt // Adds the waypoints if (hints != null && hints.length > 0) { @@ -622,7 +621,7 @@ export default function LoadGrid (container, sidebar, outline) { //horizontal = !horizontal; } */ - for (var i = 0; i < hints.length; i++) { + for (let i = 0; i < hints.length; i++) { horizontal = !horizontal hint = state.view.transformControlPoint(state, hints[i]) @@ -660,11 +659,11 @@ export default function LoadGrid (container, sidebar, outline) { mxStyleRegistry.putValue('wireEdgeStyle', mxEdgeStyle.WireConnector) // This connector needs an mxEdgeSegmentHandler - var mxGraphCreateHandler = mxGraph.prototype.createHandler + const mxGraphCreateHandler = mxGraph.prototype.createHandler mxGraph.prototype.createHandler = function (state) { if (state != null) { if (this.model.isEdge(state.cell)) { - var style = this.view.getEdgeStyle(state) + const style = this.view.getEdgeStyle(state) if (style === mxEdgeStyle.WireConnector) { return new mxEdgeSegmentHandler(state) diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShorcuts.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShorcuts.js index a6dbf0dc..4d650ab5 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShorcuts.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShorcuts.js @@ -1,16 +1,16 @@ -import 'mxgraph/javascript/src/css/common.css'; +import 'mxgraph/javascript/src/css/common.css' -import mxGraphFactory from 'mxgraph'; +import mxGraphFactory from 'mxgraph' import { Undo, Redo, ZoomIn, ZoomOut, ZoomAct } from './ToolbarTools' const { mxKeyHandler, mxEvent, mxClient -} = new mxGraphFactory(); +} = new mxGraphFactory() export default function KeyboardShortcuts (graph) { - var keyHandler = new mxKeyHandler(graph) + const keyHandler = new mxKeyHandler(graph) keyHandler.getFunction = function (evt) { if (evt != null) { diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js index 626f8e92..959b3dce 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js @@ -1,6 +1,6 @@ -import 'mxgraph/javascript/src/css/common.css'; +import 'mxgraph/javascript/src/css/common.css' -import mxGraphFactory from 'mxgraph'; +import mxGraphFactory from 'mxgraph' import { default_scale, getSvgMetadata } from './SvgParser.js' const { @@ -8,31 +8,31 @@ const { mxUtils, mxEvent, mxDragSource -} = new mxGraphFactory(); +} = new mxGraphFactory() -var graph +let graph export function SideBar (getGraph) { graph = getGraph } export function AddComponent (component, imgref) { - var img = imgref + const img = imgref - var graphF = function (evt) { - var x = mxEvent.getClientX(evt) - var y = mxEvent.getClientY(evt) - var elt = document.elementFromPoint(x, y) + const graphF = function (evt) { + const x = mxEvent.getClientX(evt) + const y = mxEvent.getClientY(evt) + const elt = document.elementFromPoint(x, y) if (mxUtils.isAncestorNode(graph.container, elt)) { return graph } return null } - var funct = function (graph, evt, target, x, y) { - var parent = graph.getDefaultParent() - var model = graph.getModel() + const funct = function (graph, evt, target, x, y) { + const parent = graph.getDefaultParent() + const model = graph.getModel() - var v1 = null + const v1 = null model.beginUpdate() try { @@ -67,7 +67,7 @@ export function AddComponent (component, imgref) { } // Creates the element that is being for the actual preview. - var dragElt = document.createElement('div') + const dragElt = document.createElement('div') dragElt.style.border = 'dashed black 1px' dragElt.style.width = (component.block_width / default_scale) + 'px' dragElt.style.height = (component.block_height / default_scale) + 'px' @@ -77,7 +77,7 @@ export function AddComponent (component, imgref) { // the use of the defaults. Note that dx and dy are only used for the // drag icon but not for the preview. - var ds = mxUtils.makeDraggable( + const ds = mxUtils.makeDraggable( img, graphF, funct, diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js index c0134673..537b5076 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js @@ -1,22 +1,17 @@ -import 'mxgraph/javascript/src/css/common.css'; +import 'mxgraph/javascript/src/css/common.css' -import mxGraphFactory from 'mxgraph'; +import mxGraphFactory from 'mxgraph' const { - mxPoint -} = new mxGraphFactory(); + mxPoint +} = new mxGraphFactory() // we need to divide the svg width and height by the same number in order to maintain the aspect ratio. -export const default_scale = parseFloat(process.env.REACT_APP_BLOCK_SCALE); -export const port_size = parseFloat(process.env.REACT_APP_PORT_SIZE); +export const default_scale = parseFloat(process.env.REACT_APP_BLOCK_SCALE) +export const port_size = parseFloat(process.env.REACT_APP_PORT_SIZE) -function getParameter(i) { - if (i < 10) - return 'p00' + i.toString(); - else if (i < 100) - return 'p0' + i.toString(); - else - return 'p' + i.toString(); +function getParameter (i) { + if (i < 10) { return 'p00' + i.toString() } else if (i < 100) { return 'p0' + i.toString() } else { return 'p' + i.toString() } } export function getSvgMetadata (graph, parent, evt, target, x, y, component) { @@ -24,61 +19,58 @@ export function getSvgMetadata (graph, parent, evt, target, x, y, component) { // initialize information from the svg meta // plots pinnumbers and component labels. - const allowed_part = [0, 1]; - const allowed_dmg = [0, 1]; + const allowed_part = [0, 1] + const allowed_dmg = [0, 1] - const block_name = component.block_name; + const block_name = component.block_name const pins = [] // make the component images smaller by scaling - let width = component.block_width / default_scale - let height = component.block_height / default_scale + const width = component.block_width / default_scale + const height = component.block_height / default_scale const v1 = graph.insertVertex(parent, null, null, x, y, width, height, block_name) v1.CellType = 'Component' v1.block_id = component.id - v1.blockprefix = component.blockprefix.name; + v1.blockprefix = component.blockprefix.name v1.displayProperties = { blockport_set: component.blockport_set, - display_parameter: component.initial_display_parameter, + display_parameter: component.initial_display_parameter } - let parameter_values = {}; + const parameter_values = {} for (let i = 0; i < 40; i++) { - let p = getParameter(i) + '_value'; - let pinitial = p + '_initial'; - parameter_values[p] = component[pinitial]; + const p = getParameter(i) + '_value' + const pinitial = p + '_initial' + parameter_values[p] = component[pinitial] } - v1.parameter_values = parameter_values; + v1.parameter_values = parameter_values v1.setConnectable(false) - let blockports = component.blockport_set; - let ports = blockports.length; + const blockports = component.blockport_set + const ports = blockports.length for (let i = 0; i < ports; i++) { - let blockport = blockports[i]; - if (!allowed_part.includes(blockport.port_part)) - continue; - if (!allowed_dmg.includes(blockport.port_dmg)) - continue; - if (blockport.port_name === 'NC') - continue; + const blockport = blockports[i] + if (!allowed_part.includes(blockport.port_part)) { continue } + if (!allowed_dmg.includes(blockport.port_dmg)) { continue } + if (blockport.port_name === 'NC') { continue } - let x_pos = 1 / 2 + blockport.port_x / default_scale / width; - let y_pos = 1 / 2 - blockport.port_y / default_scale / height; + const x_pos = 1 / 2 + blockport.port_x / default_scale / width + const y_pos = 1 / 2 - blockport.port_y / default_scale / height - let port_orientation = blockport.port_orientation; - let point = null; - switch (port_orientation) { - case 'ExplicitInputPort': case 'ImplicitInputPort': point = new mxPoint(-port_size, -port_size / 2); break; - case 'ControlPort': point = new mxPoint(-port_size / 2, -port_size); break; - case 'ExplicitOutputPort': case 'ImplicitOutputPort': point = new mxPoint(0, -port_size / 2); break; - case 'CommandPort': point = new mxPoint(-port_size / 2, 0); break; - default: point = new mxPoint(-port_size / 2, -port_size / 2); break; - } + const port_orientation = blockport.port_orientation + let point = null + switch (port_orientation) { + case 'ExplicitInputPort': case 'ImplicitInputPort': point = new mxPoint(-port_size, -port_size / 2); break + case 'ControlPort': point = new mxPoint(-port_size / 2, -port_size); break + case 'ExplicitOutputPort': case 'ImplicitOutputPort': point = new mxPoint(0, -port_size / 2); break + case 'CommandPort': point = new mxPoint(-port_size / 2, 0); break + default: point = new mxPoint(-port_size / 2, -port_size / 2); break + } - var vp = graph.insertVertex(v1, null, null, x_pos, y_pos, port_size, port_size, port_orientation) - vp.geometry.relative = true; - vp.geometry.offset = point; - vp.CellType = 'Pin' - pins[i] = vp; + const vp = graph.insertVertex(v1, null, null, x_pos, y_pos, port_size, port_size, port_orientation) + vp.geometry.relative = true + vp.geometry.offset = point + vp.CellType = 'Pin' + pins[i] = vp } } diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js index 02a1ec35..05e381d6 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js @@ -1,12 +1,12 @@ -import 'mxgraph/javascript/src/css/common.css'; +import 'mxgraph/javascript/src/css/common.css' -import mxGraphFactory from 'mxgraph'; -import { port_size } from './SvgParser'; +import mxGraphFactory from 'mxgraph' +import { port_size } from './SvgParser' import store from '../../../redux/store' import { setModel, setNetlist } from '../../../redux/actions/index' -var graph -var undoManager +let graph +let undoManager const { mxPrintPreview, @@ -17,13 +17,13 @@ const { mxEvent, mxCodec, mxPoint -} = new mxGraphFactory(); +} = new mxGraphFactory() export default function ToolbarTools (grid, unredo) { graph = grid undoManager = new mxUndoManager() - var listener = function (sender, evt) { + const listener = function (sender, evt) { undoManager.undoableEditHappened(evt.getProperty('edit')) } graph.getModel().addListener(mxEvent.UNDO, listener) @@ -33,13 +33,13 @@ export default function ToolbarTools (grid, unredo) { // SAVE export function Save (description = '') { XMLWireConnections() - var enc = new mxCodec(mxUtils.createXmlDocument()) - var model = graph.getModel(); - var firstCell = model.cells[0]; - firstCell.appname = process.env.REACT_APP_NAME; - firstCell.description = description; - var node = enc.encode(model); - var value = mxUtils.getXml(node) + const enc = new mxCodec(mxUtils.createXmlDocument()) + const model = graph.getModel() + const firstCell = model.cells[0] + firstCell.appname = process.env.REACT_APP_NAME + firstCell.description = description + const node = enc.encode(model) + const value = mxUtils.getXml(node) return value } @@ -80,10 +80,10 @@ export function ClearGrid () { // ROTATE COMPONENT export function Rotate () { - var view = graph.getView() - var cell = graph.getSelectionCell() - var state = view.getState(cell, true) - var vHandler = graph.createVertexHandler(state) + const view = graph.getView() + const cell = graph.getSelectionCell() + const state = view.getState(cell, true) + const vHandler = graph.createVertexHandler(state) if (cell != null) { vHandler.rotateCell(cell, 90, cell.getParent()) } @@ -93,34 +93,34 @@ export function Rotate () { // PRINT PREVIEW OF SCHEMATIC export function PrintPreview () { // Matches actual printer paper size and avoids blank pages - var scale = 0.8 - var headerSize = 50 - var footerSize = 50 + const scale = 0.8 + const headerSize = 50 + const footerSize = 50 // Applies scale to page - var pageFormat = { x: 0, y: 0, width: 1169, height: 827 } - var pf = mxRectangle.fromRectangle(pageFormat || mxConstants.PAGE_FORMAT_A4_LANDSCAPE) + const pageFormat = { x: 0, y: 0, width: 1169, height: 827 } + const pf = mxRectangle.fromRectangle(pageFormat || mxConstants.PAGE_FORMAT_A4_LANDSCAPE) pf.width = Math.round(pf.width * scale * graph.pageScale) pf.height = Math.round(pf.height * scale * graph.pageScale) // Finds top left corner of top left page - var bounds = mxRectangle.fromRectangle(graph.getGraphBounds()) + const bounds = mxRectangle.fromRectangle(graph.getGraphBounds()) bounds.x -= graph.view.translate.x * graph.view.scale bounds.y -= graph.view.translate.y * graph.view.scale - var x0 = Math.floor(bounds.x / pf.width) * pf.width - var y0 = Math.floor(bounds.y / pf.height) * pf.height + const x0 = Math.floor(bounds.x / pf.width) * pf.width + const y0 = Math.floor(bounds.y / pf.height) * pf.height - var preview = new mxPrintPreview(graph, scale, pf, 0, -x0, -y0) + const preview = new mxPrintPreview(graph, scale, pf, 0, -x0, -y0) preview.marginTop = headerSize * scale * graph.pageScale preview.marginBottom = footerSize * scale * graph.pageScale preview.autoOrigin = false - var oldRenderPage = preview.renderPage + const oldRenderPage = preview.renderPage preview.renderPage = function (w, h, x, y, content, pageNumber) { - var div = oldRenderPage.apply(this, arguments) + const div = oldRenderPage.apply(this, arguments) - var header = document.createElement('div') + const header = document.createElement('div') header.style.position = 'absolute' header.style.boxSizing = 'border-box' header.style.fontFamily = 'Arial,Helvetica' @@ -135,8 +135,8 @@ export function PrintPreview () { // Vertical centering for text in header/footer header.style.lineHeight = (this.marginTop - 10) + 'px' - var footer = header.cloneNode(true) - var title = store.getState().saveSchematicReducer.title + const footer = header.cloneNode(true) + const title = store.getState().saveSchematicReducer.title mxUtils.write(header, title + ' - ' + process.env.REACT_APP_NAME + ' on Cloud') header.style.borderBottom = '1px solid blue' header.style.top = '0px' @@ -156,22 +156,22 @@ export function PrintPreview () { // ERC CHECK FOR SCHEMATIC export function ErcCheck () { - const NoAddition = 'No ' + process.env.REACT_APP_BLOCK_NAME + ' added'; - var list = graph.getModel().cells // mapping the grid - var vertexCount = 0 - var errorCount = 0 - var PinNC = 0 - var ground = 0 - for (var property in list) { - var cell = list[property] + const NoAddition = 'No ' + process.env.REACT_APP_BLOCK_NAME + ' added' + const list = graph.getModel().cells // mapping the grid + let vertexCount = 0 + let errorCount = 0 + let PinNC = 0 + const ground = 0 + for (const property in list) { + const cell = list[property] if (cell.CellType === 'Component') { - for (var child in cell.children) { - var childVertex = cell.children[child] + for (const child in cell.children) { + const childVertex = cell.children[child] if (childVertex.CellType === 'Pin' && childVertex.edges === null) { // Checking if connections exist from a given pin ++PinNC ++errorCount } else { - for (var w in childVertex.edges) { + for (const w in childVertex.edges) { if (childVertex.edges[w].source === null || childVertex.edges[w].target === null) { ++PinNC } @@ -196,18 +196,18 @@ export function ErcCheck () { } } function ErcCheckNets () { - const NoAddition = 'No ' + process.env.REACT_APP_BLOCK_NAME + ' added'; - var list = graph.getModel().cells // mapping the grid - var vertexCount = 0 - var errorCount = 0 - var PinNC = 0 - var ground = 0 - for (var property in list) { - var cell = list[property] + const NoAddition = 'No ' + process.env.REACT_APP_BLOCK_NAME + ' added' + const list = graph.getModel().cells // mapping the grid + let vertexCount = 0 + let errorCount = 0 + let PinNC = 0 + const ground = 0 + for (const property in list) { + const cell = list[property] if (cell.CellType === 'Component') { - for (var child in cell.children) { + for (const child in cell.children) { console.log(cell.children[child]) - var childVertex = cell.children[child] + const childVertex = cell.children[child] if (childVertex.CellType === 'Pin' && childVertex.edges === null) { graph.getSelectionCell(childVertex) console.log('This pin is not connected') @@ -238,37 +238,37 @@ function ErcCheckNets () { // GENERATE NETLIST export function GenerateNetList () { - var c = 1 - var spiceModels = '' - var netlist = { + let c = 1 + const spiceModels = '' + const netlist = { componentlist: [], nodelist: [] } - var erc = ErcCheckNets() - var k = '' + const erc = ErcCheckNets() + let k = '' if (erc === false) { alert('ERC check failed') } else { - var list = annotate(graph) - for (var property in list) { + const list = annotate(graph) + for (const property in list) { if (list[property].CellType === 'Component' && list[property].blockprefix !== 'PWR') { - var compobj = { + const compobj = { name: '', node1: '', node2: '', magnitude: '' } - var component = list[property] - k = k + component.blockprefix + c.toString() - component.value = component.blockprefix + c.toString() - ++c + const component = list[property] + k = k + component.blockprefix + c.toString() + component.value = component.blockprefix + c.toString() + ++c if (component.children !== null) { - for (var child in component.children) { - var pin = component.children[child] + for (const child in component.children) { + const pin = component.children[child] if (pin.vertex === true) { if (pin.edges !== null && pin.edges.length !== 0) { - for (var wire in pin.edges) { + for (const wire in pin.edges) { if (pin.edges[wire].source !== null && pin.edges[wire].target !== null) { if (pin.edges[wire].source.edge === true) { console.log('wire') @@ -324,10 +324,10 @@ export function GenerateNetList () { } finally { graph.getModel().endUpdate() } - var a = new Set(netlist.nodelist) + const a = new Set(netlist.nodelist) console.log(netlist.nodelist) console.log(a) - var netobj = { + const netobj = { models: spiceModels, main: k } @@ -339,91 +339,91 @@ function annotate (graph) { export function renderXML () { graph.view.refresh() - var xml = 'null' - var xmlDoc = mxUtils.parseXml(xml) + const xml = 'null' + const xmlDoc = mxUtils.parseXml(xml) parseXmlToGraph(xmlDoc, graph) } function parseXmlToGraph (xmlDoc, graph) { const cells = xmlDoc.documentElement.children[0].children const parent = graph.getDefaultParent() - var v1 + let v1 graph.getModel().beginUpdate() try { for (let i = 0; i < cells.length; i++) { - const cell = cells[i]; - const cellAttrs = cell.attributes; - const cellChildren = cell.children; + const cell = cells[i] + const cellAttrs = cell.attributes + const cellChildren = cell.children if (cellAttrs.CellType.value === 'Component') { // is component const style = cellAttrs.style.value const vertexId = Number(cellAttrs.id.value) const geom = cellChildren[0].attributes - const xPos = (geom.x !== undefined) ? Number(geom.x.value) : 0; - const yPos = (geom.y !== undefined) ? Number(geom.y.value) : 0; + const xPos = (geom.x !== undefined) ? Number(geom.x.value) : 0 + const yPos = (geom.y !== undefined) ? Number(geom.y.value) : 0 const height = Number(geom.height.value) const width = Number(geom.width.value) v1 = graph.insertVertex(parent, vertexId, null, xPos, yPos, width, height, style) - v1.connectable = 0; + v1.connectable = 0 v1.CellType = 'Component' v1.block_id = Number(cellAttrs.block_id.value) - v1.blockprefix = cellAttrs.blockprefix.value; - var blockport_set = []; - var cellChildrenBlockport_set = cellChildren[1].children[0]; + v1.blockprefix = cellAttrs.blockprefix.value + const blockport_set = [] + const cellChildrenBlockport_set = cellChildren[1].children[0] if (cellChildrenBlockport_set !== undefined) { - for (var b of cellChildrenBlockport_set.children) { - let bc = {}; + for (const b of cellChildrenBlockport_set.children) { + const bc = {} for (let i = 0, n = b.attributes.length; i < n; i++) { - let key = b.attributes[i].nodeName; - let value = b.attributes[i].nodeValue; - bc[key] = value; + const key = b.attributes[i].nodeName + const value = b.attributes[i].nodeValue + bc[key] = value } - blockport_set.push(bc); + blockport_set.push(bc) } } v1.displayProperties = { blockport_set: blockport_set, - display_parameter: cellChildren[1].attributes.display_parameter.value, + display_parameter: cellChildren[1].attributes.display_parameter.value } - var parameter_values = {}; - var cellChildrenParameter_values = cellChildren[2].attributes.parameter_values; + let parameter_values = {} + const cellChildrenParameter_values = cellChildren[2].attributes.parameter_values if (cellChildrenParameter_values !== undefined) { - parameter_values = cellChildrenParameter_values.value; + parameter_values = cellChildrenParameter_values.value } - v1.parameter_values = parameter_values; + v1.parameter_values = parameter_values } else if (cellAttrs.CellType.value === 'Pin') { const style = cellAttrs.style.value const vertexId = Number(cellAttrs.id.value) const geom = cellChildren[0].attributes - const xPos = (geom.x !== undefined) ? Number(geom.x.value) : 0; - const yPos = (geom.y !== undefined) ? Number(geom.y.value) : 0; - let point = null; + const xPos = (geom.x !== undefined) ? Number(geom.x.value) : 0 + const yPos = (geom.y !== undefined) ? Number(geom.y.value) : 0 + let point = null switch (style) { - case 'ExplicitInputPort': case 'ImplicitInputPort': point = new mxPoint(-port_size, -port_size / 2); break; - case 'ControlPort': point = new mxPoint(-port_size / 2, -port_size); break; - case 'ExplicitOutputPort': case 'ImplicitOutputPort': point = new mxPoint(0, -port_size / 2); break; - case 'CommandPort': point = new mxPoint(-port_size / 2, 0); break; - default: point = new mxPoint(-port_size / 2, -port_size / 2); break; + case 'ExplicitInputPort': case 'ImplicitInputPort': point = new mxPoint(-port_size, -port_size / 2); break + case 'ControlPort': point = new mxPoint(-port_size / 2, -port_size); break + case 'ExplicitOutputPort': case 'ImplicitOutputPort': point = new mxPoint(0, -port_size / 2); break + case 'CommandPort': point = new mxPoint(-port_size / 2, 0); break + default: point = new mxPoint(-port_size / 2, -port_size / 2); break } - var vp = graph.insertVertex(v1, vertexId, null, xPos, yPos, port_size, port_size, style) - vp.geometry.relative = true; - vp.geometry.offset = point; + const vp = graph.insertVertex(v1, vertexId, null, xPos, yPos, port_size, port_size, style) + vp.geometry.relative = true + vp.geometry.offset = point vp.CellType = 'Pin' } else if (cellAttrs.edge) { // is edge const edgeId = Number(cellAttrs.id.value) const source = Number(cellAttrs.sourceVertex.value) const target = Number(cellAttrs.targetVertex.value) - const sourceCell = graph.getModel().getCell(source); - const targetCell = graph.getModel().getCell(target); + const sourceCell = graph.getModel().getCell(source) + const targetCell = graph.getModel().getCell(target) try { - var edge = graph.insertEdge(parent, edgeId, null, sourceCell, targetCell) - var firstChild = cellChildren[0].children[0]; + const edge = graph.insertEdge(parent, edgeId, null, sourceCell, targetCell) + const firstChild = cellChildren[0].children[0] if (firstChild !== undefined) { edge.geometry.points = [] - var plist = firstChild.children - for (var a of plist) { + const plist = firstChild.children + for (const a of plist) { try { - var xPos = Number(a.attributes.x.value); - var yPos = Number(a.attributes.y.value); + const xPos = Number(a.attributes.x.value) + const yPos = Number(a.attributes.y.value) edge.geometry.points.push(new mxPoint(xPos, yPos)) } catch (e) { console.log('error', e) } } @@ -447,27 +447,27 @@ function parseXmlToGraph (xmlDoc, graph) { export function renderGalleryXML (xml) { graph.removeCells(graph.getChildVertices(graph.getDefaultParent())) graph.view.refresh() - var xmlDoc = mxUtils.parseXml(xml) + const xmlDoc = mxUtils.parseXml(xml) parseXmlToGraph(xmlDoc, graph) } function XMLWireConnections () { - var erc = true + const erc = true if (erc === false) { alert('ERC check failed') } else { - var list = graph.getModel().cells - for (var property in list) { + const list = graph.getModel().cells + for (const property in list) { if (list[property].CellType === 'Component' && list[property].blockprefix !== 'PWR') { - var component = list[property] + const component = list[property] if (component.children !== null) { - for (var child in component.children) { - var pin = component.children[child] + for (const child in component.children) { + const pin = component.children[child] if (pin.vertex === true) { try { if (pin.edges !== null && pin.edges.length !== 0) { - for (var wire in pin.edges) { + for (const wire in pin.edges) { if (pin.edges[wire].source !== null && pin.edges[wire].target !== null) { if (pin.edges[wire].source.edge === true) { pin.edges[wire].sourceVertex = pin.edges[wire].source.id diff --git a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js index ac4c588a..8444937d 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js @@ -71,18 +71,18 @@ function GridProperties ({ gridRef }) { return ( <> <ListItem> - <ListItemText primary="Grid Properties" /> + <ListItemText primary='Grid Properties' /> </ListItem> <ListItem style={{ padding: '10px 5px 15px 5px' }} divider> <TextField - id="filled-select-currency" + id='filled-select-currency' select size='small' className={classes.pages} value={gridSize} onChange={handleSizeChange} - helperText="Grid size" - variant="outlined" + helperText='Grid size' + variant='outlined' > {pageSize.map((option) => ( <MenuItem key={option.value} value={option.value}> @@ -91,14 +91,14 @@ function GridProperties ({ gridRef }) { ))} </TextField> <TextField - id="grid-layout" + id='grid-layout' select size='small' className={classes.pages} value={gridLayout} onChange={handleLayoutChange} - helperText="Grid Layout" - variant="outlined" + helperText='Grid Layout' + variant='outlined' > {pageLayout.map((option) => ( <MenuItem key={option.value} value={option.value}> @@ -143,7 +143,7 @@ export default function PropertiesSidebar ({ gridRef, outlineRef }) { <ListItem button divider> <h2 style={{ margin: '5px' }}>Properties</h2> </ListItem> - <div style={isOpen ? { display: 'none' } : {} }> + <div style={isOpen ? { display: 'none' } : {}}> <GridProperties gridRef={gridRef} /> {/* Display component position box */} @@ -151,7 +151,7 @@ export default function PropertiesSidebar ({ gridRef, outlineRef }) { <ListItemText primary={typography3} /> </ListItem> <ListItem style={{ padding: '0px' }} divider> - <div className="outline-container" ref={outlineRef} id="outlineContainer" /> + <div className='outline-container' ref={outlineRef} id='outlineContainer' /> </ListItem> {/* Input form field for schematic description */} @@ -159,7 +159,7 @@ export default function PropertiesSidebar ({ gridRef, outlineRef }) { <ListItemText primary={typography1} /> </ListItem> <ListItem style={{ padding: '0px 7px 7px 7px' }} divider> - <TextareaAutosize id='Description' label='Description' value={ schSave.description === '' ? description || '' : schSave.description } onChange={getInputValues} rowsMin={6} aria-label='Description' placeholder={typography2} style={{ width: '100%', minWidth: '234px', maxHeight: '250px' }} /> + <TextareaAutosize id='Description' label='Description' value={schSave.description === '' ? description || '' : schSave.description} onChange={getInputValues} rowsMin={6} aria-label='Description' placeholder={typography2} style={{ width: '100%', minWidth: '234px', maxHeight: '250px' }} /> </ListItem> </div> </List> diff --git a/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js index 48e273ff..4dfa0f69 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js @@ -27,13 +27,13 @@ export default function RightSidebar ({ window, mobileOpen, mobileClose, childre return ( <> - <nav className={classes.drawer} aria-label="mailbox folders"> - <Hidden xlUp implementation="css"> + <nav className={classes.drawer} aria-label='mailbox folders'> + <Hidden xlUp implementation='css'> <Drawer container={container} - variant="temporary" + variant='temporary' open={mobileOpen} - anchor="right" + anchor='right' onClose={mobileClose} classes={{ paper: classes.drawerPaper @@ -44,7 +44,7 @@ export default function RightSidebar ({ window, mobileOpen, mobileClose, childre > <IconButton onClick={mobileClose} - color="inherit" + color='inherit' style={{ marginRight: '190px' }} > <HighlightOffIcon /> @@ -53,13 +53,13 @@ export default function RightSidebar ({ window, mobileOpen, mobileClose, childre </Drawer> </Hidden> - <Hidden mdDown implementation="css"> + <Hidden mdDown implementation='css'> <Drawer classes={{ paper: classes.drawerPaper }} - anchor="right" - variant="permanent" + anchor='right' + variant='permanent' open > {children} diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js index 1ef676a8..95397eeb 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js @@ -23,8 +23,8 @@ import CreateNewFolderOutlinedIcon from '@material-ui/icons/CreateNewFolderOutli import ImageOutlinedIcon from '@material-ui/icons/ImageOutlined' import SystemUpdateAltOutlinedIcon from '@material-ui/icons/SystemUpdateAltOutlined' import { Link as RouterLink } from 'react-router-dom' -import beautify from 'xml-beautifier'; -import mxGraphFactory from 'mxgraph'; +import beautify from 'xml-beautifier' +import mxGraphFactory from 'mxgraph' import { NetlistModal, HelpScreen, ImageExportDialog, OpenSchDialog } from './ToolbarExtension' import { ZoomIn, ZoomOut, ZoomAct, DeleteComp, PrintPreview, Rotate, GenerateNetList, Undo, Redo, Save, ClearGrid } from './Helper/ToolbarTools' @@ -33,7 +33,7 @@ import { toggleSimulate, closeCompProperties, setSchXmlData, saveSchematic, open const { mxUtils -} = new mxGraphFactory(); +} = new mxGraphFactory() const useStyles = makeStyles((theme) => ({ menuButton: { @@ -70,11 +70,11 @@ function SimpleSnackbar ({ open, close, message }) { onClose={close} message={message} action={ - <React.Fragment> - <IconButton size="small" aria-label="close" color="inherit" onClick={close}> - <CloseIcon fontSize="small" /> + <> + <IconButton size='small' aria-label='close' color='inherit' onClick={close}> + <CloseIcon fontSize='small' /> </IconButton> - </React.Fragment> + </> } /> </div> @@ -100,8 +100,8 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) { const [netlist, genNetlist] = React.useState('') const handleClickOpen = () => { - var compNetlist = GenerateNetList() - var netlist = netfile.title + '\n\n' + + const compNetlist = GenerateNetList() + const netlist = netfile.title + '\n\n' + compNetlist.models + '\n' + compNetlist.main + '\n' + netfile.controlLine + '\n' + @@ -157,19 +157,19 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) { canvas.height = gridRef.current.scrollHeight canvas.style.width = canvas.width + 'px' canvas.style.height = canvas.height + 'px' - var images = svg.getElementsByTagName('image') - for (var image of images) { + const images = svg.getElementsByTagName('image') + for (const image of images) { let data = await fetch(image.getAttribute('xlink:href')).then((v) => { return v.text() }) - data = encodeURIComponent(data); + data = encodeURIComponent(data) image.removeAttribute('xlink:href') image.setAttribute( 'href', 'data:image/svg+xml;base64,' + window.btoa(data) ) } - var ctx = canvas.getContext('2d') + const ctx = canvas.getContext('2d') ctx.webkitImageSmoothingEnabled = true ctx.msImageSmoothingEnabled = true ctx.imageSmoothingEnabled = true @@ -177,13 +177,13 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) { ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0) return new Promise(resolve => { if (type === 'SVG') { - var svgdata = new XMLSerializer().serializeToString(svg) + const svgdata = new XMLSerializer().serializeToString(svg) resolve('<?xml version="1.0" encoding="UTF-8"?>' + svgdata) return } - var v = Canvg.fromString(ctx, svg.outerHTML) + const v = Canvg.fromString(ctx, svg.outerHTML) v.render().then(() => { - var image = '' + let image = '' if (type === 'JPG') { const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height) for (let i = 0; i < imgdata.data.length; i += 4) { @@ -208,12 +208,12 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) { // Download JPEG, PNG exported Image function downloadImage (data, type) { - var evt = new MouseEvent('click', { + const evt = new MouseEvent('click', { view: window, bubbles: false, cancelable: true }) - var a = document.createElement('a') + const a = document.createElement('a') const ext = (type === 'PNG') ? '.png' : '.jpg' a.setAttribute('download', schSave.title + '_' + process.env.REACT_APP_NAME + '_on_Cloud' + ext) a.setAttribute('href', data) @@ -271,10 +271,10 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) { setMessage('You are not Logged In') handleSnacClick() } else { - var description = schSave.description - var xml = Save(description) + const description = schSave.description + const xml = Save(description) dispatch(setSchXmlData(xml)) - var title = schSave.title + const title = schSave.title exportImage('PNG') .then(res => { dispatch(saveSchematic(title, description, xml, res)) @@ -307,30 +307,30 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) { fileSelector.setAttribute('accept', 'application/xml') fileSelector.click() fileSelector.addEventListener('change', function (event) { - var file = event.target.files[0]; - var filename = file.name; - var base = '(_' + process.env.REACT_APP_NAME + '_on_Cloud)?( *\\([0-9]*\\))?\\.xml$'; - var re = new RegExp(base, 'i'); + const file = event.target.files[0] + const filename = file.name + const base = '(_' + process.env.REACT_APP_NAME + '_on_Cloud)?( *\\([0-9]*\\))?\\.xml$' + const re = new RegExp(base, 'i') if (re.test(filename)) { - var reader = new FileReader() + const reader = new FileReader() reader.onload = function (event) { - var title = filename.replace(re, ''); - var data_dump = event.target.result; - var xmlDoc = mxUtils.parseXml(data_dump); - const firstCell = xmlDoc.documentElement.children[0].children[0]; - const firstCellAttrs = firstCell.attributes; - const appname = firstCellAttrs.appname.value; - const description = (firstCellAttrs.description !== undefined) ? firstCellAttrs.description.value : ''; + const title = filename.replace(re, '') + const data_dump = event.target.result + const xmlDoc = mxUtils.parseXml(data_dump) + const firstCell = xmlDoc.documentElement.children[0].children[0] + const firstCellAttrs = firstCell.attributes + const appname = firstCellAttrs.appname.value + const description = (firstCellAttrs.description !== undefined) ? firstCellAttrs.description.value : '' if (appname !== process.env.REACT_APP_NAME) { - setMessage('Unsupported app name error !'); - handleSnacClick(); + setMessage('Unsupported app name error !') + handleSnacClick() } else { - var obj = { 'data_dump': data_dump, 'title': title, 'description': description }; + const obj = { data_dump: data_dump, title: title, description: description } if (obj.data_dump === undefined || obj.title === undefined || obj.description === undefined) { - setMessage('Unsupported file error !'); - handleSnacClick(); + setMessage('Unsupported file error !') + handleSnacClick() } else { - dispatch(openLocalSch(obj)); + dispatch(openLocalSch(obj)) } } } @@ -355,103 +355,103 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) { return ( <> - <Tooltip title="New"> - <IconButton color="inherit" className={classes.tools} size="small" target="_blank" component={RouterLink} to="/editor" > - <CreateNewFolderOutlinedIcon fontSize="small" /> + <Tooltip title='New'> + <IconButton color='inherit' className={classes.tools} size='small' target='_blank' component={RouterLink} to='/editor'> + <CreateNewFolderOutlinedIcon fontSize='small' /> </IconButton> </Tooltip> - <Tooltip title="Open"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={handleSchDialOpen} > - <OpenInBrowserIcon fontSize="small" /> + <Tooltip title='Open'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={handleSchDialOpen}> + <OpenInBrowserIcon fontSize='small' /> </IconButton> </Tooltip> <OpenSchDialog open={schOpen} close={handleSchDialClose} openLocal={handleLocalSchOpen} /> - <Tooltip title="Save"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={handleSchSave} > - <SaveOutlinedIcon fontSize="small" /> + <Tooltip title='Save'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={handleSchSave}> + <SaveOutlinedIcon fontSize='small' /> </IconButton> </Tooltip> <SimpleSnackbar open={snacOpen} close={handleSnacClose} message={message} /> <span className={classes.pipe}>|</span> - <Tooltip title="Export"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={handleLocalSchSave}> - <SystemUpdateAltOutlinedIcon fontSize="small" /> + <Tooltip title='Export'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={handleLocalSchSave}> + <SystemUpdateAltOutlinedIcon fontSize='small' /> </IconButton> </Tooltip> - <Tooltip title="Image Export"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={handleImgClickOpen}> - <ImageOutlinedIcon fontSize="small" /> + <Tooltip title='Image Export'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={handleImgClickOpen}> + <ImageOutlinedIcon fontSize='small' /> </IconButton> </Tooltip> <ImageExportDialog open={imgopen} onClose={handleImgClose} /> - <Tooltip title="Print Preview"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={PrintPreview}> - <PrintOutlinedIcon fontSize="small" /> + <Tooltip title='Print Preview'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={PrintPreview}> + <PrintOutlinedIcon fontSize='small' /> </IconButton> </Tooltip> <span className={classes.pipe}>|</span> - <Tooltip title="Simulate"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={() => { dispatch(toggleSimulate()) }}> - <PlayCircleOutlineIcon fontSize="small" /> + <Tooltip title='Simulate'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={() => { dispatch(toggleSimulate()) }}> + <PlayCircleOutlineIcon fontSize='small' /> </IconButton> </Tooltip> - <Tooltip title="Generate Netlist"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={handleClickOpen} > - <BorderClearIcon fontSize="small" /> + <Tooltip title='Generate Netlist'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={handleClickOpen}> + <BorderClearIcon fontSize='small' /> </IconButton> </Tooltip> <NetlistModal open={open} close={handleClose} netlist={netlist} /> <span className={classes.pipe}>|</span> - <Tooltip title="Undo"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={Undo}> - <UndoIcon fontSize="small" /> + <Tooltip title='Undo'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={Undo}> + <UndoIcon fontSize='small' /> </IconButton> </Tooltip> - <Tooltip title="Redo"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={Redo}> - <RedoIcon fontSize="small" /> + <Tooltip title='Redo'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={Redo}> + <RedoIcon fontSize='small' /> </IconButton> </Tooltip> - <Tooltip title="Rotate"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={Rotate}> - <RotateRightIcon fontSize="small" /> + <Tooltip title='Rotate'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={Rotate}> + <RotateRightIcon fontSize='small' /> </IconButton> </Tooltip> <span className={classes.pipe}>|</span> - <Tooltip title="Zoom In"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={ZoomIn}> - <ZoomInIcon fontSize="small" /> + <Tooltip title='Zoom In'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={ZoomIn}> + <ZoomInIcon fontSize='small' /> </IconButton> </Tooltip> - <Tooltip title="Zoom Out"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={ZoomOut}> - <ZoomOutIcon fontSize="small" /> + <Tooltip title='Zoom Out'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={ZoomOut}> + <ZoomOutIcon fontSize='small' /> </IconButton> </Tooltip> - <Tooltip title="Default Size"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={ZoomAct}> - <SettingsOverscanIcon fontSize="small" /> + <Tooltip title='Default Size'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={ZoomAct}> + <SettingsOverscanIcon fontSize='small' /> </IconButton> </Tooltip> <span className={classes.pipe}>|</span> - <Tooltip title="Delete"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={handleDeleteComp}> - <DeleteIcon fontSize="small" /> + <Tooltip title='Delete'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={handleDeleteComp}> + <DeleteIcon fontSize='small' /> </IconButton> </Tooltip> - <Tooltip title="Clear All"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={ClearGrid}> - <ClearAllIcon fontSize="small" /> + <Tooltip title='Clear All'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={ClearGrid}> + <ClearAllIcon fontSize='small' /> </IconButton> </Tooltip> - <Tooltip title="Help"> - <IconButton color="inherit" className={classes.tools} size="small" onClick={handleHelpOpen}> - <HelpOutlineIcon fontSize="small" /> + <Tooltip title='Help'> + <IconButton color='inherit' className={classes.tools} size='small' onClick={handleHelpOpen}> + <HelpOutlineIcon fontSize='small' /> </IconButton> </Tooltip> <HelpScreen open={helpOpen} close={handleHelpClose} /> @@ -460,11 +460,11 @@ export default function SchematicToolbar ({ mobileClose, gridRef }) { color='inherit' aria-label='open drawer' edge='end' - size="small" + size='small' onClick={mobileClose} className={classes.menuButton} > - <AddBoxOutlinedIcon fontSize="small" /> + <AddBoxOutlinedIcon fontSize='small' /> </IconButton> </> ) diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js index b777d804..f5ddffb4 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js @@ -36,9 +36,9 @@ export default function SideComp ({ component }) { AddComponent(component, imageRef.current) }, [imageRef, component]) - const link1 = process.env.REACT_APP_BLOCK_NAME + ' Name'; - const link2 = process.env.REACT_APP_CATEGORY_NAME; - const link3 = process.env.REACT_APP_CATEGORIES_NAME; + const link1 = process.env.REACT_APP_BLOCK_NAME + ' Name' + const link2 = process.env.REACT_APP_CATEGORY_NAME + const link3 = process.env.REACT_APP_CATEGORIES_NAME return ( <div> @@ -63,23 +63,23 @@ export default function SideComp ({ component }) { horizontal: 'center' }} > - <List component="div" className={classes.popupInfo} disablePadding dense > + <List component='div' className={classes.popupInfo} disablePadding dense> <ListItemText> <b>{link1}:</b> {component.name} </ListItemText> { component.categories.length === 1 && - <ListItemText> - <b>{link2}:</b> {component.categories[0].name} - </ListItemText> + <ListItemText> + <b>{link2}:</b> {component.categories[0].name} + </ListItemText> } { component.categories.length > 1 && - <ListItemText> - <b>{link3}:</b> {component.categories.map((c) => <li key={c.id}>{c.name}</li>)} - </ListItemText> + <ListItemText> + <b>{link3}:</b> {component.categories.map((c) => <li key={c.id}>{c.name}</li>)} + </ListItemText> } </List> diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js index 61bd2eff..651ffa1c 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js @@ -26,7 +26,7 @@ import { useSelector } from 'react-redux' import Graph from '../Shared/Graph' const Transition = React.forwardRef(function Transition (props, ref) { - return <Slide direction="up" ref={ref} {...props} /> + return <Slide direction='up' ref={ref} {...props} /> }) const useStyles = makeStyles((theme) => ({ @@ -83,40 +83,42 @@ export default function SimulationScreen ({ open, close, isResult }) { const typography2 = 'SOMETHING WENT WRONG. Please Check The Simulation Parameters And ' + process.env.REACT_APP_DIAGRAM_NAME + '.' 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"> + <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}> + <Typography variant='h6' className={classes.title}> Simulation Result </Typography> - <Button autoFocus color="inherit" onClick={close}> + <Button autoFocus color='inherit' onClick={close}> close </Button> </Toolbar> </AppBar> - <Container maxWidth="lg" className={classes.header}> + <Container maxWidth='lg' className={classes.header}> <Grid container spacing={3} - direction="row" - justify="center" - alignItems="center" + direction='row' + justify='center' + alignItems='center' > {/* Card to display simualtion result screen header */} <Grid item xs={12} sm={12}> <Paper className={classes.paper}> - <Typography variant="h2" align="center" gutterBottom> + <Typography variant='h2' align='center' gutterBottom> {result.title} </Typography> - <Typography variant="h5" align="center" component="p" gutterBottom> + <Typography variant='h5' align='center' component='p' gutterBottom> Simulation Result for {stitle} * </Typography> </Paper> @@ -128,17 +130,17 @@ export default function SimulationScreen ({ open, close, isResult }) { (result.graph !== {} && result.isGraph === 'true') ? <Grid item xs={12} sm={12}> <Paper className={classes.paper}> - <Typography variant="h4" align="center" gutterBottom> + <Typography variant='h4' align='center' gutterBottom> GRAPH OUTPUT </Typography> - <div style={{ padding: '15px 10px 10px 10px', margin: '20px 0px', backgroundColor: 'white', borderRadius: '5px' }} > + <div style={{ padding: '15px 10px 10px 10px', margin: '20px 0px', backgroundColor: 'white', borderRadius: '5px' }}> <TextField style={{ width: '20%' }} - id="xscale" + id='xscale' size='small' - variant="outlined" + variant='outlined' select - label="Select X Axis Scale" + label='Select X Axis Scale' value={xscale} onChange={handleXScale} SelectProps={{ @@ -174,11 +176,11 @@ export default function SimulationScreen ({ open, close, isResult }) { </TextField> <TextField style={{ width: '20%', marginLeft: '10px' }} - id="yscale" + id='yscale' size='small' - variant="outlined" + variant='outlined' select - label="Select Y Axis Scale" + label='Select Y Axis Scale' value={yscale} onChange={handleYScale} SelectProps={{ @@ -215,11 +217,11 @@ export default function SimulationScreen ({ open, close, isResult }) { <TextField style={{ width: '20%', marginLeft: '10px' }} - id="precision" + id='precision' size='small' - variant="outlined" + variant='outlined' select - label="Select Precision" + label='Select Precision' value={precision} onChange={handlePrecision} SelectProps={{ @@ -248,7 +250,7 @@ export default function SimulationScreen ({ open, close, isResult }) { /> </Paper> </Grid> - : (result.isGraph === 'true') ? <span>{typography1}</span> : <span></span> + : (result.isGraph === 'true') ? <span>{typography1}</span> : <span /> } {/* Display text result */} @@ -256,17 +258,17 @@ export default function SimulationScreen ({ open, close, isResult }) { (result.isGraph === 'false') ? <Grid item xs={12} sm={12}> <Paper className={classes.paper}> - <Typography variant="h4" align="center" gutterBottom> + <Typography variant='h4' align='center' gutterBottom> OUTPUT </Typography> <div style={{ padding: '15px 10px 10px 10px', backgroundColor: 'white', margin: '20px 0px', borderRadius: '5px' }}> <TextField style={{ width: '20%' }} - id="xscale" + id='xscale' size='small' - variant="outlined" + variant='outlined' select - label="Select Scale" + label='Select Scale' value={xscale} onChange={handleXScale} SelectProps={{ @@ -303,11 +305,11 @@ export default function SimulationScreen ({ open, close, isResult }) { <TextField style={{ width: '20%', marginLeft: '10px' }} - id="precision" + id='precision' size='small' - variant="outlined" + variant='outlined' select - label="Select Precision" + label='Select Precision' value={precision} onChange={handlePrecision} SelectProps={{ @@ -328,23 +330,22 @@ export default function SimulationScreen ({ open, close, isResult }) { </div> <TableContainer component={Paper}> - <Table className={classes.table} aria-label="simple table"> + <Table className={classes.table} aria-label='simple table'> <TableHead> <TableRow> - <TableCell align="center">Node/Branch</TableCell> - <TableCell align="center">Value</TableCell> - <TableCell align="center">Unit</TableCell> + <TableCell align='center'>Node/Branch</TableCell> + <TableCell align='center'>Value</TableCell> + <TableCell align='center'>Unit</TableCell> </TableRow> </TableHead> <TableBody> {result.text.map((line, index) => ( <TableRow key={index}> - <TableCell align="center">{line.split('=')[0]}</TableCell> - <TableCell align="center">{(parseFloat(line.split(' ')[2]) / scales[xscale]).toFixed(precision)}</TableCell> - <TableCell align="center">{xscale === 'si' ? '' : xscale}{line.split(' ')[3]}</TableCell> + <TableCell align='center'>{line.split('=')[0]}</TableCell> + <TableCell align='center'>{(parseFloat(line.split(' ')[2]) / scales[xscale]).toFixed(precision)}</TableCell> + <TableCell align='center'>{xscale === 'si' ? '' : xscale}{line.split(' ')[3]}</TableCell> </TableRow> - )) - } + ))} </TableBody> </Table> @@ -352,16 +353,16 @@ export default function SimulationScreen ({ open, close, isResult }) { </Paper> </Grid> - : <span></span> - } </> + : <span /> + } + </> : <Grid item xs={12} sm={12}> <Paper className={classes.paper}> - <Typography variant="h6" align="center" gutterBottom> + <Typography variant='h6' align='center' gutterBottom> {typography2} {/* Error handling message in case of null result */} </Typography> </Paper> - </Grid> - } + </Grid>} </Grid> </Container> </Dialog> diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js index 25724859..bab9b601 100644 --- a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js +++ b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js @@ -39,18 +39,18 @@ import GallerySchSample from '../../utils/GallerySchSample' import { blue } from '@material-ui/core/colors' const Transition = React.forwardRef(function Transition (props, ref) { - return <Slide direction="up" ref={ref} {...props} /> + return <Slide direction='up' ref={ref} {...props} /> }) -var FileSaver = require('file-saver') +const FileSaver = require('file-saver') // Dialog box to display generated netlist export function NetlistModal ({ open, close, netlist }) { const netfile = useSelector(state => state.netlistReducer) const createNetlistFile = () => { - var titleA = netfile.title.split(' ')[1] - var name = process.env.REACT_APP_NAME - var blob = new Blob([netlist], { type: 'text/plain;charset=utf-8' }) + const titleA = netfile.title.split(' ')[1] + const name = process.env.REACT_APP_NAME + const blob = new Blob([netlist], { type: 'text/plain;charset=utf-8' }) FileSaver.saveAs(blob, `${titleA}_${name}_on_Cloud.cir`) } const typography2 = 'Current netlist for given ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME + '...' @@ -60,22 +60,22 @@ export function NetlistModal ({ open, close, netlist }) { onClose={close} TransitionComponent={Transition} keepMounted - aria-labelledby="generate-netlist" - aria-describedby="generate-netlist-description" + aria-labelledby='generate-netlist' + aria-describedby='generate-netlist-description' > - <DialogTitle id="generate-netlist-title">{'Netlist Generator'}</DialogTitle> + <DialogTitle id='generate-netlist-title'>Netlist Generator</DialogTitle> <DialogContent dividers> - <DialogContentText id="generate-netlist-description"> + <DialogContentText id='generate-netlist-description'> {typography2}<br /><br /> - <TextareaAutosize aria-label="empty textarea" rowsMin={20} rowsMax={50} style={{ minWidth: '500px' }} value={netlist} /> + <TextareaAutosize aria-label='empty textarea' rowsMin={20} rowsMax={50} style={{ minWidth: '500px' }} value={netlist} /> </DialogContentText> </DialogContent> <DialogActions> {/* Button to download the netlist */} - <Button color="primary" onClick={createNetlistFile}> + <Button color='primary' onClick={createNetlistFile}> Download </Button> - <Button onClick={close} color="primary" autoFocus> + <Button onClick={close} color='primary' autoFocus> Close </Button> </DialogActions> @@ -120,74 +120,76 @@ 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"> + <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}> + <Typography variant='h6' className={classes.title}> Help </Typography> - <Button autoFocus color="inherit" onClick={close}> + <Button autoFocus color='inherit' onClick={close}> close </Button> </Toolbar> </AppBar> - <Container maxWidth="lg" className={classes.header}> + <Container maxWidth='lg' className={classes.header}> <Grid container spacing={3} - direction="row" - justify="center" - alignItems="center" + 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> + <Typography variant='h5' align='center' component='p' gutterBottom> Keyboard Shorcuts </Typography> </legend> - <Typography variant="h6" align='left' gutterBottom> + <Typography variant='h6' align='left' gutterBottom> UNDO </Typography> - <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom> + <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom> Ctrl + Z </Typography> <Divider /> - <Typography variant="h6" align='left' gutterBottom> + <Typography variant='h6' align='left' gutterBottom> REDO </Typography> - <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom> + <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom> Ctrl + A </Typography> <Divider /> - <Typography variant="h6" align='left' gutterBottom> + <Typography variant='h6' align='left' gutterBottom> ZOOM IN </Typography> - <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom> + <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom> Ctrl + I </Typography> <Divider /> - <Typography variant="h6" align='left' gutterBottom> + <Typography variant='h6' align='left' gutterBottom> ZOOM OUT </Typography> - <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom> + <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom> Ctrl + O </Typography> <Divider /> - <Typography variant="h6" align='left' gutterBottom> + <Typography variant='h6' align='left' gutterBottom> DEFAULT SIZE </Typography> - <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom> + <Typography variant='subtitle1' align='left' style={{ color: '#b3b3b3' }} gutterBottom> Ctrl + Y </Typography> </fieldset> @@ -198,81 +200,81 @@ export function HelpScreen ({ open, close }) { <Paper className={classes.paper}> <fieldset style={{ padding: '20px 40px' }}> <legend> - <Typography variant="h5" align="center" component="p" gutterBottom> + <Typography variant='h5' align='center' component='p' gutterBottom> Units Table </Typography> </legend> <Typography> <TableContainer component={Paper}> - <Table className={classes.table} aria-label="simple table"> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <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> + <TableCell align='center'>f</TableCell> + <TableCell align='center'>femto</TableCell> + <TableCell align='center'>10<sup>-15</sup></TableCell> </TableRow> </TableBody> @@ -286,36 +288,36 @@ export function HelpScreen ({ open, close }) { <Paper className={classes.paper}> <fieldset style={{ padding: '20px 40px' }}> <legend> - <Typography variant="h5" align="center" component="p" gutterBottom> + <Typography variant='h5' align='center' component='p' gutterBottom> Simulation Modes </Typography> </legend> - <Typography variant="h6" align='left' gutterBottom> + <Typography variant='h6' align='left' gutterBottom> DC Solver </Typography> - <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom> + <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> + <Typography variant='h6' align='left' gutterBottom> DC Sweep </Typography> - <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom> + <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> + <Typography variant='h6' align='left' gutterBottom> Transient Analysis </Typography> - <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom> + <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> + <Typography variant='h6' align='left' gutterBottom> AC Analysis </Typography> - <Typography variant="subtitle1" align='left' style={{ color: '#b3b3b3' }} gutterBottom> + <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> @@ -324,7 +326,7 @@ export function HelpScreen ({ open, close }) { </Grid> </Container> </Dialog> - </div > + </div> ) } @@ -348,8 +350,8 @@ export function ImageExportDialog (props) { } return ( - <Dialog onClose={handleClose} aria-labelledby="image-export-dialog-title" open={open}> - <DialogTitle id="image-export-dialog-title">Select Image type</DialogTitle> + <Dialog onClose={handleClose} aria-labelledby='image-export-dialog-title' open={open}> + <DialogTitle id='image-export-dialog-title'>Select Image type</DialogTitle> <List> {ImgTypes.map((img) => ( <ListItem button onClick={() => handleListItemClick(img)} key={img}> @@ -363,7 +365,7 @@ export function ImageExportDialog (props) { ))} </List> <DialogActions> - <Button onClick={handleClose} color="primary" autoFocus> + <Button onClick={handleClose} color='primary' autoFocus> Close </Button> </DialogActions> @@ -386,8 +388,8 @@ export function OpenSchDialog (props) { const schematics = useSelector(state => state.dashboardReducer.schematics) function getDate (jsonDate) { - var json = jsonDate - var date = new Date(json) + const json = jsonDate + const date = new Date(json) const dateTimeFormat = new Intl.DateTimeFormat('en', { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }) const [{ value: month }, , { value: day }, , { value: hour }, , { value: minute }, , { value: second }] = dateTimeFormat.formatToParts(date) return `${day} ${month} ${hour}:${minute}:${second}` @@ -404,28 +406,28 @@ export function OpenSchDialog (props) { maxWidth='md' TransitionComponent={Transition} keepMounted - aria-labelledby="open-dialog-title" - aria-describedby="open-dialog-description" + aria-labelledby='open-dialog-title' + aria-describedby='open-dialog-description' > - <DialogTitle id="open-dialog-title" onClose={close}> - <Typography component="span" variant="h3">{title}</Typography> + <DialogTitle id='open-dialog-title' onClose={close}> + <Typography component='span' variant='h3'>{title}</Typography> </DialogTitle> <DialogContent dividers> - <DialogContentText id="open-dialog-description" > + <DialogContentText id='open-dialog-description'> {isLocal - ? <Button variant="outlined" fullWidth={true} size="large" onClick={() => { openLocal(); close() }} color="primary"> + ? <Button variant='outlined' fullWidth size='large' onClick={() => { openLocal(); close() }} color='primary'> Upload File </Button> : isGallery ? <Grid item xs={12} sm={12}> {/* Listing Gallery Schematics */} <TableContainer component={Paper} style={{ maxHeight: '45vh' }}> - <Table stickyHeader size="small" aria-label="simple table"> + <Table stickyHeader size='small' aria-label='simple table'> <TableHead> <TableRow> - <TableCell align="center">Name</TableCell> - <TableCell align="center">Description</TableCell> - <TableCell align="center">Launch</TableCell> + <TableCell align='center'>Name</TableCell> + <TableCell align='center'>Description</TableCell> + <TableCell align='center'>Launch</TableCell> </TableRow> </TableHead> <TableBody> @@ -434,18 +436,18 @@ export function OpenSchDialog (props) { (sch) => { return ( <TableRow key={sch.save_id}> - <TableCell align="center">{sch.name}</TableCell> - <TableCell align="center"> - <Tooltip title={sch.description !== null ? sch.description : 'No description'} > + <TableCell align='center'>{sch.name}</TableCell> + <TableCell align='center'> + <Tooltip title={sch.description !== null ? sch.description : 'No description'}> <span> {sch.description !== null ? sch.description.slice(0, 30) + (sch.description.length < 30 ? '' : '...') : '-'} </span> </Tooltip> </TableCell> - <TableCell align="center"> + <TableCell align='center'> <Button - size="small" - color="primary" + size='small' + color='primary' onClick={() => { dispatch(loadGallery(sch.save_id.substr(7, sch.save_id.length))) }} variant={schSave.details.save_id === undefined ? 'outlined' : schSave.details.save_id !== sch.save_id ? 'outlined' : 'contained'} > @@ -464,18 +466,18 @@ export function OpenSchDialog (props) { : <Grid item xs={12} sm={12}> {/* Listing Saved Schematics */} {schematics.length === 0 - ? <Typography variant="subtitle1" gutterBottom> - Hey {auth.user.username} , {typography1} + ? <Typography variant='subtitle1' gutterBottom> + Hey {auth.user.username} , {typography1} </Typography> : <TableContainer component={Paper} style={{ maxHeight: '45vh' }}> - <Table stickyHeader size="small" aria-label="simple table"> + <Table stickyHeader size='small' aria-label='simple table'> <TableHead> <TableRow> - <TableCell align="center">Name</TableCell> - <TableCell align="center">Description</TableCell> - <TableCell align="center">Created</TableCell> - <TableCell align="center">Updated</TableCell> - <TableCell align="center">Launch</TableCell> + <TableCell align='center'>Name</TableCell> + <TableCell align='center'>Description</TableCell> + <TableCell align='center'>Created</TableCell> + <TableCell align='center'>Updated</TableCell> + <TableCell align='center'>Launch</TableCell> </TableRow> </TableHead> <TableBody> @@ -484,24 +486,24 @@ export function OpenSchDialog (props) { (sch) => { return ( <TableRow key={sch.save_id}> - <TableCell align="center">{sch.name}</TableCell> - <TableCell align="center"> - <Tooltip title={sch.description !== null ? sch.description : 'No description'} > + <TableCell align='center'>{sch.name}</TableCell> + <TableCell align='center'> + <Tooltip title={sch.description !== null ? sch.description : 'No description'}> <span> {sch.description !== null ? sch.description.slice(0, 30) + (sch.description.length < 30 ? '' : '...') : '-'} </span> </Tooltip> </TableCell> - <TableCell align="center">{getDate(sch.create_time)}</TableCell> - <TableCell align="center">{getDate(sch.save_time)}</TableCell> - <TableCell align="center"> + <TableCell align='center'>{getDate(sch.create_time)}</TableCell> + <TableCell align='center'>{getDate(sch.save_time)}</TableCell> + <TableCell align='center'> <Button - size="small" - color="primary" + size='small' + color='primary' onClick={() => { dispatch(fetchSchematic(sch.save_id)) }} variant={schSave.details.save_id === undefined ? 'outlined' : schSave.details.save_id !== sch.save_id ? 'outlined' : 'contained'} > - Launch + Launch </Button> </TableCell> </TableRow> @@ -511,26 +513,23 @@ export function OpenSchDialog (props) { </> </TableBody> </Table> - </TableContainer> - } - </Grid> - } + </TableContainer>} + </Grid>} </DialogContentText> </DialogContent> <DialogActions> - <Button variant={isLocal ? 'outlined' : 'text' } onClick={() => { setisLocal(true); setisGallery(false) }} color="secondary"> + <Button variant={isLocal ? 'outlined' : 'text'} onClick={() => { setisLocal(true); setisGallery(false) }} color='secondary'> Local </Button> - <Button variant={isGallery ? 'outlined' : 'text' } onClick={() => { setisLocal(false); setisGallery(true) }} color="secondary"> + <Button variant={isGallery ? 'outlined' : 'text'} onClick={() => { setisLocal(false); setisGallery(true) }} color='secondary'> Gallery </Button> {auth.isAuthenticated !== true ? <></> - : <Button variant={!isGallery & !isLocal ? 'outlined' : 'text' } onClick={() => { dispatch(fetchSchematics()); setisLocal(false); setisGallery(false) }} color="secondary" > + : <Button variant={!isGallery & !isLocal ? 'outlined' : 'text'} onClick={() => { dispatch(fetchSchematics()); setisLocal(false); setisGallery(false) }} color='secondary'> on Cloud - </Button> - } - <Button onClick={close} color="primary" autoFocus> + </Button>} + <Button onClick={close} color='primary' autoFocus> Close </Button> </DialogActions> diff --git a/blocks/eda-frontend/src/components/Shared/Layout.js b/blocks/eda-frontend/src/components/Shared/Layout.js index 6430beed..c07252c0 100644 --- a/blocks/eda-frontend/src/components/Shared/Layout.js +++ b/blocks/eda-frontend/src/components/Shared/Layout.js @@ -33,23 +33,23 @@ function Layout ({ header, resToolbar, sidebar }) { <> {/* Header and Toolbar of layout */} <AppBar - position="fixed" - color="default" + position='fixed' + color='default' elevation={0} className={classes.appBar} > {header} - <Toolbar variant="dense" color="default"> + <Toolbar variant='dense' color='default'> <IconButton - color="inherit" - aria-label="open drawer" - edge="start" - size="small" + color='inherit' + aria-label='open drawer' + edge='start' + size='small' onClick={handleDrawerToggle} className={classes.menuButton} > - <MenuIcon fontSize="small" /> + <MenuIcon fontSize='small' /> </IconButton> {resToolbar} diff --git a/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js b/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js index 7d238efd..0f2c3f9e 100644 --- a/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js +++ b/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js @@ -27,11 +27,11 @@ export default function LayoutSidebar ({ window, mobileOpen, mobileClose, childr return ( <> - <nav className={classes.drawer} aria-label="mailbox folders"> - <Hidden lgUp implementation="css"> + <nav className={classes.drawer} aria-label='mailbox folders'> + <Hidden lgUp implementation='css'> <Drawer container={container} - variant="temporary" + variant='temporary' open={mobileOpen} onClose={mobileClose} classes={{ @@ -43,7 +43,7 @@ export default function LayoutSidebar ({ window, mobileOpen, mobileClose, childr > <IconButton onClick={mobileClose} - color="inherit" + color='inherit' style={{ marginLeft: '190px' }} > <HighlightOffIcon /> @@ -52,12 +52,12 @@ export default function LayoutSidebar ({ window, mobileOpen, mobileClose, childr </Drawer> </Hidden> - <Hidden smDown implementation="css"> + <Hidden smDown implementation='css'> <Drawer classes={{ paper: classes.drawerPaper }} - variant="permanent" + variant='permanent' open > {children} diff --git a/blocks/eda-frontend/src/components/Shared/Navbar.js b/blocks/eda-frontend/src/components/Shared/Navbar.js index a9880f88..16a34f7e 100644 --- a/blocks/eda-frontend/src/components/Shared/Navbar.js +++ b/blocks/eda-frontend/src/components/Shared/Navbar.js @@ -62,16 +62,16 @@ export function Header () { return ( <> {/* Display logo */} - <IconButton edge="start" className={classes.button} color="primary"> + <IconButton edge='start' className={classes.button} color='primary'> <Avatar alt={altImage} src={logo} className={classes.small} /> </IconButton> <Typography - variant="h6" - color="inherit" + variant='h6' + color='inherit' noWrap className={classes.toolbarTitle} > - <Link color="inherit" to="/" component={RouterLink}> + <Link color='inherit' to='/' component={RouterLink}> {link} </Link> </Typography> @@ -82,9 +82,9 @@ export function Header () { (auth.isAuthenticated ? (<> <Link - variant="button" - color="textPrimary" - to="/" + variant='button' + color='textPrimary' + to='/' component={RouterLink} className={classes.link} > @@ -92,9 +92,9 @@ export function Header () { </Link> <Link - variant="button" - color="textPrimary" - to="/editor" + variant='button' + color='textPrimary' + to='/editor' component={RouterLink} className={classes.link} > @@ -102,9 +102,9 @@ export function Header () { </Link> <Link - variant="button" - color="textPrimary" - to="/gallery" + variant='button' + color='textPrimary' + to='/gallery' component={RouterLink} className={classes.link} > @@ -112,9 +112,9 @@ export function Header () { </Link> <Link - variant="button" - color="textPrimary" - to="/simulator/ngspice" + variant='button' + color='textPrimary' + to='/simulator/ngspice' component={RouterLink} className={classes.link} > @@ -122,9 +122,9 @@ export function Header () { </Link> <Link - variant="button" - color="textPrimary" - to="/dashboard" + variant='button' + color='textPrimary' + to='/dashboard' component={RouterLink} className={classes.link} > @@ -133,9 +133,9 @@ export function Header () { </>) : (<> <Link - variant="button" - color="textPrimary" - to="/editor" + variant='button' + color='textPrimary' + to='/editor' component={RouterLink} style={{ marginRight: '20px' }} > @@ -143,9 +143,9 @@ export function Header () { </Link> <Link - variant="button" - color="textPrimary" - to="/gallery" + variant='button' + color='textPrimary' + to='/gallery' component={RouterLink} style={{ marginRight: '20px' }} > @@ -153,16 +153,16 @@ export function Header () { </Link> <Link - variant="button" - color="textPrimary" - to="/simulator/ngspice" + variant='button' + color='textPrimary' + to='/simulator/ngspice' component={RouterLink} style={{ marginRight: '20px' }} > Simulator </Link> </> - ) + ) ) } </nav> @@ -170,22 +170,22 @@ export function Header () { {/* Display login option or user menu as per authenticated status */} { (!auth.isAuthenticated ? (<Button - size="small" + size='small' component={RouterLink} - to="/login" - color="primary" - variant="outlined" - > + to='/login' + color='primary' + variant='outlined' + > Login </Button>) : (<> <IconButton - edge="start" + edge='start' style={{ marginLeft: 'auto' }} - color="primary" - aria-controls="simple-menu" - aria-haspopup="true" + color='primary' + aria-controls='simple-menu' + aria-haspopup='true' onClick={handleClick} > <Avatar className={classes.purple}> @@ -193,7 +193,7 @@ export function Header () { </Avatar> </IconButton> <Menu - id="simple-menu" + id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} @@ -203,33 +203,34 @@ export function Header () { > <MenuItem component={RouterLink} - to="/dashboard" + to='/dashboard' onClick={handleClose} > <ListItemText primary={auth.user.username} secondary={auth.user.email} /> </MenuItem> <MenuItem component={RouterLink} - to="/dashboard/profile" + to='/dashboard/profile' onClick={handleClose} > My Profile </MenuItem> <MenuItem component={RouterLink} - to="/dashboard/schematics" + to='/dashboard/schematics' onClick={handleClose} > {typography} </MenuItem> <MenuItem onClick={() => { store.dispatch(logout(history)) - }}> + }} + > Logout </MenuItem> </Menu> </> - ) + ) ) } </> @@ -241,12 +242,12 @@ export default function Navbar () { return ( <AppBar - position="static" - color="default" + position='static' + color='default' elevation={0} className={classes.appBar} > - <Toolbar variant="dense" color="default" className={classes.toolbar}> + <Toolbar variant='dense' color='default' className={classes.toolbar}> <Header /> </Toolbar> diff --git a/blocks/eda-frontend/src/components/Simulator/SimulationScreen.js b/blocks/eda-frontend/src/components/Simulator/SimulationScreen.js index fcfc28b8..2e5f8173 100644 --- a/blocks/eda-frontend/src/components/Simulator/SimulationScreen.js +++ b/blocks/eda-frontend/src/components/Simulator/SimulationScreen.js @@ -26,7 +26,7 @@ import { useSelector } from 'react-redux' import Graph from '../Shared/Graph' const Transition = React.forwardRef(function Transition (props, ref) { - return <Slide direction="up" ref={ref} {...props} /> + return <Slide direction='up' ref={ref} {...props} /> }) const useStyles = makeStyles((theme) => ({ @@ -78,49 +78,51 @@ export default function SimulationScreen ({ open, close, isResult }) { } 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"> + <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}> + <Typography variant='h6' className={classes.title}> Simulation Result </Typography> - <Button autoFocus color="inherit" onClick={close}> + <Button autoFocus color='inherit' onClick={close}> close </Button> </Toolbar> </AppBar> - <Container maxWidth="lg" className={classes.header}> + <Container maxWidth='lg' className={classes.header}> <Grid container spacing={3} - direction="row" - justify="center" - alignItems="center" + direction='row' + justify='center' + alignItems='center' > {isResult === true ? <> { (result.graph !== {} && result.isGraph === 'true') ? <Grid item xs={12} sm={12}> <Paper className={classes.paper}> - <Typography variant="h4" align="center" gutterBottom> + <Typography variant='h4' align='center' gutterBottom> GRAPH OUTPUT </Typography> <div style={{ padding: '15px 10px 10px 10px', margin: '20px 0px', backgroundColor: 'white', borderRadius: '5px' }}> <TextField style={{ width: '20%' }} - id="xscale" + id='xscale' size='small' - variant="outlined" + variant='outlined' select - label="Select X Axis Scale" + label='Select X Axis Scale' value={xscale} onChange={handleXScale} SelectProps={{ @@ -156,11 +158,11 @@ export default function SimulationScreen ({ open, close, isResult }) { </TextField> <TextField style={{ width: '20%', marginLeft: '10px' }} - id="yscale" + id='yscale' size='small' - variant="outlined" + variant='outlined' select - label="Select Y Axis Scale" + label='Select Y Axis Scale' value={yscale} onChange={handleYScale} SelectProps={{ @@ -197,11 +199,11 @@ export default function SimulationScreen ({ open, close, isResult }) { <TextField style={{ width: '20%', marginLeft: '10px' }} - id="precision" + id='precision' size='small' - variant="outlined" + variant='outlined' select - label="Select Precision" + label='Select Precision' value={precision} onChange={handlePrecision} SelectProps={{ @@ -230,24 +232,24 @@ export default function SimulationScreen ({ open, close, isResult }) { /> </Paper> </Grid> - : (result.isGraph === 'true') ? <span>SOMETHING WENT WRONG PLEASE CHECK THE SIMULATION PARAMETERS.</span> : <span></span> + : (result.isGraph === 'true') ? <span>SOMETHING WENT WRONG PLEASE CHECK THE SIMULATION PARAMETERS.</span> : <span /> } { (result.isGraph === 'false') ? <Grid item xs={12} sm={12}> <Paper className={classes.paper}> - <Typography variant="h4" align="center" gutterBottom> + <Typography variant='h4' align='center' gutterBottom> OUTPUT </Typography> <div style={{ padding: '15px 10px 10px 10px', backgroundColor: 'white', margin: '20px 0px', borderRadius: '5px' }}> <TextField style={{ width: '20%' }} - id="xscale" + id='xscale' size='small' - variant="outlined" + variant='outlined' select - label="Select Scale" + label='Select Scale' value={xscale} onChange={handleXScale} SelectProps={{ @@ -284,11 +286,11 @@ export default function SimulationScreen ({ open, close, isResult }) { <TextField style={{ width: '20%', marginLeft: '10px' }} - id="precision" + id='precision' size='small' - variant="outlined" + variant='outlined' select - label="Select Precision" + label='Select Precision' value={precision} onChange={handlePrecision} SelectProps={{ @@ -309,23 +311,22 @@ export default function SimulationScreen ({ open, close, isResult }) { </div> <TableContainer component={Paper}> - <Table className={classes.table} aria-label="simple table"> + <Table className={classes.table} aria-label='simple table'> <TableHead> <TableRow> - <TableCell align="center">Node/Branch</TableCell> - <TableCell align="center">Value</TableCell> - <TableCell align="center">Unit</TableCell> + <TableCell align='center'>Node/Branch</TableCell> + <TableCell align='center'>Value</TableCell> + <TableCell align='center'>Unit</TableCell> </TableRow> </TableHead> <TableBody> {result.text.map((line, index) => ( <TableRow key={index}> - <TableCell align="center">{line.split('=')[0]}</TableCell> - <TableCell align="center">{(parseFloat(line.split(' ')[2]) / scales[xscale]).toFixed(precision)}</TableCell> - <TableCell align="center">{xscale === 'si' ? '' : xscale}{line.split(' ')[3]}</TableCell> + <TableCell align='center'>{line.split('=')[0]}</TableCell> + <TableCell align='center'>{(parseFloat(line.split(' ')[2]) / scales[xscale]).toFixed(precision)}</TableCell> + <TableCell align='center'>{xscale === 'si' ? '' : xscale}{line.split(' ')[3]}</TableCell> </TableRow> - )) - } + ))} </TableBody> </Table> @@ -333,16 +334,16 @@ export default function SimulationScreen ({ open, close, isResult }) { </Paper> </Grid> - : <span></span> - }</> + : <span /> + } + </> : <Grid item xs={12} sm={12}> <Paper className={classes.paper}> - <Typography variant="h6" align="center" gutterBottom> + <Typography variant='h6' align='center' gutterBottom> SOMETHING WENT WRONG PLEASE CHECK THE NETLIST. </Typography> </Paper> - </Grid> - } + </Grid>} </Grid> </Container> </Dialog> diff --git a/blocks/eda-frontend/src/components/Simulator/textToFile.js b/blocks/eda-frontend/src/components/Simulator/textToFile.js index ad992b4d..e19d5e4a 100644 --- a/blocks/eda-frontend/src/components/Simulator/textToFile.js +++ b/blocks/eda-frontend/src/components/Simulator/textToFile.js @@ -2,9 +2,9 @@ export default function textToFile (data) { // create a file from a blob - var myblob = new Blob([data], { + const myblob = new Blob([data], { type: 'text/plain' }) - var file = new File([myblob], 'netlist.cir', { type: 'text/plain', lastModified: Date.now() }) + const file = new File([myblob], 'netlist.cir', { type: 'text/plain', lastModified: Date.now() }) return file } diff --git a/blocks/eda-frontend/src/pages/Dashboard.js b/blocks/eda-frontend/src/pages/Dashboard.js index bd544d43..2ba84b43 100644 --- a/blocks/eda-frontend/src/pages/Dashboard.js +++ b/blocks/eda-frontend/src/pages/Dashboard.js @@ -40,11 +40,11 @@ export default function Dashboard () { {/* Subroutes under dashboard section */} <Switch> - <Route exact path="/dashboard" component={DashboardHome} /> - <Route exact path="/dashboard/profile" /> + <Route exact path='/dashboard' component={DashboardHome} /> + <Route exact path='/dashboard/profile' /> <Route exact - path="/dashboard/schematics" + path='/dashboard/schematics' component={SchematicsList} /> </Switch> diff --git a/blocks/eda-frontend/src/pages/Gallery.js b/blocks/eda-frontend/src/pages/Gallery.js index 16936cab..7d221a2e 100644 --- a/blocks/eda-frontend/src/pages/Gallery.js +++ b/blocks/eda-frontend/src/pages/Gallery.js @@ -41,7 +41,7 @@ const useStyles = makeStyles((theme) => ({ } })) -var images = require.context('../static/gallery', true) +const images = require.context('../static/gallery', true) // Card displaying overview of gallery sample schematics. function SchematicCard ({ sch }) { @@ -63,10 +63,10 @@ function SchematicCard ({ sch }) { title={sch.name} /> <CardContent> - <Typography gutterBottom variant="h5" component="h2"> + <Typography gutterBottom variant='h5' component='h2'> {sch.name} </Typography> - <Typography variant="body2" component="p"> + <Typography variant='body2' component='p'> {sch.description} </Typography> </CardContent> @@ -74,11 +74,11 @@ function SchematicCard ({ sch }) { <CardActions> <Button - target="_blank" + target='_blank' component={RouterLink} to={'/editor?id=' + sch.save_id} - size="small" - color="primary" + size='small' + color='primary' > Launch in Editor </Button> @@ -100,11 +100,11 @@ function MainCard () { return ( <Card className={classes.mainHead}> <CardContent> - <Typography variant="h2" align="center" gutterBottom> - {typography} + <Typography variant='h2' align='center' gutterBottom> + {typography} </Typography> - <Typography className={classes.title} align="center" gutterBottom> - {diagramTypography} + <Typography className={classes.title} align='center' gutterBottom> + {diagramTypography} </Typography> </CardContent> </Card> @@ -117,13 +117,13 @@ export default function Gallery () { return ( <div className={classes.root}> <CssBaseline /> - <Container maxWidth="lg" className={classes.header}> + <Container maxWidth='lg' className={classes.header}> <Grid container - direction="row" - justify="flex-start" - alignItems="flex-start" - alignContent="center" + direction='row' + justify='flex-start' + alignItems='flex-start' + alignContent='center' spacing={3} > {/* Gallery Header */} diff --git a/blocks/eda-frontend/src/pages/Home.js b/blocks/eda-frontend/src/pages/Home.js index df149db3..7d4bcf6b 100644 --- a/blocks/eda-frontend/src/pages/Home.js +++ b/blocks/eda-frontend/src/pages/Home.js @@ -25,34 +25,34 @@ export default function Home () { const typography2 = 'Online ' + process.env.REACT_APP_NAME + ' Simulator' const typography3 = process.env.REACT_APP_DIAGRAM_NAME + ' Editor' return ( - <Container maxWidth="sm" component="main" className={classes.header}> + <Container maxWidth='sm' component='main' className={classes.header}> <center> <img src={logo} width='120' height='120' alt='Logo' /> </center> <Typography - component="h1" - variant="h2" - align="center" - color="textPrimary" + component='h1' + variant='h2' + align='center' + color='textPrimary' gutterBottom > {typography1} </Typography> <Typography - variant="h5" - align="center" - color="textSecondary" - component="p" + variant='h5' + align='center' + color='textSecondary' + component='p' > {typography2} - <br></br> - <br></br> + <br /> + <br /> <Button component={RouterLink} - to="/editor" - variant="contained" - size="large" - color="primary" + to='/editor' + variant='contained' + size='large' + color='primary' > {typography3} </Button> diff --git a/blocks/eda-frontend/src/pages/Login.js b/blocks/eda-frontend/src/pages/Login.js index a87f6397..8696b79c 100644 --- a/blocks/eda-frontend/src/pages/Login.js +++ b/blocks/eda-frontend/src/pages/Login.js @@ -45,14 +45,14 @@ const useStyles = makeStyles((theme) => ({ } })) -var url = '' +let url = '' export default function SignIn (props) { const classes = useStyles() const auth = useSelector(state => state.authReducer) const dispatch = useDispatch() - var homeURL = `${window.location.protocol}\\\\${window.location.host}/` + const homeURL = `${window.location.protocol}\\\\${window.location.host}/` useEffect(() => { dispatch(authDefault()) @@ -79,75 +79,75 @@ export default function SignIn (props) { // Function call for google oAuth login. const handleGoogleLogin = () => { - var host = window.location.protocol + '//' + window.location.host + const host = window.location.protocol + '//' + window.location.host dispatch(googleLogin(host)) } return ( - <Container component="main" maxWidth="xs"> + <Container component='main' maxWidth='xs'> <Card className={classes.paper}> <Avatar className={classes.avatar}> <LockOutlinedIcon /> </Avatar> - <Typography component="h1" variant="h5"> + <Typography component='h1' variant='h5'> Login | Sign In </Typography> {/* Display's error messages while logging in */} - <Typography variant="body1" align="center" style={{ marginTop: '10px' }} color="error" > + <Typography variant='body1' align='center' style={{ marginTop: '10px' }} color='error'> {auth.errors} </Typography> <form className={classes.form} noValidate> <TextField - variant="outlined" - margin="normal" + variant='outlined' + margin='normal' required fullWidth - id="email" - label="Username" - name="email" - autoComplete="email" + id='email' + label='Username' + name='email' + autoComplete='email' value={username} onChange={e => setUsername(e.target.value)} autoFocus /> <TextField - variant="outlined" - margin="normal" + variant='outlined' + margin='normal' required fullWidth - name="password" - label="Password" + name='password' + label='Password' InputProps={{ endAdornment: ( - <InputAdornment position="end"> + <InputAdornment position='end'> <IconButton - size="small" - aria-label="toggle password visibility" + size='small' + aria-label='toggle password visibility' onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword} > - {showPassword ? <Visibility fontSize="small" /> : <VisibilityOff fontSize="small" />} {/* Handle password visibility */} + {showPassword ? <Visibility fontSize='small' /> : <VisibilityOff fontSize='small' />} {/* Handle password visibility */} </IconButton> </InputAdornment> ) }} type={showPassword ? 'text' : 'password'} - id="password" + id='password' value={password} onChange={e => setPassword(e.target.value)} - autoComplete="current-password" + autoComplete='current-password' /> <FormControlLabel - control={<Checkbox value="remember" color="primary" />} - label="Remember me" + control={<Checkbox value='remember' color='primary' />} + label='Remember me' /> <Button fullWidth - variant="contained" - color="primary" + variant='contained' + color='primary' onClick={handleLogin} className={classes.submit} > @@ -155,34 +155,34 @@ export default function SignIn (props) { </Button> <Grid container> <Grid item xs> - <Link component={RouterLink} to="#" variant="body2"> + <Link component={RouterLink} to='#' variant='body2'> Forgot password? </Link> </Grid> <Grid item> - <Link component={RouterLink} to="/signup" variant="body2"> - {'New User? Sign Up'} + <Link component={RouterLink} to='/signup' variant='body2'> + New User? Sign Up </Link> </Grid> </Grid> </form> - <Typography variant="body1" color="secondary" align="center" >Or</Typography> + <Typography variant='body1' color='secondary' align='center'>Or</Typography> {/* Google oAuth Sign In option */} <Button fullWidth - variant="outlined" - color="primary" + variant='outlined' + color='primary' onClick={handleGoogleLogin} className={classes.submit} > - <img alt="G" src={google} height="20" />  Login With Google + <img alt='G' src={google} height='20' />  Login With Google </Button> </Card> <Button onClick={() => { window.open(homeURL, '_self') }} fullWidth - color="default" + color='default' className={classes.submit} > Back to home diff --git a/blocks/eda-frontend/src/pages/NotFound.js b/blocks/eda-frontend/src/pages/NotFound.js index af600c44..4eda146b 100644 --- a/blocks/eda-frontend/src/pages/NotFound.js +++ b/blocks/eda-frontend/src/pages/NotFound.js @@ -18,14 +18,14 @@ export default function NotFound () { }) return ( - <Container maxWidth="lg" className={classes.header}> - <Typography variant="h1" align="center" gutterBottom> + <Container maxWidth='lg' className={classes.header}> + <Typography variant='h1' align='center' gutterBottom> 404 Not Found </Typography> <Typography - variant="h4" - align="center" - color="textSecondary" + variant='h4' + align='center' + color='textSecondary' gutterBottom > Sorry, Requested page not found diff --git a/blocks/eda-frontend/src/pages/SchematicEditor.js b/blocks/eda-frontend/src/pages/SchematicEditor.js index 5b53b03b..e3d2b5fd 100644 --- a/blocks/eda-frontend/src/pages/SchematicEditor.js +++ b/blocks/eda-frontend/src/pages/SchematicEditor.js @@ -39,14 +39,14 @@ export default function SchematicEditor (props) { useEffect(() => { document.title = process.env.REACT_APP_DIAGRAM_NAME + ' Editor - ' + process.env.REACT_APP_NAME - var container = gridRef.current - var sidebar = compRef.current - var outline = outlineRef.current + const container = gridRef.current + const sidebar = compRef.current + const outline = outlineRef.current LoadGrid(container, sidebar, outline) if (props.location.search !== '') { const query = new URLSearchParams(props.location.search) - var cktid = query.get('id') + const cktid = query.get('id') if (cktid.substr(0, 7) === 'gallery') { // Loading Gallery schemaic. @@ -71,12 +71,12 @@ export default function SchematicEditor (props) { <LayoutMain> <div className={classes.toolbar} /> <center> - <div className="grid-container A4-L" ref={gridRef} id="divGrid" /> + <div className='grid-container A4-L' ref={gridRef} id='divGrid' /> </center> </LayoutMain> {/* Schematic editor Right side pane */} - <RightSidebar mobileOpen={mobileOpen} mobileClose={handleDrawerToggle} > + <RightSidebar mobileOpen={mobileOpen} mobileClose={handleDrawerToggle}> <PropertiesSidebar gridRef={gridRef} outlineRef={outlineRef} /> </RightSidebar> </div> diff --git a/blocks/eda-frontend/src/pages/Simulator.js b/blocks/eda-frontend/src/pages/Simulator.js index 7570eca7..ac5ae10e 100644 --- a/blocks/eda-frontend/src/pages/Simulator.js +++ b/blocks/eda-frontend/src/pages/Simulator.js @@ -55,14 +55,14 @@ export default function Simulator () { } const netlistCodeSanitization = (code) => { - var cleanCode = code.replace('plot', 'print') + const cleanCode = code.replace('plot', 'print') return cleanCode } function prepareNetlist () { - var sanatizedText = netlistCodeSanitization(netlistCode) - var file = textToFile(sanatizedText) + const sanatizedText = netlistCodeSanitization(netlistCode) + const file = textToFile(sanatizedText) sendNetlist(file) } @@ -99,25 +99,25 @@ export default function Simulator () { if (res.data.state === 'PROGRESS' || res.data.state === 'PENDING') { setTimeout(simulationResult(url), 1000) } else { - var result = res.data.details + const result = res.data.details if (result === null) { setIsResult(false) } else { setIsResult(true) - var temp = res.data.details.data + const temp = res.data.details.data - var data = result.data + const data = result.data if (res.data.details.graph === 'true') { - var simResultGraph = { labels: [], x_points: [], y_points: [] } + const simResultGraph = { labels: [], x_points: [], y_points: [] } // populate the labels - for (var i = 0; i < data.length; i++) { + for (let i = 0; i < data.length; i++) { simResultGraph.labels[0] = data[i].labels[0] - var lab = data[i].labels + const lab = data[i].labels // lab is an array containeing labels names ['time','abc','def'] simResultGraph.x_points = data[0].x // labels - for (var x = 1; x < lab.length; x++) { + for (let x = 1; x < lab.length; x++) { if (lab[x].includes('#branch')) { lab[x] = `I (${lab[x].replace('#branch', '')})` } @@ -129,7 +129,7 @@ export default function Simulator () { simResultGraph.labels.push(lab[x]) } // populate y_points - for (var z = 0; z < data[i].y.length; z++) { + for (let z = 0; z < data[i].y.length; z++) { simResultGraph.y_points.push(data[i].y[z]) } } @@ -141,7 +141,7 @@ export default function Simulator () { } dispatch(setResultGraph(simResultGraph)) } else { - var simResultText = [] + const simResultText = [] for (let i = 0; i < temp.length; i++) { let postfixUnit = '' if (temp[i][0].includes('#branch')) { @@ -168,45 +168,45 @@ export default function Simulator () { const typography = process.env.REACT_APP_NAME + ' on Cloud - ngSpice Simulator' return ( - <Container maxWidth="lg" className={classes.header}> + <Container maxWidth='lg' className={classes.header}> <SimulationScreen open={simulateOpen} isResult={isResult} close={handleSimulateClose} dark={state} /> <Grid container spacing={3} - direction="row" - justify="center" - alignItems="stretch" + direction='row' + justify='center' + alignItems='stretch' > - <Grid item xs={12} > + <Grid item xs={12}> <Paper className={classes.paper}> - <Typography variant="h4" gutterBottom> + <Typography variant='h4' gutterBottom> SPICE SIMULATOR </Typography> - <Typography variant="subtitle1" gutterBottom> + <Typography variant='subtitle1' gutterBottom> {typography} </Typography> </Paper> </Grid> - <Grid item xs={12} > + <Grid item xs={12}> <Paper className={classes.paper}> - <Typography variant="h5" gutterBottom> + <Typography variant='h5' gutterBottom> Enter Netlist </Typography> <FormControlLabel style={{ marginLeft: '10px' }} - control={<Switch checked={state.checkedA} color="primary" onChange={handleChange} name="checkedA" />} - label="Light Mode" + control={<Switch checked={state.checkedA} color='primary' onChange={handleChange} name='checkedA' />} + label='Light Mode' /> <Editor code={netlistCode} onCodeChange={onCodeChange} dark={state} /> <br /> - <Button variant="contained" color="primary" size="large" onClick={handleSimulationButtonClick}> + <Button variant='contained' color='primary' size='large' onClick={handleSimulationButtonClick}> Simulate </Button> </Paper> diff --git a/blocks/eda-frontend/src/pages/signUp.js b/blocks/eda-frontend/src/pages/signUp.js index 180211b9..e2364ac1 100644 --- a/blocks/eda-frontend/src/pages/signUp.js +++ b/blocks/eda-frontend/src/pages/signUp.js @@ -50,7 +50,7 @@ export default function SignUp () { const auth = useSelector(state => state.authReducer) const dispatch = useDispatch() - var homeURL = `${window.location.protocol}\\\\${window.location.host}/` + const homeURL = `${window.location.protocol}\\\\${window.location.host}/` useEffect(() => { dispatch(authDefault()) @@ -69,113 +69,113 @@ export default function SignUp () { // Function call for google oAuth sign up. const handleGoogleSignup = () => { - var host = window.location.protocol + '//' + window.location.host + const host = window.location.protocol + '//' + window.location.host dispatch(googleLogin(host)) } return ( - <Container component="main" maxWidth="xs"> + <Container component='main' maxWidth='xs'> <Card className={classes.paper}> <Avatar className={classes.avatar}> <LockOutlinedIcon /> </Avatar> - <Typography component="h1" variant="h5"> + <Typography component='h1' variant='h5'> Register | Sign Up </Typography> {/* Display's error messages while signing in */} - <Typography variant="body1" align="center" style={{ marginTop: '10px' }} color={auth.isRegistered ? 'secondary' : 'error'}> + <Typography variant='body1' align='center' style={{ marginTop: '10px' }} color={auth.isRegistered ? 'secondary' : 'error'}> {auth.regErrors} </Typography> <form className={classes.form} noValidate> <TextField - variant="outlined" - margin="normal" + variant='outlined' + margin='normal' required fullWidth - id="username" - label="Username" - name="username" - autoComplete="email" + id='username' + label='Username' + name='username' + autoComplete='email' value={username} onChange={e => setUsername(e.target.value)} autoFocus /> <TextField - variant="outlined" - margin="normal" + variant='outlined' + margin='normal' required fullWidth - id="email" - label="email" - name="email" - type="email" - autoComplete="email" + id='email' + label='email' + name='email' + type='email' + autoComplete='email' value={email} onChange={e => setEmail(e.target.value)} autoFocus /> <TextField - variant="outlined" - margin="normal" + variant='outlined' + margin='normal' required fullWidth - name="password" - label="Password" + name='password' + label='Password' InputProps={{ endAdornment: ( - <InputAdornment position="end"> + <InputAdornment position='end'> <IconButton - size="small" - aria-label="toggle password visibility" + size='small' + aria-label='toggle password visibility' onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword} > - {showPassword ? <Visibility fontSize="small" /> : <VisibilityOff fontSize="small" />} {/* Handle password visibility */} + {showPassword ? <Visibility fontSize='small' /> : <VisibilityOff fontSize='small' />} {/* Handle password visibility */} </IconButton> </InputAdornment> ) }} type={showPassword ? 'text' : 'password'} - id="password" + id='password' value={password} onChange={e => setPassword(e.target.value)} - autoComplete="current-password" + autoComplete='current-password' /> <FormControlLabel - control={<Checkbox checked={accept} onChange={e => setAccept(e.target.checked)} color="primary" />} - label="I accept the Terms of Use & Privacy Policy" + control={<Checkbox checked={accept} onChange={e => setAccept(e.target.checked)} color='primary' />} + label='I accept the Terms of Use & Privacy Policy' /> <Button fullWidth - variant="contained" - color="primary" + variant='contained' + color='primary' onClick={() => dispatch(signUp(email, username, password, history))} className={classes.submit} disabled={!accept} > Sign Up </Button> - <Typography variant="body2" color="secondary" align="center" >Or</Typography> + <Typography variant='body2' color='secondary' align='center'>Or</Typography> {/* Google oAuth Sign Up option */} <Button fullWidth - variant="outlined" - color="primary" + variant='outlined' + color='primary' onClick={handleGoogleSignup} className={classes.submit} > - <img alt="G" src={google} height="20" />  Sign Up With Google + <img alt='G' src={google} height='20' />  Sign Up With Google </Button> </form> <Grid container> - <Grid item style={{ margin: 'auto' }} > - <Link component={RouterLink} to="/login" variant="body2"> - {'Already have account? Login'} + <Grid item style={{ margin: 'auto' }}> + <Link component={RouterLink} to='/login' variant='body2'> + Already have account? Login </Link> </Grid> </Grid> @@ -183,7 +183,7 @@ export default function SignUp () { <Button fullWidth onClick={() => { window.open(homeURL, '_self') }} - color="default" + color='default' className={classes.submit} > Back to home diff --git a/blocks/eda-frontend/src/redux/actions/authActions.js b/blocks/eda-frontend/src/redux/actions/authActions.js index 3e94a0f0..28ba384e 100644 --- a/blocks/eda-frontend/src/redux/actions/authActions.js +++ b/blocks/eda-frontend/src/redux/actions/authActions.js @@ -94,7 +94,7 @@ export const login = (username, password, toUrl) => { } }) .catch((err) => { - var res = err.response + const res = err.response if (res.status === 400 || res.status === 403 || res.status === 401) { dispatch(loginError('Incorrect Username or Password.')) } else { @@ -132,7 +132,7 @@ export const signUp = (email, username, password, history) => (dispatch) => { } }) .catch((err) => { - var res = err.response + const res = err.response if (res.status === 400 || res.status === 403 || res.status === 401) { if (res.data.username !== undefined) { if (res.data.username[0].search('already') !== -1 && res.data.username[0].search('exists') !== -1) { dispatch(signUpError('Username Already Taken.')) } @@ -223,7 +223,7 @@ export const googleLogin = (host, toUrl) => { }) .then((res) => { console.log(res) }) .catch((err) => { - var res = err.response + const res = err.response if (res.status === 400 || res.status === 403 || res.status === 401) { dispatch(loginError('Incorrect Username or Password.')) } else { diff --git a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js index 13f01ea6..e2c2ec45 100644 --- a/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js +++ b/blocks/eda-frontend/src/redux/actions/saveSchematicActions.js @@ -135,7 +135,7 @@ export const setSchShared = (share) => (dispatch, getState) => { config.headers.Authorization = `Token ${token}` } - var isShared + let isShared if (share === true) { isShared = 'on' } else { @@ -156,7 +156,7 @@ export const setSchShared = (share) => (dispatch, getState) => { // Action for Loading Gallery schematics export const loadGallery = (Id) => (dispatch, getState) => { - var data = GallerySchSample[Id] + const data = GallerySchSample[Id] dispatch({ type: actions.LOAD_GALLERY, @@ -171,7 +171,7 @@ export const loadGallery = (Id) => (dispatch, getState) => { // Action for Loading local exported schematics export const openLocalSch = (obj) => (dispatch, getState) => { - var data = obj + const data = obj dispatch({ type: actions.CLEAR_DETAILS }) dispatch(setTitle('* ' + data.title)) diff --git a/blocks/eda-frontend/src/redux/reducers/authReducer.js b/blocks/eda-frontend/src/redux/reducers/authReducer.js index b4df18d5..cb605918 100644 --- a/blocks/eda-frontend/src/redux/reducers/authReducer.js +++ b/blocks/eda-frontend/src/redux/reducers/authReducer.js @@ -1,6 +1,6 @@ import * as actions from '../actions/actions' -const token = process.env.REACT_APP_NAME + '_token'; +const token = process.env.REACT_APP_NAME + '_token' const initialState = { token: localStorage.getItem(token), isAuthenticated: null, diff --git a/blocks/eda-frontend/src/utils/Api.js b/blocks/eda-frontend/src/utils/Api.js index bd30f173..cff6288e 100644 --- a/blocks/eda-frontend/src/utils/Api.js +++ b/blocks/eda-frontend/src/utils/Api.js @@ -5,5 +5,5 @@ export default axios.create({ baseURL: '/api/', responseType: 'json', xsrfCookieName: 'csrftoken', - withCredentials: true, + withCredentials: true }) diff --git a/blocks/eda-frontend/src/utils/GallerySchSample.js b/blocks/eda-frontend/src/utils/GallerySchSample.js index 8083ec3b..69f2c731 100644 --- a/blocks/eda-frontend/src/utils/GallerySchSample.js +++ b/blocks/eda-frontend/src/utils/GallerySchSample.js @@ -96,7 +96,7 @@ const GallerySchSample = [ description: 'A simple AFFICH diagram', media: 'AFFICH_Xcos_on_Cloud.png', shared: true - }, + } ] export default GallerySchSample |