Skip to content

Commit c6e39a1

Browse files
sebastiankrllsebastiankrll
authored
Merge pull request #45 from sebastiankrll/feature/settings
Feature/settings
2 parents 3679d6b + b12a7d4 commit c6e39a1

49 files changed

Lines changed: 3208 additions & 776 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/web/app/globals.css‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,33 @@ html {
1111
}
1212

1313
:root {
14+
--color-bg: white;
1415
--color-main-text: rgb(77, 95, 131);
1516
--color-light-text: rgb(183, 190, 206);
1617
--color-light-grey: rgb(246, 248, 253);
1718
--color-dark-grey: rgb(223, 227, 235);
1819
--color-border: rgb(211, 214, 228);
1920
--color-box-shadow: rgb(193, 194, 202);
2021
--color-blue: rgb(60, 92, 255);
21-
--color-light-blue: rgb(60, 177, 255);
22-
--color-green: rgb(11, 211, 167);
23-
--color-red: rgb(234, 89, 121);
22+
--color-light-blue: #3cb1ff;
23+
--color-green: #0bd3a7;
24+
--color-red: #ea5979;
2425
--color-yellow: rgb(255, 244, 43);
25-
--color-orange: rgb(255, 138, 43);
26+
--color-orange: #ff8a2b;
2627
--color-magenta: rgb(222, 89, 234);
28+
--color-glass-bg: rgba(255, 255, 255, 0.5);
29+
--color-hover: rgb(77, 95, 131);
30+
}
31+
32+
[data-theme="dark"] {
33+
--color-bg: rgb(21, 27, 39);
34+
--color-main-text: rgb(194, 201, 218);
35+
--color-dark-grey: rgb(46, 52, 66);
36+
--color-light-grey: rgb(46, 52, 66);
37+
--color-border: rgb(113, 121, 153);
38+
--color-box-shadow: rgb(59, 61, 70);
39+
--color-glass-bg: rgba(80, 80, 80, 0.3);
40+
--color-hover: rgb(105, 124, 165);
2741
}
2842

2943
button {
@@ -36,3 +50,9 @@ a {
3650
text-decoration: none;
3751
color: inherit;
3852
}
53+
54+
fieldset {
55+
border: none;
56+
padding: 0;
57+
margin: 0;
58+
}

‎apps/web/app/layout.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
22
import { Manrope } from "next/font/google";
33
import "./globals.css";
44
import "@/assets/images/sprites/freakflags.css";
5+
import { ThemeProvider } from "next-themes";
56
import Footer from "@/components/Footer/Footer";
67
import Header from "@/components/Header/Header";
78
import Loader from "@/components/Loader/Loader";
@@ -24,13 +25,15 @@ export default function RootLayout({
2425
children: React.ReactNode;
2526
}>) {
2627
return (
27-
<html lang="en" className={manrope.className}>
28+
<html lang="en" className={manrope.className} suppressHydrationWarning>
2829
<body>
29-
<Header />
30-
<Loader />
31-
<OMap />
32-
<BasePanel>{children}</BasePanel>
33-
<Footer />
30+
<ThemeProvider>
31+
<Header />
32+
<Loader />
33+
<OMap />
34+
<BasePanel>{children}</BasePanel>
35+
<Footer />
36+
</ThemeProvider>
3437
</body>
3538
</html>
3639
);

‎apps/web/app/settings/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import SettingsPanel from "@/components/Panels/Settings/SettingsPanel";
2+
3+
export default function Page() {
4+
return <SettingsPanel />;
5+
}

apps/web/components/Header/components/Clock.tsx renamed to apps/web/components/Footer/Clock.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function Clock() {
2626
}, []);
2727

2828
return (
29-
<div id="header-clock" suppressHydrationWarning>
29+
<div id="footer-clock" suppressHydrationWarning>
3030
{getTime(time)}
3131
<span>UTC</span>
3232
</div>

‎apps/web/components/Footer/Footer.css‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ footer {
1515
}
1616

1717
.footer-item {
18-
background: white;
18+
background: var(--color-bg);
1919
height: 100%;
2020
border-left: 1px solid var(--color-border);
2121
border-right: 1px solid var(--color-border);
@@ -53,6 +53,16 @@ footer {
5353
}
5454
}
5555

56+
#footer-clock {
57+
color: var(--color-main-text);
58+
}
59+
60+
#footer-clock span {
61+
font-size: 0.625rem;
62+
margin-left: 0.25rem;
63+
color: var(--color-light-text);
64+
}
65+
5666
#footer-github,
5767
#footer-version {
5868
background: none;

