device.view.tsx

import { faGripVertical, faPlus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GridLayout } from '@layout/grid.layout/grid.layout';
import UpdateIndicator from '@layout/grid.layout/update-inidicator.layout/update-indicator.layout';
import { JsonViewer } from '@shared/components/json_viewer/view/json_viewer.view';
import { Category, CategoryType } from '@shared/types/category.type';
import { useRef } from 'react';
import { Button, Col, Container, Form, Row } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { useDeviceViewModel } from '../view_model/device.viewmodel';
import './device.scss';
import { DeviceList } from './device.view.table';

const DeviceView = () => {
    const { t } = useTranslation('common');
    const searchRef = useRef<HTMLInputElement>(null);
    const { jsonYang, selectedDevice } = useDeviceViewModel();

    return (
        <div className='m-4 pt-4'>
            <GridLayout>
                <>
                    <div key="device-list">
                        <Container className='c-box hoverable h-100'>
                            <UpdateIndicator
                                category={Category.DEVICE as CategoryType}
                                updateInterval={15000}
                            />
                            <FontAwesomeIcon icon={faGripVertical} className="drag-handle" />
                            <Row>
                                <Col sm={12}>
                                    <h3 className='c-box-title'>{t('device.title')}</h3>
                                </Col>
                            </Row>
                            <Row>
                                <Col xs={12} 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 xs={12} sm={{ span: 4, offset: 2 }} className='pt-2'>
                                    <Button variant='primary' className='float-end'><FontAwesomeIcon icon={faPlus} className='me-1' />{t('device.add_device_button')}</Button>
                                </Col>
                            </Row>

                            <Row className='align-items-start'>
                                <Col sm={12} className='pt-2'>
                                    {DeviceList({ searchRef })}
                                </Col>
                            </Row>
                        </Container>
                    </div>

                    <div key="device-details">
                        <Container className='c-box hoverable h-100'>
                            <UpdateIndicator
                                category={Category.TAB as CategoryType}
                                updateInterval={5000}
                            />
                            <FontAwesomeIcon icon={faGripVertical} className="drag-handle" />
                            <Row>
                                <Col xs={12}>
                                    <h3 className='c-box-title'>{t('device.tabs.yang_model.title')} <small>{selectedDevice?.device.name}</small></h3>
                                </Col>
                            </Row>
                            <Row className='align-items-start'>
                                <Col xs={12}>
                                    {jsonYang &&
                                        <JsonViewer json={jsonYang} />
                                    }
                                </Col>
                            </Row>
                        </Container>
                    </div>
                </>
            </GridLayout>
        </div>
    );
};

export default DeviceView;