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

56
browser-domain/src/Api.ts
View File

@ -2,55 +2,55 @@ import { Axios, AxiosError } from "axios";
import { Credentials, Token, User, Flight, FlightCreate } from "./Types";
const instance = new Axios({
baseURL: process.env.REACT_APP_ENDPOINT ? process.env.REACT_APP_ENDPOINT : "http://127.0.0.1:5000/",
headers: {
accept: "application/json",
"Content-Type": "application/json",
},
baseURL: process.env.REACT_APP_ENDPOINT ? process.env.REACT_APP_ENDPOINT : "http://127.0.0.1:5000/",
headers: {
accept: "application/json",
"Content-Type": "application/json",
},
validateStatus: (x) => { return !(x < 200 || x > 204) }
});
instance.interceptors.request.use((request) => {
request.data = JSON.stringify(request.data);
return request;
request.data = JSON.stringify(request.data);
return request;
});
instance.interceptors.response.use(
(response) => {
return JSON.parse(response.data);
},
(error) => {
const err = error as AxiosError;
return Promise.reject(err);
}
(response) => {
return JSON.parse(response.data);
},
(error) => {
const err = error as AxiosError;
return Promise.reject(err);
}
);
export const createUser = (
credentials: Credentials
credentials: Credentials
): Promise<{ id?: string; message: string }> => {
return instance.post("users", credentials);
return instance.post("users", credentials);
};
export const fetchUsers = (): Promise<User[]> => {
return instance.get("users");
return instance.get("users");
};
export const fetchUserById = (id: number): Promise<User> => {
return instance.get("users/" + id);
return instance.get("users/" + id);
};
export const logIn = (
credentials: Credentials
credentials: Credentials
): Promise<Token & Partial<{ message: string; user_id: number }>> => {
return instance.post("auth/login", credentials);
return instance.post("auth/login", credentials);
};
export const tokenStatus = (
token: string
token: string
): Promise<User & { message?: string }> => {
return instance.get("auth/status", {
headers: { Authorization: `Bearer ${token}` },
});
return instance.get("auth/status", {
headers: { Authorization: `Bearer ${token}` },
});
};
export const fetchZones = (origin: string | null): Promise<Flight[]> => {
@ -58,10 +58,10 @@ export const fetchZones = (origin: string | null): Promise<Flight[]> => {
};
export const createFlight = (
flight_data: FlightCreate,
flight_data: FlightCreate,
token: string
): Promise<Flight> => {
return instance.post("flights", flight_data, {
headers: { Authorization: `Bearer ${token}` },
});
return instance.post("flights", flight_data, {
headers: { Authorization: `Bearer ${token}` },
});
};

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

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

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

@ -1,29 +1,29 @@
export interface Credentials {
password: string;
email: string;
username?: string;
password: string;
email: string;
username?: string;
}
export interface Token {
refresh_token: string;
access_token: string;
refresh_token: string;
access_token: string;
}
export interface TokenData {
sub: string;
airline: boolean;
sub: string;
airline: boolean;
}
export interface User {
id: number;
username: string;
email: string;
created_date?: Date;
id: number;
username: string;
email: string;
created_date?: Date;
}
export interface Zone {
id: number;
name: string;
id: number;
name: string;
}
export interface Flight {
@ -35,9 +35,9 @@ export interface Flight {
departure_time: string;
arrival_time: string;
gate: string;
}
}
export interface FlightCreate {
export interface FlightCreate {
flight_code: string;
status: string;
origin: string;
@ -45,4 +45,4 @@ export interface Flight {
departure_time: string;
arrival_time: string;
gate: string;
}
}

14
browser-domain/src/components/Button/Button.test.tsx
View File

@ -5,13 +5,13 @@ import { render, screen } from "@testing-library/react";
import { Button } from "antd";
describe("Button Component Test", () => {
test("Display button label and clicked", async () => {
const onClick = jest.fn();
test("Display button label and clicked", async () => {
const onClick = jest.fn();
render(<Button onClick={() => onClick()}>Button</Button>);
render(<Button onClick={() => onClick()}>Button</Button>);
expect(screen.getByText("Button")).toBeVisible();
await userEvent.click(screen.getByText("Button"));
expect(onClick).toBeCalled();
});
expect(screen.getByText("Button")).toBeVisible();
await userEvent.click(screen.getByText("Button"));
expect(onClick).toBeCalled();
});
});

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

@ -5,11 +5,9 @@ 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>();
const [error, setError] = useState<string | null>(null);
const [flight, setFlight] = useState<Flight>();
const [flightData, setFlightData] = useState<FlightCreate>({
flight_code: "ABC123",
@ -19,9 +17,9 @@ export const CreateFlight = () => {
departure_time: "2023-10-09 10:00 AM",
arrival_time: "2023-10-09 12:00 PM",
gate: "A1",
});
const handleSubmit = async (event: React.FormEvent) => {
});
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
setError(null);
@ -40,79 +38,79 @@ export const CreateFlight = () => {
.catch((error) => {
setError(error as string);
});
};
};
return (
return (
<form onSubmit={handleSubmit}>
<label>
Flight Code:
<input
type="text"
value={flightData.flight_code}
onChange={(e) =>
setFlightData({ ...flightData, flight_code: e.target.value })
}
/>
</label>
<label>
Status:
<input
type="text"
value={flightData.status}
onChange={(e) =>
setFlightData({ ...flightData, status: e.target.value })
}
/>
</label>
<label>
Origin:
<input
type="text"
value={flightData.origin}
onChange={(e) =>
setFlightData({ ...flightData, origin: e.target.value })
}
/>
</label>
<label>
Destination:
<input
type="text"
value={flightData.destination}
onChange={(e) =>
setFlightData({ ...flightData, destination: e.target.value })
}
/>
</label>
<label>
Departure Time:
<input
type="text"
value={flightData.departure_time}
onChange={(e) =>
setFlightData({ ...flightData, departure_time: e.target.value })
}
/>
</label>
<label>
Arrival Time:
<input
type="text"
value={flightData.arrival_time}
onChange={(e) =>
setFlightData({ ...flightData, arrival_time: e.target.value })
}
/>
</label>
<label>
Gate:
<input
type="text"
value={flightData.gate}
onChange={(e) => setFlightData({ ...flightData, gate: e.target.value })}
/>
</label>
<button type="submit">Submit</button>
</form>
);
<label>
Flight Code:
<input
type="text"
value={flightData.flight_code}
onChange={(e) =>
setFlightData({ ...flightData, flight_code: e.target.value })
}
/>
</label>
<label>
Status:
<input
type="text"
value={flightData.status}
onChange={(e) =>
setFlightData({ ...flightData, status: e.target.value })
}
/>
</label>
<label>
Origin:
<input
type="text"
value={flightData.origin}
onChange={(e) =>
setFlightData({ ...flightData, origin: e.target.value })
}
/>
</label>
<label>
Destination:
<input
type="text"
value={flightData.destination}
onChange={(e) =>
setFlightData({ ...flightData, destination: e.target.value })
}
/>
</label>
<label>
Departure Time:
<input
type="text"
value={flightData.departure_time}
onChange={(e) =>
setFlightData({ ...flightData, departure_time: e.target.value })
}
/>
</label>
<label>
Arrival Time:
<input
type="text"
value={flightData.arrival_time}
onChange={(e) =>
setFlightData({ ...flightData, arrival_time: e.target.value })
}
/>
</label>
<label>
Gate:
<input
type="text"
value={flightData.gate}
onChange={(e) => setFlightData({ ...flightData, gate: e.target.value })}
/>
</label>
<button type="submit">Submit</button>
</form>
);
};

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

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

