louis/oktopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

integração do backend para busca de devices

Browse Source
This commit is contained in:
Bruno Loch 2023-05-09 23:03:00 +00:00
parent 7f1af7ae79
commit 5e024611f6
3 changed files with 69 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/package-lock.json generated
View File

@ -4632,6 +4632,20 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/typescript": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
"integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
"dev": true,
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=12.20"
}
},
"node_modules/unbox-primitive": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

127
frontend/src/pages/devices.js
View File

@ -1,3 +1,4 @@
import React, { useState, useEffect } from 'react';
import Head from 'next/head';
import { subDays, subHours } from 'date-fns';
import { Box, Container, Unstable_Grid2 as Grid } from '@mui/material';
@ -11,98 +12,46 @@ import { OverviewTotalCustomers } from 'src/sections/overview/overview-total-cus
import { OverviewTotalProfit } from 'src/sections/overview/overview-total-profit';
import { OverviewTraffic } from 'src/sections/overview/overview-traffic';
const now = new Date();
const Page = () => (
const Page = () => {
const [devices, setDevices] = useState([]);
useEffect(() => {
fetch('https://d9962fd9-2464-4a30-9a86-a15a04b57ad0.mock.pstmn.io/device')
.then(response => response.json())
.then(json => setDevices(json))
.catch(error => console.error('Error:', error));
}, []);
return (
<>
<Head>
<title>
Oktopus | TR-369
</title>
</Head>
<Box
component="main"
sx={{
flexGrow: 1,
py: 8,
}}
>
<Container maxWidth="xl" >
<Grid
container
spacing={3}
>
</Grid>
<OverviewLatestOrders
orders={[
{
id: 'f69f88012978187a6c12897f',
ref: 'DEV1049',
amount: 30.5,
customer: {
name: 'Ekaterina Tankova'
},
createdAt: 1555016400000,
status: 'Associating'
},
{
id: '9eaa1c7dd4433f413c308ce2',
ref: 'DEV1048',
amount: 25.1,
customer: {
name: 'Cao Yu'
},
createdAt: 1555016400000,
status: 'Online'
},
{
id: '01a5230c811bd04996ce7c13',
ref: 'DEV1047',
amount: 10.99,
customer: {
name: 'Alexa Richardson'
},
createdAt: 1554930000000,
status: 'Offline'
},
{
id: '1f4e1bd0a87cea23cdb83d18',
ref: 'DEV1046',
amount: 96.43,
customer: {
name: 'Anje Keizer'
},
createdAt: 1554757200000,
status: 'Associating'
},
{
id: '9f974f239d29ede969367103',
ref: 'DEV1045',
amount: 32.54,
customer: {
name: 'Clarke Gillebert'
},
createdAt: 1554670800000,
status: 'Online'
},
{
id: 'ffc83c1560ec2f66a1c05596',
ref: 'DEV1044',
amount: 16.76,
customer: {
name: 'Adam Denisov'
},
createdAt: 1554670800000,
status: 'Online'
}
]}
sx={{ height: '100%' }}
/>
</Container>
</Box>
<Head>
<title>
Oktopus | TR-369
</title>
</Head>
<Box
component="main"
sx={{
flexGrow: 1,
py: 8,
}}
>
<Container maxWidth="xl" >
<Grid
container
spacing={3}
>
</Grid>
<OverviewLatestOrders
orders={devices}
sx={{ height: '100%' }}
/>
</Container>
</Box>
</>
);
);
}
Page.getLayout = (page) => (
<DashboardLayout>
{page}

37
frontend/src/sections/overview/overview-latest-orders.js
View File

@ -40,53 +40,50 @@ export const OverviewLatestOrders = (props) => {
<TableHead>
<TableRow>
<TableCell>
Model
SN
</TableCell>
<TableCell>
Customer
MODEL
</TableCell>
<TableCell sortDirection="desc">
Vendor
CUSTOMER
</TableCell>
<TableCell>
Status
VENDOR
</TableCell>
<TableCell>
Access
VERSION
</TableCell>
<TableCell>
STATUS
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{orders.map((order) => {
const createdAt = format(order.createdAt, 'dd/MM/yyyy');
return (
<TableRow
hover
key={order.id}
key={order.SN}
>
<TableCell>
{order.ref}
{order.SN}
</TableCell>
<TableCell>
{order.customer.name}
{order.Model}
</TableCell>
<TableCell>
{createdAt}
{order.Customer}
</TableCell>
<TableCell>
<SeverityPill color={statusMap[order.status]}>
{order.status}
</SeverityPill>
{order.Vendor}
</TableCell>
<TableCell>
<SvgIcon
fontSize="small"
sx={{cursor:'pointer'}}
onClick={()=>router.push("devices/"+order.id)}
>
<ArrowTopRightOnSquareIcon />
</SvgIcon>
{order.Version}
</TableCell>
<TableCell>
{order.Status}
</TableCell>
</TableRow>
);