Add screen-domain and update flights-domain

Add local database (IndexedDB) and add `lastUpdated` logic for screens

flights-domain/requirements.txt

@@ -2,4 +2,5 @@
 fastapi[all]==0.103.2
 psycopg2-binary==2.9.5
 pyjwt==2.6.0
-gunicorn==20.1.0
+gunicorn==20.1.0
+sqlalchemy==2.0.22

flights-domain/src/api/cruds/flight.py

@@ -0,0 +1,53 @@
+from sqlalchemy.orm import Session
+from sqlalchemy.sql import func
+
+from src.api.models.flight import Flight
+from src.api.schemas.flight import Flight as FlightPydantic
+
+
+def get_flight_by_id(db: Session, flight_id: int):
+    return db.query(Flight).filter(Flight.id == flight_id).first()
+
+
+def get_flights(db: Session, skip: int = 0, limit: int = 100):
+    return db.query(Flight).offset(skip).limit(limit).all()
+
+
+def create_flight(db: Session, flight: FlightPydantic):
+    db_flight = Flight(
+        flight_code=flight.flight_code,
+        status=flight.status,
+        origin=flight.origin,
+        destination=flight.destination,
+        departure_time=flight.departure_time,
+        arrival_time=flight.arrival_time,
+        gate=flight.gate,
+    )
+    db.add(db_flight)
+    db.commit()
+    db.refresh(db_flight)
+    return db_flight
+
+
+def update_flight_status(db: Session, status, id):
+    db_flight = db.query(Flight).filter(Flight.id == id).first()
+    if db_flight is None:
+        raise KeyError
+
+    setattr(db_flight, "status", status)
+    setattr(db_flight, "last_updated", func.now())
+    db.commit()
+    db.refresh(db_flight)
+    return db_flight
+
+
+def get_flights_by_origin(db: Session, origin: str):
+    return db.query(Flight).filter(Flight.origin == origin).all()
+
+
+def get_flights_update(db: Session, origin: str, lastUpdate: str):
+    return (
+        db.query(Flight)
+        .filter((Flight.origin == origin) & (Flight.last_updated >= lastUpdate))
+        .all()
+    )

flights-domain/src/api/db.py

@@ -0,0 +1,22 @@
+import os
+
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+
+SQLALCHEMY_DATABASE_URL = os.getenv("DATABASE_URL")
+print(SQLALCHEMY_DATABASE_URL)
+
+engine = create_engine(SQLALCHEMY_DATABASE_URL)
+
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+Base = declarative_base()
+
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

flights-domain/src/api/main.py

@@ -1,22 +1,22 @@
 from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
 
-from src.api.models.Flight import Flight
+from src.api.db import Base, engine
+from src.api.routes import flights, health
 
-app = FastAPI()
+Base.metadata.create_all(bind=engine)
 
