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

Created .scss files instead of inline

Browse Source
This commit is contained in:
bourquecharles
2021-06-16 15:47:48 -04:00
parent c09be52604
commit ad9a0bb2d4
24 changed files with 147 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ConfirmModal/ConfirmModal.js → src/components/ConfirmModal/index.js
View File

@@ -11,6 +11,7 @@ import {
CBadge,
} from '@coreui/react';
import PropTypes from 'prop-types';
import styles from './index.module.scss';
const ConfirmModal = ({ show, toggle, action }) => {
const { t } = useTranslation();
@@ -62,7 +63,7 @@ const ConfirmModal = ({ show, toggle, action }) => {
}, [show]);
return (
<CModal style={{ color: '#3c4b64' }} show={show} onClose={toggle}>
<CModal className={styles.modal} show={show} onClose={toggle}>
<CModalHeader closeButton>
<CModalTitle>{t('delete_command.title')}</CModalTitle>
</CModalHeader>

3
src/components/ConfirmModal/index.module.scss Normal file
View File

@@ -0,0 +1,3 @@
.modal {
color: #3c4b64;
}

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

@@ -21,7 +21,7 @@ import { prettyDate, dateToUnix } from 'utils/helper';
import axiosInstance from 'utils/axiosInstance';
import { getToken } from 'utils/authHelper';
import eventBus from 'utils/eventBus';
import ConfirmModal from 'components/ConfirmModal/ConfirmModal';
import ConfirmModal from 'components/ConfirmModal';
import LoadingButton from 'components/LoadingButton';
import WifiScanResultModalWidget from 'components/WifiScanResultModal';
import DeviceCommandsCollapse from './DeviceCommandsCollapse';

3
src/components/DeviceConfiguration/DeviceConfigurationModal.js → src/components/DeviceConfiguration/containers/DeviceConfigurationModal/index.js
View File

@@ -10,13 +10,14 @@ import {
} from '@coreui/react';
import PropTypes from 'prop-types';
import { Translation } from 'react-i18next';
import styles from './index.module.scss';
const DeviceConfigurationModal = ({ show, toggle, configuration }) => (
<Translation>
{(t) => (
<CModal size="lg" show={show} onClose={toggle}>
<CModalHeader closeButton>
<CModalTitle style={{ color: 'black' }}>{t('configuration.title')}</CModalTitle>
<CModalTitle className={styles.modalTitle}>{t('configuration.title')}</CModalTitle>
</CModalHeader>
<CModalBody>
<pre className="ignore">{JSON.stringify(configuration, null, 4)}</pre>

3
src/components/DeviceConfiguration/containers/DeviceConfigurationModal/index.module.scss Normal file
View File

@@ -0,0 +1,3 @@
.modalTitle {
color: black;
}

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

@@ -21,7 +21,8 @@ import { cilWindowMaximize } from '@coreui/icons';
import { prettyDate } from 'utils/helper';
import axiosInstance from 'utils/axiosInstance';
import { getToken } from 'utils/authHelper';
import DeviceConfigurationModal from './DeviceConfigurationModal';
import DeviceConfigurationModal from './containers/DeviceConfigurationModal/index';
import styles from './index.module.scss';
const DeviceConfiguration = ({ selectedDeviceId }) => {
const { t } = useTranslation();
@@ -66,7 +67,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
<CRow>
<CCol>{t('configuration.details')}</CCol>
<CCol>
<div style={{ float: 'right' }}>
<div className={styles.alignRight}>
<CPopover content={t('configuration.view_json')}>
<CButton color="secondary" onClick={toggleModal} size="sm">
<CIcon content={cilWindowMaximize} />
@@ -176,7 +177,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
<CCardFooter>
<CButton show={collapse ? 'true' : 'false'} onClick={toggle} block>
<CIcon
style={{ color: 'black' }}
className={styles.blackIcon}
name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
size="lg"
/>

7
src/components/DeviceConfiguration/index.module.scss Normal file
View File

@@ -0,0 +1,7 @@
.alignRight {
float: right;
}
.blackIcon {
color: black;
}

15
src/components/DeviceHealth/index.js
View File

@@ -19,6 +19,7 @@ import { prettyDate, dateToUnix } from 'utils/helper';
import axiosInstance from 'utils/axiosInstance';
import { getToken } from 'utils/authHelper';
import LoadingButton from 'components/LoadingButton';
import styles from './index.module.scss';
const DeviceHealth = ({ selectedDeviceId }) => {
const { t } = useTranslation();
@@ -175,10 +176,10 @@ const DeviceHealth = ({ selectedDeviceId }) => {
color={barColor}
inverse="true"
footerSlot={
<div style={{ padding: '20px' }}>
<CProgress style={{ marginBottom: '20px' }} color="white" value={sanityLevel ?? 0} />
<div className={styles.footer}>
<CProgress className={styles.progressBar} color="white" value={sanityLevel ?? 0} />
<CCollapse show={collapse}>
<CRow style={{ marginBottom: '10px' }}>
<CRow className={styles.spacedRow}>
<CCol>
{t('common.from')}:
<DatePicker includeTime onChange={(date) => modifyStart(date)} />
@@ -189,11 +190,11 @@ const DeviceHealth = ({ selectedDeviceId }) => {
</CCol>
</CRow>
<CCard>
<div className="overflow-auto" style={{ height: '250px' }}>
<div className={[styles.scrollable, "overflow-auto"].join(" ")}>
<CDataTable
items={healthChecks ?? []}
fields={columns}
style={{ color: 'white' }}
className={styles.dataTable}
loading={loading}
border
sorterValue={{ column: 'recorded', desc: 'true' }}
@@ -230,7 +231,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
),
}}
/>
<CRow style={{ marginBottom: '1%', marginRight: '1%' }}>
<CRow className={styles.loadMoreRow}>
{showLoadingMore && (
<LoadingButton
label={t('common.view_more')}
@@ -247,7 +248,7 @@ const DeviceHealth = ({ selectedDeviceId }) => {
<CButton show={collapse ? 'true' : 'false'} color="transparent" onClick={toggle} block>
<CIcon
name={collapse ? 'cilChevronTop' : 'cilChevronBottom'}
style={{ color: 'white' }}
className={styles.icon}
size="lg"
/>
</CButton>

27
src/components/DeviceHealth/index.module.scss Normal file
View File

@@ -0,0 +1,27 @@
.icon {
color: white;
}
.dataTable {
color: white;
}
.footer {
padding: 20px;
}
.progressBar {
margin-bottom: 20px;
}
.spacedRow {
margin-bottom: 10px;
}
.loadMoreRow {
margin-bottom: 1%;
}
.scrollable {
height: 250px;
}

29
src/components/DeviceListTable/index.js
View File

@@ -24,6 +24,7 @@ import meshIcon from 'assets/icons/Mesh.png';
import apIcon from 'assets/icons/AP.png';
import internetSwitch from 'assets/icons/Switch.png';
import iotIcon from 'assets/icons/IotIcon.png';
import styles from './index.module.scss';
const DeviceList = () => {
const { t } = useTranslation();
@@ -194,16 +195,16 @@ const DeviceListDisplay = ({
const getDeviceIcon = (deviceType) => {
if (deviceType === 'AP_Default' || deviceType === 'AP') {
return <img src={apIcon} style={{ height: '32px', width: '32px' }} alt="AP" />;
return <img src={apIcon} className={styles.icon} alt="AP" />;
}
if (deviceType === 'MESH') {
return <img src={meshIcon} style={{ height: '32px', width: '32px' }} alt="MESH" />;
return <img src={meshIcon} className={styles.icon} alt="MESH" />;
}
if (deviceType === 'SWITCH') {
return <img src={internetSwitch} style={{ height: '32px', width: '32px' }} alt="SWITCH" />;
return <img src={internetSwitch} className={styles.icon} alt="SWITCH" />;
}
if (deviceType === 'IOT') {
return <img src={iotIcon} style={{ height: '32px', width: '32px' }} alt="SWITCH" />;
return <img src={iotIcon} className={styles.icon} alt="SWITCH" />;
}
return null;
};
@@ -211,16 +212,16 @@ const DeviceListDisplay = ({
const getCertBadge = (cert) => {
if (cert === 'NO_CERTIFICATE') {
return (
<div style={{ position: 'relative' }}>
<div className={styles.certificateWrapper}>
<CIcon
style={{ position: 'absolute', left: '31%', marginTop: '8%' }}
className={styles.badge}
name="cil-badge"
content={cilBadge}
size="2xl"
alt="AP"
/>
<CIcon
style={{ position: 'absolute', zIndex: 99, left: '21%', color: '#e55353' }}
className={styles.badCertificate}
name="cil-ban"
content={cilBan}
size="3xl"
@@ -237,7 +238,7 @@ const DeviceListDisplay = ({
break;
case 'MISMATCH_SERIAL':
return (
<CBadge color={color} style={{ backgroundColor: '#FFFF5C' }}>
<CBadge color={color} className={styles.mismatchBackground}>
<CIcon name="cil-badge" content={cilBadge} size="2xl" alt="AP" />
</CBadge>
);
@@ -246,16 +247,16 @@ const DeviceListDisplay = ({
break;
default:
return (
<div style={{ position: 'relative' }}>
<div className={styles.certificateWrapper}>
<CIcon
style={{ position: 'absolute', left: '31%', marginTop: '8%' }}
className={styles.badge}
name="cil-badge"
content={cilBadge}
size="2xl"
alt="AP"
/>
<CIcon
style={{ position: 'absolute', zIndex: 99, left: '21%', color: '#e55353' }}
className={styles.badCertificate}
name="cil-ban"
content={cilBan}
size="3xl"
@@ -303,7 +304,7 @@ const DeviceListDisplay = ({
loading={loading}
scopedSlots={{
serialNumber: (item) => (
<td style={{ textAlign: 'center' }}>
<td className={styles.column}>
<CLink
className="c-subheader-nav-link"
aria-current="page"
@@ -314,7 +315,7 @@ const DeviceListDisplay = ({
</td>
),
deviceType: (item) => (
<td style={{ textAlign: 'center' }}>
<td className={styles.column}>
<CPopover
content={item.connected ? t('common.connected') : t('common.not_connected')}
placement="top"
@@ -326,7 +327,7 @@ const DeviceListDisplay = ({
</td>
),
verifiedCertificate: (item) => (
<td style={{ textAlign: 'center' }}>
<td className={styles.column}>
<CPopover
content={item.verifiedCertificate ?? t('common.unknown')}
placement="top"

29
src/components/DeviceListTable/index.module.scss Normal file
View File

@@ -0,0 +1,29 @@
.icon {
height: 32px;
width: 32px;
}
.column {
text-align: center;
}
.certificateWrapper {
position: relative;
}
.badge {
position: 'absolute';
left: '31%';
margin-top: '8%';
}
.badCertificate {
position: 'absolute';
z-index: 99;
left: '21%';
color: '#e55353';
}
.mismatchBackground {
background-color: #FFFF5C;
}

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

@@ -91,8 +91,8 @@ const ConfigureModal = ({ show, toggleModal }) => {
<CModalBody>
<CAlert color="danger">{t('factory_reset.warning')}</CAlert>
<CRow className={styles.spacedRow}>
<p style={{ paddingLeft: '5%' }}>{t('factory_reset.redirector')}</p>
<CForm style={{ paddingLeft: '5%' }}>
<p className={styles.spacedForm}>{t('factory_reset.redirector')}</p>
<CForm className={styles.spacedForm}>
<CSwitch
color="primary"
defaultChecked={keepRedirector}

4
src/components/FactoryResetModal/index.module.scss
View File

@@ -1,3 +1,7 @@
.spacedRow {
margin-top: 20px;
}
.spacedForm {
padding-left: 5%;
}

3
src/components/InterfaceStatistics/DeviceStatisticsChart.js → src/components/InterfaceStatistics/containers/DeviceStatisticsChart/index.js
View File

@@ -1,9 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import Chart from 'react-apexcharts';
import styles from './index.module.scss';
const DeviceStatisticsChart = ({ data, options }) => (
<div style={{ height: '360px' }}>
<div className={styles.chart}>
<Chart series={data} options={options} type="line" height="100%" />
</div>
);

3
src/components/InterfaceStatistics/containers/DeviceStatisticsChart/index.module.scss Normal file
View File

@@ -0,0 +1,3 @@
.chart {
height: 360px;
}

2
src/components/InterfaceStatistics/StatisticsChartList.js → src/components/InterfaceStatistics/containers/StatisticsChartList/index.js
View File

@@ -5,7 +5,7 @@ import { v4 as createUuid } from 'uuid';
import axiosInstance from 'utils/axiosInstance';
import { getToken } from 'utils/authHelper';
import { unixToTime, capitalizeFirstLetter } from 'utils/helper';
import DeviceStatisticsChart from './DeviceStatisticsChart';
import DeviceStatisticsChart from '../DeviceStatisticsChart';
const StatisticsChartList = ({ selectedDeviceId, lastRefresh }) => {
const { t } = useTranslation();

7
src/components/InterfaceStatistics/index.js
View File

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
import { CCard, CCardHeader, CCardBody, CPopover, CRow, CCol } from '@coreui/react';
import { cilSync } from '@coreui/icons';
import CIcon from '@coreui/icons-react';
import StatisticsChartList from './StatisticsChartList';
import StatisticsChartList from './containers/StatisticsChartList';
import styles from './index.module.scss';
const DeviceStatisticsCard = ({ selectedDeviceId }) => {
const { t } = useTranslation();
@@ -19,7 +20,7 @@ const DeviceStatisticsCard = ({ selectedDeviceId }) => {
<CCardHeader>
<CRow>
<CCol>{t('statistics.title')}</CCol>
<CCol style={{ textAlign: 'right' }}>
<CCol className={styles.alignRight}>
<CPopover content={t('common.refresh')}>
<CIcon
onClick={refresh}
@@ -32,7 +33,7 @@ const DeviceStatisticsCard = ({ selectedDeviceId }) => {
</CCol>
</CRow>
</CCardHeader>
<CCardBody style={{ padding: '5%' }}>
<CCardBody className={styles.statsBody}>
<StatisticsChartList selectedDeviceId={selectedDeviceId} lastRefresh={lastRefresh} />
</CCardBody>
</CCard>

7
src/components/InterfaceStatistics/index.module.scss Normal file
View File

@@ -0,0 +1,7 @@
.alignRight {
text-align: right;
}
.statsBody {
padding: 5%;
}

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

@@ -18,7 +18,7 @@ import { getToken } from 'utils/authHelper';
import axiosInstance from 'utils/axiosInstance';
import eventBus from 'utils/eventBus';
import LoadingButton from 'components/LoadingButton';
import WifiChannelTable from 'components/WifiScanResultModal/WifiChannelTable';
import WifiChannelTable from 'components/WifiScanResultModal/containers/WifiChannelTable';
import 'react-widgets/styles.css';
import styles from './index.module.scss';

7
src/components/WifiScanResultModal/WifiChannelCard.js → src/components/WifiScanResultModal/containers/WifiChannelCard/index.js
View File

@@ -3,6 +3,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import 'react-widgets/styles.css';
import styles from './index.module.scss';
const WifiChannelCard = ({ channel }) => {
const { t } = useTranslation();
@@ -11,13 +12,13 @@ const WifiChannelCard = ({ channel }) => {
return (
<CCard>
<CCardHeader>
<CCardTitle style={{ color: 'black' }}>
<CCardTitle className={styles.cardTitle}>
{t('scan.channel')} #{channel.channel}
</CCardTitle>
</CCardHeader>
<CCardBody>
<div className="overflow-auto" style={{ height: '250px' }}>
<CDataTable items={channel.devices} fields={columns} style={{ color: 'white' }} />
<div className={[styles.scrollable, "overflow-auto"].join(" ")}>
<CDataTable items={channel.devices} fields={columns} className={styles.datatable} />
</div>
</CCardBody>
</CCard>

11
src/components/WifiScanResultModal/containers/WifiChannelCard/index.module.scss Normal file
View File

@@ -0,0 +1,11 @@
.cardTitle {
color: black;
}
.scrollable {
height: 250px;
}
.datatable {
color: white;
}

2
src/components/WifiScanResultModal/WifiChannelTable.js → src/components/WifiScanResultModal/containers/WifiChannelTable/index.js
View File

@@ -2,7 +2,7 @@ import { CCol, CRow } from '@coreui/react';
import React, { useEffect } from 'react';
import { v4 as createUuid } from 'uuid';
import PropTypes from 'prop-types';
import WifiChannelCard from './WifiChannelCard';
import WifiChannelCard from '../WifiChannelCard';
const WifiChannelTable = ({ channels }) => {
const sortChannels = () => {

5
src/components/WifiScanResultModal/index.js
View File

@@ -11,7 +11,8 @@ import {
} from '@coreui/react';
import PropTypes from 'prop-types';
import { prettyDate } from 'utils/helper';
import WifiChannelTable from './WifiChannelTable';
import WifiChannelTable from './containers/WifiChannelTable';
import styles from './index.module.scss';
const WifiScanResultModal = ({ show, toggle, scanResults, date }) => {
const { t } = useTranslation();
@@ -49,7 +50,7 @@ const WifiScanResultModal = ({ show, toggle, scanResults, date }) => {
return (
<CModal size="lg" show={show} onClose={toggle}>
<CModalHeader closeButton>
<CModalTitle style={{ color: 'black' }}>
<CModalTitle className={styles.modalTitle}>
{date !== '' ? prettyDate(date) : ''} {t('scan.results')}
</CModalTitle>
</CModalHeader>

3
src/components/WifiScanResultModal/index.module.scss Normal file
View File

@@ -0,0 +1,3 @@
.modalTitle {
color: black;
}