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

12
browser-domain/src/App.tsx
View File

@ -6,7 +6,7 @@ import { CreateFlight } from "./components/CreateFlight/CreateFlight";
import { Button } from "antd"; import { Button } from "antd";
import useAuth, { AuthProvider } from "./useAuth"; import useAuth, { AuthProvider } from "./useAuth";
function Router() { function Router() {
const { user, logout, isAirline } = useAuth(); const { user, logout, isAirline } = useAuth();
return ( return (
@ -14,9 +14,9 @@ import useAuth, { AuthProvider } from "./useAuth";
<Routes> <Routes>
<Route path="/login" element={<LogIn />} /> <Route path="/login" element={<LogIn />} />
<Route path="/signup" element={<SignUp />} /> <Route path="/signup" element={<SignUp />} />
<Route path="/home" element={!user ? <LogIn/> :<Home/>} /> <Route path="/home" element={!user ? <LogIn /> : <Home />} />
<Route path="/create-flight" element={!isAirline ? <LogIn/> :<CreateFlight/>} /> <Route path="/create-flight" element={!isAirline ? <LogIn /> : <CreateFlight />} />
<Route path="/" element={!user ? <LogIn/> :<Home/>} /> <Route path="/" element={!user ? <LogIn /> : <Home />} />
</Routes> </Routes>
<div className="LogoutButton"> <div className="LogoutButton">
{ {
@ -30,12 +30,12 @@ import useAuth, { AuthProvider } from "./useAuth";
</div> </div>
</div> </div>
); );
} }
function App() { function App() {
return ( return (
<AuthProvider> <AuthProvider>
<Router/> <Router />
</AuthProvider> </AuthProvider>
); );
} }

6
browser-domain/src/Types.d.ts vendored
View File

@ -35,9 +35,9 @@ export interface Flight {
departure_time: string; departure_time: string;
arrival_time: string; arrival_time: string;
gate: string; gate: string;
} }
export interface FlightCreate { export interface FlightCreate {
flight_code: string; flight_code: string;
status: string; status: string;
origin: string; origin: string;
@ -45,4 +45,4 @@ export interface Flight {
departure_time: string; departure_time: string;
arrival_time: string; arrival_time: string;
gate: string; gate: string;
} }

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

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

14
browser-domain/src/components/CreateFlight/FlightForm.css
View File

@ -5,26 +5,26 @@
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
label { label {
display: block; display: block;
margin-bottom: 10px; margin-bottom: 10px;
} }
input { input {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
margin-top: 4px; margin-top: 4px;
margin-bottom: 10px; margin-bottom: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
button { button {
background-color: #4caf50; background-color: #4caf50;
color: white; color: white;
padding: 10px 15px; padding: 10px 15px;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }

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

@ -10,11 +10,6 @@ export const LogIn = () => {
return ( return (
<div className="Box Small"> <div className="Box Small">
<div className="Section"> <div className="Section">
<img
alt="logo"
className="Image"
src="https://www.seekpng.com/png/full/353-3537757_logo-itba.png"
/>
<div className="Section"> <div className="Section">
<Input <Input
placeholder="User" placeholder="User"
@ -27,7 +22,7 @@ export const LogIn = () => {
<Button <Button
style={{ width: "100%" }} style={{ width: "100%" }}
onClick={async () => onClick={async () =>
login({email, password}) login({ email, password })
} }
loading={loading} loading={loading}
> >

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

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

2
browser-domain/src/hooks/useFetchZones.tsx
View File

@ -14,7 +14,7 @@ export const useFetchZones = (origin: string | null) => {
.then((data) => { .then((data) => {
setZones(data); setZones(data);
}) })
.catch((error) => {}); .catch((error) => { });
}, []); }, []);
return { zones, error }; return { zones, error };

26
browser-domain/src/useAuth.tsx
View File

@ -1,10 +1,10 @@
import React, {createContext, ReactNode, useContext, useEffect, useMemo, useState} from "react"; import React, { createContext, ReactNode, useContext, useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import { Credentials, TokenData, User } from "./Types"; import { Credentials, TokenData, User } from "./Types";
import { fetchUserById, logIn, tokenStatus } from "./Api"; import { fetchUserById, logIn, tokenStatus } from "./Api";
import jwt_decode from "jwt-decode"; import jwt_decode from "jwt-decode";
interface AuthContextType { interface AuthContextType {
user?: User; user?: User;
loading: boolean; loading: boolean;
isAirline: boolean; isAirline: boolean;
@ -12,17 +12,17 @@ import jwt_decode from "jwt-decode";
login: (credentials: Credentials) => void; login: (credentials: Credentials) => void;
signUp: (email: string, name: string, password: string) => void; signUp: (email: string, name: string, password: string) => void;
logout: () => void; logout: () => void;
} }
const AuthContext = createContext<AuthContextType>( const AuthContext = createContext<AuthContextType>(
{} as AuthContextType {} as AuthContextType
); );
export function AuthProvider({ export function AuthProvider({
children, children,
}: { }: {
children: ReactNode; children: ReactNode;
}): JSX.Element { }): JSX.Element {
const [user, setUser] = useState<User>(); const [user, setUser] = useState<User>();
const [error, setError] = useState<any>(); const [error, setError] = useState<any>();
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
@ -50,7 +50,7 @@ import jwt_decode from "jwt-decode";
tokenStatus(existingToken) tokenStatus(existingToken)
.then((res) => fetchUserById(res.id) .then((res) => fetchUserById(res.id)
.then((res) => setUser(res)) .then((res) => setUser(res))
.catch((_error) => {}) .catch((_error) => { })
.finally(() => setLoadingInitial(false)) .finally(() => setLoadingInitial(false))
) )
.catch((_error) => { .catch((_error) => {
@ -82,7 +82,7 @@ import jwt_decode from "jwt-decode";
// .finally(() => setLoading(false)); // .finally(() => setLoading(false));
} }
function signUp(email: string, name: string, password: string) {} function signUp(email: string, name: string, password: string) { }
function logout() { function logout() {
localStorage.removeItem("token"); localStorage.removeItem("token");
@ -108,8 +108,8 @@ import jwt_decode from "jwt-decode";
{!loadingInitial && children} {!loadingInitial && children}
</AuthContext.Provider> </AuthContext.Provider>
); );
} }
export default function useAuth() { export default function useAuth() {
return useContext(AuthContext); return useContext(AuthContext);
} }

7
browser-domain/test.sh
View File

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

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

@ -1,5 +1,5 @@
import { Axios, AxiosError } from "axios"; import { Axios, AxiosError } from "axios";
import { Credentials, User, Flight } from "./Types"; import { Flight } from "./Types";
const instance = new Axios({ const instance = new Axios({
baseURL: process.env.REACT_APP_ENDPOINT ? process.env.REACT_APP_ENDPOINT : "http://127.0.0.1:5000/", baseURL: process.env.REACT_APP_ENDPOINT ? process.env.REACT_APP_ENDPOINT : "http://127.0.0.1:5000/",
@ -33,5 +33,5 @@ export const fetchZones = (origin: string | undefined, destination: string | und
return instance.get("flights" + return instance.get("flights" +
(origin ? "?origin=" + origin : "") + (origin ? "?origin=" + origin : "") +
(destination ? "?destination=" + destination : "") + (destination ? "?destination=" + destination : "") +
(lastUpdate ? ( origin ? "&lastUpdated=" : "?lastUpdated=") + lastUpdate : "")) (lastUpdate ? (origin ? "&lastUpdated=" : "?lastUpdated=") + lastUpdate : ""))
}; };

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

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

2
screen-domain/src/Types.d.ts vendored
View File

@ -30,4 +30,4 @@ export interface Flight {
departure_time: string; departure_time: string;
arrival_time: string; arrival_time: string;
gate: string; gate: string;
} }

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

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

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

@ -1,7 +1,8 @@
/* .flight-card { .flight-card {
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: flex-start;
padding: 16px; padding: 16px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 8px; border-radius: 8px;
@ -16,30 +17,7 @@
.flight-details { .flight-details {
display: flex; display: flex;
align-items: center; flex-direction: column;
} margin-top: 16px;
} */
.flight-card {
display: flex;
flex-direction: column; /* Display as a column instead of a row */
justify-content: space-between;
align-items: flex-start; /* Align items to the start of the column */
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;
flex-direction: column; /* Display details as a column */
margin-top: 16px; /* Add some space between the two rows */
}
} }
}

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 React from "react";
import { Avatar, Space, Typography, Tag } from "antd"; import { Avatar, Space, Typography, Tag } from "antd";
import { RightOutlined, ClockCircleOutlined, SwapOutlined, EnvironmentOutlined, CalendarOutlined } from "@ant-design/icons"; 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 { interface FlightProps {
flight_code: string; flight_code: string;

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

@ -12,7 +12,6 @@ interface Props {
export const Departure: React.FC<Props> = (props) => { export const Departure: React.FC<Props> = (props) => {
let origin = process.env.REACT_APP_ORIGIN; let origin = process.env.REACT_APP_ORIGIN;
// let destination = process.env.REACT_APP_ORIGIN;
const { zones, error } = useFetchOrigin(origin); const { zones, error } = useFetchOrigin(origin);
const [startIndex, setStartIndex] = useState(0); const [startIndex, setStartIndex] = useState(0);
@ -22,7 +21,6 @@ export const Departure: React.FC<Props> = (props) => {
if (zones.length <= 10) { if (zones.length <= 10) {
return; return;
} }
// setStartIndex((prevIndex) => (prevIndex + 10) % zones.length);
setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10)); setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10));
}, 5000); }, 5000);
@ -34,30 +32,12 @@ export const Departure: React.FC<Props> = (props) => {
<div > <div >
<h2>Departure</h2> <h2>Departure</h2>
<div className="Items"> <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> <Table>
<Thead> <Thead>
<Tr> <Tr>
<Th>Code</Th> <Th>Code</Th>
{/* <Th>Departure</Th> */}
<Th>Time</Th> <Th>Time</Th>
<Th>Destination</Th> <Th>Destination</Th>
{/* <Th>Arrival time</Th> */}
<Th>Gate</Th> <Th>Gate</Th>
<Th>Status</Th> <Th>Status</Th>
</Tr> </Tr>
@ -66,18 +46,10 @@ export const Departure: React.FC<Props> = (props) => {
{zones.length > 0 && ( {zones.length > 0 && (
<> <>
{zones.slice(startIndex, startIndex + 10).map((flight) => ( {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' : ''}> <Tr key={flight.id} className={flight.status === 'Delayed' ? 'delayed-flight' : ''}>
{/* <td>{flight.id}</td> */} <Td>{flight.flight_code}</Td>
<Td>{flight.id}-{flight.flight_code}</Td>
{/* <Td>{flight.origin}</Td> */}
<Td>{flight.departure_time}</Td> <Td>{flight.departure_time}</Td>
<Td>{flight.destination}</Td> <Td>{flight.destination}</Td>
{/* <Td>{flight.arrival_time}</Td> */}
<Td>{flight.gate}</Td> <Td>{flight.gate}</Td>
<Td>{flight.status}</Td> <Td>{flight.status}</Td>
</Tr> </Tr>
@ -95,17 +67,14 @@ export const Departure: React.FC<Props> = (props) => {
<Td></Td> <Td></Td>
</Tr> </Tr>
) )
}) } })}
</> </>
) )
} }
{/* })} */}
</> </>
)} )}
</Tbody> </Tbody>
</Table> </Table>
{/* </tbody>
</table> */}
{error ? <div className="Disconnected">{error}</div> : <></>} {error ? <div className="Disconnected">{error}</div> : <></>}
</div> </div>
</div> </div>

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

@ -1,42 +1,43 @@
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.App { .App {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
} }
table { table {
width: 80%; width: 80%;
margin: 20px auto; margin: 20px auto;
border-collapse: collapse; border-collapse: collapse;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #fff; background-color: #fff;
} }
th, td { th,
border: 1px solid #ddd; td {
padding: 10px; border: 1px solid #ddd;
text-align: left; padding: 10px;
text-align: left;
} }
th { th {
background-color: #4CAF50; background-color: #4CAF50;
color: #fff; color: #fff;
} }
tbody tr:hover { tbody tr:hover {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
tfoot { tfoot {
background-color: #4CAF50; background-color: #4CAF50;
color: #fff; color: #fff;
} }
.delayed-flight { .delayed-flight {
background-color: #ffcccc; /* Light red for delayed flights */ background-color: #ffcccc;
color: #ff0000; /* Red text for delayed flights */ color: #ff0000;
} }

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

@ -7,14 +7,14 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
} }
div { div {
text-align: center; text-align: center;
} }
button { button {
background-color: #4CAF50; /* Green */ background-color: #4CAF50;
border: none; border: none;
color: white; color: white;
padding: 15px 32px; padding: 15px 32px;
@ -26,8 +26,8 @@ body {
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
button:hover { button:hover {
background-color: #45a049; /* Darker green on hover */ background-color: #45a049;
} }

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

@ -7,11 +7,7 @@ export enum Stores {
Arrival = 'arrival' Arrival = 'arrival'
} }
interface EventTarget { export const initDB = (): Promise<boolean | IDBDatabase> => {
result: any
}
export const initDB = (): Promise<boolean|IDBDatabase> => {
return new Promise((resolve) => { return new Promise((resolve) => {
request = indexedDB.open('myDB'); request = indexedDB.open('myDB');
@ -40,37 +36,17 @@ export const initDB = (): Promise<boolean|IDBDatabase> => {
}); });
}; };
export const addData = <T>(storeName: string, data: T): Promise<T|string|null> => { export const addData = <T>(storeName: string, data: T): Promise<T | string | null> => {
return new Promise((resolve) => { 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 tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName); const store = tx.objectStore(storeName);
store.add(data); store.add(data);
resolve(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> => { export const deleteData = (storeName: string, key: number): Promise<boolean> => {
return new Promise((resolve) => { 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 tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName); const store = tx.objectStore(storeName);
const res = store.delete(key); const res = store.delete(key);
@ -83,17 +59,11 @@ export const deleteData = (storeName: string, key: number): Promise<boolean> =>
console.log("error") console.log("error")
resolve(false); resolve(false);
} }
// };
}); });
}; };
export const updateData = <T>(storeName: string, key: number, data: T): Promise<T|string|null> => { export const updateData = <T>(storeName: string, key: number, data: T): Promise<T | string | null> => {
return new Promise((resolve) => { 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 tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName); const store = tx.objectStore(storeName);
const res = store.get(key); const res = store.get(key);
@ -105,28 +75,18 @@ export const updateData = <T>(storeName: string, key: number, data: T): Promise<
res.onerror = () => { res.onerror = () => {
resolve(null); resolve(null);
} }
// };
}); });
}; };
export const getStoreData = <T>(storeName: Stores): Promise<T[]|null> => { export const getStoreData = <T>(storeName: Stores): Promise<T[] | null> => {
return new Promise((resolve) => { 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 tx = db.transaction(storeName, 'readonly');
const store = tx.objectStore(storeName); const store = tx.objectStore(storeName);
const res = store.getAll(); const res = store.getAll();
res.onsuccess = () => { res.onsuccess = () => {
resolve(res.result); resolve(res.result);
}; };
// };
}); });
}; };
export {}; export { };

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

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