Skip to content

Commit

Permalink
feat: added device details and previous details fix: #11
Browse files Browse the repository at this point in the history
  • Loading branch information
@HammacheAbir
HammacheAbir committed Apr 27, 2021
1 parent 26a6aae commit 5c65337
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 8 deletions.
1 change: 1 addition & 0 deletions src/pages/appContent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
} from '../components/tailwind-ui';

const AppContent = () => {

return (
<div className="w-full h-full max-w-full" data-testid="App-content">
<NotificationProvider>
Expand Down
122 changes: 115 additions & 7 deletions src/pages/deviceDetails.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import { connectDevice, getDevice } from '../services/deviceService';
import { connectDevice, getDevice} from '../services/deviceService';
import { useState, useEffect } from 'react';
import {Table} from '../components/tailwind-ui'

const DeviceDetails = ({ match }) => {
const [currentPage, setCurrentPage] = useState(1);
const [count, setCount] = useState(0);
const [data, setData] = useState([]);
const [previousData, setPreviousData] = useState([]);
const [deviceClient, setDeviceClient] = useState();
const deviceId = `${match.params.id}`;
useEffect(() => {
Expand All @@ -14,24 +18,128 @@ const DeviceDetails = ({ match }) => {
);
});
}
}, [deviceId]);
}, []);

useEffect(() => {
if (deviceClient) {
//console.log(deviceClient);
//getAllDataCount
deviceClient.getAllDataCount().then(result=>{
console.log(result)
setCount(result)
})
deviceClient.subscribe(
(message) => setData([message, ...data]),
(error) => console.log(error),
);
console.log(data)
deviceClient.getPageDate(currentPage*10,10).then(result=>{
console.log(result)
setPreviousData(result)
})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [deviceClient]);

useEffect(() => {
if (deviceClient) {
deviceClient.getPageDate(currentPage*10,10).then(result=>{
console.log(result)
setPreviousData(result)
})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentPage]);


return (
<div>
<div>Device Details</div>
<p>{deviceId}</p>
<p>{JSON.stringify(data[0])}</p>
<div class="m-2 ">
<div class=" bg-white w-full rounded-lg shadow-xl">
<div class="p-4 border-b">
<h2 class="text-2xl ">
Device Details
</h2>
<p class="text-sm text-gray-500">
Current details of the device.
</p>
</div>
<div>
<div class="md:grid md:grid-cols-2 hover:bg-gray-50 md:space-y-0 space-y-1 p-4 border-b">
<p class="text-gray-600">
CPU Temperature
</p>
<p>
{data?data[0]?data[0].parameters.A:"":""}
</p>
</div>
<div class="md:grid md:grid-cols-2 hover:bg-gray-50 md:space-y-0 space-y-1 p-4 border-b">
<p class="text-gray-600">
Free Memory
</p>
<p>
{data?data[0]?data[0].parameters.B:"":''}
</p>
</div>
</div>
</div>

<div class=" my-8 bg-white w-full rounded-lg ">
<div class="p-4 ">
<h2 class="text-2xl ">
Previous Details
</h2>
<p class="text-sm text-gray-500">
Previous details of the device.
</p>
</div>
<Table class="min-w-full table-auto"
Header={()=>
<tr class="bg-primary-900">
<th class="px-4 py-2"><span class="text-gray-300">CPU Temp</span></th>
<th class="px-4 py-2"><span class="text-gray-300">Free mem</span></th>
<th class="px-2 py-2"><span class="text-gray-300">Free swap</span></th>
<th class="px-2 py-2"><span class="text-gray-300">FS Read</span></th>
<th class="px-2 py-2"><span class="text-gray-300">FS Write</span></th>
<th class="px-2 py-2"><span class="text-gray-300">Network R</span></th>
<th class="px-2 py-2"><span class="text-gray-300">Network W</span></th>
<th class="px-2 py-2"><span class="text-gray-300">Load</span></th>
<th class="px-2 py-2"><span class="text-gray-300">User L</span></th>
<th class="px-2 py-2"><span class="text-gray-300">System L</span></th>
<th class="px-2 py-2"><span class="text-gray-300">Nice L</span></th>
<th class="px-2 py-2"><span class="text-gray-300">Idle L</span></th>
<th class="px-2 py-2"><span class="text-gray-300">IRQ L</span></th>
<th class="px-4 py-2"><span class="text-gray-300">FS min</span></th>
<th class="px-4 py-2"><span class="text-gray-300">FS mix</span></th>
</tr>
}
Tr={({value})=>
value&&value.doc.parameters?
<tr class="bg-white border-4 border-gray-200">
<td class="px-4 py-2"><span>{value.doc.parameters.A}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.B}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.C}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.D}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.E}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.F}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.G}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.H}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.I}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.J}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.K}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.L}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.M}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.N}</span></td>
<td class="px-4 py-2"><span>{value.doc.parameters.O}</span></td>
</tr>:null}
data={previousData}
pagination={{
itemsPerPage: 10,
onPageChange: (page)=>{setCurrentPage(page)},
page: currentPage,
totalCount: count,
withText: true
}}
/>
</div>
</div>
);
};
Expand Down
12 changes: 11 additions & 1 deletion src/services/db.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,26 @@ function DB() {
return _db.put(doc);
};

const get = (docId) => _db.get(docId);
const get = (docId) => _db.get(docId)

const getAll = async (options) => {
const docs = await _db.allDocs({
include_docs: true,
...options,
});
//console.log(`get ${docs.total_rows} rows`);
//console.log(docs.rows);
return docs.rows;
};

const getAllCount = async (options) => {
const docs = await _db.allDocs({
include_docs: true,
...options,
});
return docs.total_rows;
};

const update = (doc) => {
if (!('_id' in doc))
return Promise.reject(new Error('doc must include _id'));
Expand Down Expand Up @@ -67,6 +76,7 @@ function DB() {
put,
get,
getAll,
getAllCount,
update,
remove,
removeAll,
Expand Down
5 changes: 5 additions & 0 deletions src/services/deviceService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export const addDevice = (props) => {
});
};


//
// connect to broadcast device & return a client instance with {subscribe, disconnect, getAllData, getLastData}
export const connectDevice = ({
Expand Down Expand Up @@ -117,11 +118,15 @@ export const connectDevice = ({
const _disconnect = () => disconnect(mqttClient, () => dbClient.close());
const getAllData = () => dbClient.getAll();
const getLastData = () => dbClient.getAll({ descending: true, limit: 1 });
const getPageDate = (skip,limit)=> dbClient.getAll({ descending: true,skip:skip ,limit: limit });
const getAllDataCount = ()=>dbClient.getAllCount();
resolve({
subscribe: _subscribe,
disconnect: _disconnect,
getAllData,
getLastData,
getPageDate,
getAllDataCount
});
} catch (e) {
// connection error
Expand Down

0 comments on commit 5c65337

Please sign in to comment.