Skip to content

Commit

Permalink
Merge pull request #255 from ajinkyapande98/latest-all-rig-v1-0.4
Browse files Browse the repository at this point in the history 
 Issueid #215112 feat: ALL Test Rig UI Fixes [React]
  • Loading branch information
@gouravmore
gouravmore authored Mar 8, 2024
2 parents e7f8b71 + ca50524 commit 798dae1
Show file tree
Hide file tree
Showing 12 changed files with 1,165 additions and 804 deletions.
114 changes: 69 additions & 45 deletions src/components/AppDrawer/AppDrawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,15 @@ import {
EditablePreview,
EditableInput,
Switch,
} from '@chakra-ui/react'
useMediaQuery,
} from '@chakra-ui/react';
import React from 'react';
import Children from '../../assests/Images/children-thumbnail.png'
import Children from '../../assests/Images/children-thumbnail.png';
import ConfigForm from '../../config/ConfigForm';
import { useNavigate } from 'react-router-dom';
import { fetchPointerApi } from '../../utils/api/PointerApi';

function AppDrawer({forceRerender, setForceRerender}) {
function AppDrawer({ forceRerender, setForceRerender }) {
const navigate = useNavigate()
const { isOpen, onOpen, onClose } = useDisclosure()
const btnRef = React.useRef()
Expand All @@ -51,6 +52,7 @@ function AppDrawer({forceRerender, setForceRerender}) {
const [level, setLevel] = React.useState('');
const [isDiscoveryEnabled, setDiscoveryStatus] = React.useState(localStorage.getItem('userCurrentLevel') === 'm0' ? true : false );
const [isAudioPreprocessingEnabled, setAudioPreprocessingStatus] = React.useState(false);
const [isLargerThan865] = useMediaQuery('(min-width: 865px)');
const [lessonRec,setLessonRec] = React.useState('discoverylist')
const [lesson,setLesson] = React.useState(0)

Expand Down Expand Up @@ -229,72 +231,93 @@ function AppDrawer({forceRerender, setForceRerender}) {
};
return (
<>
<Button className='btn btn-success'
<Button
className="btn btn-success"
variant={'solid'}
colorScheme={'teal'}
onClick={onOpen}
mr={4} ref={btnRef}
rightIcon={<Avatar
size={'sm'}
src={
Children
}
/>}
mr={4}
ref={btnRef}
rightIcon={<Avatar size={'sm'} src={Children} />}
>
My Profile : {localStorage.getItem('virtualID')}
{isLargerThan865
? `My Profile : ${localStorage.getItem('virtualID')}`
: `P : ${localStorage.getItem('virtualID')}`}
</Button>
<Drawer
isOpen={isOpen}
placement='right'
placement="right"
onClose={onClose}
size={'md'}
finalFocusRef={btnRef}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton top={'-2'} size='sm' />
<DrawerHeader borderBottomWidth='1px'>Profile</DrawerHeader>
<DrawerCloseButton top={'-2'} size="sm" />
<DrawerHeader borderBottomWidth="1px">Profile</DrawerHeader>

<DrawerBody>
<Stack spacing='4'>
<Text textTransform={'capitalize'} fontSize='lg' fontWeight='bold'>
Hello, {localStorage.getItem('virtualID')}
[{level}]
<Stack spacing="4">
<Text
textTransform={'capitalize'}
fontSize="lg"
fontWeight="bold"
>
Hello, {localStorage.getItem('virtualID')}[{level}]
{/* <Editable defaultValue={level}>
<EditablePreview />
<EditableInput onChange={(event) => setLevel(event.target.value)}/>
</Editable> */}
</Text>
<Divider />
<FormControl>
<FormLabel><Text as={'b'} >Session ID</Text></FormLabel>
<Input variant='filled' value={localStorage.getItem('virtualStorySessionID')} isReadOnly />
<FormLabel>
<Text as={'b'}>Session ID</Text>
</FormLabel>
<Input
variant="filled"
value={localStorage.getItem('virtualStorySessionID')}
isReadOnly
/>
</FormControl>
<FormControl>
<FormLabel><Text as={'b'} >Language </Text></FormLabel>
<FormLabel>
<Text as={'b'}>Language </Text>
</FormLabel>
<RadioGroup onChange={setValue} value={value}>
<HStack spacing='4'>
<Radio value='en'>English</Radio>
<Radio value='kn'>ಕನ್ನಡ</Radio>
<Radio value='ta'>தமிழ்</Radio>
<HStack spacing="4">
<Radio value="en">English</Radio>
<Radio value="kn">ಕನ್ನಡ</Radio>
<Radio value="ta">தமிழ்</Radio>
</HStack>
</RadioGroup>
</FormControl>
<Divider />
<FormControl>
<FormLabel><Text as={'b'} >Audio Preprocessing </Text></FormLabel>
<HStack spacing='4' paddingBottom={4}>
<Text>Audio Preprocessing {isAudioPreprocessingEnabled ? 'Enabled' : 'Disabled'}</Text>
<FormLabel>
<Text as={'b'}>Audio Preprocessing </Text>
</FormLabel>
<HStack spacing="4" paddingBottom={4}>
<Text>
Audio Preprocessing{' '}
{isAudioPreprocessingEnabled ? 'Enabled' : 'Disabled'}
</Text>
<Switch
isChecked={isAudioPreprocessingEnabled}
onChange={() => setAudioPreprocessingStatus(!isAudioPreprocessingEnabled)}
onChange={() =>
setAudioPreprocessingStatus(!isAudioPreprocessingEnabled)
}
colorScheme="teal"
size="md"
/>
</HStack>
<FormLabel><Text as={'b'} >Discovery </Text></FormLabel>
<HStack spacing='4' paddingBottom={4}>
<Text>Discovery {isDiscoveryEnabled ? 'Enabled' : 'Disabled'}</Text>
<FormLabel>
<Text as={'b'}>Discovery </Text>
</FormLabel>
<HStack spacing="4" paddingBottom={4}>
<Text>
Discovery {isDiscoveryEnabled ? 'Enabled' : 'Disabled'}
</Text>
<Switch
isChecked={isDiscoveryEnabled}
onChange={() => setDiscoveryStatus(!isDiscoveryEnabled)}
Expand All @@ -303,19 +326,19 @@ function AppDrawer({forceRerender, setForceRerender}) {
/>
</HStack>
<RadioGroup onChange={setDiscoveryLimit} value={discoveryLimit}>
<HStack spacing='4'>
<HStack spacing='4'>
<span>Limit:</span>
<Radio value='5'>5</Radio>
<Radio value='5'>5</Radio>
<Radio value='10'>10</Radio>
<Radio value='15'>15</Radio>
</HStack>
</RadioGroup>
</FormControl>
<Divider />
<FormControl>
<FormLabel><Text as={'b'} >Validation </Text></FormLabel>
<FormLabel><Text as={'b'} >Validation </Text></FormLabel>
<RadioGroup onChange={setValidateLimit} value={validateLimit}>
<HStack spacing='4'>
<HStack spacing='4'>
<span>Limit:</span>
<Radio value='5'>5</Radio>
<Radio value='10'>10</Radio>
Expand All @@ -328,7 +351,7 @@ function AppDrawer({forceRerender, setForceRerender}) {
<HStack>
<div>Session ID:</div>
<div>
<Select placeholder='Select option' value={validationSession} onChange={(event) => setValidationSession(event.target.value)}>
<Select placeholder='Select option' value={validationSession} onChange={(event) => setValidationSession(event.target.value)}>
{PreviousUserSessions?.map((session, ind) =>
<option key={ind} value={session}>{session}</option>
)}
Expand All @@ -338,7 +361,7 @@ function AppDrawer({forceRerender, setForceRerender}) {
</FormControl>
<Divider />
<FormControl>
<FormLabel><Text as={'b'} > Practice </Text></FormLabel>
<FormLabel><Text as={'b'} > Practice </Text></FormLabel>
<RadioGroup onChange={setContentPracticeLimit} value={contentPracticeLimit}>
<HStack spacing='4'>
<span>Content Limit:</span>
Expand All @@ -350,7 +373,7 @@ function AppDrawer({forceRerender, setForceRerender}) {
</FormControl>

<FormControl>
<RadioGroup onChange={setContentTargetLimit} value={contentTargetLimit}>
<RadioGroup onChange={setContentTargetLimit} value={contentTargetLimit}>
<HStack spacing='4'>
<span>Target Limit:</span>
<Radio value='5'>5</Radio>
Expand All @@ -371,7 +394,7 @@ function AppDrawer({forceRerender, setForceRerender}) {
<AccordionItem>
<h2>
<AccordionButton>
<Box as="span" flex='1' textAlign='left'>
<Box as="span" flex='1' textAlign='left'>
<Text as={'b'}>Practice config </Text>
</Box>
<AccordionIcon />
Expand All @@ -386,15 +409,16 @@ function AppDrawer({forceRerender, setForceRerender}) {
</Stack>
</DrawerBody>

<DrawerFooter borderTopWidth='1px'>
<Button variant='outline' mr={3} onClick={onClose}>
<DrawerFooter borderTopWidth="1px">
<Button variant="outline" mr={3} onClick={onClose}>
Cancel
</Button>
<Button onClick={() => handleSave()} colorScheme='blue'>Save</Button>
<Button onClick={() => handleSave()} colorScheme="blue">
Save
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>

</>
)
}
Expand Down
Loading

0 comments on commit 798dae1

Please sign in to comment.