-# Crear una instancia de la clase Flight
+app = FastAPI(title="Flights Information API")
-flight_instance = Flight(
+app.include_router(flights.router, prefix="/flights")
-    id="1",
+app.include_router(health.router, prefix="/health")
-    flight_code="ABC123",
+app.add_middleware(
-    status="En ruta",
+    CORSMiddleware,
-    origin="Ciudad A",
+    allow_origins=[
-    destination="Ciudad B",
+        "https://fids.slc.ar",
-    departure_time="2023-10-09 10:00 AM",
+        "http://localhost:8080",
-    arrival_time="2023-10-09 12:00 PM",
+        "http://localhost:3000",
-    gate="A1",
+    ],
+    allow_credentials=True,
+    allow_methods=["POST", "GET", "PUT", "DELETE", "OPTIONS"],
+    allow_headers=["*"],
 )
-
-
-@app.get("/flights/{id}")
-async def get_flight_by_id(id: int):
-    return flight_instance

flights-domain/src/api/models/Flight.py

@@ -1,17 +0,0 @@
-from pydantic import BaseModel
-
-
-class Flight(BaseModel):
-    id: str
-    flight_code: str
-    status: str
-    origin: str
-    destination: str
-    departure_time: str
-    arrival_time: str
-    gate: str
-
-    def __eq__(self, other):
-        if not isinstance(other, Flight):
-            return False
-        return self.id == other.id

flights-domain/src/api/models/flight.py

@@ -0,0 +1,27 @@
+from sqlalchemy import Column, DateTime, Integer, String
+from sqlalchemy.sql import func
+
+from src.api.db import Base
+
+
+class Flight(Base):
+    __tablename__ = "flights"
+
+    id = Column(Integer, primary_key=True, autoincrement=True)
+    flight_code = Column(String, nullable=False)
+    status = Column(String, nullable=False)
+    origin = Column(String, nullable=False)
+    destination = Column(String, nullable=False)
+    departure_time = Column(DateTime, nullable=False)
+    arrival_time = Column(DateTime, nullable=False)
+    gate = Column(String, nullable=True)
+    last_updated = Column(DateTime, default=func.now(), nullable=False)
+
+    # def get_departure_time(self, format="%Y-%m-%d %I:%M %p"):
+    #     return self.departure_time.strftime(format)
+
+    # def get_arrival_time(self, format="%Y-%m-%d %I:%M %p"):
+    #     return self.arrival_time.strftime(format)
+
+    # def get_last_updated(self, format="%Y-%m-%d %I:%M %p"):
+    #     return self.last_updated.strftime(format)

flights-domain/src/api/routes/flights.py

@@ -0,0 +1,47 @@
+from typing import Optional
+
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+
+from src.api.cruds import flight as flight_crud
+from src.api.db import get_db
+from src.api.schemas.flight import Flight, FlightCreate, FlightStatusUpdate
+
+router = APIRouter()
+
+
+@router.get("/{id}", response_model=Flight)
+def get_flight_by_id(id: int, db: Session = Depends(get_db)):
+    db_flight = flight_crud.get_flight_by_id(db, id)
+    if db_flight is None:
+        raise HTTPException(status_code=404, detail="Flight not found")
+    return db_flight
+
+
+@router.post("", response_model=Flight)
+def create_flight(flight: FlightCreate, db: Session = Depends(get_db)):
+    return flight_crud.create_flight(db=db, flight=flight)
+
+
+@router.patch("/{id}", response_model=Flight)
+def update_flight(id: int, status: FlightStatusUpdate, db: Session = Depends(get_db)):
+    return flight_crud.update_flight_status(db=db, id=id, status=status.status)
+
+
+@router.get("", response_model=list[Flight])
+def get_flights(
+    origin: Optional[str] = None,
+    lastUpdated: Optional[str] = None,
+    db: Session = Depends(get_db),
+):
+    if origin and lastUpdated:
+        flights = flight_crud.get_flights_update(db, origin, lastUpdated)
+    elif origin:
+        flights = flight_crud.get_flights_by_origin(db, origin)
+    else:
+        flights = flight_crud.get_flights(db=db)
+
+    if not flights:
+        raise HTTPException(status_code=404, detail="Flights not found")
+
+    return flights

flights-domain/src/api/routes/health.py

@@ -0,0 +1,8 @@
+from fastapi import APIRouter
+
+router = APIRouter()
+
+
+@router.get("", status_code=200)
+async def get_health():
+    return {"status": "OK"}

flights-domain/src/api/schemas/flight.py

@@ -0,0 +1,36 @@
+from datetime import datetime
+
+from pydantic import BaseModel, validator
+
+
+class Flight(BaseModel):
+    id: int
+    flight_code: str
+    status: str
+    origin: str
+    destination: str
+    departure_time: str
+    arrival_time: str
+    gate: str = None
+    # last_updated: str
+
+    # @validator("departure_time", "arrival_time", "last_updated", pre=True, always=True)
+    @validator("departure_time", "arrival_time", pre=True, always=True)
+    def parse_datetime(cls, value):
+        if isinstance(value, datetime):
+            return value.strftime("%Y-%m-%d %I:%M %p")
+        return value
+
+
+class FlightCreate(BaseModel):
+    flight_code: str
+    status: str
+    origin: str
+    destination: str
+    departure_time: str
+    arrival_time: str
+    gate: str = None
+
+
+class FlightStatusUpdate(BaseModel):
+    status: str

screen-domain/.dockerignore

@@ -0,0 +1 @@
+node_modules

screen-domain/Dockerfile.prod

@@ -0,0 +1,13 @@
+FROM node:17.9.1 AS app
+ENV REACT_APP_ENDPOINT "https://api.fids.slc.ar/"
+WORKDIR /app
+COPY . .
+RUN npm install && npm run build
+
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+RUN rm -rf ./*
+COPY --from=app /app/build .
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

screen-domain/Dockerfile.test

@@ -0,0 +1,10 @@
+FROM node:17.9.1 AS app
+ENV REACT_APP_ENDPOINT "http://127.0.0.1:5000/"
+WORKDIR /app
+COPY package.json .
+COPY package-lock.json .
+RUN npm install
+
+COPY . .
+RUN chmod +x /app/test.sh
+ENTRYPOINT ["/app/test.sh"]

screen-domain/README.md

@@ -0,0 +1,7 @@
+Para correr la app basta con ejecutar
+
+npm run start
+
+para corerr los test
+
+npm run test

screen-domain/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+	preset: "ts-jest",
+	testEnvironment: "jsdom",
+};

screen-domain/nginx/default.conf

@@ -0,0 +1,15 @@
+server {
+    listen 80;
+    location / {
+        root /usr/share/nginx/html;
+        index unresolvable-file-html.html;
+        try_files $uri @index;
+    }
+
+     location @index {
+        root /usr/share/nginx/html;
+        add_header Cache-Control no-cache;
+        expires 0;
+        try_files /index.html =404;
+    }
+}

screen-domain/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "sample-client-users",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"antd": "^5.3.3",
+		"axios": "^1.3.4",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-router": "^6.10.0",
+		"react-router-dom": "^6.10.0",
+		"react-scripts": "5.0.1",
+		"web-vitals": "^2.1.4"
+	},
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "react-scripts build",
+		"test": "jest --coverage --collectCoverageFrom=\"./src/**\"",
+		"test:integration": "jest integration",
+		"eject": "react-scripts eject",
+		"docker:build": "docker build -t client-users .",
+		"docker:run": " docker run --rm -it -p 8080:80 client-users"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app",
+			"react-app/jest"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"devDependencies": {
+		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^13.5.0",
+		"@types/jest": "^28.1.8",
+		"@types/node": "^16.18.23",
+		"@types/react": "^18.0.32",
+		"@types/react-dom": "^18.0.11",
+		"jest": "^28.0.0",
+		"jest-environment-jsdom": "^28.0.0",
+		"ts-jest": "^28.0.0",
+		"typescript": "^4.9.5"
+	}
+}

screen-domain/public/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" content="#000000" />
+		<meta
+			name="description"
+			content="Web site created using create-react-app"
+		/>
+		<!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
+			rel="stylesheet"
+		/>
+		<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+		<title>Client Users</title>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+		<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    --></body>
+</html>

screen-domain/public/manifest.json

@@ -0,0 +1,9 @@
+{
+	"short_name": "React App",
+	"name": "Create React App Sample",
+	"icons": [],
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
+}

screen-domain/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

screen-domain/src/Api.ts

@@ -0,0 +1,36 @@
+import { Axios, AxiosError } from "axios";
+import { Credentials, User, Flight } from "./Types";
+
+const instance = new Axios({
+	baseURL: process.env.REACT_APP_ENDPOINT,
+	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);
+	}
+);
+
+instance.interceptors.request.use((request) => {
+	request.data = JSON.stringify(request.data);
+	return request;
+});
+
+export const ping = () => {
+	return instance.get("health");
+};
+
+export const fetchZones = (origin: string | undefined, lastUpdate: string | null): Promise<Flight[]> => {
+    return instance.get("flights" + 
+    (origin ? "?origin=" + origin : "") + 
+    (lastUpdate ? ( origin ? "&lastUpdated=" : "?lastUpdated=") + lastUpdate : ""))
+};

screen-domain/src/App.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect } from "react";
+import { useIsConnected } from "./hooks/useIsConnected";
+import { Route, Routes } from "react-router";
+import { Home } from "./components/Home/Home";
+import { Button } from "antd";
+import { initDB } from "./db";
+
+function App() {
+	const connection = useIsConnected();
+    initDB();
+
+	return (
+		<div className="App">
+			<Routes>
+				<Route path="/home" element={<Home />} />
+				<Route path="/" element={<Home />} />
+			</Routes>
+			<div className="FloatingStatus">{connection}</div>
+		</div>
+	);
+}
+
+export default App;

screen-domain/src/Types.d.ts

@@ -0,0 +1,33 @@
+export interface Credentials {
+	password: string;
+	email: string;
+	username?: string;
+}
+
+export interface Token {
+	refresh_token: string;
+	access_token: string;
+}
+
+export interface User {
+	id: number;
+	username: string;
+	email: string;
+	created_date?: Date;
+}
+
+export interface Zone {
+	id: number;
+	name: string;
+}
+
+export interface Flight {
+    id: number,
+    flight_code: string;
+    status: string;
+    origin: string;
+    destination: string;
+    departure_time: string;
+    arrival_time: string;
+    gate: string;
+  }

screen-domain/src/components/Button/Button.test.tsx

@@ -0,0 +1,17 @@
+import "../../matchMedia.mock";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+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();
+
+		render(<Button onClick={() => onClick()}>Button</Button>);
+
+		expect(screen.getByText("Button")).toBeVisible();
+		await userEvent.click(screen.getByText("Button"));
+		expect(onClick).toBeCalled();
+	});
+});

screen-domain/src/components/Home/Card/Card.css

@@ -0,0 +1,45 @@
+/* .flight-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    transition: box-shadow 0.3s ease;
+  
+    &:hover {
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    }
+  
+    .flight-details {
+      display: flex;
+      align-items: center;
+    }
+  } */
+
+  .flight-card {
+    display: flex;
+    flex-direction: column; /* Display as a column instead of a row */
+    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 */
+    }
+  }