10
browser-domain/src/components/Home/Card/Card.test.tsx
View File

@ -5,10 +5,10 @@ import "../../../matchMedia.mock";
import { Card } from "./Card";
describe("Card Component Test", () => {
test("Display initial, name and icon", async () => {
// render(<Card name="Belgrano" />);
test("Display initial, name and icon", async () => {
// render(<Card name="Belgrano" />);
// expect(screen.getByText("Belgrano📍")).toBeVisible();
// expect(screen.getByText("B")).toBeVisible();
});
// expect(screen.getByText("Belgrano📍")).toBeVisible();
// expect(screen.getByText("B")).toBeVisible();
});
});

92
browser-domain/src/components/Home/Card/Card.tsx
View File

@ -5,59 +5,59 @@ import { RightOutlined, ClockCircleOutlined, SwapOutlined, EnvironmentOutlined,
import "./Card.css";
interface FlightProps {
flight_code: string;
status: string;
origin: string;
destination: string;
departure_time: string;
arrival_time: string;
gate: string;
flight_code: string;
status: string;
origin: string;
destination: string;
departure_time: string;
arrival_time: string;
gate: string;
}
interface CardProps {
flight: FlightProps;
flight: FlightProps;
}
const { Text } = Typography;
export const Card: React.FC<CardProps> = ({ flight }) => {
return (
<div className="flight-card">
<Space size={8} align="center">
<Avatar size={64} icon={<RightOutlined />} />
<div>
<Text strong>{flight.flight_code}</Text>
<div>
<Text type="secondary">
{flight.origin} <SwapOutlined /> {flight.destination}
</Text>
</div>
return (
<div className="flight-card">
<Space size={8} align="center">
<Avatar size={64} icon={<RightOutlined />} />
<div>
<Text strong>{flight.flight_code}</Text>
<div>
<Text type="secondary">
{flight.origin} <SwapOutlined /> {flight.destination}
</Text>
</div>
</div>
</Space>
<div className="flight-details">
<Space size={8} direction="vertical">
<Text strong>Status:</Text>
<Tag color={flight.status === "En ruta" ? "green" : "orange"}>{flight.status}</Tag>
</Space>
<Space size={8} direction="vertical">
<Text strong>Departure:</Text>
<Space size={2} align="baseline">
<CalendarOutlined />
{flight.departure_time}
</Space>
</Space>
<Space size={8} direction="vertical">
<Text strong>Arrival:</Text>
<Space size={2} align="baseline">
<CalendarOutlined />
{flight.arrival_time}
</Space>
</Space>
<Space size={8} direction="vertical">
<Text strong>Gate:</Text>
<Text>{flight.gate}</Text>
</Space>
</div>
</div>
</Space>
<div className="flight-details">
<Space size={8} direction="vertical">
<Text strong>Status:</Text>
<Tag color={flight.status === "En ruta" ? "green" : "orange"}>{flight.status}</Tag>
</Space>
<Space size={8} direction="vertical">
<Text strong>Departure:</Text>
<Space size={2} align="baseline">
<CalendarOutlined />
{flight.departure_time}
</Space>
</Space>
<Space size={8} direction="vertical">
<Text strong>Arrival:</Text>
<Space size={2} align="baseline">
<CalendarOutlined />
{flight.arrival_time}
</Space>
</Space>
<Space size={8} direction="vertical">
<Text strong>Gate:</Text>
<Text>{flight.gate}</Text>
</Space>
</div>
</div>
);
);
};

30
browser-domain/src/components/Home/Home.test.tsx
View File

@ -1,8 +1,8 @@
const mockedUsedNavigate = jest.fn();
jest.mock("react-router-dom", () => ({
...jest.requireActual("react-router-dom"),
useNavigate: () => mockedUsedNavigate,
...jest.requireActual("react-router-dom"),
useNavigate: () => mockedUsedNavigate,
}));
import "../../matchMedia.mock";
@ -11,18 +11,18 @@ import { render, screen } from "@testing-library/react";
import { Home } from "./Home";
describe("Home View Test", () => {
test("Display initial, name and icon", async () => {
// render(
// <Home
// zones={[
// { id: 1, name: "Belgrano" },
// { id: 2, name: "San Isidro" },
// ]}
// />
// );
test("Display initial, name and icon", async () => {
// render(
// <Home
// zones={[
// { id: 1, name: "Belgrano" },
// { id: 2, name: "San Isidro" },
// ]}
// />
// );
// expect(screen.getByText("Zones")).toBeVisible();
// expect(screen.getByText("Belgrano📍")).toBeVisible();
// expect(screen.getByText("San Isidro📍")).toBeVisible();
});
// expect(screen.getByText("Zones")).toBeVisible();
// expect(screen.getByText("Belgrano📍")).toBeVisible();
// expect(screen.getByText("San Isidro📍")).toBeVisible();
});
});

26
browser-domain/src/components/Home/Home.tsx
View File

@ -6,13 +6,13 @@ import { useNavigate } from "react-router";
import useAuth from "../../useAuth";
interface Props {
flights?: Flight[];
flights?: Flight[];
}
export const Home: React.FC<Props> = (props) => {
const urlParams = new URLSearchParams(window.location.search);
const origin = urlParams.get('origin');
const { zones, error } = useFetchZones(origin);
const { zones, error } = useFetchZones(origin);
const navigate = useNavigate()
const { loading, isAirline } = useAuth();
@ -21,16 +21,16 @@ export const Home: React.FC<Props> = (props) => {
return <div>Loading...</div>;
}
return (
<div className="Box">
return (
<div className="Box">
{isAirline ? <button onClick={() => { navigate("/create-flight") }}>CREATE FLIGHT</button> : <></>}
<h2>Flights</h2>
<div className="Items">
{(props.flights ? props.flights : zones).map((u) => {
return <Card key={u.id} flight={u} />;
})}
{error ? <div className="Disconnected">{error}</div> : <></>}
</div>
</div>
);
<h2>Flights</h2>
<div className="Items">
{(props.flights ? props.flights : zones).map((u) => {
return <Card key={u.id} flight={u} />;
})}
{error ? <div className="Disconnected">{error}</div> : <></>}
</div>
</div>
);
};

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

@ -4,42 +4,37 @@ import useAuth from "../../useAuth";
export const LogIn = () => {
const { login, loading, error } = useAuth();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
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"
onChange={(ev) => setEmail(ev.target.value)}
/>
<Input.Password
placeholder="Password"
onChange={(ev) => setPassword(ev.target.value)}
/>
<Button
style={{ width: "100%" }}
onClick={async () =>
login({email, password})
}
loading={loading}
>
Log in
</Button>
{error ? (
<div className="Disconnected">{error}</div>
) : (
<></>
)}
</div>
</div>
</div>
);
return (
<div className="Box Small">
<div className="Section">
<div className="Section">
<Input
placeholder="User"
onChange={(ev) => setEmail(ev.target.value)}
/>
<Input.Password
placeholder="Password"
onChange={(ev) => setPassword(ev.target.value)}
/>
<Button
style={{ width: "100%" }}
onClick={async () =>
login({ email, password })
}
loading={loading}
>
Log in
</Button>
{error ? (
<div className="Disconnected">{error}</div>
) : (
<></>
)}
</div>
</div>
</div>
);
};

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

