scottk/OptimCloud-gw-ui
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git synced 2025-11-01 02:37: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

202
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,122 +79,118 @@ 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>
</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} />
</CCol>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.type')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{device.deviceType}
</CCol>
</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>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('common.mac')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.macAddress}
</CCol>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.created')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{prettyDate(device.createdTimestamp)}
</CCol>
</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>
</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}
/>
</CCol>
</CRow>
<CCollapse show={collapse}>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('common.uuid')} : </CLabel>
<CLabel>{t('common.manufacturer')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.UUID}
{device.manufacturer}
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('common.serial_number')} : </CLabel>
<CLabel htmlFor="text-input">{t('configuration.notes')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.serialNumber}
<CopyToClipboardButton size="sm" content={device.serialNumber}/>
<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.type')} : </CLabel>
<CLabel>{t('configuration.owner')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.deviceType}
{device.owner}
</CCol>
</CFormGroup>
<CFormGroup row>
</CRow>
<CRow className={styles.spacedRow}>
<CCol md="3">
<CLabel>{t('configuration.last_configuration_change')} : </CLabel>
<CLabel>{t('configuration.location')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{prettyDate(device.lastConfigurationChange)}
{device.location}
</CCol>
</CFormGroup>
<CFormGroup row>
<CCol md="3">
<CLabel>{t('common.mac')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.macAddress}
</CCol>
</CFormGroup>
<CFormGroup row>
<CCol md="3">
<CLabel>{t('configuration.created')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{prettyDate(device.createdTimestamp)}
</CCol>
</CFormGroup>
<CFormGroup row>
<CCol md="3">
<CLabel>{t('configuration.last_configuration_download')} : </CLabel>
</CCol>
<CCol xs="12" md="9">
{prettyDate(device.lastConfigurationDownload)}
</CCol>
</CFormGroup>
<CFormGroup row>
<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}/>
</CCol>
</CFormGroup>
<CCollapse show={collapse}>
<CFormGroup row>
<CCol md="3">
<CLabel>{t('common.manufacturer')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.manufacturer}
</CCol>
</CFormGroup>
<CFormGroup row>
<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>
<CCol md="3">
<CLabel>{t('configuration.owner')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.owner}
</CCol>
</CFormGroup>
<CFormGroup row>
<CCol md="3">
<CLabel>{t('configuration.location')} :</CLabel>
</CCol>
<CCol xs="12" md="9">
{device.location}
</CCol>
</CFormGroup>
</CCollapse>
<CCardFooter>
<CButton show={collapse ? 'true' : 'false'} onClick={toggle} block>
<CIcon
className={styles.blackIcon}
name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
size="lg"
/>
</CButton>
</CCardFooter>
</CForm>
</CRow>
</CCollapse>
<CCardFooter>
<CButton show={collapse ? 'true' : 'false'} onClick={toggle} block>
<CIcon
className={styles.blackIcon}
name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
size="lg"
/>
</CButton>
</CCardFooter>
</CCardBody>
</CCard>
<DeviceConfigurationModal show={showModal} toggle={toggleModal} configuration={device} />