Compare commits

..

12 Commits

@ -1,6 +1,7 @@
{
"eslint.workingDirectories": [
"backend",
"frontend"
"frontend",
"shared"
]
}

@ -59,4 +59,4 @@ COPY --from=frontendbuild --chown=node:node /opt/frontend/dist/ /opt/frontend/di
RUN npm install --quiet --unsafe-perm --no-progress --no-audit --omit=dev
CMD node --es-module-specifier-resolution=node dist/app.js
CMD node --es-module-specifier-resolution=node dist/backend/src/app.js

@ -1,12 +1,12 @@
{
"name": "app",
"version": "1.0.0",
"version": "1.2.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "app",
"version": "1.0.0",
"version": "1.2.0",
"license": "ISC",
"dependencies": {
"axios": "^1.3.4",
@ -25,6 +25,7 @@
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.5",
"eslint-plugin-promise": "^6.0.1",
"resolve-tspaths": "^0.8.8",
"rimraf": "^3.0.2",
"tsc-watch": "^5.0.3",
"typescript": "^4.7.4"
@ -460,6 +461,15 @@
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
"integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@ -719,6 +729,15 @@
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-10.0.0.tgz",
"integrity": "sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==",
"dev": true,
"engines": {
"node": ">=14"
}
},
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -2882,6 +2901,23 @@
"node": ">=4"
}
},
"node_modules/resolve-tspaths": {
"version": "0.8.13",
"resolved": "https://registry.npmjs.org/resolve-tspaths/-/resolve-tspaths-0.8.13.tgz",
"integrity": "sha512-eHlHinC2qt3jQLFiZyUE4HXZOTlT1abHO2fb+OI9Ybsn8wdhKiAtIFVy1+QVTaIQNphCLvm42EkqJt/+ZAA8Sw==",
"dev": true,
"dependencies": {
"ansi-colors": "4.1.3",
"commander": "10.0.0",
"fast-glob": "3.2.12"
},
"bin": {
"resolve-tspaths": "dist/main.js"
},
"peerDependencies": {
"typescript": ">=3.0.3"
}
},
"node_modules/reusify": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@ -3765,6 +3801,12 @@
"uri-js": "^4.2.2"
}
},
"ansi-colors": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
"integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
"dev": true
},
"ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@ -3973,6 +4015,12 @@
"delayed-stream": "~1.0.0"
}
},
"commander": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-10.0.0.tgz",
"integrity": "sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==",
"dev": true
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -5564,6 +5612,17 @@
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true
},
"resolve-tspaths": {
"version": "0.8.13",
"resolved": "https://registry.npmjs.org/resolve-tspaths/-/resolve-tspaths-0.8.13.tgz",
"integrity": "sha512-eHlHinC2qt3jQLFiZyUE4HXZOTlT1abHO2fb+OI9Ybsn8wdhKiAtIFVy1+QVTaIQNphCLvm42EkqJt/+ZAA8Sw==",
"dev": true,
"requires": {
"ansi-colors": "4.1.3",
"commander": "10.0.0",
"fast-glob": "3.2.12"
}
},
"reusify": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",

@ -1,13 +1,14 @@
{
"name": "app",
"version": "1.2.0",
"version": "1.3.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"predev": "npm install && rimraf dist/*",
"start": "node --inspect=0.0.0.0:9229 --es-module-specifier-resolution=node dist/app.js",
"prestart": "resolve-tspaths --out \"/opt/backend/dist/backend/src\"",
"start": "node --inspect=0.0.0.0:9229 dist/backend/src/app.js",
"dev": "tsc-watch --onSuccess \"npm run start\" --onFailure \"echo WHOOPS! Server compilation failed\""
},
"keywords": [],
@ -32,6 +33,7 @@
"eslint-plugin-promise": "^6.0.1",
"rimraf": "^3.0.2",
"tsc-watch": "^5.0.3",
"resolve-tspaths": "^0.8.8",
"typescript": "^4.7.4"
}
}

@ -1,19 +1,6 @@
import fs from 'fs';
import { WxConfig } from '@shared/types/config.types';
export interface WxConfig {
regions: WxRegion[];
}
export interface WxRegion {
identifier: string;
fixes: WxFix[];
}
export interface WxFix {
name: string;
lat: number;
lon: number;
}
export function getConfig(): WxConfig {
const data = JSON.parse(fs.readFileSync('/opt/wx-config.json').toString());

@ -1,4 +1,5 @@
import configService, { WxConfig, WxRegion } from './config.service';
import configService from './config.service';
import { WxConfig, WxRegion } from '@shared/types/config.types';
export function getRegions(): WxConfig['regions'] {
return configService.getConfig().regions;

@ -1,7 +1,9 @@
import axios from 'axios';
import { WxFix } from './config.service';
import regionsService from './regions.service';
import { WxFix } from '@shared/types/config.types';
import { WxFixData, WxData } from '@shared/types/wx.types';
const cachedData: { [key: string]: WxData } = {};
const qnhLevelMapping = {
@ -12,7 +14,10 @@ const qnhLevelMapping = {
500: 180,
600: 140,
700: 100,
800: 64,
850: 50,
900: 30,
925: 25,
};
const necessaryDatapoints = [
@ -33,34 +38,6 @@ for (const qnh of Object.keys(qnhLevelMapping)) {
}
}
interface WxLevelData {
'T(K)': string;
windspeed: string;
windhdg: string;
}
export interface WxFixData {
coords: {
lat: string;
long: string;
};
levels: {
[key: string]: WxLevelData;
}
}
export interface WxData {
info: {
date: string;
datestring: string;
legal: string;
};
data: {
[key: string]: WxFixData;
}
}
export async function getDataAtFix(fix: WxFix, index: number): Promise<WxFixData> {
const response = await axios.get(`https://api.open-meteo.com/v1/forecast?latitude=${fix.lat}&longitude=${fix.lon}&windspeed_unit=kn&forecast_days=1&hourly=${requestedData.join(',')}`);
const hourlyData = response.data.hourly;

@ -2,6 +2,7 @@
"compileOnSave": false,
"compilerOptions": {
"outDir": "dist",
"baseUrl": "./src",
"module": "ES2022",
"target": "ES2022",
"lib": [
@ -15,6 +16,9 @@
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"moduleResolution": "Node",
"paths": {
"@shared/*": ["../../shared/src/*"]
}
},
"watchOptions": {
"watchFile": "fixedpollinginterval"

@ -28,5 +28,8 @@
"error",
"always"
]
}
},
"ignorePatterns": [
"**/vite.config.ts"
]
}

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>IASsure-WX</title>
</head>
<body>
<div id="root"></div>