@ -3,61 +3,56 @@ import { Button, Input } from "antd";
import { useCreateUser } from "../../hooks/useCreateUser";
export const SignUp = () => {
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [repeatPassword, setRepeatPassword] = useState("");
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [repeatPassword, setRepeatPassword] = useState("");
const { createUser, isLoading, error } = useCreateUser();
const { createUser, isLoading, error } = useCreateUser();
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"
placeholder="Email"
onChange={(ev) => setEmail(ev.target.value)}
/>
<Input
placeholder="Username"
onChange={(ev) => setUsername(ev.target.value)}
/>
<Input.Password
placeholder="Password"
onChange={(ev) => setPassword(ev.target.value)}
/>
<Input.Password
placeholder="Repeat password"
onChange={(ev) => setRepeatPassword(ev.target.value)}
/>
<Button
style={{ width: "100%" }}
onClick={async () =>
await createUser({ email, password, username })
}
loading={isLoading}
disabled={
email === "" ||
username === "" ||
password === "" ||
password !== repeatPassword
}
>
Sign up
</Button>
{error ? (
<div className="Disconnected">{error}</div>
) : (
<></>
)}
</div>
</div>
</div>
);
return (
<div className="Box Small">
<div className="Section">
<div className="Section">
<Input
type="email"
placeholder="Email"
onChange={(ev) => setEmail(ev.target.value)}
/>
<Input
placeholder="Username"
onChange={(ev) => setUsername(ev.target.value)}
/>
<Input.Password
placeholder="Password"
onChange={(ev) => setPassword(ev.target.value)}
/>
<Input.Password
placeholder="Repeat password"
onChange={(ev) => setRepeatPassword(ev.target.value)}
/>
<Button
style={{ width: "100%" }}
onClick={async () =>
await createUser({ email, password, username })
}
loading={isLoading}
disabled={
email === "" ||
username === "" ||
password === "" ||
password !== repeatPassword
}
>
Sign up
</Button>
{error ? (
<div className="Disconnected">{error}</div>
) : (
<></>
)}
</div>
</div>
</div>
);
};

26
browser-domain/src/hooks/useCreateFlight.tsx
View File

