From 59116b4d376dde750fffd2e7c49a37b3da0026d9 Mon Sep 17 00:00:00 2001
From: Gaudv <gitlab.g@canque.fr>
Date: Sat, 2 Nov 2024 20:39:23 +0100
Subject: [PATCH 1/5] differentiates planes on map

---
 public/meta/aircraft-icon-a32nx.png | Bin 0 -> 840 bytes
 public/meta/aircraft-icon-a380x.png | Bin 0 -> 897 bytes
 public/meta/aircraft-icon.png       | Bin 594 -> 645 bytes
 src/components/Map/Map.tsx          |  33 ++++++++++++++++++++++++----
 4 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 public/meta/aircraft-icon-a32nx.png
 create mode 100644 public/meta/aircraft-icon-a380x.png

diff --git a/public/meta/aircraft-icon-a32nx.png b/public/meta/aircraft-icon-a32nx.png
new file mode 100644
index 0000000000000000000000000000000000000000..3df5c9247ebeb21680258460b4628662ed7c3b8b
GIT binary patch
literal 840
zcmV-O1GoH%P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000XU
z000XU0RWnu7ytkQ`bk7VRA_<i*-xkyWf;ft&plnrl#E;$5yeYxF1%1JLLwQW5Njb7
z^k-R{GDL`if>tfsMTILDRvT><5>!_(!U`FU5*I=Y+HNdFybHykON4n_%p2If*K=mh
z%xSoAzAzk^_xbmmnfHC4nKQGrv}7$a=(~WnOa=7K>?DGQnB9ZD*pW_si?_=n|E23(
zGhI*ORQzddS~heU50pjzTbKDJ@d)j;vUs=yA9kH=5(0J%8GEAZWRnnZ+mNx1T_;=f
ztI$+H-%JJc%~U|&ta$-rHFF_m168|lJ1&<+ere1&n^Y~v6<jKd{94l(<94HWViz95
z4<TkBV?Fkbattw>#~v)=6+D7d_y`x87SgyIO;>+A4q!9R<1k)QiKxS3^52QOv5@?a
zHoXhu+<^gZNyiNC!tRDK)+e8<DaOC?252Op@gy#b{3_1jVoKiTrD!(AxQKHpb|V@K
z2r+vOM=;macL;Mhl43Wa_8bT?yH_<ycQ#GZki*zh7WuDrj7JIxF}n$G;vMxTX<HWY
zE<PxW{O@6gLj{DGZN+{(*kyGMIE`1!B0qT}gH;8Dm~F)Scv=6u^)-Bgx5^^_efi*u
z;zG<`#2M8_Rj2qRoWSeYQp0{rvOSS}M=?mXoJqC)hZT1q#H>!xzwiwX;p?)<7wY<#
zMLu(#?PffQ=T#pAZXT8RdViX&;aBigD*C&!$p2{Id!u3&a1aMW%r@Y0m6)egebz`u
z2{@0>RYm_e&PG$0bV24ZA7VC(hgD*pRka(dvYLRi_!3{><TxE-ThfI(j^iO_Z(u8)
z!PCoaC-G^q_8jPfzL&_>Oa=7KR6yT!whD!qt;2hGZG`Ek*xkiONJj!f%;xYJ?yu=`
z7B7@V{&U;htskM(V4YIGc&azBpF+%bwawqf95{dtWBA>wde>;hB>ttmplSn-rsGd+
zQ+<lrj{CYy)`fr)$M8Lll|^2zVsj`RLd*gl#bfEW6`l7&|2J!XAD9a0n|}au2;T4Q
SaE=E60000<MNUMnLSTZf#DtXq

literal 0
HcmV?d00001

diff --git a/public/meta/aircraft-icon-a380x.png b/public/meta/aircraft-icon-a380x.png
new file mode 100644
index 0000000000000000000000000000000000000000..321e47c22ccbec19b12d24b13d621369d248c3ab
GIT binary patch
literal 897
zcmV-{1AhF8P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00009a7bBm000XU
z000XU0RWnu7ytkRGf6~2RA_<i+D)hxWf%wW-+Pi0`|yJ>Eo3Z-%tdV?q83s}w1|wX
z7A>kxLKNgGY89=DAVR23ZPHz6AC`*<DTIs)7ez=yL=B-ACG>hIv5@<=nD@r*+!@cA
zbLKP%^M~1-d7tP1|IhP&JTsgSV{|d2*S3I3(HUqPQ!x<oxGv;zZ^&amT_1)#-ZT}i
zrWbL@<2rnYRRgz9<JOpk-<sr`Mg`umSUjx6>rInQqXK<gS#i4`v#`8LzG+mTN<3WE
zG+DO`wT;d|+vp6mjm|*ZSTasf$YW2@E-c6Cn1xeg=2@j^G0xyr%)(sV9Ag>4HQ0{Z
z@Kwm;J6MLdh6RQ^eu8Ik7Ej?$9LC$2sVk&*FO;7C7VN@m9K(J*p)fHD&ZhYLaUD*k
z_ycvTFir(}xGY@(Yw>i=9LrM7`IKWmUk|km)Lz6f3+IvJL?Rz|8cMMt<;qj;TBw{t
zA&*yMgW}2j6tggset#G{aqXC*t8g68#VqViJZo_y{=&~O3%`$SAmnj{VopAbEAT$v
z#Y>8LJ5B7z%Xkvo@CV++u9$_{MOrHitjBA3NHNV$U<H;=Me<^t!>nSro5KfqK4#(9
z!GTq4ppWlUk~ysL|B08l)+FxPq@`aruxbI$VUyyJY4fzcBx%^BVs~03F68lX9KmB{
z_e&6Q2s;#uei$~Sv4>LZF!Yj^BT3tT_0F$>bn_LX?Jj@gGwi{qF$*XEO_*Q!WQ<t|
z3&yU-eRu@-;?fbgkK@Idh24V&hCPil_&ACFJZ9m~vO#qW48&cIdlY6KQ1n?t^9(a^
zOtFRT!Plc4G~*f=$gu=>D9mhAv>T;)$_yOEK7534>-Hv17#PUc!|iwwTd{Fro`nW}
z#J-q?7wQm{5H@O{B>$_}8nbXS)A=$tRRe>#=-<dX18t)-FprSOr6G?yM;Ny|9a_!s
zHn9tZJZ{8$xMjqUqj)rC;fG1NC$2#1p$;2eJjG%3O~~W+iTNk3zz99m1u^NlFv$yf
z6=v`y4y5ZG?oxb;*@7FIBx|Aqzu+Lgz`?TDzJc-Uu^D$`bIii^6Y+Qdm1r5Afwu7v
XTahx8kAiy#00000NkvXXu0mjf_z0wn

literal 0
HcmV?d00001

diff --git a/public/meta/aircraft-icon.png b/public/meta/aircraft-icon.png
index ca329b42e223c52196defe86ca2d42b76f2be795..1ea27b219c128df4f63f8fd3105088aa82ba26c2 100644
GIT binary patch
delta 599
zcmV-d0;v7c1ce2VIe#}vL_t(&f$f=1Zxb;PhMzZWfD)RvDiT5zh)^&5|G!c=a-dX*
zs#V&CKxo<whjB!d&t2QgD$+jEUe>#wd2Nq9wq<5)Gp)KENTm@_H@j6-D(MMu0(8Tx
z0dQevqwKbF2XS!zBa4mm2z)lP`<(Ww7(yp3@7bMDmX#_5bblkuqNqZ^PGngWTR#gm
z0_vs_P&bW$x@iQ|O*R3N+LC$&zB>&GUmm+TvQbGd@kFg?sxSe*13xU$fg}Nv_JH?5
zC$frPz*jRHM*9#WKvD~M4ZH#rYkY<);G3B}miDEr07(bHJ0ROQ4vc|wGwYY~r>Fo)
zZQu=XT;8`*+<)T3s?g4@kbsCFO{H*<uN5HaIX+xsgEW<mLB3Q#1woq1${=455E-N+
zpby;OClc#80}g;A;6(`=WBh35diLeA(}U9jl^HN3I6WJ1()tcFvp>Kka4Bh*e`30<
z@9j3w12zg+#RNZ~nmS#2&Ys829)d&HVc72DVh$-dVSj8A@PJQiec&#2*<Xj5O@ggk
zc{g@&F-LgoFJ+m45k8i0QkM7>LPPxw&$*-y-YbXm-!2F+vriTKSDMg}L*Qb*tl1CL
zO(URg8Ua%zwIsbQ@Lew~T6yed+7mwmJ^*_Ke;EN^%<Olv?NkAhj`8HLY^zT29oSWh
z{TyA{i%_hmg&zncQN=Cg7*7H2@Z@iTr_EhFS$mq(SPlXAxT6DLuwpOU56|=#bARSZ
lBKtM#|E5_7>SpT&`~{g(&}{}B`S<_;002ovPDHLkV1fZG4HEzW

delta 548
zcmV+<0^9wC1=0kNIe!F6L_t(|ob8!0Yg9oLg%2^H7z|c|f)Z@B2?~N(_!CU0t#-C4
zZ7ppr(@Dx8SmXz!31s))35kUS1c`#$h!VvJLT--Cthh1D^4{AW-^|K<FxAfNJ7?}Y
z^X}UP3WY*^gcqUq9BSXf5PJdP6-<!$&(K5uHN?Jz&$37T&VL^h-#4*>>`{N)3^Abg
z71^W1#Qz@Iqs2gCN(E9=Dv+8|fz(WF1su;qZMo8b*eV<^Asfgk2p@(%r%HU^#6Fad
zu)-5*#dmlOVx8K;2b;SsC~vke-0?KTo<Qwjbn$<xVNhGbI?uEtzRNohdpox9K_efa
zyqi9x;~QCx8-MaqLOQ;Q{Wu}-@;b!2tqIpyA&(i-SRwClww`$50>s`m+^JVkdyGxq
zs20S_5H3P&9b$(KLw>*7Ks~_+Jpo?Gv7bt+)*fY>=Yl97T(O_Eu065=A1r?%f59!D
z9eD$WvCWxKeSgx4?Zq)5_Nn)UT)=CdY^|AF<1`#^Lx1ck)ZRB+FSZi`?0732p-qWl
z;3!^$*WxvKZU3Cu23n^WNKL6gY9_V<YdqCEw=19G%i*Dw6^>US_Od}=vjfL@WI?Z&
z`CeOmzY;&fdq#2^3(qYRI&gb@4F84s-Sw^WCNIG8Ug+u7-ehRNb|Ll*jt{WGxyt!|
mj-Tt-s2%OLqOnl;kNE{<c~P{|GLbg`0000<MNUMnLSTa3`v@Qa

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index d10f34b2..d0b8b4c1 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -4,13 +4,17 @@ import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
 import { DivIcon } from 'leaflet';
 import { ArrowRightOutlined } from '@ant-design/icons';
 
-const AircraftIcon = (heading: number, aircraftId: string) => {
-    const aircraftStyle = `transform: rotate(${heading}deg); transform-origin: center; width: 32px; height: 32px; filter: drop-shadow(0 0 2px rgba(0 0 0 /0.5))`;
+const AircraftIcon = (heading: number, aircraftId: string, aircraftType: string) => {
+    var aircraftIconUrl = "/meta/aircraft-icon.png";
+    var aircraftIconSize = 28
+    if (aircraftType.includes("A32")) {  aircraftIconUrl = "/meta/aircraft-icon-a32nx.png"; }
+    if (aircraftType.includes("A38")) {  aircraftIconUrl = "/meta/aircraft-icon-a380x.png"; aircraftIconSize = 38; }
+    const aircraftIconStyle = `transform: rotate(${heading}deg); transform-origin: center; width: ${aircraftIconSize}px; height: ${aircraftIconSize}px; filter: drop-shadow(0 0 2px rgba(0 0 0 /0.5))`;
 
     return new DivIcon({
         iconSize: [0, 0],
         iconAnchor: [15, 10],
-        html: `<img src="/meta/aircraft-icon.png" alt="${aircraftId}" style="${aircraftStyle}"/>`,
+        html: `<img src="${aircraftIconUrl}" alt="${aircraftId}" style="${aircraftIconStyle}"/>`,
     });
 };
 
@@ -25,6 +29,26 @@ export interface LeafletMapProps {
 const LeafletMap: FC<LeafletMapProps> = ({ isFullPageMap, className }) => {
     const [flights, setFlights] = useState<TelexConnection[]>([]);
 
+    const MapLegend = () => {
+        return(
+          <div className="leaflet-bottom leaflet-left hidden lg:block">
+            <div className="leaflet-control">
+              <div className="bg-light p-4 text-secondary font-mono">
+                <span className="flex items-center gap-x-4">
+                    <img className="inline" src="/meta/aircraft-icon-a32nx.png" style={{height:28, width:28}}/> <h4>FlyByWire A32NX</h4>
+                </span>
+                <span className="flex items-center gap-x-4">
+                    <img className="inline" src="/meta/aircraft-icon-a380x.png" style={{height:28, width:28}}/> <h4>FlyByWire A380X</h4>
+                </span>
+                <span className="flex items-center gap-x-4">
+                    <img className="inline" src="/meta/aircraft-icon.png" style={{height:28, width:28}}/> <h4>Others</h4>
+                </span>
+              </div>
+            </div>
+          </div>
+        )
+      }
+
     useEffect(() => {
         Telex.fetchAllConnections().then((flights) => setFlights(flights));
     }, []);
@@ -40,7 +64,7 @@ const LeafletMap: FC<LeafletMapProps> = ({ isFullPageMap, className }) => {
                 />
 
                 {flights.map((it) => (
-                    <Marker key={it.id} icon={AircraftIcon(it.heading, it.id)} position={[it.location.y, it.location.x]}>
+                    <Marker key={it.id} icon={AircraftIcon(it.heading, it.id, it.aircraftType)} position={[it.location.y, it.location.x]}>
                         <Popup>
                             <div className="bg-secondary p-4 text-white">
                                 <span className="flex items-center justify-between gap-x-4">
@@ -74,6 +98,7 @@ const LeafletMap: FC<LeafletMapProps> = ({ isFullPageMap, className }) => {
                         </Popup>
                     </Marker>
                 ))}
+                <MapLegend />
             </MapContainer>
         </div>
     );

From ee6095168712f450e6ca7e4b5de2e4c22a29904f Mon Sep 17 00:00:00 2001
From: Gaudv <gitlab.g@canque.fr>
Date: Sat, 2 Nov 2024 20:47:28 +0100
Subject: [PATCH 2/5] comptess inline css (lint rules)

---
 src/components/Map/Map.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index d0b8b4c1..d959aa22 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -9,7 +9,7 @@ const AircraftIcon = (heading: number, aircraftId: string, aircraftType: string)
     var aircraftIconSize = 28
     if (aircraftType.includes("A32")) {  aircraftIconUrl = "/meta/aircraft-icon-a32nx.png"; }
     if (aircraftType.includes("A38")) {  aircraftIconUrl = "/meta/aircraft-icon-a380x.png"; aircraftIconSize = 38; }
-    const aircraftIconStyle = `transform: rotate(${heading}deg); transform-origin: center; width: ${aircraftIconSize}px; height: ${aircraftIconSize}px; filter: drop-shadow(0 0 2px rgba(0 0 0 /0.5))`;
+    const aircraftIconStyle = `transform:rotate(${heading}deg);transform-origin:center;width:${aircraftIconSize}px;height:${aircraftIconSize}px;filter:drop-shadow(0 0 2px rgba(0 0 0 /0.5))`;
 
     return new DivIcon({
         iconSize: [0, 0],

From 4da6771bff5cb81a180e2bc7113a2c6eace3a72e Mon Sep 17 00:00:00 2001
From: Gaudv <gitlab.g@canque.fr>
Date: Sat, 2 Nov 2024 21:08:49 +0100
Subject: [PATCH 3/5] global lint fix on map composent

---
 src/components/Map/Map.tsx | 47 +++++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index d959aa22..82bd8a17 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -5,10 +5,14 @@ import { DivIcon } from 'leaflet';
 import { ArrowRightOutlined } from '@ant-design/icons';
 
 const AircraftIcon = (heading: number, aircraftId: string, aircraftType: string) => {
-    var aircraftIconUrl = "/meta/aircraft-icon.png";
-    var aircraftIconSize = 28
-    if (aircraftType.includes("A32")) {  aircraftIconUrl = "/meta/aircraft-icon-a32nx.png"; }
-    if (aircraftType.includes("A38")) {  aircraftIconUrl = "/meta/aircraft-icon-a380x.png"; aircraftIconSize = 38; }
+    let aircraftIconUrl = '/meta/aircraft-icon.png';
+    let aircraftIconSize = 28;
+    if (aircraftType.includes('A32')) {
+        aircraftIconUrl = '/meta/aircraft-icon-a32nx.png';
+    }
+    if (aircraftType.includes('A38')) {
+        aircraftIconUrl = '/meta/aircraft-icon-a380x.png'; aircraftIconSize = 38;
+    }
     const aircraftIconStyle = `transform:rotate(${heading}deg);transform-origin:center;width:${aircraftIconSize}px;height:${aircraftIconSize}px;filter:drop-shadow(0 0 2px rgba(0 0 0 /0.5))`;
 
     return new DivIcon({
@@ -29,25 +33,26 @@ export interface LeafletMapProps {
 const LeafletMap: FC<LeafletMapProps> = ({ isFullPageMap, className }) => {
     const [flights, setFlights] = useState<TelexConnection[]>([]);
 
-    const MapLegend = () => {
-        return(
-          <div className="leaflet-bottom leaflet-left hidden lg:block">
+    const MapLegend = () => (
+        <div className="leaflet-bottom leaflet-left hidden lg:block">
             <div className="leaflet-control">
-              <div className="bg-light p-4 text-secondary font-mono">
-                <span className="flex items-center gap-x-4">
-                    <img className="inline" src="/meta/aircraft-icon-a32nx.png" style={{height:28, width:28}}/> <h4>FlyByWire A32NX</h4>
-                </span>
-                <span className="flex items-center gap-x-4">
-                    <img className="inline" src="/meta/aircraft-icon-a380x.png" style={{height:28, width:28}}/> <h4>FlyByWire A380X</h4>
-                </span>
-                <span className="flex items-center gap-x-4">
-                    <img className="inline" src="/meta/aircraft-icon.png" style={{height:28, width:28}}/> <h4>Others</h4>
-                </span>
-              </div>
+                <div className="bg-light p-4 text-secondary font-mono">
+                    <span className="flex items-center gap-x-4">
+                        <img className="inline" src="/meta/aircraft-icon-a32nx.png" style={{ height: 28, width: 28 }} />
+                        <h4>FlyByWire A32NX</h4>
+                    </span>
+                    <span className="flex items-center gap-x-4">
+                        <img className="inline" src="/meta/aircraft-icon-a380x.png" style={{ height: 28, width: 28 }} />
+                        <h4>FlyByWire A380X</h4>
+                    </span>
+                    <span className="flex items-center gap-x-4">
+                        <img className="inline" src="/meta/aircraft-icon.png" style={{ height: 28, width: 28 }} />
+                        <h4>Others</h4>
+                    </span>
+                </div>
             </div>
-          </div>
-        )
-      }
+        </div>
+    );
 
     useEffect(() => {
         Telex.fetchAllConnections().then((flights) => setFlights(flights));

From ed3c7b51cfe8f1caec892c1697509c3de88855b8 Mon Sep 17 00:00:00 2001
From: Gaudv <gauthier@canque.fr>
Date: Sat, 2 Nov 2024 23:49:15 +0100
Subject: [PATCH 4/5] MapLegend responsive

---
 src/components/Map/Map.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index 82bd8a17..b367eea4 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -34,18 +34,18 @@ const LeafletMap: FC<LeafletMapProps> = ({ isFullPageMap, className }) => {
     const [flights, setFlights] = useState<TelexConnection[]>([]);
 
     const MapLegend = () => (
-        <div className="leaflet-bottom leaflet-left hidden lg:block">
+        <div className="leaflet-bottom leaflet-left">
             <div className="leaflet-control">
                 <div className="bg-light p-4 text-secondary font-mono">
-                    <span className="flex items-center gap-x-4">
+                    <span className="items-center inline-flex gap-x-2 mr-4 xl:flex xl:gap-x-4 xl:mr-0">
                         <img className="inline" src="/meta/aircraft-icon-a32nx.png" style={{ height: 28, width: 28 }} />
-                        <h4>FlyByWire A32NX</h4>
+                        <h4><span className="hidden lg:inline">FlyByWire </span>A32NX</h4>
                     </span>
-                    <span className="flex items-center gap-x-4">
+                    <span className="items-center inline-flex gap-x-2 mr-4 xl:flex xl:gap-x-4 xl:mr-0">
                         <img className="inline" src="/meta/aircraft-icon-a380x.png" style={{ height: 28, width: 28 }} />
-                        <h4>FlyByWire A380X</h4>
+                        <h4><span className="hidden lg:inline">FlyByWire </span>A380X</h4>
                     </span>
-                    <span className="flex items-center gap-x-4">
+                    <span className="items-center inline-flex gap-x-2 mr-4 xl:flex xl:gap-x-4 xl:mr-0">
                         <img className="inline" src="/meta/aircraft-icon.png" style={{ height: 28, width: 28 }} />
                         <h4>Others</h4>
                     </span>

From 288bbac95a6c60dae409bfbce70db5f56bc85144 Mon Sep 17 00:00:00 2001
From: Gaudv <gauthier@canque.fr>
Date: Sat, 2 Nov 2024 23:53:49 +0100
Subject: [PATCH 5/5] lint fix

---
 src/components/Map/Map.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index b367eea4..887d2426 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -39,11 +39,17 @@ const LeafletMap: FC<LeafletMapProps> = ({ isFullPageMap, className }) => {
                 <div className="bg-light p-4 text-secondary font-mono">
                     <span className="items-center inline-flex gap-x-2 mr-4 xl:flex xl:gap-x-4 xl:mr-0">
                         <img className="inline" src="/meta/aircraft-icon-a32nx.png" style={{ height: 28, width: 28 }} />
-                        <h4><span className="hidden lg:inline">FlyByWire </span>A32NX</h4>
+                        <h4>
+                            <span className="hidden lg:inline">FlyByWire </span>
+                            A32NX
+                        </h4>
                     </span>
                     <span className="items-center inline-flex gap-x-2 mr-4 xl:flex xl:gap-x-4 xl:mr-0">
                         <img className="inline" src="/meta/aircraft-icon-a380x.png" style={{ height: 28, width: 28 }} />
-                        <h4><span className="hidden lg:inline">FlyByWire </span>A380X</h4>
+                        <h4>
+                            <span className="hidden lg:inline">FlyByWire </span>
+                            A380X
+                        </h4>
                     </span>
                     <span className="items-center inline-flex gap-x-2 mr-4 xl:flex xl:gap-x-4 xl:mr-0">
                         <img className="inline" src="/meta/aircraft-icon.png" style={{ height: 28, width: 28 }} />