slococo
/
fids
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor and reformat frontend

This commit is contained in:
Santiago Lo Coco 2023-10-30 19:45:01 -03:00
parent 51db72ed54
commit c15455b008
36 changed files with 1071 additions and 1269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
browser-domain/src/components/CreateFlight/CreateFlight.tsx
View File

@ -5,8 +5,6 @@ import "./FlightForm.css";
import { createFlight } from "../../Api";
export const CreateFlight = () => {
const urlParams = new URLSearchParams(window.location.search);
const origin = urlParams.get('origin');
const navigate = useNavigate();
const [error, setError] = useState<string | null>(null);
const [flight, setFlight] = useState<Flight>();

5
browser-domain/src/components/LogIn/LogIn.tsx
View File

@ -10,11 +10,6 @@ export const LogIn = () => {
return (
<div className="Box Small">
<div className="Section">
<img
alt="logo"
className="Image"
src="https://www.seekpng.com/png/full/353-3537757_logo-itba.png"
/>
<div className="Section">
<Input
placeholder="User"

5
browser-domain/src/components/SignUp/SignUp.tsx
View File

@ -13,11 +13,6 @@ export const SignUp = () => {
return (
<div className="Box Small">
<div className="Section">
<img
alt="logo"
className="Image"
src="https://www.seekpng.com/png/full/353-3537757_logo-itba.png"
/>
<div className="Section">
<Input
type="email"

7
browser-domain/test.sh
View File

@ -1,8 +1,3 @@
#!/bin/bash
curl -X DELETE api:5000/ping
curl -X POST api:5000/ping
# npm test
echo "NPM TEST"
npm run test

2
screen-domain/src/Api.ts
View File

@ -1,5 +1,5 @@
import { Axios, AxiosError } from "axios";
import { Credentials, User, Flight } from "./Types";
import { Flight } from "./Types";
const instance = new Axios({
baseURL: process.env.REACT_APP_ENDPOINT ? process.env.REACT_APP_ENDPOINT : "http://127.0.0.1:5000/",

4
screen-domain/src/App.tsx
View File

@ -1,15 +1,11 @@
import React, { useEffect } from "react";
import { useIsConnected } from "./hooks/useIsConnected";
import { Route, Routes } from "react-router";
import { Departure } from "./components/Home/Departure";
import { Arrival } from "./components/Home/Arrival";
import { Home } from "./components/Home/Home";
import { Button } from "antd";
import { initDB } from "./db";
function App() {
const connection = useIsConnected();
// initDB();
return (
<div className="App">

35
screen-domain/src/components/Home/Arrival.tsx
View File

@ -11,7 +11,6 @@ interface Props {
}
export const Arrival: React.FC<Props> = (props) => {
// let origin = process.env.REACT_APP_ORIGIN;
let destination = process.env.REACT_APP_ORIGIN;
const { zones, error } = useFetchDestination(destination);
@ -22,7 +21,6 @@ export const Arrival: React.FC<Props> = (props) => {
if (zones.length <= 10) {
return;
}
// setStartIndex((prevIndex) => (prevIndex + 10) % zones.length);
setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10));
}, 5000);
@ -34,29 +32,10 @@ export const Arrival: React.FC<Props> = (props) => {
<div >
<h2>Arrival</h2>
<div className="Items">
{/* {(props.flights ? props.flights : zones).map((u) => {
return <Card key={u.id} flight={u} />;
})} */}
{/* <table>
<thead>
<tr>
<th>Flight code</th>
<th>Departure</th>
<th>Departure time</th>
<th>Destination</th>
<th>Arrival time</th>
<th>Gate</th>
<th>Status</th>
</tr>
</thead>
<tbody> */}
<Table>
<Thead>
<Tr>
<Th>Code</Th>
{/* <Th>Departure</Th> */}
{/* <Th>Time</Th> */}
{/* <Th>Destination</Th> */}
<Th>Origin</Th>
<Th>Time</Th>
<Th>Gate</Th>
@ -67,30 +46,18 @@ export const Arrival: React.FC<Props> = (props) => {
{zones.length > 0 && (
<>
{zones.slice(startIndex, startIndex + 10).map((flight) => (
// {/* {Array.from({ length: zones.length < 10 ? zones.length : 10 }).map((_, index) => {
// const flightIndex = (startIndex + index) % zones.length;
// const flight = zones[flightIndex];
// return ( */}
<Tr key={flight.id} className={flight.status === 'Delayed' ? 'delayed-flight' : ''}>
{/* <td>{flight.id}</td> */}
<Td>{flight.id}-{flight.flight_code}</Td>
<Td>{flight.flight_code}</Td>
<Td>{flight.origin}</Td>
{/* <Td>{flight.departure_time}</Td> */}
{/* <Td>{flight.destination}</Td> */}
<Td>{flight.arrival_time}</Td>
<Td>{flight.gate}</Td>
<Td>{flight.status}</Td>
</Tr>
// );
))}
{/* })} */}
</>
)}
</Tbody>
</Table>
{/* </tbody>
</table> */}
{error ? <div className="Disconnected">{error}</div> : <></>}
</div>
</div>

30
screen-domain/src/components/Home/Card/Card.css
View File

@ -1,30 +1,8 @@
/* .flight-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #fff;
transition: box-shadow 0.3s ease;
&:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.flight-details {
display: flex;
align-items: center;
}
} */
.flight-card {
display: flex;
flex-direction: column; /* Display as a column instead of a row */
flex-direction: column;
justify-content: space-between;
align-items: flex-start; /* Align items to the start of the column */
align-items: flex-start;
padding: 16px;
border: 1px solid #ddd;
border-radius: 8px;
@ -39,7 +17,7 @@
.flight-details {
display: flex;
flex-direction: column; /* Display details as a column */
margin-top: 16px; /* Add some space between the two rows */
flex-direction: column;
margin-top: 16px;
}
}

40
screen-domain/src/components/Home/Card/Card.tsx
View File

@ -1,46 +1,8 @@
// import React from "react";
// import { Avatar, Button } from "antd";
// interface FlightProps {
// flight_code: string;
// status: string;
// origin: string;
// destination: string;
// departure_time: string;
// arrival_time: string;
// gate: string;
// }
// interface CardProps {
// flight: FlightProps;
// }
// export const Card: React.FC<CardProps> = ({
// flight: { flight_code, status, origin, destination, departure_time, arrival_time, gate },
// }) => {
// console.log(flight_code)
// return (
// <div className="Card">
// <Avatar size="large">{flight_code.slice(0, 1).toUpperCase()}</Avatar>
// <div>
// <div>Name: {flight_code}</div>
// <div>Status: {status}</div>
// <div>Origin: {origin}</div>
// <div>Destination: {destination}</div>
// <div>Departure Time: {departure_time}</div>
// <div>Arrival Time: {arrival_time}</div>
// <div>Gate: {gate}</div>
// </div>
// 📍
// </div>
// );
// };
import React from "react";
import { Avatar, Space, Typography, Tag } from "antd";
import { RightOutlined, ClockCircleOutlined, SwapOutlined, EnvironmentOutlined, CalendarOutlined } from "@ant-design/icons";
import "./Card.css"; // Import a CSS file for styling, you can create this file with your styles
import "./Card.css";
interface FlightProps {
flight_code: string;

33
screen-domain/src/components/Home/Departure.tsx
View File

@ -12,7 +12,6 @@ interface Props {
export const Departure: React.FC<Props> = (props) => {
let origin = process.env.REACT_APP_ORIGIN;
// let destination = process.env.REACT_APP_ORIGIN;
const { zones, error } = useFetchOrigin(origin);
const [startIndex, setStartIndex] = useState(0);
@ -22,7 +21,6 @@ export const Departure: React.FC<Props> = (props) => {
if (zones.length <= 10) {
return;
}
// setStartIndex((prevIndex) => (prevIndex + 10) % zones.length);
setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10));
}, 5000);
@ -34,30 +32,12 @@ export const Departure: React.FC<Props> = (props) => {
<div >
<h2>Departure</h2>
<div className="Items">
{/* {(props.flights ? props.flights : zones).map((u) => {
return <Card key={u.id} flight={u} />;
})} */}
{/* <table>
<thead>
<tr>
<th>Flight code</th>
<th>Departure</th>
<th>Departure time</th>
<th>Destination</th>
<th>Arrival time</th>
<th>Gate</th>
<th>Status</th>
</tr>
</thead>
<tbody> */}
<Table>
<Thead>
<Tr>
<Th>Code</Th>
{/* <Th>Departure</Th> */}
<Th>Time</Th>
<Th>Destination</Th>
{/* <Th>Arrival time</Th> */}
<Th>Gate</Th>
<Th>Status</Th>
</Tr>
@ -66,18 +46,10 @@ export const Departure: React.FC<Props> = (props) => {
{zones.length > 0 && (
<>
{zones.slice(startIndex, startIndex + 10).map((flight) => (
// {/* {Array.from({ length: zones.length < 10 ? zones.length : 10 }).map((_, index) => {
// const flightIndex = (startIndex + index) % zones.length;
// const flight = zones[flightIndex];
// return ( */}
<Tr key={flight.id} className={flight.status === 'Delayed' ? 'delayed-flight' : ''}>
{/* <td>{flight.id}</td> */}
<Td>{flight.id}-{flight.flight_code}</Td>
{/* <Td>{flight.origin}</Td> */}
<Td>{flight.flight_code}</Td>
<Td>{flight.departure_time}</Td>
<Td>{flight.destination}</Td>
{/* <Td>{flight.arrival_time}</Td> */}
<Td>{flight.gate}</Td>
<Td>{flight.status}</Td>
</Tr>
@ -99,13 +71,10 @@ export const Departure: React.FC<Props> = (props) => {
</>
)
}
{/* })} */}
</>
)}
</Tbody>
</Table>
{/* </tbody>
</table> */}
{error ? <div className="Disconnected">{error}</div> : <></>}
</div>
</div>

7
screen-domain/src/components/Home/Home.css
View File

@ -16,7 +16,8 @@ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
th, td {
th,
td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
@ -37,6 +38,6 @@ color: #fff;
}
.delayed-flight {
background-color: #ffcccc; /* Light red for delayed flights */
color: #ff0000; /* Red text for delayed flights */
background-color: #ffcccc;
color: #ff0000;
}

4
screen-domain/src/components/Home/Page.css
View File

@ -14,7 +14,7 @@ body {
}
button {
background-color: #4CAF50; /* Green */
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
@ -29,5 +29,5 @@ body {
}
button:hover {
background-color: #45a049; /* Darker green on hover */
background-color: #45a049;
}

40
screen-domain/src/db.ts
View File

@ -7,10 +7,6 @@ export enum Stores {
Arrival = 'arrival'
}
interface EventTarget {
result: any
}
export const initDB = (): Promise<boolean | IDBDatabase> => {
return new Promise((resolve) => {
request = indexedDB.open('myDB');
@ -42,35 +38,15 @@ export const initDB = (): Promise<boolean|IDBDatabase> => {
export const addData = <T>(storeName: string, data: T): Promise<T | string | null> => {
return new Promise((resolve) => {
// request = indexedDB.open('myDB', version);
// request.onsuccess = (e) => {
// let req = (e.target as IDBOpenDBRequest)
// db = req.result;
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
store.add(data);
resolve(data);
// };
// request.onerror = () => {
// const error = request.error?.message
// if (error) {
// resolve(error);
// } else {
// resolve('Unknown error');
// }
// };
});
};
export const deleteData = (storeName: string, key: number): Promise<boolean> => {
return new Promise((resolve) => {
// request = indexedDB.open('myDB', version);
// request.onsuccess = (e) => {
// let req = (e.target as IDBOpenDBRequest)
// db = req.result;
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
const res = store.delete(key);
@ -83,17 +59,11 @@ export const deleteData = (storeName: string, key: number): Promise<boolean> =>
console.log("error")
resolve(false);
}
// };
});
};
export const updateData = <T>(storeName: string, key: number, data: T): Promise<T | string | null> => {
return new Promise((resolve) => {
// request = indexedDB.open('myDB', version);
// request.onsuccess = (e) => {
// let req = (e.target as IDBOpenDBRequest)
// db = req.result;
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
const res = store.get(key);
@ -105,27 +75,17 @@ export const updateData = <T>(storeName: string, key: number, data: T): Promise<
res.onerror = () => {
resolve(null);
}
// };
});
};
export const getStoreData = <T>(storeName: Stores): Promise<T[] | null> => {
return new Promise((resolve) => {
// request = indexedDB.open('myDB');
// request.onsuccess = (e) => {
// let req = (e.target as IDBOpenDBRequest)
// if (!req.result) {
// resolve(null);
// }
// db = req.result;
const tx = db.transaction(storeName, 'readonly');
const store = tx.objectStore(storeName);
const res = store.getAll();
res.onsuccess = () => {
resolve(res.result);
};
// };
});
};

11
screen-domain/src/hooks/useFetchDestination.tsx
View File

@ -1,13 +1,12 @@
import React, { useEffect } from "react";
import { useEffect } from "react";
import { useState } from "react";
import { User, Flight } from "../Types";
import { Flight } from "../Types";
import { fetchZones } from "../Api";
import { Stores, addData, deleteData, getStoreData, updateData, initDB } from '../db';
export const useFetchDestination = (destination: string | undefined) => {
const [error, setError] = useState<string | null>(null);
const [zones, setZones] = useState<Flight[]>([]);
// const [today, setToday] = useState<Date>(new Date());
const isToday = (someDate: Date) => {
let today = new Date();
@ -18,7 +17,6 @@ export const useFetchDestination = (destination: string | undefined) => {
useEffect(() => {
const intervalId = setInterval(() => {
// {isToday(new Date(flight.departure_time)) ? 's' : 'n'}
let today = localStorage.getItem('date')
if (today && !isToday(new Date(today))) {
@ -64,7 +62,6 @@ export const useFetchDestination = (destination: string | undefined) => {
toAdd.push(u)
}
})
// toAdd.sort((a,b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
toAdd.sort((a, b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
setZones(toAdd);
})
@ -80,7 +77,6 @@ export const useFetchDestination = (destination: string | undefined) => {
const intervalId = setInterval(() => {
let lastUpdate = localStorage.getItem('lastUpdated')
let newUpdate = new Date().toISOString()
// let newUpdate = new Date().toTimeString()
fetchZones(undefined, destination, lastUpdate)
.then((data) => {
@ -112,8 +108,6 @@ export const useFetchDestination = (destination: string | undefined) => {
}
});
// console.log(toAdd)
// console.log(toRemove)
let filtered = data.filter(o =>
!toAdd.some(b => { return o.id === b.id }) && !toRemove.some(b => { return o.id === b.id }) && !(new Date(o.departure_time) < new Date())
)
@ -124,7 +118,6 @@ export const useFetchDestination = (destination: string | undefined) => {
addData(Stores.Arrival, c)
})
// newArray.sort((a,b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
newArray.sort((a, b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
setZones(newArray);
})

11
screen-domain/src/hooks/useFetchOrigin.tsx
View File

@ -1,13 +1,12 @@
import React, { useEffect } from "react";
import { useEffect } from "react";
import { useState } from "react";
import { User, Flight } from "../Types";
import { Flight } from "../Types";
import { fetchZones } from "../Api";
import { Stores, addData, deleteData, getStoreData, updateData, initDB } from '../db';
export const useFetchOrigin = (origin: string | undefined) => {
const [error, setError] = useState<string | null>(null);
const [zones, setZones] = useState<Flight[]>([]);
// const [today, setToday] = useState<Date>(new Date());
const isToday = (someDate: Date) => {
let today = new Date();
@ -18,7 +17,6 @@ export const useFetchOrigin = (origin: string | undefined) => {
useEffect(() => {
const intervalId = setInterval(() => {
// {isToday(new Date(flight.departure_time)) ? 's' : 'n'}
let today = localStorage.getItem('date')
if (today && !isToday(new Date(today))) {
@ -64,7 +62,6 @@ export const useFetchOrigin = (origin: string | undefined) => {
toAdd.push(u)
}
})
// toAdd.sort((a,b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
toAdd.sort((a, b) => new Date(a.origin).getTime() - new Date(b.origin).getTime())
setZones(toAdd);
})
@ -80,7 +77,6 @@ export const useFetchOrigin = (origin: string | undefined) => {
const intervalId = setInterval(() => {
let lastUpdate = localStorage.getItem('lastUpdated')
let newUpdate = new Date().toISOString()
// let newUpdate = new Date().toTimeString()
fetchZones(origin, undefined, lastUpdate)
.then((data) => {
@ -112,8 +108,6 @@ export const useFetchOrigin = (origin: string | undefined) => {
}
});
// console.log(toAdd)
// console.log(toRemove)
let filtered = data.filter(o =>
!toAdd.some(b => { return o.id === b.id }) && !toRemove.some(b => { return o.id === b.id }) && !(new Date(o.departure_time) < new Date())
)
@ -124,7 +118,6 @@ export const useFetchOrigin = (origin: string | undefined) => {
addData(Stores.Departure, c)
})
// newArray.sort((a,b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
newArray.sort((a, b) => new Date(a.origin).getTime() - new Date(b.origin).getTime())
setZones(newArray);
})