@ -4,11 +4,11 @@ import { User, Flight, FlightCreate } from "../Types";
import { createFlight } from "../Api";
export const useCreateFlight = (flight_data: FlightCreate) => {
const [error, setError] = useState<string | null>(null);
const [flight, setFlight] = useState<Flight>();
const [error, setError] = useState<string | null>(null);
const [flight, setFlight] = useState<Flight>();
useEffect(() => {
setError(null);
useEffect(() => {
setError(null);
const token = localStorage.getItem("token");
if (!token) {
@ -16,14 +16,14 @@ export const useCreateFlight = (flight_data: FlightCreate) => {
return;
}
createFlight(flight_data, token)
.then((data) => {
setFlight(data);
})
.catch((error) => {
setError(error as string);
});
}, []);
createFlight(flight_data, token)
.then((data) => {
setFlight(data);
})
.catch((error) => {
setError(error as string);
});
}, []);
return { flight, error };
return { flight, error };
};

38
browser-domain/src/hooks/useCreateUser.tsx
View File

@ -4,28 +4,28 @@ import { createUser as createUserAPI } from "../Api";
import useAuth from "../useAuth";
export const useCreateUser = () => {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const { login } = useAuth();
const createUser = async (credentials: Credentials): Promise<void> => {
try {
setIsLoading(true);
setError(null);
const createUser = async (credentials: Credentials): Promise<void> => {
try {
setIsLoading(true);
setError(null);
const createResponse = await createUserAPI(credentials);
const createResponse = await createUserAPI(credentials);
if (createResponse.id) {
login(credentials);
} else {
setError(createResponse.message);
}
} catch (error) {
setError(error as string);
} finally {
setIsLoading(false);
}
};
if (createResponse.id) {
login(credentials);
} else {
setError(createResponse.message);
}
} catch (error) {
setError(error as string);
} finally {
setIsLoading(false);
}
};
return { createUser, isLoading, error };
return { createUser, isLoading, error };
};

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

@ -4,18 +4,18 @@ import { User, Flight } from "../Types";
import { fetchZones } from "../Api";
export const useFetchZones = (origin: string | null) => {
const [error, setError] = useState<string | null>(null);
const [zones, setZones] = useState<Flight[]>([]);
const [error, setError] = useState<string | null>(null);
const [zones, setZones] = useState<Flight[]>([]);
useEffect(() => {
setError(null);
useEffect(() => {
setError(null);
fetchZones(origin)
.then((data) => {
setZones(data);
})
.catch((error) => {});
}, []);
fetchZones(origin)
.then((data) => {
setZones(data);
})
.catch((error) => { });
}, []);
return { zones, error };
return { zones, error };
};

128
browser-domain/src/index.css
View File

@ -1,106 +1,106 @@
body {
margin: 0;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.App {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #eff2f7;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #eff2f7;
}
.Box {
border-radius: 20px;
box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2);
padding: 50px;
gap: 30px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 20px;
box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2);
padding: 50px;
gap: 30px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.Small {
width: 250px;
height: 400px;
width: 250px;
height: 400px;
}
.Section {
flex: 1;
width: 100%;
padding: 30px 50px;
gap: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1;
width: 100%;
padding: 30px 50px;
gap: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.Image {
width: 150px;
width: 150px;
}
.Connected {
color: green;
color: green;
}
.Disconnected {
color: red;
color: red;
}
.FloatingStatus {
position: absolute;
top: 10px;
right: 50px;
position: absolute;
top: 10px;
right: 50px;
}
.LogoutButton {
position: absolute;
bottom: 10px;
right: 50px;
position: absolute;
bottom: 10px;
right: 50px;
}
.Card {
border-radius: 8px;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
gap: 10px;
padding: 10px;
width: 100%;
background-color: white;
display: flex;
align-items: center;
border-radius: 8px;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
gap: 10px;
padding: 10px;
width: 100%;
background-color: white;
display: flex;
align-items: center;
}
.Items {
height: 100%;
width: 100%;
display: flex;
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.List {
width: 100%;
height: 500px;
gap: 30px;
padding: 20px;
overflow-y: auto;
display: flex;
align-items: center;
flex-direction: column;
}
width: 100%;
height: 500px;
gap: 30px;
padding: 20px;
overflow-y: auto;
display: flex;
align-items: center;
flex-direction: column;
}

116
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 { Credentials, TokenData, User } from "./Types";
import { fetchUserById, logIn, tokenStatus } from "./Api";
import jwt_decode from "jwt-decode";
interface AuthContextType {
interface AuthContextType {
user?: User;
loading: boolean;
isAirline: boolean;
@ -12,28 +12,28 @@ import jwt_decode from "jwt-decode";
login: (credentials: Credentials) => void;
signUp: (email: string, name: string, password: string) => void;
logout: () => void;
}
const AuthContext = createContext<AuthContextType>(
}
const AuthContext = createContext<AuthContextType>(
{} as AuthContextType
);
export function AuthProvider({
);
export function AuthProvider({
children,
}: {
}: {
children: ReactNode;
}): JSX.Element {
}): JSX.Element {
const [user, setUser] = useState<User>();
const [error, setError] = useState<any>();
const [loading, setLoading] = useState<boolean>(false);
const [loadingInitial, setLoadingInitial] = useState<boolean>(true);
const [isAirline, setIsAirline] = useState(false);
const [isAirline, setIsAirline] = useState(false);
const navigate = useNavigate();
useEffect(() => {
if (error) setError(undefined);
if (error) setError(undefined);
}, [window.location.pathname]);
useEffect(() => {
const existingToken = localStorage.getItem("token");
if (existingToken) {
@ -48,68 +48,68 @@ import jwt_decode from "jwt-decode";
}
tokenStatus(existingToken)
.then((res) => fetchUserById(res.id)
.then((res) => setUser(res))
.catch((_error) => {})
.finally(() => setLoadingInitial(false))
)
.catch((_error) => {
setLoadingInitial(false)
logout()
})
.then((res) => fetchUserById(res.id)
.then((res) => setUser(res))
.catch((_error) => { })
.finally(() => setLoadingInitial(false))
)
.catch((_error) => {
setLoadingInitial(false)
logout()
})
// .finally(() => setLoadingInitial(false));
} else {
setLoadingInitial(false)
}
}, []);
function login(credentials: Credentials) {
setLoading(true);
const tokens = logIn(credentials)
.then((x) => {
localStorage.setItem("token", x.access_token);
const airline = (jwt_decode(x.access_token) as TokenData).airline;
setIsAirline(airline)
const user = fetchUserById(x.user_id as number)
.then(y => {
setUser(y);
navigate("/home")
.then((x) => {
localStorage.setItem("token", x.access_token);
const airline = (jwt_decode(x.access_token) as TokenData).airline;
setIsAirline(airline)
const user = fetchUserById(x.user_id as number)
.then(y => {
setUser(y);
navigate("/home")
})
.catch((error) => setError(error))
.finally(() => setLoading(false));
})
.catch((error) => setError(error))
.finally(() => setLoading(false));
})
.catch((error) => setError(error))
// .finally(() => setLoading(false));
}
function signUp(email: string, name: string, password: string) {}
function signUp(email: string, name: string, password: string) { }
function logout() {
localStorage.removeItem("token");
setUser(undefined);
setUser(undefined);
navigate("/login")
}
const memoedValue = useMemo(
() => ({
user,
loading,
isAirline,
error,
login,
signUp,
logout,
}),
[user, isAirline, loading, error]
() => ({
user,
loading,
isAirline,
error,
login,
signUp,
logout,
}),
[user, isAirline, loading, error]
);
return (
<AuthContext.Provider value={memoedValue}>
{!loadingInitial && children}
</AuthContext.Provider>
<AuthContext.Provider value={memoedValue}>
{!loadingInitial && children}
</AuthContext.Provider>
);
}
export default function useAuth() {
}
export default function useAuth() {
return useContext(AuthContext);
}
}

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

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

@ -1,37 +1,37 @@
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/",
headers: {
accept: "application/json",
"Content-Type": "application/json",
},
baseURL: process.env.REACT_APP_ENDPOINT ? process.env.REACT_APP_ENDPOINT : "http://127.0.0.1:5000/",
headers: {
accept: "application/json",
"Content-Type": "application/json",
},
validateStatus: (x) => { return !(x < 200 || x > 204) }
});
instance.interceptors.response.use(
(response) => {
return JSON.parse(response.data);
},
(error) => {
const err = error as AxiosError;
return Promise.reject(err);
}
(response) => {
return JSON.parse(response.data);
},
(error) => {
const err = error as AxiosError;
return Promise.reject(err);
}
);
instance.interceptors.request.use((request) => {
request.data = JSON.stringify(request.data);
return request;
request.data = JSON.stringify(request.data);
return request;
});
export const ping = () => {
return instance.get("health");
return instance.get("health");
};
export const fetchZones = (origin: string | undefined, destination: string | undefined, lastUpdate: string | null): Promise<Flight[]> => {
return instance.get("flights" +
(origin ? "?origin=" + origin : "") +
(destination ? "?destination=" + destination : "") +
(lastUpdate ? ( origin ? "&lastUpdated=" : "?lastUpdated=") + lastUpdate : ""))
return instance.get("flights" +
(origin ? "?origin=" + origin : "") +
(destination ? "?destination=" + destination : "") +
(lastUpdate ? (origin ? "&lastUpdated=" : "?lastUpdated=") + lastUpdate : ""))
};

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

@ -1,26 +1,22 @@
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();
const connection = useIsConnected();
return (
<div className="App">
<Routes>
<Route path="/departure" element={<Departure/>} />
<Route path="/arrival" element={<Arrival/>} />
<Route path="/" element={<Home/>} />
</Routes>
<div className="FloatingStatus">{connection}</div>
</div>
);
return (
<div className="App">
<Routes>
<Route path="/departure" element={<Departure />} />
<Route path="/arrival" element={<Arrival />} />
<Route path="/" element={<Home />} />
</Routes>
<div className="FloatingStatus">{connection}</div>
</div>
);
}
export default App;

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

