Skip to content
Snippets Groups Projects
device.view.tsx 3.24 KiB
Newer Older
  • Learn to ignore specific revisions
  • import { useRef } from 'react';
    
    Matthias Feyll's avatar
    Matthias Feyll committed
    import { Button, Col, Container, Form, Nav, NavLink, Row } from 'react-bootstrap';
    
    import { useTranslation } from 'react-i18next';
    
    import { useDeviceViewModel } from '../view_model/device.viewmodel';
    
    import './device.scss';
    import { DeviceViewTable } from './device.view.table';
    
    Matthias Feyll's avatar
    Matthias Feyll committed
    import { DeviceViewTabs, DeviceViewTabValues } from './device.view.tabs';
    
        const { t } = useTranslation('common');
        const searchRef = useRef<HTMLInputElement>(null);
        const { activeTab, setActiveTab, handleActiveTabLink } = useDeviceViewModel();
    
                <Container fluid>
    
                        <Col sm={5}>
                            <Container className='bg-white rounded c-box'>
                                <Row>
                                    <Col sm={12} className='mt-4'><h3 className='text-black-50'>{t('device.title')}</h3></Col>
                                </Row>
    
                                <Row className='align-items-center'>
                                    <Col sm={6}>
                                        <Form.Group controlId='device.search' className='p-0 mx-1 pt-2'>
                                            <Form.Control type="text" placeholder={t('device.search.placeholder')} ref={searchRef} />
                                        </Form.Group>
                                    </Col>
                                    <Col sm={{ span: 3, offset: 3 }} className='pt-2'>
                                        <Button variant='primary' className='w-100 my-auto'>{t('device.add_device_button')}</Button>
                                    </Col>
                                </Row>
    
                                <Row className='align-items-start'>
                                    <Col sm={12} className='pt-2'>
                                        {DeviceViewTable(searchRef)}
                                    </Col>
                                </Row>
                            </Container>
    
                        <Col sm={7}>
                            <Container className='bg-white rounded c-box'>
                                <Row>
                                    <Col sm={12} className='mt-4'>
                                        <Nav className='justify-content-around'>
                                            <NavLink className={handleActiveTabLink(DeviceViewTabValues.METADATA) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.METADATA)}>{t('device.tabs.metadata.title')}</NavLink>
                                            <NavLink className={handleActiveTabLink(DeviceViewTabValues.YANGMODEL) + " tab-links"} onClick={() => setActiveTab(DeviceViewTabValues.YANGMODEL)}>{t('device.tabs.yang_model.title')}</NavLink>
                                        </Nav>
                                    </Col>
                                </Row>
    
                                <Row className='align-items-start'>
                                    <Col sm={12} className='pt-2'>
                                        {DeviceViewTabs(activeTab)}
                                    </Col>
                                </Row>
                            </Container>
    
                        </Col>
                    </Row>
                </Container>
            </div>
        )
    }
    
    export default DeviceView