‎apps/web/components/Footer/Footer.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
66
import useSWR from "swr";
77
import { fetchApi } from "@/utils/api";
88
import { wsClient } from "@/utils/ws";
9+
import Clock from "./Clock";
910

1011
interface Metrics {
1112
connectedClients: number;
@@ -18,7 +19,7 @@ interface Metrics {
1819
const WS_URL = process.env.NEXT_PUBLIC_WEBSOCKET_URL || "ws://localhost:3002";
1920

2021
function getTimestamp(date: Date | string): string {
21-
return `${new Date(date).toISOString().split("T")[1].split(".")[0]}z`;
22+
return new Date(date).toISOString().split("T")[1].split(".")[0];
2223
}
2324

2425
export default function Footer() {
@@ -50,12 +51,15 @@ export default function Footer() {
5051
return (
5152
<footer>
5253
<div className="footer-item" id="footer-clients">
53-
<span>{isLoading ? "..." : (metrics?.connectedClients ?? "0")}</span>visitors online
54+
<span>{isLoading ? "..." : metrics?.connectedClients ? metrics.connectedClients + 1 : 1}</span>visitors online
5455
</div>
5556
<div className="footer-item" id="footer-timestamp">
5657
<span style={{ background: stale ? "var(--color-red)" : "", animationDuration: stale ? "1s" : "" }}></span>
5758
{timestamp}
5859
</div>
60+
<div className="footer-item" id="footer-clock">
61+
<Clock />
62+
</div>
5963
<div className="footer-item" id="footer-github">
6064
Report a bug, request a feature, or send ❤️ on&nbsp;
6165
<a href="https://github.com/sebastiankrll/simradar21" rel="noopener noreferrer" target="_blank">

‎apps/web/components/Header/Header.css‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,32 +28,20 @@ header {
2828
justify-content: center;
2929
}
3030

31-
.header-item {
32-
background-color: white;
33-
border: 1px solid var(--color-border);
34-
height: 3.5rem;
31+
#header-search-wrapper {
32+
background-color: var(--color-bg);
33+
height: 2rem;
3534
display: flex;
3635
justify-content: center;
3736
align-items: center;
3837
padding: 0rem 1rem;
39-
box-sizing: border-box;
40-
}
41-
42-
#header-clock {
43-
color: var(--color-main-text);
44-
}
45-
46-
#header-clock span {
47-
font-size: 0.625rem;
48-
margin-left: 0.25rem;
49-
color: var(--color-light-text);
38+
border: 1px solid var(--color-border);
5039
}
5140

5241
#header-search {
53-
line-height: 2rem;
5442
border: none;
5543
width: 20rem;
56-
height: 2rem;
44+
height: 100%;
5745
box-sizing: border-box;
5846
background-color: transparent;
5947
color: var(--color-light-text);
@@ -63,3 +51,14 @@ header {
6351
#header-search::placeholder {
6452
color: var(--color-light-text);
6553
}
54+
55+
#header-vatsim-login {
56+
height: 2rem;
57+
background: var(--color-blue);
58+
color: white;
59+
padding: 0rem 1rem;
60+
}
61+
62+
#header-vatsim-login:hover {
63+
background: var(--color-green);
64+
}

‎apps/web/components/Header/Header.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import Clock from "./components/Clock";
2-
import Search from "./components/Search";
1+
import Search from "./Search";
32
import "./Header.css";
43
import Image from "next/image";
54
import simradar24Logo from "@/assets/images/simradar24_logo.svg";
@@ -10,12 +9,12 @@ export default function Header() {
109
<figure id="header-logo">
1110
<Image src={simradar24Logo} alt="simradar24 logo" height={40} width={200} priority />
1211
</figure>
13-
<div className="header-item">
14-
<Clock />
15-
</div>
16-
<div className="header-item">
12+
<div id="header-search-wrapper">
1713
<Search />
1814
</div>
15+
<button type="button" id="header-vatsim-login">
16+
Login with VATSIM
17+
</button>
1918
</header>
2019
);
2120
}