File diff suppressed because it is too large Load Diff

@ -1,7 +1,7 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"version": "1.3.0",
"type": "module",
"scripts": {
"dev": "vite",
@ -9,10 +9,18 @@
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.4.0",
"bootstrap": "^5.2.3",
"leaflet": "^1.9.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1",
"react-router": "^6.11.1"
},
"devDependencies": {
"@types/leaflet": "^1.9.3",
"@types/node": "^18.16.3",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@typescript-eslint/eslint-plugin": "^5.38.1",
@ -27,4 +35,4 @@
"typescript": "^4.9.4",
"vite": "^4.0.0"
}
}
}

@ -1,41 +0,0 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

@ -1,33 +1,162 @@
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import './App.css';
import 'leaflet/dist/leaflet.css';
import 'bootstrap/dist/css/bootstrap.css';
import { MapContainer, TileLayer, LayersControl, LayerGroup, Popup, Marker } from 'react-leaflet';
import { Button, Modal, Table } from 'react-bootstrap';
import { useEffect, useState } from 'react';
import wxService from './services/wx.service';
import { WxRegion } from '@shared/types/config.types';
import { WxData } from '../../shared/src/types/wx.types';
import { DivIcon } from 'leaflet';
function App() {
const [count, setCount] = useState(0);
const [showModal, setShowModal] = useState(false);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [loading, setLoading] = useState(false);
const [regions, setRegions] = useState<WxRegion[]>([]);
const [selectedRegion, setSelectedRegion] = useState<string>('');
const [wxData, setWxData] = useState<WxData | null>(null);
function getSetShowModal(val: boolean) {
return () => setShowModal(val);
}
useEffect(() => {
if (selectedRegion) {
return;
}
setLoading(true);
wxService.getRegions()
.then(regionsResponse => {
setRegions(regionsResponse);
setShowModal(true);
setLoading(false);
});
}, []);
useEffect(() => {
setLoading(true);
wxService.getWxData(selectedRegion).then(wxResponse => {
setWxData(wxResponse);
setShowModal(false);
setLoading(false);
console.log(wxResponse);
});
}, [selectedRegion]);
return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" className="logo" alt="Vite logo" />
</a>
<a href="https://reactjs.org" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount(count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
<>
<Modal
show={showModal}
backdrop="static"
keyboard={false}
>
<Modal.Header>
<Modal.Title>Regions</Modal.Title>
</Modal.Header>
<Modal.Body>
<Table striped>
<thead>
<tr>
<th>#</th>
<th>Region</th>
<th>Fixes</th>
<th></th>
</tr>
</thead>
<tbody>
{regions.length ? regions.map((region, idx) => <>
<tr key={idx}>
<td>{idx + 1}</td>
<td>{region.identifier}</td>
<td>{region.fixes.length} Fixes</td>
<td>
<Button
variant={selectedRegion == region.identifier ? 'success' : 'primary'}
type='button'
onClick={() => setSelectedRegion(region.identifier)}
>
Select
</Button>
</td>
</tr>
</>) : (<>
<tr>
<td className='p-2 text-center' colSpan={4}>- no regions defined -</td>
</tr>
</>)}
</tbody>
</Table>
</Modal.Body>
</Modal>
<div className='position-absolute bottom-0 p-2' style={{ zIndex: 999 }}>
<Button variant='outline-secondary' type='button' onClick={getSetShowModal(true)}> {selectedRegion && `(Selected: ${selectedRegion})`}</Button>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
<MapContainer style={{ height: '100vh', width: '100vw' }} center={[50.033306, 8.570456]} zoom={7} scrollWheelZoom={true}>
<TileLayer
url='https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png'
attribution={[
'<a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
'<a href="https://carto.com/attributions" target="_blank">CARTO</a>',
'Weather data by Open-Meteo.com (<a href="https://open-meteo.com" target="_blank">open-meteo.com</a>)',
'<a href="https://github.com/dotFionn/iassure-wx" target="_blank">IASsure-WX</a>: <a href="https://fsperath.de" target="_blank">Fionn Sperath</a> and <a href="https://github.com/dotFionn/iassure-wx/graphs/contributors" target="_blank">contributors</a>',
].map(str => `&copy; ${str}`).join(' | ')}
subdomains={'abc'}
maxZoom={20}
minZoom={0}
/>
<LayersControl position='topright'>
<LayersControl.Overlay checked name='Enable labels'>
<TileLayer
url='https://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png'
subdomains={'abc'}
maxZoom={20}
minZoom={0}
/>
</LayersControl.Overlay>
<LayersControl.Overlay checked name="Points">
<LayerGroup>
{Object.entries(wxData?.data || {}).map(([fix, data]) => (
<>
<Marker
position={[Number(data.coords.lat), Number(data.coords.long)]}
key={fix}
title={fix}
icon={new DivIcon({ html: `⨀&nbsp;<span class="fw-bold">${fix}</span>`, className: 'bg-none text-warning' })}
>
<Popup>
<Table>
<thead>
<tr><th colSpan={3} className='text-center'>{fix}</th></tr>
<tr><th>Lvl</th><th>Temp/K</th><th>Wind</th></tr>
</thead>
<tbody>
{Object.entries(data.levels).map(([lvl, lvlData], lvlIdx) => (
<tr key={lvlIdx}>
<td>{lvl}</td>
<td>{Math.round(Number(lvlData['T(K)']))}</td>
<td>{lvlData.windhdg}° / {lvlData.windspeed}kts</td>
</tr>
))}
</tbody>
</Table>
</Popup>
</Marker>
</>
))}
</LayerGroup>
</LayersControl.Overlay>
</LayersControl>
</MapContainer>
</>
);
}