screen-domain/src/components/Home/Card/Card.test.tsx

@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import "../../../matchMedia.mock";
+
+import { Card } from "./Card";
+
+describe("Card Component Test", () => {
+	test("Display initial, name and icon", async () => {
+		// render(<Card name="Belgrano" />);
+
+		// expect(screen.getByText("Belgrano📍")).toBeVisible();
+		// expect(screen.getByText("B")).toBeVisible();
+	});
+});

screen-domain/src/components/Home/Card/Card.tsx

@@ -0,0 +1,101 @@
+// 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
+
+interface FlightProps {
+  flight_code: string;
+  status: string;
+  origin: string;
+  destination: string;
+  departure_time: string;
+  arrival_time: string;
+  gate: string;
+}
+
+interface CardProps {
+  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>
+        </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>
+  );
+};

screen-domain/src/components/Home/Home.test.tsx

@@ -0,0 +1,28 @@
+const mockedUsedNavigate = jest.fn();
+
+jest.mock("react-router-dom", () => ({
+	...jest.requireActual("react-router-dom"),
+	useNavigate: () => mockedUsedNavigate,
+}));
+
+import "../../matchMedia.mock";
+import "@testing-library/jest-dom";
+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" },
+	// 			]}
+	// 		/>
+	// 	);
+
+	// 	expect(screen.getByText("Zones")).toBeVisible();
+	// 	expect(screen.getByText("Belgrano📍")).toBeVisible();
+	// 	expect(screen.getByText("San Isidro📍")).toBeVisible();
+	});
+});

