From 9754370826ef140ee8b038da506d1927a242b37b Mon Sep 17 00:00:00 2001
From: johku <johku>
Date: Tue, 10 Jan 2023 16:07:46 +0200
Subject: [PATCH] made data go to /api
---
backend/main.py | 3 +-
frontend/src/components/violators.tsx | 106 ----------------------
frontend/src/components/violatorsInfo.tsx | 4 +-
frontend/src/pages/about.tsx | 13 +++
frontend/src/pages/api/index.ts | 13 +++
5 files changed, 31 insertions(+), 108 deletions(-)
delete mode 100644 frontend/src/components/violators.tsx
create mode 100644 frontend/src/pages/about.tsx
create mode 100644 frontend/src/pages/api/index.ts
diff --git a/backend/main.py b/backend/main.py
index 36a098d..2c78293 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -16,7 +16,8 @@ app.add_middleware(
allow_headers=["*"],
)
-@app.get("/")
+
+@app.get("/api")
def read_root():
"""
Get API for the nessacery data
diff --git a/frontend/src/components/violators.tsx b/frontend/src/components/violators.tsx
deleted file mode 100644
index 5c6cc4d..0000000
--- a/frontend/src/components/violators.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Paper from '@mui/material/Paper';
-import { styled, Box, Stack } from '@mui/system';
-import { Card, Avatar, Typography, IconButton, Divider, Chip, Switch } from '@mui/material';
-import { deepOrange, deepPurple } from '@mui/material/colors';
-import Grow from '@mui/material/Grow';
-import stringAvatar from './stringToColor';
-
-export const defaultUrlRoot = `${process.env.NEXT_PUBLIC_API_URL ?? '/api/'}/`;
-
-interface Data {
- [x: string]: any;
- timestamp: string;
- firstName: string;
- lastName: string;
- email: string;
- phoneNumber: string;
- positionX: number;
- positionY: number;
- altitude: number;
- distance: number;
- closestDistance: number;
-}
-
-const Item = styled(Paper)(({ theme }) => ({
- backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
- padding: theme.spacing(1),
- textAlign: 'left',
-}));
-
-const Name = styled(Typography)({
- fontWeight: 800,
- fontSize: 20,
- fontFamily: 'inital',
- ':hover': {
- background: 'rgb(255,255,0)',
- },
-});
-
-const Info = styled(Typography)({
- fontWeight: 500,
- fontSize: 14,
-
- ':hover': {
- background: 'rgb(255,255,0)',
- },
-});
-
-export const Violators: React.FC = () => {
- const [data, setData] = useState<Data | null>(null);
-
- useEffect(() => {
- const fetchData = async () => {
- const response = await fetch(defaultUrlRoot);
- const json = await response.json();
- setData(json);
- };
-
- // Fetch the data every 2 seconds
- const intervalId = setInterval(fetchData, 2000);
-
- // Clean up the interval when the component unmounts
- return () => clearInterval(intervalId);
- }, []);
-
- if (!data) {
- return <p>Loading...</p>;
- }
-
- return (
- <Box sx={{ p: 2, display: 'flex', overflow: 'hidden' }}>
- <Stack spacing={2}>
- {data.map((item: Data) => (
- <Item>
- <Grow in={true}>
- <Box sx={{ p: 2, display: 'flex' }}>
- <Avatar {...stringAvatar(item.firstName + ' ' + item.lastName)} />
- <Stack spacing={0.5}>
- <Name>
- {item.firstName} {item.lastName}
- </Name>
- <Divider />
- <Info>{item.email}</Info>
- <Info>{item.phoneNumber}</Info>
- <Typography sx={{ color: 'red' }}>
- {Math.round(item.closestDistance / 1000)} meters
- </Typography>
- <Divider />
- <Typography variant='body2' color='text.secondary'></Typography>
- <Typography fontWeight={300} sx={{ fontSize: 14 }}>
- {item.timestamp}
- </Typography>
- </Stack>
- </Box>
- </Grow>
- <Stack
- direction='row'
- alignItems='center'
- justifyContent='space-between'
- sx={{ px: 2, py: 0, bgcolor: 'background.default' }}></Stack>
- </Item>
- ))}
- </Stack>
- </Box>
- );
-};
diff --git a/frontend/src/components/violatorsInfo.tsx b/frontend/src/components/violatorsInfo.tsx
index e4d3406..7cf9fa9 100644
--- a/frontend/src/components/violatorsInfo.tsx
+++ b/frontend/src/components/violatorsInfo.tsx
@@ -6,6 +6,8 @@ import stringAvatar from './stringToColor';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import Data from './dataInteface';
+export const defaultUrlRoot = `${process.env.NEXT_PUBLIC_API_URL ?? '/api/'}/`;
+
export const Violators: React.FC = () => {
//get api data
const [data, setData] = useState<Data | null>(null);
@@ -13,7 +15,7 @@ export const Violators: React.FC = () => {
useEffect(() => {
const fetchData = async () => {
try {
- const response = await fetch('http://127.0.0.1:8000/');
+ const response = await fetch('/api');
const json = await response.json();
setData(json);
diff --git a/frontend/src/pages/about.tsx b/frontend/src/pages/about.tsx
new file mode 100644
index 0000000..66f3008
--- /dev/null
+++ b/frontend/src/pages/about.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { NextPage } from 'next';
+
+const About: NextPage = () => {
+ return (
+ <div>
+ <h1>About</h1>
+ <p>This is the about page.</p>
+ </div>
+ );
+};
+
+export default About;
diff --git a/frontend/src/pages/api/index.ts b/frontend/src/pages/api/index.ts
new file mode 100644
index 0000000..47b05a1
--- /dev/null
+++ b/frontend/src/pages/api/index.ts
@@ -0,0 +1,13 @@
+import { NextApiHandler } from 'next';
+
+const index: NextApiHandler = async (req, res) => {
+ try {
+ const response = await fetch('http://localhost:8000/api');
+ const json = await response.json();
+ res.status(200).json(json);
+ } catch (err) {
+ res.status(500);
+ }
+};
+
+export default index;
--
GitLab