apps/web/components/Header/components/Search.tsx renamed to apps/web/components/Header/Search.tsx

File renamed without changes.

‎apps/web/components/Map/Map.tsx‎

Lines changed: 65 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,33 @@
33
import { useEffect } from "react";
44
import "./Map.css";
55
import { useRouter } from "next/navigation";
6+
import { useTheme } from "next-themes";
67
import { ToastContainer } from "react-toastify";
8+
import { useSettingsStore } from "@/storage/zustand";
79
import { MessageBoxCloseButton } from "../MessageBox/MessageBox";
10+
import MapControls from "./components/MapControls";
11+
import { setDataLayersSettings } from "./utils/dataLayers";
812
import { onClick, onMoveEnd, onPointerMove, setNavigator } from "./utils/events";
9-
import { initMap } from "./utils/init";
13+
import { getMap, initMap, setMapTheme } from "./utils/init";
1014
import { animatePilotFeatures } from "./utils/pilotFeatures";
15+
import { setSunLayerSettings } from "./utils/sunLayer";
1116

1217
export default function OMap() {
1318
const router = useRouter();
19+
const { theme } = useTheme();
20+
const {
21+
dayNightLayer,
22+
dayNightLayerBrightness,
23+
airportMarkers,
24+
airportMarkerSize,
25+
planeMarkerSize,
26+
animatedPlaneMarkers,
27+
sectorAreas,
28+
traconColor,
29+
traconTransparency,
30+
firColor,
31+
firTransparency,
32+
} = useSettingsStore();
1433

1534
useEffect(() => {
1635
setNavigator((href) => router.push(href));
@@ -20,6 +39,24 @@ export default function OMap() {
2039
map.on("pointermove", onPointerMove);
2140
map.on("click", onClick);
2241

42+
return () => {
43+
map.un(["moveend"], onMoveEnd);
44+
map.un("pointermove", onPointerMove);
45+
map.un("click", onClick);
46+
map.setTarget(undefined);
47+
};
48+
}, [router]);
49+
50+
useEffect(() => {
51+
setMapTheme(theme === "dark");
52+
}, [theme]);
53+
54+
useEffect(() => {
55+
if (!animatedPlaneMarkers) return;
56+
57+
const map = getMap();
58+
if (!map) return;
59+
2360
let animationFrameId = 0;
2461
const animate = () => {
2562
animatePilotFeatures(map);
@@ -28,17 +65,39 @@ export default function OMap() {
2865
animationFrameId = window.requestAnimationFrame(animate);
2966

3067
return () => {
31-
map.un(["moveend"], onMoveEnd);
32-
map.un("pointermove", onPointerMove);
33-
map.un("click", onClick);
34-
map.setTarget(undefined);
3568
window.cancelAnimationFrame(animationFrameId);
3669
};
37-
}, [router]);
70+
}, [animatedPlaneMarkers]);
71+
72+
useEffect(() => {
73+
setSunLayerSettings(dayNightLayer, dayNightLayerBrightness);
74+
setDataLayersSettings(
75+
airportMarkers,
76+
airportMarkerSize,
77+
planeMarkerSize,
78+
sectorAreas,
79+
traconColor,
80+
traconTransparency,
81+
firColor,
82+
firTransparency,
83+
);
84+
}, [
85+
dayNightLayer,
86+
dayNightLayerBrightness,
87+
airportMarkers,
88+
airportMarkerSize,
89+
planeMarkerSize,
90+
sectorAreas,
91+
traconColor,
92+
traconTransparency,
93+
firColor,
94+
firTransparency,
95+
]);
3896

3997
return (
4098
<>
4199
<ToastContainer closeButton={MessageBoxCloseButton} icon={false} theme="colored" />
100+
<MapControls />
42101
<div id="map" />
43102
</>
44103
);

0 commit comments

Comments
 (0)