screen-domain/src/components/Home/Home.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Card } from "./Card/Card";
+import { useFetchZones } from "../../hooks/useFetchZones";
+import { Flight } from "../../Types";
+
+interface Props {
+	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();
+
+	return (
+		<div className="Box">
+			<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>
+	);
+};

screen-domain/src/db.ts

@@ -0,0 +1,125 @@
+let request: IDBOpenDBRequest;
+let db: IDBDatabase;
+let version = 1;
+
+export enum Stores {
+  Flight = 'flights',
+}
+
+interface EventTarget {
+    result: any
+}
+
+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;
+
+      if (!db.objectStoreNames.contains(Stores.Flight)) {
+        db.createObjectStore(Stores.Flight, { keyPath: 'id' });
+      }
+    };
+
+    request.onsuccess = (e) => {
+      let req = (e.target as IDBOpenDBRequest)
+      db = req.result;
+      version = db.version;
+      resolve(req.result);
+    };
+
+    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 deleteData = (storeName: string, key: string): 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);
+      res.onsuccess = () => {
+        resolve(true);
+      };
+      res.onerror = () => {
+        resolve(false);
+      }
+    };
+  });
+};
+
+export const updateData = <T>(storeName: string, key: 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);
+      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 {};

screen-domain/src/hooks/useFetchZones.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect } from "react";
+import { useState } from "react";
+import { User, Flight } from "../Types";
+import { fetchZones } from "../Api";
+import { Stores, addData, deleteData, getStoreData, updateData, initDB } from '../db';
+
+export const useFetchZones = () => {
+	const [error, setError] = useState<string | null>(null);
+	const [zones, setZones] = useState<Flight[]>([]);
+    let origin = process.env.REACT_APP_ORIGIN;
+
+	useEffect(() => {
+		setError(null);
+        let newUpdate = new Date().toISOString()
+
+        getStoreData<Flight>(Stores.Flight)
+            .then((data) => {
+                console.log(data)
+                if (data && data.length > 0) {
+                    setZones(data)
+                } else {
+                    fetchZones(origin, null)
+                        .then((data) => {
+                            localStorage.setItem('lastUpdated', newUpdate)
+                            setZones(data);
+                            data.map((u) => {
+                                addData(Stores.Flight, u)
+                            })
+                        })
+                        .catch((error) => {});
+                }
+            })
+
+	}, [origin]);
+
+    useEffect(() => {
+        const intervalId = setInterval(() => {
+            let lastUpdate = localStorage.getItem('lastUpdated')
+            let newUpdate = new Date().toISOString()
+
+            fetchZones(origin, lastUpdate)
+                        .then((data) => {
+                            localStorage.setItem('lastUpdated', newUpdate)
+                            let toAdd: Flight[] = []
+
+                            zones.forEach((c, i) => {
+                                let index = data.findIndex(x => x.id === c.id)
+                                if (index >= 0) {
+                                    toAdd.push(data[index]);
+                                    console.log(",aria")
+                                    updateData(Stores.Flight, String(c.id), data[index])
+                                } else {
+                                    toAdd.push(c);
+                                } 
+                            });
+
+                            console.log(toAdd)
+                            let filtered = data.filter(o => !toAdd.some(b => { return o.id === b.id} ))
+                            const newArray = toAdd.concat(filtered);
+                            filtered.forEach(c => {
+                                addData(Stores.Flight, c)
+                            })
+
+                            setZones(newArray);
+                        })
+                        .catch((error) => {});
+        }, 5000)
+      
+        return () => clearInterval(intervalId);
+      }, [origin, zones])
+
+	return { zones, error };
+};