@ -1,24 +1,24 @@
export interface Credentials {
password: string;
email: string;
username?: string;
password: string;
email: string;
username?: string;
}
export interface Token {
refresh_token: string;
access_token: string;
refresh_token: string;
access_token: string;
}
export interface User {
id: number;
username: string;
email: string;
created_date?: Date;
id: number;
username: string;
email: string;
created_date?: Date;
}
export interface Zone {
id: number;
name: string;
id: number;
name: string;
}
export interface Flight {
@ -30,4 +30,4 @@ export interface Flight {
departure_time: string;
arrival_time: string;
gate: string;
}
}

14
screen-domain/src/components/Button/Button.test.tsx
View File

@ -5,13 +5,13 @@ import { render, screen } from "@testing-library/react";
import { Button } from "antd";
describe("Button Component Test", () => {
test("Display button label and clicked", async () => {
const onClick = jest.fn();
test("Display button label and clicked", async () => {
const onClick = jest.fn();
render(<Button onClick={() => onClick()}>Button</Button>);
render(<Button onClick={() => onClick()}>Button</Button>);
expect(screen.getByText("Button")).toBeVisible();
await userEvent.click(screen.getByText("Button"));
expect(onClick).toBeCalled();
});
expect(screen.getByText("Button")).toBeVisible();
await userEvent.click(screen.getByText("Button"));
expect(onClick).toBeCalled();
});
});

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

@ -7,14 +7,13 @@ import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css';
import { useFetchDestination } from "../../hooks/useFetchDestination";
interface Props {
flights?: Flight[];
flights?: Flight[];
}
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);
const { zones, error } = useFetchDestination(destination);
const [startIndex, setStartIndex] = useState(0);
useEffect(() => {
@ -22,77 +21,45 @@ 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));
setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10));
}, 5000);
return () => clearInterval(interval);
}, [zones]);
}, [zones]);
return (
<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>
<Th>Status</Th>
</Tr>
</Thead>
<Tbody>
{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.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>
);
return (
<div >
<h2>Arrival</h2>
<div className="Items">
<Table>
<Thead>
<Tr>
<Th>Code</Th>
<Th>Origin</Th>
<Th>Time</Th>
<Th>Gate</Th>
<Th>Status</Th>
</Tr>
</Thead>
<Tbody>
{zones.length > 0 && (
<>
{zones.slice(startIndex, startIndex + 10).map((flight) => (
<Tr key={flight.id} className={flight.status === 'Delayed' ? 'delayed-flight' : ''}>
<Td>{flight.flight_code}</Td>
<Td>{flight.origin}</Td>
<Td>{flight.arrival_time}</Td>
<Td>{flight.gate}</Td>
<Td>{flight.status}</Td>
</Tr>
))}
</>
)}
</Tbody>
</Table>
{error ? <div className="Disconnected">{error}</div> : <></>}
</div>
</div>
);
};

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

@ -1,7 +1,8 @@
/* .flight-card {
.flight-card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
align-items: flex-start;
padding: 16px;
border: 1px solid #ddd;
border-radius: 8px;
@ -9,37 +10,14 @@
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 */
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);
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 */
display: flex;
flex-direction: column;
margin-top: 16px;
}
}
}

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

@ -5,10 +5,10 @@ import "../../../matchMedia.mock";
import { Card } from "./Card";
describe("Card Component Test", () => {
test("Display initial, name and icon", async () => {
// render(<Card name="Belgrano" />);
test("Display initial, name and icon", async () => {
// render(<Card name="Belgrano" />);
// expect(screen.getByText("Belgrano📍")).toBeVisible();
// expect(screen.getByText("B")).toBeVisible();
});
// expect(screen.getByText("Belgrano📍")).toBeVisible();
// expect(screen.getByText("B")).toBeVisible();
});
});

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

@ -1,101 +1,63 @@
// 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;
status: string;
origin: string;
destination: string;
departure_time: string;
arrival_time: string;
gate: string;
flight_code: string;
status: string;
origin: string;
destination: string;
departure_time: string;
arrival_time: string;
gate: string;
}
interface CardProps {
flight: FlightProps;
flight: FlightProps;
}
const { Text } = Typography;
export const Card: React.FC<CardProps> = ({ flight }) => {
return (
<div className="flight-card">
<Space size={8} align="center">
<Avatar size={64} icon={<RightOutlined />} />
<div>
<Text strong>{flight.flight_code}</Text>
<div>
<Text type="secondary">
{flight.origin} <SwapOutlined /> {flight.destination}
</Text>
</div>
return (
<div className="flight-card">
<Space size={8} align="center">
<Avatar size={64} icon={<RightOutlined />} />
<div>
<Text strong>{flight.flight_code}</Text>
<div>
<Text type="secondary">
{flight.origin} <SwapOutlined /> {flight.destination}
</Text>
</div>
</div>
</Space>
<div className="flight-details">
<Space size={8} direction="vertical">
<Text strong>Status:</Text>
<Tag color={flight.status === "En ruta" ? "green" : "orange"}>{flight.status}</Tag>
</Space>
<Space size={8} direction="vertical">
<Text strong>Departure:</Text>
<Space size={2} align="baseline">
<CalendarOutlined />
{flight.departure_time}
</Space>
</Space>
<Space size={8} direction="vertical">
<Text strong>Arrival:</Text>
<Space size={2} align="baseline">
<CalendarOutlined />
{flight.arrival_time}
</Space>
</Space>
<Space size={8} direction="vertical">
<Text strong>Gate:</Text>
<Text>{flight.gate}</Text>
</Space>
</div>
</div>
</Space>
<div className="flight-details">
<Space size={8} direction="vertical">
<Text strong>Status:</Text>
<Tag color={flight.status === "En ruta" ? "green" : "orange"}>{flight.status}</Tag>
</Space>
<Space size={8} direction="vertical">
<Text strong>Departure:</Text>
<Space size={2} align="baseline">
<CalendarOutlined />
{flight.departure_time}
</Space>
</Space>
<Space size={8} direction="vertical">
<Text strong>Arrival:</Text>
<Space size={2} align="baseline">
<CalendarOutlined />
{flight.arrival_time}
</Space>
</Space>
<Space size={8} direction="vertical">
<Text strong>Gate:</Text>
<Text>{flight.gate}</Text>
</Space>
</div>
</div>
);
);
};

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