@ -1,70 +1,6 @@
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
height: 100vh;
width: 100vw;
overflow: hidden;
}

@ -0,0 +1,18 @@
import { WxRegion } from '@shared/types/config.types';
import { WxData } from '@shared/types/wx.types';
import axios from 'axios';
async function getRegions(): Promise<WxRegion[]> {
const response = await axios.get<WxRegion[]>('/api/regions');
return response.data;
}
async function getWxData(region: string): Promise<WxData> {
const response = await axios.get<WxData>(`/api/regions/${region}/wx`);
return response.data;
}
export default {
getRegions,
getWxData,
};

@ -14,7 +14,10 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "react-jsx",
"paths": {
"@shared/*": ["../shared/src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]

@ -1,7 +1,21 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
resolve: {
alias: [{ find: '@shared', replacement: path.resolve(__dirname, '..', 'shared', 'src') }],
},
server: {
proxy: {
'/api': {
target: 'http://localhost:3030',
changeOrigin: true,
// secure: false,
// ws: true,
},
},
},
});

@ -0,0 +1,31 @@
{
"env": {
"es2021": true,
"node": true
},
"extends": [
"airbnb-typescript/base",
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint",
"import",
"promise"
],
"overrides": [],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"rules": {
"eol-last": [
"error",
"always"
]
}
}

@ -0,0 +1,10 @@
{
"devDependencies": {
"@types/node": "^18.6.2",
"eslint": "^8.23.1",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.5",
"eslint-plugin-promise": "^6.0.1"
}
}

@ -0,0 +1,14 @@
export interface WxConfig {
regions: WxRegion[];
}
export interface WxRegion {
identifier: string;
fixes: WxFix[];
}
export interface WxFix {
name: string;
lat: number;
lon: number;
}

@ -0,0 +1,27 @@
export interface WxLevelData {
'T(K)': string;
windspeed: string;
windhdg: string;
}
export interface WxFixData {
coords: {
lat: string;
long: string;
};
levels: {
[key: string]: WxLevelData;
}
}
export interface WxData {
info: {
date: string;
datestring: string;
legal: string;
};
data: {
[key: string]: WxFixData;
}
}

@ -0,0 +1,16 @@
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "dist",
"baseUrl": "./src",
"module": "ES2022",
"target": "ES2022",
"lib": ["ES2022"],
"sourceMap": true,
"strictNullChecks": true,
"noImplicitAny": false,
"preserveConstEnums": true,
"removeComments": true,
"forceConsistentCasingInFileNames": true
}
}
Loading…
Cancel
Save