screen-domain/src/hooks/useIsConnected.tsx

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

screen-domain/src/index.css

@@ -0,0 +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;
+}
+
+code {
+	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;
+}
+
+.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;
+}
+
+.Small {
+	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;
+}
+
+.Image {
+	width: 150px;
+}
+
+.Connected {
+	color: green;
+}
+
+.Disconnected {
+	color: red;
+}
+
+.FloatingStatus {
+	position: absolute;
+	top: 10px;
+	right: 50px;
+}
+
+.LogoutButton {
+	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;
+}
+
+.Items {
+	height: 100%;
+	width: 100%;
+	display: flex;
+    flex-wrap: wrap;
+	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;
+}

screen-domain/src/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
+import "./index.css";
+import { register as registerServiceWorker } from './serviceWorkerRegistration';
+
+const root = ReactDOM.createRoot(
+	document.getElementById("root") as HTMLElement
+);
+
+root.render(
+	<React.StrictMode>
+		<BrowserRouter>
+			<App />
+		</BrowserRouter>
+	</React.StrictMode>
+);
+
+registerServiceWorker();
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

screen-domain/src/matchMedia.mock

@@ -0,0 +1,13 @@
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});

screen-domain/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

screen-domain/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

screen-domain/src/service-worker.ts

@@ -0,0 +1,80 @@
+/// <reference lib="webworker" />
+/* eslint-disable no-restricted-globals */
+
+// This service worker can be customized!
+// See https://developers.google.com/web/tools/workbox/modules
+// for the list of available Workbox modules, or add any other
+// code you'd like.
+// You can also remove this file if you'd prefer not to use a
+// service worker, and the Workbox build step will be skipped.
+
+import { clientsClaim } from 'workbox-core';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate } from 'workbox-strategies';
+
+declare const self: ServiceWorkerGlobalScope;
+
+clientsClaim();
+
+// Precache all of the assets generated by your build process.
+// Their URLs are injected into the manifest variable below.
+// This variable must be present somewhere in your service worker file,
+// even if you decide not to use precaching. See https://cra.link/PWA
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Set up App Shell-style routing, so that all navigation requests
+// are fulfilled with your index.html shell. Learn more at
+// https://developers.google.com/web/fundamentals/architecture/app-shell
+const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
+registerRoute(
+  // Return false to exempt requests from being fulfilled by index.html.
+  ({ request, url }: { request: Request; url: URL }) => {
+    // If this isn't a navigation, skip.
+    if (request.mode !== 'navigate') {
+      return false;
+    }
+
+    // If this is a URL that starts with /_, skip.
+    if (url.pathname.startsWith('/_')) {
+      return false;
+    }
+
+    // If this looks like a URL for a resource, because it contains
+    // a file extension, skip.
+    if (url.pathname.match(fileExtensionRegexp)) {
+      return false;
+    }
+
+    // Return true to signal that we want to use the handler.
+    return true;
+  },
+  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
+);
+
+// An example runtime caching route for requests that aren't handled by the
+// precache, in this case same-origin .png requests like those from in public/
+registerRoute(
+  // Add in any other file extensions or routing criteria as needed.
+  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
+  // Customize this strategy as needed, e.g., by changing to CacheFirst.
+  new StaleWhileRevalidate({
+    cacheName: 'images',
+    plugins: [
+      // Ensure that once this runtime cache reaches a maximum size the
+      // least-recently used images are removed.
+      new ExpirationPlugin({ maxEntries: 50 }),
+    ],
+  })
+);
+
+// This allows the web app to trigger skipWaiting via
+// registration.waiting.postMessage({type: 'SKIP_WAITING'})
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+// Any other custom service worker logic can go here.

