Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | // import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { CContainer, CButton, CSpinner, CAlert, CRow, CCol } from '@coreui/react';
// import { useState, useEffect } from "react";
import { DynamicForm, DynamicTable } from '@components/Dynamic';
import deviceTypes from '@config/deviceTypes';
import { getPageData } from '@hooks'
import { apiService } from '@services'
import { AuthCheck } from '@components'
const devicesApi = apiService('devices');
const thingysApi = apiService('thingys');
const DeviceDetails = () => {
const { macAddr } = useParams();
const navigate = useNavigate();
const { loading, error, data: device } = getPageData(devicesApi.get, { macAddress: macAddr });
const { loading: thingyLoading, error: thingyError, data: thingyHistoryData } = getPageData(thingysApi.get, { macAddress: macAddr });
const tableFields = [
{ label: "Moment", value: "timestamp" },
{ label: "Temperature", value: "temperature" },
{ label: "Humidity", value: "humidity" },
{ label: "CO2", value: "co2" },
{ label: "Air (1.0)", value: "pm_1" },
{ label: "Air (2.5)", value: "pm_2_5" },
{ label: "Air (10.0)", value: "pm_10" }
];
const formFields = [
{
name: 'type',
label: 'Device Type',
type: 'select',
options: deviceTypes.map(d => ({ label: d.label, value: d.value })),
required: true,
},
{
name: 'macAddress',
label: 'Address',
type: 'text',
placeholder: 'Enter address | Upper Case',
required: true,
},
{
name: 'name',
label: 'Device Name',
type: 'text',
placeholder: 'Enter Device Name',
required: true,
},
];
const handleFormSubmit = async (formData) => {
try {
const updatedData = { ...device, ...formData };
await devicesApi.update(updatedData);
navigate('/device/DeviceList');
} catch (err) {
console.error('Error while updating:', err);
alert('Something went wrong while updating');
}
};
const handleDelete = async () => {
try {
await devicesApi.delete({ macAddress: macAddr });
navigate('/device/DeviceList');
} catch (err) {
console.error('Error while deleting:', err);
alert('Something went wrong while deleting');
}
};
if (loading) return <CSpinner />;
if (error) return <p>Error: {error.message}</p>;
return (
<CContainer>
<div className="d-flex justify-content-between my-3">
<CButton color="secondary" onClick={() => navigate(-1)}>Back</CButton>
<AuthCheck rights="admin">
<CButton color="danger" onClick={handleDelete}>Delete Device</CButton>
</AuthCheck>
</div>
<AuthCheck rights="admin">
<CAlert color="secondary">Make sure your address is always Upper Case!</CAlert>
<DynamicForm
title="Update Device"
fields={formFields}
onSubmit={handleFormSubmit}
fillForm={device}
submitButtonLabel="Save Device"
collapsible={device.type === 'thingy52'}
/>
</AuthCheck>
<br />
{device.type === 'thingy52' && !thingyLoading && !thingyError && (
<DynamicTable
title="History Data"
columns={tableFields}
data={thingyHistoryData}
enableFilters={true}
itemsPerPageOptions={[10, 20, 50]}
/>
)}
{thingyLoading && device.type === 'thingy52' && <CSpinner />}
{thingyError && device.type === 'thingy52' && <p>Error: {thingyError.message}</p>}
</CContainer>
);
};
export default DeviceDetails; |