@ -7,14 +7,13 @@ import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table';
import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css';
interface Props {
flights?: Flight[];
flights?: Flight[];
}
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 { zones, error } = useFetchOrigin(origin);
const [startIndex, setStartIndex] = useState(0);
useEffect(() => {
@ -22,92 +21,62 @@ 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));
setStartIndex((prevIndex) => (prevIndex + 10) >= zones.length ? 0 : (prevIndex + 10));
}, 5000);
return () => clearInterval(interval);
}, [zones]);
}, [zones]);
return (
<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>
</Thead>
<Tbody>
{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.departure_time}</Td>
<Td>{flight.destination}</Td>
{/* <Td>{flight.arrival_time}</Td> */}
<Td>{flight.gate}</Td>
<Td>{flight.status}</Td>
</Tr>
// );
))}
{startIndex + 10 >= zones.length && (
<>
{Array.from({ length: startIndex + 10 - zones.length }).map((_, index) => {
return (
<Tr>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
</Tr>
)
}) }
</>
)
}
{/* })} */}
</>
)}
</Tbody>
</Table>
{/* </tbody>
</table> */}
{error ? <div className="Disconnected">{error}</div> : <></>}
</div>
</div>
);
return (
<div >
<h2>Departure</h2>
<div className="Items">
<Table>
<Thead>
<Tr>
<Th>Code</Th>
<Th>Time</Th>
<Th>Destination</Th>
<Th>Gate</Th>
<Th>Status</Th>
</Tr>
</Thead>
<Tbody>
{zones.length > 0 && (
<>
{zones.slice(startIndex, startIndex + 10).map((flight) => (
<Tr key={flight.id} className={flight.status === 'Delayed' ? 'delayed-flight' : ''}>
<Td>{flight.flight_code}</Td>
<Td>{flight.departure_time}</Td>
<Td>{flight.destination}</Td>
<Td>{flight.gate}</Td>
<Td>{flight.status}</Td>
</Tr>
// );
))}
{startIndex + 10 >= zones.length && (
<>
{Array.from({ length: startIndex + 10 - zones.length }).map((_, index) => {
return (
<Tr>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
</Tr>
)
})}
</>
)
}
</>
)}
</Tbody>
</Table>
{error ? <div className="Disconnected">{error}</div> : <></>}
</div>
</div>
);
};

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

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

30
screen-domain/src/components/Home/Home.test.tsx
View File

@ -1,8 +1,8 @@
const mockedUsedNavigate = jest.fn();
jest.mock("react-router-dom", () => ({
...jest.requireActual("react-router-dom"),
useNavigate: () => mockedUsedNavigate,
...jest.requireActual("react-router-dom"),
useNavigate: () => mockedUsedNavigate,
}));
import "../../matchMedia.mock";
@ -11,18 +11,18 @@ import { render, screen } from "@testing-library/react";
// import { Home } from "./Departure";
describe("Home View Test", () => {
test("Display initial, name and icon", async () => {
// render(
// <Home
// zones={[
// { id: 1, name: "Belgrano" },
// { id: 2, name: "San Isidro" },
// ]}
// />
// );
test("Display initial, name and icon", async () => {
// render(
// <Home
// zones={[
// { id: 1, name: "Belgrano" },
// { id: 2, name: "San Isidro" },
// ]}
// />
// );
// expect(screen.getByText("Zones")).toBeVisible();
// expect(screen.getByText("Belgrano📍")).toBeVisible();
// expect(screen.getByText("San Isidro📍")).toBeVisible();
});
// expect(screen.getByText("Zones")).toBeVisible();
// expect(screen.getByText("Belgrano📍")).toBeVisible();
// expect(screen.getByText("San Isidro📍")).toBeVisible();
});
});

10
screen-domain/src/components/Home/Home.tsx
View File

@ -5,7 +5,7 @@ import { useNavigate } from "react-router";
import './Page.css'
interface Props {
flights?: Flight[];
flights?: Flight[];
}
export const Home: React.FC<Props> = (props) => {
@ -15,10 +15,10 @@ export const Home: React.FC<Props> = (props) => {
navigate(path);
};
return (
<div>
return (
<div>
<button onClick={() => submitHandler("/departure")}>Departure</button>
<button onClick={() => submitHandler("/arrival")}>Arrival</button>
</div>
);
</div>
);
};

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

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

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

@ -3,130 +3,90 @@ let db: IDBDatabase;
let version = 1;
export enum Stores {
Departure = 'departure',
Arrival = 'arrival'
Departure = 'departure',
Arrival = 'arrival'
}
interface EventTarget {
result: any
}
export const initDB = (): Promise<boolean | IDBDatabase> => {
return new Promise((resolve) => {
request = indexedDB.open('myDB');
export const initDB = (): Promise<boolean|IDBDatabase> => {
return new Promise((resolve) => {
request = indexedDB.open('myDB');
request.onupgradeneeded = (e) => {
let req = (e.target as IDBOpenDBRequest)
db = req.result;
request.onupgradeneeded = (e) => {
let req = (e.target as IDBOpenDBRequest)
db = req.result;
if (!db.objectStoreNames.contains(Stores.Arrival)) {
db.createObjectStore(Stores.Arrival, { keyPath: 'id' });
}
if (!db.objectStoreNames.contains(Stores.Departure)) {
db.createObjectStore(Stores.Departure, { keyPath: 'id' });
}
};
if (!db.objectStoreNames.contains(Stores.Arrival)) {
db.createObjectStore(Stores.Arrival, { keyPath: 'id' });
}
if (!db.objectStoreNames.contains(Stores.Departure)) {
db.createObjectStore(Stores.Departure, { keyPath: 'id' });
}
};
request.onsuccess = (e) => {
let req = (e.target as IDBOpenDBRequest)
db = req.result;
version = db.version;
resolve(req.result);
};
request.onsuccess = (e) => {
let req = (e.target as IDBOpenDBRequest)
db = req.result;
version = db.version;
resolve(req.result);
};
request.onerror = (e) => {
resolve(false);
};
});
request.onerror = (e) => {
resolve(false);
};
});
};
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 addData = <T>(storeName: string, data: T): Promise<T | string | null> => {
return new Promise((resolve) => {
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
store.add(data);
resolve(data);
});
};
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);
console.log("removing" + key)
res.onsuccess = () => {
console.log("success")
resolve(true);
};
res.onerror = () => {
console.log("error")
resolve(false);
}
// };
});
return new Promise((resolve) => {
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
const res = store.delete(key);
console.log("removing" + key)
res.onsuccess = () => {
console.log("success")
resolve(true);
};
res.onerror = () => {
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);
res.onsuccess = () => {
const newData = { ...res.result, ...data };
store.put(newData);
resolve(newData);
};
res.onerror = () => {
resolve(null);
}
// };
});
export const updateData = <T>(storeName: string, key: number, data: T): Promise<T | string | null> => {
return new Promise((resolve) => {
const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName);
const res = store.get(key);
res.onsuccess = () => {
const newData = { ...res.result, ...data };
store.put(newData);
resolve(newData);
};
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);
};
// };
});
export const getStoreData = <T>(storeName: Stores): Promise<T[] | null> => {
return new Promise((resolve) => {
const tx = db.transaction(storeName, 'readonly');
const store = tx.objectStore(storeName);
const res = store.getAll();
res.onsuccess = () => {
resolve(res.result);
};
});
};
export {};
export { };

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

