scottk/OptimCloud-gw-ui
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git synced 2025-11-02 19:27:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Device configuration CSS cleanup

Browse Source
This commit is contained in:
bourquecharles
2021-06-30 15:16:06 -04:00
parent 80fa5e7d43
commit c83b8eb8aa
5 changed files with 119 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BlinkModal/index.js
View File

@@ -39,7 +39,7 @@ const BlinkModal = ({ show, toggleModal }) => {
const toggleNow = () => {
setIsNow(!isNow);
}
};
const setDate = (date) => {
if (date) {

11
src/components/CopyToClipboardButton/index.js
View File

@@ -5,28 +5,29 @@ import { cilClone } from '@coreui/icons';
import PropTypes from 'prop-types';
import { CButton, CPopover } from '@coreui/react';
const CopyToClipboardButton = ({content, size}) => {
const CopyToClipboardButton = ({ content, size }) => {
const { t } = useTranslation();
const [result, setResult] = useState('');
const copyToClipboard = () => {
navigator.clipboard.writeText(content);
setResult(t('common.copied'));
}
};
return (
<CPopover content={t('common.copy_to_clipboard')}>
<CButton onClick={copyToClipboard} size={size}>
<CIcon content={cilClone} />
{' '}{result || ''}
{' '}
{result || ''}
</CButton>
</CPopover>
);
}
};
CopyToClipboardButton.propTypes = {
content: PropTypes.string.isRequired,
size: PropTypes.string
size: PropTypes.string,
};
CopyToClipboardButton.defaultProps = {

4
src/components/DeviceActionCard/index.js
View File

@@ -78,7 +78,9 @@ const DeviceActions = ({ selectedDeviceId }) => {
return (
<CCard>
<CCardHeader><div className="text-value-lg">{t('actions.title')}</div></CCardHeader>
<CCardHeader>
<div className="text-value-lg">{t('actions.title')}</div>
</CCardHeader>
<CCardBody>
<CRow>
<CCol>

68
src/components/DeviceConfiguration/index.js
View File

@@ -4,10 +4,8 @@ import {
CCard,
CCardHeader,
CCardBody,
CFormGroup,
CCol,
CLabel,
CForm,
CInput,
CCollapse,
CCardFooter,
@@ -66,7 +64,9 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
<CCard>
<CCardHeader>
<CRow>
<CCol><div className="text-value-lg">{t('configuration.title')}</div></CCol>
<CCol>
<div className="text-value-lg">{t('configuration.title')}</div>
</CCol>
<CCol>
<div className={styles.alignRight}>
<CPopover content={t('configuration.view_json')}>
@@ -79,111 +79,108 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
</CRow>
</CCardHeader>
<CCardBody>
<CForm
action=""
method="post"
encType="multipart/form-data"
className="form-horizontal"
>
<CFormGroup row>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('common.uuid')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{device.UUID}
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('common.serial_number')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{device.serialNumber}
<CopyToClipboardButton size="sm" content={device.serialNumber}/>
<CopyToClipboardButton size="sm" content={device.serialNumber} />
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.type')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{device.deviceType}
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.last_configuration_change')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{prettyDate(device.lastConfigurationChange)}
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('common.mac')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.macAddress}
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.created')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{prettyDate(device.createdTimestamp)}
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.last_configuration_download')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{prettyDate(device.lastConfigurationDownload)}
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3" className={styles.topPadding}>
<CLabel>{t('configuration.device_password')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{device.devicePassword === '' ? 'openwifi' : device.devicePassword}
<CopyToClipboardButton size="sm" content={device?.devicePassword === '' ? 'openwifi' : device.devicePassword}/>
<CopyToClipboardButton
size="sm"
content={device?.devicePassword === '' ? 'openwifi' : device.devicePassword}
/>
</CCol>
</CFormGroup>
</CRow>
<CCollapse show={collapse}>
<CFormGroup row>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('common.manufacturer')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.manufacturer}
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel htmlFor="text-input">{t('configuration.notes')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
<CInput id="text-input" name="text-input" placeholder={device.notes} />
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.owner')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.owner}
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.location')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.location}
</CCol>
</CFormGroup>
</CRow>
</CCollapse>
<CCardFooter>
<CButton show={collapse ? 'true' : 'false'} onClick={toggle} block>
@@ -194,7 +191,6 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
/>
</CButton>
</CCardFooter>
</CForm>
</CCardBody>
</CCard>
<DeviceConfigurationModal show={showModal} toggle={toggleModal} configuration={device} />

5
src/components/DeviceConfiguration/index.module.scss
View File

@@ -13,3 +13,8 @@
.topPadding {
padding-top: 5px;
}
.spacedRow {
margin-top: 5px;
margin-bottom: 5px;
}