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" "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": { "node_modules/unbox-primitive": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", "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 Head from 'next/head';
import { subDays, subHours } from 'date-fns'; import { subDays, subHours } from 'date-fns';
import { Box, Container, Unstable_Grid2 as Grid } from '@mui/material'; 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 { OverviewTotalProfit } from 'src/sections/overview/overview-total-profit';
import { OverviewTraffic } from 'src/sections/overview/overview-traffic'; 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> <Head>
<title> <title>
Oktopus | TR-369 Oktopus | TR-369
</title> </title>
</Head> </Head>
<Box <Box
component="main" component="main"
sx={{ sx={{
flexGrow: 1, flexGrow: 1,
py: 8, py: 8,
}} }}
> >
<Container maxWidth="xl" > <Container maxWidth="xl" >
<Grid <Grid
container container
spacing={3} spacing={3}
> >
</Grid> </Grid>
<OverviewLatestOrders <OverviewLatestOrders
orders={[ orders={devices}
{ sx={{ height: '100%' }}
id: 'f69f88012978187a6c12897f', />
ref: 'DEV1049', </Container>
amount: 30.5, </Box>
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>
</> </>
); );
}
Page.getLayout = (page) => ( Page.getLayout = (page) => (
<DashboardLayout> <DashboardLayout>
{page} {page}

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

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