mirror of
https://github.com/optim-enterprises-bv/OptimCloud-gw-ui.git
synced 2025-11-01 02:37:45 +00:00
Device configuration translation done
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
CCard,
|
||||
CCardHeader,
|
||||
@@ -23,6 +24,7 @@ import { getToken } from 'utils/authHelper';
|
||||
import DeviceConfigurationModal from './DeviceConfigurationModal';
|
||||
|
||||
const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
const { t } = useTranslation();
|
||||
const [collapse, setCollapse] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [device, setDevice] = useState(null);
|
||||
@@ -62,10 +64,10 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CRow>
|
||||
<CCol>Device Details</CCol>
|
||||
<CCol>{t("configuration.details")}</CCol>
|
||||
<CCol>
|
||||
<div style={{ float: 'right' }}>
|
||||
<CPopover content="View raw JSON">
|
||||
<CPopover content={t("configuration.view_json")}>
|
||||
<CButton color="secondary" onClick={toggleModal} size="sm">
|
||||
<CIcon content={cilWindowMaximize} />
|
||||
</CButton>
|
||||
@@ -83,7 +85,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel>UUID : </CLabel>
|
||||
<CLabel>{t("common.uuid")} : </CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
{device.UUID}
|
||||
@@ -91,7 +93,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
</CFormGroup>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel>Serial Number : </CLabel>
|
||||
<CLabel>{t("common.serial_number")} : </CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
{device.serialNumber}
|
||||
@@ -99,7 +101,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
</CFormGroup>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel>Device Type : </CLabel>
|
||||
<CLabel>{t("configuration.type")} : </CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
{device.deviceType}
|
||||
@@ -107,7 +109,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
</CFormGroup>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel>Last Configuration Change : </CLabel>
|
||||
<CLabel>{t("configuration.last_configuration_change")} : </CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
{prettyDate(device.lastConfigurationChange)}
|
||||
@@ -115,7 +117,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
</CFormGroup>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel>MAC address :</CLabel>
|
||||
<CLabel>{t("common.mac")} :</CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
{device.macAddress}
|
||||
@@ -123,7 +125,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
</CFormGroup>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel>Created : </CLabel>
|
||||
<CLabel>{t("configuration.created")} : </CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
{prettyDate(device.createdTimestamp)}
|
||||
@@ -131,7 +133,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
</CFormGroup>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel>Last Configuration Download : </CLabel>
|
||||
<CLabel>{t("configuration.last_configuration_download")} : </CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
{prettyDate(device.lastConfigurationDownload)}
|
||||
@@ -140,7 +142,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
<CCollapse show={collapse}>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel>Manufacturer :</CLabel>
|
||||
<CLabel>{t("common.manufacturer")} :</CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
{device.manufacturer}
|
||||
@@ -148,7 +150,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
</CFormGroup>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel htmlFor="text-input">Notes :</CLabel>
|
||||
<CLabel htmlFor="text-input">{t("configuration.notes")} :</CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
<CInput id="text-input" name="text-input" placeholder={device.notes} />
|
||||
@@ -156,7 +158,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
</CFormGroup>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel>Owner :</CLabel>
|
||||
<CLabel>{t("configuration.owner")} :</CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
{device.owner}
|
||||
@@ -164,7 +166,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
</CFormGroup>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel>Location :</CLabel>
|
||||
<CLabel>{t("configuration.location")} :</CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
{device.location}
|
||||
@@ -190,7 +192,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
|
||||
|
||||
return (
|
||||
<CCard>
|
||||
<CCardHeader>Device Configuration</CCardHeader>
|
||||
<CCardHeader>{t("configuration.details")}</CCardHeader>
|
||||
<CCardBody />
|
||||
</CCard>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user