@ -1,142 +1,135 @@
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 [error, setError] = useState<string | null>(null);
const [zones, setZones] = useState<Flight[]>([]);
const isToday = (someDate: Date) => {
let today = new Date();
return someDate.getDate() == today.getDate() &&
someDate.getMonth() == today.getMonth() &&
someDate.getFullYear() == today.getFullYear()
someDate.getMonth() == today.getMonth() &&
someDate.getFullYear() == today.getFullYear()
}
useEffect(() => {
const intervalId = setInterval(() => {
// {isToday(new Date(flight.departure_time)) ? 's' : 'n'}
let today = localStorage.getItem('date')
if (today && !isToday(new Date(today))) {
getStoreData<Flight>(Stores.Arrival)
.then((data) => {
if (data) {
data.map((u) => {
deleteData(Stores.Arrival, u.id)
})
}
})
.then((data) => {
if (data) {
data.map((u) => {
deleteData(Stores.Arrival, u.id)
})
}
})
localStorage.setItem('date', new Date().toString())
}
}, 36000)
return () => clearInterval(intervalId);
}, [])
}, [])
useEffect(() => {
setError(null);
useEffect(() => {
setError(null);
let newUpdate = new Date().toISOString()
localStorage.setItem('date', new Date().toString())
initDB().then((x) => {
console.log(x)
getStoreData<Flight>(Stores.Arrival)
.then((data) => {
console.log(data)
if (data && data.length > 0) {
data.sort((a,b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
setZones(data)
} else {
fetchZones(undefined, destination, null)
.then((data) => {
localStorage.setItem('lastUpdated', newUpdate)
let toAdd: Flight[] = []
data.map((u) => {
if (u.status != 'Deleted') {
addData(Stores.Arrival, u)
toAdd.push(u)
}
console.log(x)
getStoreData<Flight>(Stores.Arrival)
.then((data) => {
console.log(data)
if (data && data.length > 0) {
data.sort((a, b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
setZones(data)
} else {
fetchZones(undefined, destination, null)
.then((data) => {
localStorage.setItem('lastUpdated', newUpdate)
let toAdd: Flight[] = []
data.map((u) => {
if (u.status != 'Deleted') {
addData(Stores.Arrival, u)
toAdd.push(u)
}
})
toAdd.sort((a, b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
setZones(toAdd);
})
// 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);
})
.catch((error) => {});
}
})
.catch((error) => { });
}
})
}
)
}, [origin]);
}, [origin]);
useEffect(() => {
const intervalId = setInterval(() => {
let lastUpdate = localStorage.getItem('lastUpdated')
let newUpdate = new Date().toISOString()
// let newUpdate = new Date().toTimeString()
fetchZones(undefined, destination, lastUpdate)
.then((data) => {
localStorage.setItem('lastUpdated', newUpdate)
let toAdd: Flight[] = []
let toRemove: Flight[] = []
.then((data) => {
localStorage.setItem('lastUpdated', newUpdate)
let toAdd: Flight[] = []
let toRemove: Flight[] = []
zones.forEach((c, i) => {
let index = data.findIndex(x => x.id === c.id)
if (index >= 0) {
console.log(data[index].departure_time + 'nuevo')
if (data[index].status == 'Deleted' || new Date(data[index].departure_time) < new Date()) {
console.log("sacamos")
toRemove.push(data[index])
deleteData(Stores.Arrival, c.id)
} else {
toAdd.push(data[index]);
updateData(Stores.Arrival, c.id, data[index])
}
} else {
console.log(new Date(c.departure_time))
if (c.status == 'Deleted' || new Date(c.departure_time) < new Date()) {
console.log("sacamos?")
toRemove.push(c);
deleteData(Stores.Arrival, c.id)
} else {
toAdd.push(c);
}
}
});
// 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())
)
const newArray = toAdd.concat(filtered);
console.log(filtered)
console.log(newArray)
filtered.forEach(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())
setZones(newArray);
})
.catch((error) => {
if (!!error.isAxiosError && !error.response) {
//
zones.forEach((c, i) => {
let index = data.findIndex(x => x.id === c.id)
if (index >= 0) {
console.log(data[index].departure_time + 'nuevo')
if (data[index].status == 'Deleted' || new Date(data[index].departure_time) < new Date()) {
console.log("sacamos")
toRemove.push(data[index])
deleteData(Stores.Arrival, c.id)
} else {
toAdd.push(data[index]);
updateData(Stores.Arrival, c.id, data[index])
}
});
}, 5000)
return () => clearInterval(intervalId);
}, [origin, zones])
} else {
console.log(new Date(c.departure_time))
if (c.status == 'Deleted' || new Date(c.departure_time) < new Date()) {
console.log("sacamos?")
toRemove.push(c);
deleteData(Stores.Arrival, c.id)
} else {
toAdd.push(c);
}
}
});
return { zones, error };
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())
)
const newArray = toAdd.concat(filtered);
console.log(filtered)
console.log(newArray)
filtered.forEach(c => {
addData(Stores.Arrival, c)
})
newArray.sort((a, b) => new Date(a.departure_time).getTime() - new Date(b.departure_time).getTime())
setZones(newArray);
})
.catch((error) => {
if (!!error.isAxiosError && !error.response) {
//
}
});
}, 5000)
return () => clearInterval(intervalId);
}, [origin, zones])
return { zones, error };
};

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

@ -1,142 +1,135 @@
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 [error, setError] = useState<string | null>(null);
const [zones, setZones] = useState<Flight[]>([]);
const isToday = (someDate: Date) => {
let today = new Date();
return someDate.getDate() == today.getDate() &&
someDate.getMonth() == today.getMonth() &&
someDate.getFullYear() == today.getFullYear()
someDate.getMonth() == today.getMonth() &&
someDate.getFullYear() == today.getFullYear()
}
useEffect(() => {
const intervalId = setInterval(() => {
// {isToday(new Date(flight.departure_time)) ? 's' : 'n'}
let today = localStorage.getItem('date')
if (today && !isToday(new Date(today))) {
getStoreData<Flight>(Stores.Departure)
.then((data) => {
if (data) {
data.map((u) => {
deleteData(Stores.Departure, u.id)
})
}
})
.then((data) => {
if (data) {
data.map((u) => {
deleteData(Stores.Departure, u.id)
})
}
})
localStorage.setItem('date', new Date().toString())
}
}, 36000)
return () => clearInterval(intervalId);
}, [])
}, [])
useEffect(() => {
setError(null);
useEffect(() => {
setError(null);
let newUpdate = new Date().toISOString()
localStorage.setItem('date', new Date().toString())
initDB().then((x) => {
console.log(x)
getStoreData<Flight>(Stores.Departure)
.then((data) => {
console.log(data)
if (data && data.length > 0) {
data.sort((a,b) => new Date(a.origin).getTime() - new Date(b.origin).getTime())
setZones(data)
} else {
fetchZones(origin, undefined, null)
.then((data) => {
localStorage.setItem('lastUpdated', newUpdate)
let toAdd: Flight[] = []
data.map((u) => {
if (u.status != 'Deleted') {
addData(Stores.Departure, u)
toAdd.push(u)
}
console.log(x)
getStoreData<Flight>(Stores.Departure)
.then((data) => {
console.log(data)
if (data && data.length > 0) {
data.sort((a, b) => new Date(a.origin).getTime() - new Date(b.origin).getTime())
setZones(data)
} else {
fetchZones(origin, undefined, null)
.then((data) => {
localStorage.setItem('lastUpdated', newUpdate)
let toAdd: Flight[] = []
data.map((u) => {
if (u.status != 'Deleted') {
addData(Stores.Departure, u)
toAdd.push(u)
}
})
toAdd.sort((a, b) => new Date(a.origin).getTime() - new Date(b.origin).getTime())
setZones(toAdd);
})
// 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);
})
.catch((error) => {});
}
})
.catch((error) => { });
}
})
}
)
}, [origin]);
}, [origin]);
useEffect(() => {
const intervalId = setInterval(() => {
let lastUpdate = localStorage.getItem('lastUpdated')
let newUpdate = new Date().toISOString()
// let newUpdate = new Date().toTimeString()
fetchZones(origin, undefined, lastUpdate)
.then((data) => {
localStorage.setItem('lastUpdated', newUpdate)
let toAdd: Flight[] = []
let toRemove: Flight[] = []
.then((data) => {
localStorage.setItem('lastUpdated', newUpdate)
let toAdd: Flight[] = []
let toRemove: Flight[] = []
zones.forEach((c, i) => {
let index = data.findIndex(x => x.id === c.id)
if (index >= 0) {
console.log(data[index].departure_time + 'nuevo')
if (data[index].status == 'Deleted' || new Date(data[index].departure_time) < new Date()) {
console.log("sacamos")
toRemove.push(data[index])
deleteData(Stores.Departure, c.id)
} else {
toAdd.push(data[index]);
updateData(Stores.Departure, c.id, data[index])
}
} else {
console.log(new Date(c.departure_time))
if (c.status == 'Deleted' || new Date(c.departure_time) < new Date()) {
console.log("sacamos?")
toRemove.push(c);
deleteData(Stores.Departure, c.id)
} else {
toAdd.push(c);
}
}
});
// 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())
)
const newArray = toAdd.concat(filtered);
console.log(filtered)
console.log(newArray)
filtered.forEach(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())
setZones(newArray);
})
.catch((error) => {
if (!!error.isAxiosError && !error.response) {
//
zones.forEach((c, i) => {
let index = data.findIndex(x => x.id === c.id)
if (index >= 0) {
console.log(data[index].departure_time + 'nuevo')
if (data[index].status == 'Deleted' || new Date(data[index].departure_time) < new Date()) {
console.log("sacamos")
toRemove.push(data[index])
deleteData(Stores.Departure, c.id)
} else {
toAdd.push(data[index]);
updateData(Stores.Departure, c.id, data[index])
}
});
}, 5000)
return () => clearInterval(intervalId);
}, [origin, zones])
} else {
console.log(new Date(c.departure_time))
if (c.status == 'Deleted' || new Date(c.departure_time) < new Date()) {
console.log("sacamos?")
toRemove.push(c);
deleteData(Stores.Departure, c.id)
} else {
toAdd.push(c);
}
}
});
return { zones, error };
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())
)
const newArray = toAdd.concat(filtered);
console.log(filtered)
console.log(newArray)
filtered.forEach(c => {
addData(Stores.Departure, c)
})
newArray.sort((a, b) => new Date(a.origin).getTime() - new Date(b.origin).getTime())
setZones(newArray);
})
.catch((error) => {
if (!!error.isAxiosError && !error.response) {
//
}
});
}, 5000)
return () => clearInterval(intervalId);
}, [origin, zones])
return { zones, error };
};

