vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: align log w.r.t right panel

Browse Source
This commit is contained in:
karishmas6
2024-10-19 09:41:49 +05:30
parent a8aa3846fc
commit 610dd2f209
1 changed files with 99 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/components/molecules/InterpretationLog.tsx
View File

@@ -3,7 +3,7 @@ import SwipeableDrawer from '@mui/material/SwipeableDrawer';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import Radio from '@mui/material/Radio'; import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup'; import RadioGroup from '@mui/material/RadioGroup';
import { Button, TextField } from '@mui/material'; import { Button, TextField, Grid } from '@mui/material';
import FormControlLabel from '@mui/material/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl'; import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel'; import FormLabel from '@mui/material/FormLabel';
@@ -106,108 +106,111 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
const columns = tableData.length > 0 ? Object.keys(tableData[0]) : []; const columns = tableData.length > 0 ? Object.keys(tableData[0]) : [];
return ( return (
<div> <Grid container>
<button <Grid item xs={12} md={9} lg={9}>
onClick={toggleDrawer(true)} <button
style={{ onClick={toggleDrawer(true)}
color: 'white', style={{
position: 'fixed', color: 'white',
background: '#101828', position: 'fixed',
border: 'none', background: '#ff00c3',
padding: '30px 20px', border: 'none',
width: '100%', padding: '30px 20px',
textAlign: 'left', width: 'calc(100% - 25%)',
bottom: 0, textAlign: 'left',
}}> bottom: 0,
Interpretation Log overflow: 'hidden',
</button> }}>
<SwipeableDrawer Interpretation Log
anchor="bottom" </button>
open={isOpen} <SwipeableDrawer
onClose={toggleDrawer(false)} anchor="bottom"
onOpen={toggleDrawer(true)} open={isOpen}
PaperProps={{ onClose={toggleDrawer(false)}
sx: { onOpen={toggleDrawer(true)}
background: 'white', PaperProps={{
color: 'black', sx: {
background: 'white',
color: 'black',
padding: '10px',
height: 500,
width: width - 10,
display: 'flex'
}
}}
>
<Typography variant="h6" gutterBottom>
<StorageIcon /> Output Data Preview
</Typography>
<div style={{
height: '50vh',
overflow: 'none',
padding: '10px', padding: '10px',
height: 500, }}>
width: width - 10, {/* <Highlight className="javascript">
display: 'flex'
}
}}
>
<Typography variant="h6" gutterBottom>
<StorageIcon /> Output Data Preview
</Typography>
<div style={{
height: '50vh',
overflow: 'none',
padding: '10px',
}}>
{/* <Highlight className="javascript">
{log} {log}
</Highlight> */} </Highlight> */}
{tableData.length > 0 && ( {tableData.length > 0 && (
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table"> <Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table">
<TableHead> <TableHead>
<TableRow> <TableRow>
{columns.map((column) => (
<TableCell key={column}>{column}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{tableData.map((row, index) => (
<TableRow key={index}>
{columns.map((column) => ( {columns.map((column) => (
<TableCell key={column}>{row[column]}</TableCell> <TableCell key={column}>{column}</TableCell>
))} ))}
</TableRow> </TableRow>
))} </TableHead>
</TableBody> <TableBody>
</Table> {tableData.map((row, index) => (
</TableContainer> <TableRow key={index}>
)} {columns.map((column) => (
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '200px' }}> <TableCell key={column}>{row[column]}</TableCell>
<FormControl> ))}
<FormLabel> </TableRow>
<h4>What is the maximum number of rows you want to extract?</h4> ))}
</FormLabel> </TableBody>
<RadioGroup row value={selectedOption} onChange={handleRadioChange} sx={{ width: '500px' }}> </Table>
<FormControlLabel value="10" control={<Radio />} label="10" /> </TableContainer>
<FormControlLabel value="100" control={<Radio />} label="100" /> )}
<FormControlLabel value="custom" control={<Radio />} label="Custom" /> <div style={{ display: 'flex', alignItems: 'flex-start', gap: '200px' }}>
{selectedOption === 'custom' && ( <FormControl>
<TextField <FormLabel>
type="number" <h4>What is the maximum number of rows you want to extract?</h4>
value={customValue} </FormLabel>
onChange={handleCustomValueChange} <RadioGroup row value={selectedOption} onChange={handleRadioChange} sx={{ width: '500px' }}>
placeholder="Enter number" <FormControlLabel value="10" control={<Radio />} label="10" />
sx={{ <FormControlLabel value="100" control={<Radio />} label="100" />
marginLeft: '10px', <FormControlLabel value="custom" control={<Radio />} label="Custom" />
marginTop: '-3px', {selectedOption === 'custom' && (
'& input': { <TextField
padding: '10px', type="number"
}, value={customValue}
}} onChange={handleCustomValueChange}
/> placeholder="Enter number"
)} sx={{
</RadioGroup> marginLeft: '10px',
</FormControl> marginTop: '-3px',
<div style={{ paddingBottom: '40px' }}> '& input': {
<h4>How can we find the next item?</h4> padding: '10px',
<p>Select and review the pagination setting this webpage is using</p> },
<Button variant="outlined"> }}
Select Pagination Setting />
</Button> )}
</RadioGroup>
</FormControl>
<div style={{ paddingBottom: '40px' }}>
<h4>How can we find the next item?</h4>
<p>Select and review the pagination setting this webpage is using</p>
<Button variant="outlined">
Select Pagination Setting
</Button>
</div>
</div> </div>
<div style={{ float: "left", clear: "both" }}
ref={logEndRef} />
</div> </div>
<div style={{ float: "left", clear: "both" }} </SwipeableDrawer>
ref={logEndRef} /> </Grid>
</div> </Grid>
</SwipeableDrawer>
</div>
); );
} }