128 lines
6.4 KiB
JavaScript
128 lines
6.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import Accordion from '@mui/material/Accordion';
|
|
import AccordionDetails from '@mui/material/AccordionDetails';
|
|
import AccordionSummary from '@mui/material/AccordionSummary';
|
|
import Typography from '@mui/material/Typography';
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
|
|
import './Help.css';
|
|
|
|
function Help({ url, show }) {
|
|
const [startDate, setStartDate] = useState("");
|
|
const [endDate, setEndDate] = useState("");
|
|
|
|
const [expanded, setExpanded] = useState(false);
|
|
|
|
const handleChange =
|
|
(panel) => (event, isExpanded) => {
|
|
setExpanded(isExpanded ? panel : false);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls="panel1bh-content"
|
|
id="panel1bh-header"
|
|
>
|
|
<Typography sx={{ width: '33%', flexShrink: 0 }}>
|
|
Auto Analysis
|
|
</Typography>
|
|
<Typography sx={{ color: 'text.secondary' }}>Auto Analysis of device data with dye and HB</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
<div className='step-title'>Step 1:</div>
|
|
<div className='step-description'>Click on the start date tab and select the necessary date. Repeat the same process on the end date tab as well.</div>
|
|
<img className="help-image" src={require('../assets/auto_analysis_help-1.png')} alt='icon'></img>
|
|
|
|
<div className='step-title'>Step 2:</div>
|
|
<div className='step-description'>Select an end date, it has to be at least one date post the start date.</div>
|
|
<img className="help-image" src={require('../assets/auto_analysis_help-2.png')} alt='icon'></img>
|
|
|
|
<div className='step-title'>Step 3:</div>
|
|
<div className='step-description'>Click on the Download Excel button and wait for the document to download.</div>
|
|
<img className="help-image" src={require('../assets/auto_analysis_help-3.png')} alt='icon'></img>
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
|
|
<Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls="panel2bh-content"
|
|
id="panel2bh-header"
|
|
>
|
|
<Typography sx={{ width: '33%', flexShrink: 0 }}>Raw Data</Typography>
|
|
<Typography sx={{ color: 'text.secondary' }}>
|
|
Download raw data
|
|
</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
<div className='step-title'>Step 1:</div>
|
|
<div className='step-description'>Click on the <strong>start date</strong> tab and select the necessary date. Repeat the same process on the <strong>end date</strong> tab as well.</div>
|
|
<img className="help-image" src={require('../assets/raw_data_help_1.png')} alt='icon'></img>
|
|
<img className="help-image" src={require('../assets/raw_data_help_2.png')} alt='icon'></img>
|
|
|
|
<div className='step-title'>Step 2:</div>
|
|
<div className='step-description'>Click on the <strong>Download Excel</strong> button and wait for the document to download.</div>
|
|
<img className="help-image" src={require('../assets/raw_data_help_3.png')} alt='icon'></img>
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
|
|
<Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls="panel3bh-content"
|
|
id="panel3bh-header"
|
|
>
|
|
<Typography sx={{ width: '33%', flexShrink: 0 }}>
|
|
Registration
|
|
</Typography>
|
|
<Typography sx={{ color: 'text.secondary' }}>
|
|
Create and clear entries for taking readings in devices
|
|
</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
|
|
<div className='step-title'>Step 1:</div>
|
|
<div className='step-description'>Enter the sample or solution name in the <strong>name</strong> tab with appropriate format given below.</div>
|
|
<img className="help-image" src={require('../assets/registration_help_1.png')} alt='icon'></img>
|
|
|
|
|
|
<div className='step-title'>Step 2:</div>
|
|
<div className='step-description'>Click on the create button to get an ID and you will receive a confirmation message.
|
|
|
|
If you wish to clear the generated IDs click on the clear button and you will receive a confirmation message.</div>
|
|
<img className="help-image" src={require('../assets/raw_data_help_2.png')} alt='icon'></img>
|
|
<img className="help-image" src={require('../assets/raw_data_help_3.png')} alt='icon'></img>
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
|
|
|
|
{/* <Accordion expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls="panel4bh-content"
|
|
id="panel4bh-header"
|
|
>
|
|
<Typography sx={{ width: '33%', flexShrink: 0 }}>Personal data</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Typography>
|
|
Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit
|
|
amet egestas eros, vitae egestas augue. Duis vel est augue.
|
|
</Typography>
|
|
</AccordionDetails>
|
|
</Accordion> */}
|
|
</div>
|
|
);
|
|
}
|
|
export default Help; |