38
screen-domain/src/hooks/useIsConnected.tsx
View File

@ -3,29 +3,29 @@ import { useState } from "react";
import { ping } from "../Api";
export const useIsConnected = () => {
const [connected, setConnected] = useState(true);
const [connected, setConnected] = useState(true);
useEffect(() => {
const interval = setInterval(() => {
ping()
.then(() => {
setConnected(true);
})
.catch(() => {
setConnected(false);
});
.then(() => {
setConnected(true);
})
.catch(() => {
setConnected(false);
});
}, 5000);
return () => clearInterval(interval);
}, []);
return (
<div>
{connected ? (
<p className="Connected">Connected</p>
) : (
<p className="Disconnected">Disconnected</p>
)}
</div>
);
return () => clearInterval(interval);
}, []);
return (
<div>
{connected ? (
<p className="Connected">Connected</p>
) : (
<p className="Disconnected">Disconnected</p>
)}
</div>
);
};

128
screen-domain/src/index.css
View File

@ -1,106 +1,106 @@
body {
margin: 0;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
.App {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #eff2f7;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #eff2f7;
}
.Box {
border-radius: 20px;
box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2);
padding: 50px;
gap: 30px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 20px;
box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2);
padding: 50px;
gap: 30px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.Small {
width: 250px;
height: 400px;
width: 250px;
height: 400px;
}
.Section {
flex: 1;
width: 100%;
padding: 30px 50px;
gap: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1;
width: 100%;
padding: 30px 50px;
gap: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.Image {
width: 150px;
width: 150px;
}
.Connected {
color: green;
color: green;
}
.Disconnected {
color: red;
color: red;
}
.FloatingStatus {
position: absolute;
top: 10px;
right: 50px;
position: absolute;
top: 10px;
right: 50px;
}
.LogoutButton {
position: absolute;
bottom: 10px;
right: 50px;
position: absolute;
bottom: 10px;
right: 50px;
}
.Card {
border-radius: 8px;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
gap: 10px;
padding: 10px;
width: 100%;
background-color: white;
display: flex;
align-items: center;
border-radius: 8px;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
gap: 10px;
padding: 10px;
width: 100%;
background-color: white;
display: flex;
align-items: center;
}
.Items {
height: 100%;
width: 100%;
display: flex;
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.List {
width: 100%;
height: 500px;
gap: 30px;
padding: 20px;
overflow-y: auto;
display: flex;
align-items: center;
flex-direction: column;
}
width: 100%;
height: 500px;
gap: 30px;
padding: 20px;
overflow-y: auto;
display: flex;
align-items: center;
flex-direction: column;
}