+
+
Flights
-
Zones
-
- {(props.zones ? props.zones : zones).map((u) => {
- return ;
+ {(props.flights ? props.flights : zones).map((u) => {
+ return ;
})}
-
{error ?
{error}
: <>}
diff --git a/screen-domain/src/db.ts b/screen-domain/src/db.ts
new file mode 100644
index 0000000..11f4b32
--- /dev/null
+++ b/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
=> {
+ 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 = (storeName: string, data: T): Promise => {
+ 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 => {
+ 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 = (storeName: string, key: string, data: T): Promise => {
+ 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 = (storeName: Stores): Promise => {
+ 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 {};
diff --git a/screen-domain/src/hooks/useFetchZones.tsx b/screen-domain/src/hooks/useFetchZones.tsx
new file mode 100644
index 0000000..d8593d8
--- /dev/null
+++ b/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(null);
+ const [zones, setZones] = useState([]);
+ let origin = process.env.REACT_APP_ORIGIN;
+
+ useEffect(() => {
+ setError(null);
+ let newUpdate = new Date().toISOString()
+
+ getStoreData(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 };
+};
diff --git a/sample-client-users/src/hooks/useIsConnected.tsx b/screen-domain/src/hooks/useIsConnected.tsx
similarity index 100%
rename from sample-client-users/src/hooks/useIsConnected.tsx
rename to screen-domain/src/hooks/useIsConnected.tsx
diff --git a/screen-domain/src/index.css b/screen-domain/src/index.css
new file mode 100644
index 0000000..bd54b3b
--- /dev/null
+++ b/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;
+}
diff --git a/screen-domain/src/index.tsx b/screen-domain/src/index.tsx
new file mode 100644
index 0000000..94c8e43
--- /dev/null
+++ b/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(
+
+
+
+
+
+);
+
+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();
diff --git a/screen-domain/src/matchMedia.mock b/screen-domain/src/matchMedia.mock
new file mode 100644
index 0000000..8723708
--- /dev/null
+++ b/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(),
+ })),
+});
\ No newline at end of file
diff --git a/screen-domain/src/react-app-env.d.ts b/screen-domain/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/screen-domain/src/react-app-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/screen-domain/src/reportWebVitals.ts b/screen-domain/src/reportWebVitals.ts
new file mode 100644
index 0000000..49a2a16
--- /dev/null
+++ b/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;
diff --git a/screen-domain/src/service-worker.ts b/screen-domain/src/service-worker.ts
new file mode 100644
index 0000000..652a8a4
--- /dev/null
+++ b/screen-domain/src/service-worker.ts
@@ -0,0 +1,80 @@
+///
+/* 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.
diff --git a/screen-domain/src/serviceWorkerRegistration.ts b/screen-domain/src/serviceWorkerRegistration.ts
new file mode 100644
index 0000000..35588d3
--- /dev/null
+++ b/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);
+ });
+ }
+ }
+
\ No newline at end of file
diff --git a/screen-domain/src/setupTests.ts b/screen-domain/src/setupTests.ts
new file mode 100644
index 0000000..8f2609b
--- /dev/null
+++ b/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';
diff --git a/screen-domain/test.sh b/screen-domain/test.sh
new file mode 100644
index 0000000..c20a79c
--- /dev/null
+++ b/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"
diff --git a/screen-domain/tsconfig.json b/screen-domain/tsconfig.json
new file mode 100644
index 0000000..a273b0c
--- /dev/null
+++ b/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"
+ ]
+}