screen-domain/src/serviceWorkerRegistration.ts

@@ -0,0 +1,143 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://cra.link/PWA
+
+const isLocalhost = Boolean(
+    window.location.hostname === 'localhost' ||
+      // [::1] is the IPv6 localhost address.
+      window.location.hostname === '[::1]' ||
+      // 127.0.0.0/8 are considered localhost for IPv4.
+      window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+  );
+  
+  type Config = {
+    onSuccess?: (registration: ServiceWorkerRegistration) => void;
+    onUpdate?: (registration: ServiceWorkerRegistration) => void;
+  };
+  
+  export function register(config?: Config) {
+    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+      // The URL constructor is available in all browsers that support SW.
+      const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+      if (publicUrl.origin !== window.location.origin) {
+        // Our service worker won't work if PUBLIC_URL is on a different origin
+        // from what our page is served on. This might happen if a CDN is used to
+        // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+        return;
+      }
+  
+      window.addEventListener('load', () => {
+        const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+  
+        if (isLocalhost) {
+          // This is running on localhost. Let's check if a service worker still exists or not.
+          checkValidServiceWorker(swUrl, config);
+  
+          // Add some additional logging to localhost, pointing developers to the
+          // service worker/PWA documentation.
+          navigator.serviceWorker.ready.then(() => {
+            console.log(
+              'This web app is being served cache-first by a service ' +
+                'worker. To learn more, visit https://cra.link/PWA'
+            );
+          });
+        } else {
+          // Is not localhost. Just register service worker
+          registerValidSW(swUrl, config);
+        }
+      });
+    }
+  }
+  
+  function registerValidSW(swUrl: string, config?: Config) {
+    navigator.serviceWorker
+      .register(swUrl)
+      .then((registration) => {
+        registration.onupdatefound = () => {
+          const installingWorker = registration.installing;
+          if (installingWorker == null) {
+            return;
+          }
+          installingWorker.onstatechange = () => {
+            if (installingWorker.state === 'installed') {
+              if (navigator.serviceWorker.controller) {
+                // At this point, the updated precached content has been fetched,
+                // but the previous service worker will still serve the older
+                // content until all client tabs are closed.
+                console.log(
+                  'New content is available and will be used when all ' +
+                    'tabs for this page are closed. See https://cra.link/PWA.'
+                );
+  
+                // Execute callback
+                if (config && config.onUpdate) {
+                  config.onUpdate(registration);
+                }
+              } else {
+                // At this point, everything has been precached.
+                // It's the perfect time to display a
+                // "Content is cached for offline use." message.
+                console.log('Content is cached for offline use.');
+  
+                // Execute callback
+                if (config && config.onSuccess) {
+                  config.onSuccess(registration);
+                }
+              }
+            }
+          };
+        };
+      })
+      .catch((error) => {
+        console.error('Error during service worker registration:', error);
+      });
+  }
+  
+  function checkValidServiceWorker(swUrl: string, config?: Config) {
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl, {
+      headers: { 'Service-Worker': 'script' },
+    })
+      .then((response) => {
+        // Ensure service worker exists, and that we really are getting a JS file.
+        const contentType = response.headers.get('content-type');
+        if (
+          response.status === 404 ||
+          (contentType != null && contentType.indexOf('javascript') === -1)
+        ) {
+          // No service worker found. Probably a different app. Reload the page.
+          navigator.serviceWorker.ready.then((registration) => {
+            registration.unregister().then(() => {
+              window.location.reload();
+            });
+          });
+        } else {
+          // Service worker found. Proceed as normal.
+          registerValidSW(swUrl, config);
+        }
+      })
+      .catch(() => {
+        console.log('No internet connection found. App is running in offline mode.');
+      });
+  }
+  
+  export function unregister() {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.ready
+        .then((registration) => {
+          registration.unregister();
+        })
+        .catch((error) => {
+          console.error(error.message);
+        });
+    }
+  }
+  

screen-domain/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

screen-domain/test.sh

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

screen-domain/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}