From 9051895020f345481191fbff94fb35846e20193c Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Thu, 30 Nov 2023 12:45:52 -0500 Subject: [PATCH 01/15] added asset for marker clusterer --- front-end/public/img/pie10.png | Bin 0 -> 1921 bytes front-end/public/img/pie3.png | Bin 0 -> 1337 bytes front-end/public/img/pie4.png | Bin 0 -> 1131 bytes front-end/public/img/pie5.png | Bin 0 -> 1561 bytes front-end/public/img/pie6.png | Bin 0 -> 1586 bytes front-end/public/img/pie7.png | Bin 0 -> 1730 bytes front-end/public/img/pie8.png | Bin 0 -> 1393 bytes front-end/public/img/pie9.png | Bin 0 -> 1861 bytes 8 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 front-end/public/img/pie10.png create mode 100644 front-end/public/img/pie3.png create mode 100644 front-end/public/img/pie4.png create mode 100644 front-end/public/img/pie5.png create mode 100644 front-end/public/img/pie6.png create mode 100644 front-end/public/img/pie7.png create mode 100644 front-end/public/img/pie8.png create mode 100644 front-end/public/img/pie9.png diff --git a/front-end/public/img/pie10.png b/front-end/public/img/pie10.png new file mode 100644 index 0000000000000000000000000000000000000000..69dd9e40a5a05295598f11463c500a0ed07d2d3a GIT binary patch literal 1921 zcmbVNX;c$e6b@JwsL-IGWvLDWDhkQWBqSjrkpm=1lpuwuacRpWGmrquWEn^T*48!( zg2k=uuS;P6A3iOQREkeMg!>K!b_E z`5YN6(dd<=}80SGMu%7GRqQNW_j)tLkq5jf~qKv>h;ft3 zsL_)eLI=1!qDmr<6oC}emnmrVGTAG~I@6F)lw^yp^Ad$iV0Po7T1wdu?VETFfk1#h=Q?9 zl!GZLF>w|H#iEo9ltU#CD{+LY^u{BieAuRl#SV4jjM@hmcCy3nPE=W}qBw%iHkSk?=x4dW1k8sLZXV+t*vePZuym_HQ^I<&iLvuV|ab4 zJ!EgN(w=;XKPfXPD0EfBlfQ1=Kljt+XTrYgA8gy&)&C@Rps(-oz`zKn)9Gng#Z(4% z8XbQ3y`}_@ZtLFA1dVTROsrllyV|yRZ3X?;p2$&!$C4lTUS%8_cUDp4dD}PUSnDy{ zM$x z3t+<&fhZfWwbORdSC+SoHLW?oR&k}z9Myw9gzHy6m{ zW6u{f=X*Vj_FuN-hY-?7TD;?$0qo+XTfA-k49(8k9gOz9RV@MXdobd$EOP66^j#xk z?lgM77%`@IR@TwF$y&y@w>#K}YZHk6CKgWg9t<9EYBbF$uTICA&E=Pd`qo&K8K%KX};Q<@KTS#SDfhz~d7Q-IrZ zAKI(BPEJX)ORn=KPHnUV`dmcs&Ckt$&z&*W4D3=lgbJvjG~!Q(toYEG-XDdhxA#7H z(3CX4F2h!CTUmz12$LUQxe)sGg+7mO4qgGXTZFOilsbEt z#L>Z3-m`m%2s_*1u>%ma&pn6;UC978ZVCEf!4tx@r1l zQOa+c>2rl}AbL5H+mN^6*}0E5w%enN3?J~BH75-RJFlLMXs@a{-FINZ&dRaXcbY=G dk#%T4IVe;4n^loH?d%sL;K7z zMc@l6M!TC>45}sAi2GCx;;hX<3N%gQl`b32I_(U*7H0s>Qou#gfCMy01C9ZB_92ir zO^k9Oe{I$mlH5eAVZ=F#N+c4tgx#iUF^YD%Tohm^h9Qv#sV5bKH%Ude<}CQ3E@)ER zkW>ZFSmYyWr{N}0q>CxY@nCStu%c&)LX=S^AE#&=pkz6d*Mhcggy6qnEUT@DlW|Ce zpssdm0;)&Ungb*5ZtN(dh@#=1)Ff0CzQeByoibF6fZt7^8=EMJTm=xLJS#>JnUEoQ zu_8k9EJ_|kAnk}$G7g6`nzOSUp7k=d9@bam@pu7E*Hn60hW4`dS|^gcEbYu;1B!0& ziU4!ICFDDc_1_T7`83EIsuot&j$9WswyK7zx2kd6=Ub>cUe+urqMFdlGi6%L+7C6U z3yQUxD&q@0bJ8*~Fs>-ei%v*_3c!+3s9;E^gAqv}+8KtSSssdZB8wOQFMkvYipn(0 zf0`$EggP>_T^a=>EDaM>&;)5{R0=5aYYbcQbinTko8SNX&G9ErKUQ>RHhi@AjlMo% z=){MEz6<$fgWDSGggi?$TRn>TK$ygQ_sY~u;rYk_-OCQ?AA+Vd;50}<3FZ* z&Yu5c;8VqVCck#oyBv~Zn*B9(#nV4+k0gV=-QZH*0w@^_1w1?rw8*WA$WIxD0Qf3 z^7ef#{w?eQ#;_)b{utZp}yq3nF($3V)E*w z1raSsr3+ES&&uCc6c>V^pbG`viY{~`h&vItqN2V`XR3?h!a(vqx#!$_&%O8D$nc)- z0 zPB@h+tCsc}Hgyvywn;>;&(VU=KM?uI9wQ7`r0#eb@ynwpB5-goa>u>Uh%#b}*Wmm3S{6aegpFmyxuB}05s;?=0a_w0 z*@~ioUOk~`eMwc@0aU1HGSp=SN>DKrXs8ghACY?taLp*2gKb~@lo1<@`Gzbvo6STs znV>;kR&-sLp(?AY#4V(7(qkx+yl``e!6cy_I6iZz2VzEK(Fv9jd8BhGxPGZLPwa(l zp}1sngnU^^K-qQUyjs>FE0aHAENC58CVe88Nk}IGo7bbZxdZ0f{o7G&$fGg#1r9F? z8aJsu;S!G(&5X$ZB(Q^x6vQ>8VT+4NR0-jfB_WL`4=tjktzI>q?yGfp7Q&~Yo*q>5 zg={tl6{XOdOXkwqLN;Zll&q%b20PfI7c%78q~qJ+zS~&ypI9Rw5X5Lup>({{1tSg0 zXxN}W$md&C2U`z09;VH3TU@5OtW6R)CkP%4s0&&;8_ohTsCrF9xQ|FM1vQD-DOKuA zt5||Ksj8}?A%c@)8;}22KbZ$5$IbFr^K`CwN593&Y-j)N&Ro5;Di|=phspq8njVsSrPmj*-kv2YvUVj*! zJ-2Mf?hU)W?D?hNif^8F-C6tn=7SY4r%qq(o;h{#lRa{B`_S1V2f@lkAJ%+4{CLq! z^TN&M_Des7X9qr3S1f-2qR|DW>Fu{p%oUSftqI_%a9vt8{o=f}HXi?CVc5KzJ9g$b D_quH! literal 0 HcmV?d00001 diff --git a/front-end/public/img/pie5.png b/front-end/public/img/pie5.png new file mode 100644 index 0000000000000000000000000000000000000000..a497e4020699036df5f3b2e91cad22cd1dfa5022 GIT binary patch literal 1561 zcmbVMX;2eq7!F#w1aYuhbO5(Yoq8pE#V!gqm$Y{|{J!!42N-H?gv9(MsLpMlle>nc=&g_2QxBEQLd++*! zyzJQM3DGi{EY_T3ERxpb;2jw*J!hazb<#3kG}**r)*<>x9>_9i)(#-En{QNn!!RgSr@+)&C9a+h;V7m?P#uDyaug#ll)zDF=z=9{JnbNgj9Ejr zq>~>BkcOsZhr$bO2!Ew2SkPDR_k@U+wLP|)%2n32}IFVsJP*9Py zvtCgTOP;<8!OdALuZ2CrP@<%iA%2oWFa?UZ-NCp9(Sle6{&nMxXu(>^0i*~Bte2;x zdN@)-WGQ!VHxvX)-VpgbBNc_LFtU`_4LqXRsE4I53Ywt_6-qluHEoxY32-?{tL$=8 zEd`I-0j9C1;u?+C5z=`RU!%&@rkYGy85sr?!%V3<1FkX|3|bRzQW{gWsu0)g5k%5M zfsk!RvOUB#y_HL3@_-as-paBSp)M$Ju_7zDSPsg}9IQGtxrFi1tWTH{EYqu~jeuvC z06L3j-Oym33FZwx;5vtzq_sefs!+8YP%2!m)!?)orIk32V`>u6N_dD*|KI!}l2b^q zS^m>Jp;uBz2Dh(AK{~u1Cg71Kh?hoX#mM$@nQWNOY|OCw@APi%n7yemq1H)vX~T(4 ziX-U0E8A9UN;y3C{l&NIG&izbNqxxg6C=MajNDfb)qT2k6N-$UvRZe?%iOOX7Pa?T z<-=nMHQP@Imeq}Xwzjry=kwjqXLK*WCv4}4U86?yB^%-$_e~qaq7CO}j(Jizp0M1f zR(7{`w>tB+!)_j#c%~KZ-MuO=s%uRLA>M%FpH%PJxMq@VRUF5~95S?oMK#oxwd_Bd zLhd-HS9jHpyS0u*hd+OMA>(PZ$}r7(cFyG5z|+F2?55JSpW~Wqvs%I}oeC?iL|fa>|2Kk}&KiO`nq`JXKqKadMfJnqPU{9xA9->z@C*Km2|0pHSh`$Wro zCs!vOCz}3hSrKSB)$!%Q{seDpWN+JSS4SCJ+<&^4=#R`!OS~Qv_fyl+t7tB`eJcRB zKqu0hBiK`l^~?4=xqGQ|ul&0Rs^pzgbZ_L+65}5``xi243)?q$&UrC! zAbwn8fcy%nc3oV4^5+kaJCv96!zPCPQg!VE<;9VrdFQT6Kkk(cm*u+)N_gm#)ZowB MY|1k>85XVi2Ywkun*aa+ literal 0 HcmV?d00001 diff --git a/front-end/public/img/pie6.png b/front-end/public/img/pie6.png new file mode 100644 index 0000000000000000000000000000000000000000..42dfb4f0f987c7afa5d0f9a2bda3c8f17f26b68e GIT binary patch literal 1586 zcmbVMc~BEq9L{)^q7+bUJg8k45f73*LPD|<(~wOtZ4;4Dg&9lTWM9IH$!<1_1Ul*{ zwKfK%YONIytW%^~OFcT`O$Fjv?R2mn)s~7=+oG+-dLy+PB({Gz{?VP;eedml-}k#W zkZsM1i5?Lxkw{|9Q^*`~9TmQ#28ho|X#FN}87>&}1RLuVN+=#k^fYS+kl9VSKn|ej zQtxq)A(8Z*%jD(>d6w4+2kVwoVT|1G=0vtclA-f+l%og;kR7-fj~2eMzY&HQS_{um zT2KpT0ENtyG9K8O1_U*t4H6KN>zq?EK>OeVl( z6rE<5QA#m*)DAF}Jsnr6)Xs>`)A%a23d>ZWCcQor#V}*K-h`SAM$(wBQK4ieYK(Br z9-lyY93Wzw5pDN!jnCu~1|CoX%jdG}oJbdB7qSBDD`YvyVCbnjG;Rjtq1h7O_;8sX zM@<5rnG0wW&$^+WJQK`Qe84qMB}J=&3{69oGT=zVWoi{p%TQW@<2a_I0Ih&~`SkzI zA0j%1gq!6*%@cVgc4T<_WE8~1lVJiLae{bpRP-mV`X!P+Ic8Fy>;L}xhi$Lfs9{GN z;toW2G^HMkn|P|v@%-6~^OgtP=EgHqqW1+J40)Kc&$91=5z_1m&fnew&D3Q9xB|Ym z=_54ys{BpqhC|4_MXl6Ym#ZGS)3l`d!s*gOH~u=%cDJ;uZD(rD60cqe4#%!0e?`&D}Gwtl$X(XW9Pi zf4M2lruyjD)x3CnkD#cnfbX4M)m_2GCk~;O@19>d=oTw;NCO!|S{19Jks#rYBB9HecXJU-X>| z!IRa-R(}d?-#YBFB!9!kzP0C@YZ2=i2M8fzO|V)W?YF!Ibt< z2$JyWvNd1N>s&aj`-8?c$xGv|?6>VP%uK#$+THSYS@E{_MjezK=_`$&Y`$N-gN(W_m@?4`{~v#fop^6%v&6bL3PrO=DpTBbu4}I&!0P2B?r%6 rxu~0WVsytzY2(e(u15nOCCrli7WGF*>Mi#t;lH@qXeH}2XD#{%Mvhg# literal 0 HcmV?d00001 diff --git a/front-end/public/img/pie7.png b/front-end/public/img/pie7.png new file mode 100644 index 0000000000000000000000000000000000000000..83f73590e592c8c12ceecc643a15979535d7a0d7 GIT binary patch literal 1730 zcmbVNX;2eq7>?GqD54-(JZTJ6(t%_T$Vmc(BtX<438|zwS~uAZq$JspEGD2b6~}U^ zRdBQ_9UYVw98{oy@$L)(6vRNaCDo2pEp>W0JihvSd#% zmK>Cu#aNa;Ip2b%<)^5$`Po_?N{fr73haDRz=#nD)owJHtbDtWHm1ub_ukh4jXDM) zvW2v9r_}OPsu;ImR2GxX&_WPIg<qMf+lmT|c3_wf}FdDsajiIfC68qPUH=?bo zJTnF;F)N;H(USGhg-(*m+`Zk97f5=;Uun^kML`S_T$^jeOoU7#q>*2ks2=4Xbl5lk->u+3}S0IFq_TQP3pXf&lZEA6y|^;Q341-QVx&Do zO(<@&e(WvNc+?WiqF;}pi5A>Q9m_Lc{{|mmo{oi}T#NxmgDeK7jfNRqHjFYrGzx}c zh=pKi6m5c!{@?roq*H*mS^m>Jlds5*^lo2|0(p2nOqhwBAPYGvF=4u73T5hTnM9VqS$79Y7*6IOQQ*)*B(acb(hY0@B3&+1q4{=&b?dn$Ui z9;%5f%m?SfOFDNtFAmabcljw(uw_^AOLxulTy|ai=Cv6Q8#tLm=L()RdTw@nSk|_2 zzMD|U&aHjEBBpS9X1qFD%&nMLvGLW#m%f1i`}FUzk+yZufw>T;U3;I7L67?{nqb2RVu*3!Kuw3s$yt9M*MhI_P}XUgIhSMHv;v z8Kz4AZ0Tl4_~-Nv^}5R58;@SjiF2|WD)#j`nwn7oy~Tf|#X$>M>KpPZ%=Vz;a>}q`Q3sT!&}Qxx8m|_KV1o z^!i^F&xO0!%>2!7prf~deMjRtvCaCm@6w>qc)-mo_{h`S-Z8qc%3Xb-zxtJL*A_}u zX7Zsa3(f|2Z>w(=ai%wQ=BNfMPnH~Z(utieihI5hIudH)ek?>J?r~UV(?E(KD)H&M9E0@ z`Rz^J`|GVOeX^rZ2Evcuijd|0TreT~A%VYqm7$t%9(?{I4QzpWHtB>FmbK hFDf4#@uYt-h2mNGqxMP%rNjGIkx5e|#}n2S{saCBp(+3X literal 0 HcmV?d00001 diff --git a/front-end/public/img/pie8.png b/front-end/public/img/pie8.png new file mode 100644 index 0000000000000000000000000000000000000000..0bde65f8af741cd18ddd1c9430d12648492d0417 GIT binary patch literal 1393 zcmeAS@N?(olHy`uVBq!ia0vp^av;pX1|+Qw)-3{3k|nMYCBgY=CFO}lsSJ)O`AMk? zp1FzXsX?iUDV2pMQ*9U+n9DLlB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+* zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxOgGuk&``nLQqR!T z!q~`EN5ROz&{W^RQs2-(*TB%q(7?*bKmiJrfVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj z%k|2Q_413-^$jg8E%gnI^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5 zFD#PU%0_}#n6BP2AO_EVu8M)o`HUDF34YC)x{-2sR(CaRb3oXS&*t9 zlvKL?fy z0y6ST@{2R_3lyB4!LhEO5uTZsl3!k|35q6&uU%4$GRsm^+=}vZ6~N(am5Id-MwV%& zi76JTx&|f&rn;%gCPumzW=1Kx1}VlyMn;CFiK!_-KS1=SkQ;vbKu76=5(`q|fe8Uq zB!~&m3P27#Go|JMb5Id5tH|H0zR$qGIMLI^F{I+wnd$qzm>mV$^*4!a^iI^=7L~P} z(beUGQ{a7tvPXv_Sl9O0H69g>Qt9gL@=wUtZ88%RD*orDwn1n1>2qfk`D*SI?Y#Z| z-!P;F)!Pn#>Sj!&-Refp+iek5ZFyZOV_|CJYUNNh0JPtZ?`oWa#p(0<4g}yyk z62J85yE(6wg1N``gMtw(%pVxKW>g&5B)Q?~+w;6ZQZ?ZZk~Dhls;}5)6h~|GFO_{~ zt}Wayw9-cH?D0Oc#WtQ+elcqAqn2nsGTIq6ORMjsX2QL_wMr{pWKNkMcJg4OTg7uvFv;3tGeNJ8UJwGWn5e^A?|f&-B@nvez+hNSJW!i7(%bOQzQ)^Uwcu@P1me zeC-rd@so0Yn|oaQziXcP9LW7^)sn-n{?FcTV9&(Ez`U?U^Vf^dcR_`qr>mdKI;Vst E0B8mH+yDRo literal 0 HcmV?d00001 diff --git a/front-end/public/img/pie9.png b/front-end/public/img/pie9.png new file mode 100644 index 0000000000000000000000000000000000000000..859e86863fb16bb5ddac2d2b621509b91a681587 GIT binary patch literal 1861 zcmbVNc~BE)6c6Z7wRiw30uHRf1C(TskZUC%mKC6KBq!;RqW!&C^MK;Dx0xlG|7o3D4Yc14OkADLSjU| z`6L;^;S5-yP0L_1)Cs7DGVn2%4c}%kv1kq_BFbjMG&+(2a56`0lyRRl9_0dBLdH!O zsv)&WPUdRk3TQI5U}l=8K&O!s+^9$(!iKUA3?zdAHiO=1L2WW_pI?;SyIzA_pwEQS z$++)GWvG(?IYpCzkT2qCU>F9(Qa&t{2oPZyfIzSigrp!0@gNw5Arygt_ZOFqMibd+ zibC~17JHI$a~Z~jf}quE(d?+)d#Mz$6UeF;oo4&h@oi?@ z`RI|wR(UFtpbn+TE$ddUE9_J+gW6(Rs|M}KTDoiLuKJM5z=8*rRrNqwR#izzz)vw&kys8dZ2==t)+|1X>UBw-VaL-edd_L zboVrN#lj(XSL)Y0v#rYg;6gWlo>#H5sKH*>HO+Hl$M`C9 z=WICagrYX+hvj(CxE)@X6q+sYf>r((gOy(9K<~E5+m^Vv;7qV?OOsa(_Sxe+b8n3C zZD;AGlUE0{9vbcIczbefxhx@P{=F0Vk!#wVwXxgnvc(T2F?z3ulKdZwoh6bff#uuo zWHB2KW)SVWTLLTBKKMeflw3IC+?=}U;?}>!Xa641ecaoer1wcwMAQWV6+4=h9iiUi zPQJEpZ#gr1lDh2cZyu|Xx0iTFNeVZ*8N1wvkMh!KB&B+>ZmM#u2mW;RmCM!{mnh4v z5%^l?gA~WuRraC^n`ZTkfje(_&Y?Ad#eu}(mS@Cw=T7HzIP~8a@AU2}$$W*Jaz@*& z8LG(q!Rxx(gRYbajy*BEXN67}+_a+N%F{vin;w4Go+MUAHO)jX4fA(!r=Pxkj3&^M z-s$r%*IXYt{JvXsfJoSw9;VdR=XxbJ!yU!APm$ofdDw(kW%3P=FO0~&H@&HL!ue}s zs*f%YNGvaTF{XW#&N29w$ebT_Y zP`YycWiX|A;;^J8y}E{0$Hpm&x!ycHZQqK?$+x>^quk$0W4W0%BlbIIWzZ7~n{V#P zjm-%bmDR2Ys7^)A4c%z{*aH#X@t$hkqSzE^&*sEHMe<(0@lr{z^;WH0OsDqx#2IT# znIN#qy#vTviRg}$9aIsA{%9Ln-1AoK>n!hXxbJIi#&waiu6oT=-eIDsTlwUnX>#!u({% z7w$Y$nh@j{;aoqZee>DX9M3 Date: Thu, 30 Nov 2023 16:12:14 -0500 Subject: [PATCH 02/15] filter related changes --- front-end/src/App.js | 6 +- front-end/src/components/DropDownArrow.js | 32 +++-- front-end/src/components/Filter.js | 131 +++++++++++------- front-end/src/components/Map.js | 160 ++-------------------- front-end/src/components/MapPage.js | 12 +- front-end/src/css/filter.css | 56 +++++--- front-end/src/utils/mapUtility.js | 32 +---- 7 files changed, 155 insertions(+), 274 deletions(-) diff --git a/front-end/src/App.js b/front-end/src/App.js index 38815da..86a9540 100644 --- a/front-end/src/App.js +++ b/front-end/src/App.js @@ -17,7 +17,7 @@ import TutorialComponent from './components/TutorialComponent'; // Import hooks and utilities import { registerService } from './utils/serviceRegister'; -import { getUserPos, loadGoogleMapsAPI } from './utils/mapUtility'; +import { getMapCenter, loadGoogleMapsAPI } from './utils/mapUtility'; import { queryRoutes } from './utils/routes'; // Import CSS @@ -45,7 +45,7 @@ function App() { loadGoogleMapsAPI(() => setIsLoading(false)); window.addEventListener('keydown', devTools); registerService(); - getUserPos(); + getMapCenter(); queryRoutes(true); return () => window.removeEventListener('keydown', devTools); @@ -63,7 +63,7 @@ function App() { }; const devTools = (e) => { - if ((e.keyCode === 82 && e.metaKey) || (e.keyCode === 82 && e.ctrlKey)){ + if ((e.keyCode === 82 && e.metaKey) || (e.keyCode === 82 && e.ctrlKey)) { console.log('Resetting local storage...'); localStorage.clear(); } diff --git a/front-end/src/components/DropDownArrow.js b/front-end/src/components/DropDownArrow.js index af61fda..55a0164 100644 --- a/front-end/src/components/DropDownArrow.js +++ b/front-end/src/components/DropDownArrow.js @@ -1,20 +1,24 @@ - import { ReactComponent as FilterIcon } from '../images/filter.svg'; -import '../css/filter.css' +import '../css/filter.css'; import { useState, useEffect } from 'react'; -function DropDownArrow ({status , arrowColor}) { - const [isOpen, setIsOpen] = useState(status); - useEffect(() => { - setIsOpen(status); - }, [status]) - - return ( - <> - - - ) +function DropDownArrow({ status, arrowColor }) { + const [isOpen, setIsOpen] = useState(status); + useEffect(() => { + setIsOpen(status); + }, [status]); + return ( + <> + + + ); } -export default DropDownArrow; \ No newline at end of file +export default DropDownArrow; diff --git a/front-end/src/components/Filter.js b/front-end/src/components/Filter.js index eec2c1f..f742ac8 100644 --- a/front-end/src/components/Filter.js +++ b/front-end/src/components/Filter.js @@ -1,58 +1,89 @@ -import { useState , Fragment } from 'react'; -import '../css/filter.css' -import { ReactComponent as FilterIcon } from '../images/filter.svg'; +import { useState, Fragment, useEffect } from 'react'; +import '../css/filter.css'; +// import { ReactComponent as FilterIcon } from '../images/filter.svg'; import DropDownArrow from './DropDownArrow.js'; -function Filter({onFilterChange}){ - /*the routes are temperarily hard-coded */ - const routes = ['None', 'Route 1', 'Route 2', 'Route 3', 'Route 4', 'Route 5', 'Route 6', 'Route 7', 'Route 8', 'Route 9', 'Route 10']; - const [isOpen, setIsOpen] = useState(false); - //randomly route colors - const routes_colors = ['#F0E9FF', '#f5429b', '#e04502', '#a1f542', '#162fcc', '#16cc71', '#a142f5', '#cc1631', '#A2FF46', '#e6cc0e', '#f54278', '#60f542'] - const [selectedRoutes, setSelectedRoutes] = useState('Filter'); - const [routeColor, setRouteColor] = useState('white'); - const [textColor, setTextColor] = useState('black'); - - const toggleFilter = () => { - if (!isOpen) { - setRouteColor('#F0E9FF'); //reset color to default when filter is opened again - } - setIsOpen(!isOpen); +function Filter() { + const [routesData, setRoutesFilter] = useState([]); + const [isOpen, setIsOpen] = useState(false); + const [selectedRoute, setSelectedRoute] = useState('Show All'); + const [routeColor, setRouteColor] = useState('white'); + const [textColor, setTextColor] = useState('black'); + + useEffect(() => { + initializeFilter(); + const routesArray = Object.keys(window.nyushuttle.routes).map((key) => { + const route = window.nyushuttle.routes[key]; + return { + id: key, + name: route[0], + color: route[1], + }; + }); + setRoutesFilter((defaultArray) => [...defaultArray, ...routesArray]); + }, []); + + const initializeFilter = () => { + setRoutesFilter([{ name: 'Show All', color: 'black' }]); + }; + + const toggleFilter = () => { + setIsOpen(!isOpen); + if (!isOpen) { + // When opening the dropdown + setSelectedRoute('Show All'); + setRouteColor('white'); + setTextColor('black'); } - const selectRoute = (route) => { - route = route == 'None' ? 'Filter' : route; /*Set text to 'filter' if no route is selected*/ - setSelectedRoutes(route); - setTextColor( (route!='Filter') ? 'white' : 'black' ); //change text color - let routeIndex = routes.indexOf(route); - setRouteColor(routes_colors[routeIndex]); - onFilterChange(routeIndex , routes_colors[routeIndex]) + }; + + const selectRoute = (id, routeName, color) => { + if (routeName === 'Show All' || routeName === 'None') { + setSelectedRoute('Show All'); + setTextColor('black'); + setRouteColor('white'); + window.nyushuttle.routesSelected = []; + } else { + setSelectedRoute(routeName); + setTextColor('white'); + setRouteColor(color); + window.nyushuttle.routesSelected = [id]; } + }; + + return ( + <> +
+
+ {!isOpen && ( + +

+ {selectedRoute} +

+ + )} + - return( - <> -
-
- {isOpen ? <> : - -

{selectedRoutes}

- - } - - - +
- - ) + + ))} + +
+
+ + ); } -export default Filter; \ No newline at end of file +export default Filter; diff --git a/front-end/src/components/Map.js b/front-end/src/components/Map.js index 3696dd3..0568342 100644 --- a/front-end/src/components/Map.js +++ b/front-end/src/components/Map.js @@ -1,17 +1,12 @@ -import "../css/map.css"; -import { useEffect, useState, useRef } from "react"; -import RealTimeDataWebSocket from "../utils/websocket"; -import { - loadGoogleMapsAPI, - initializeMap, - getCoordinates, - generateTwoUniqueRandomInts, -} from "../utils/mapUtility"; -import { queryTransportations } from "../utils/transportData"; -import { updateTransportMarkers } from "../utils/transportMarker"; -import { queryStops, drawStopMarkers } from "../utils/stops"; - -function Map({ line, lineColor }) { +import '../css/map.css'; +import { useEffect, useState, useRef } from 'react'; +import RealTimeDataWebSocket from '../utils/websocket'; +import { loadGoogleMapsAPI, initializeMap } from '../utils/mapUtility'; +import { queryTransportations } from '../utils/transportData'; +import { updateTransportMarkers } from '../utils/transportMarker'; +import { queryStops, drawStopMarkers } from '../utils/stops'; + +function Map() { const googleMapRef = useRef(null); const [isApiLoaded, setIsApiLoaded] = useState(false); const [isMapLoaded, setIsMapLoaded] = useState(false); @@ -19,68 +14,11 @@ function Map({ line, lineColor }) { const [ws, setWebSocket] = useState(null); const [transportData, setTransportData] = useState(null); const markerRef = useRef({}); - const [randomIntOne, randomIntTwo] = generateTwoUniqueRandomInts(0, 9); - const nycCoordinates = getCoordinates(); - const [startLoc, setStartLoc] = useState(nycCoordinates[randomIntOne]); - const [endLoc, setEndLoc] = useState(nycCoordinates[randomIntTwo]); // Shared variable - if (typeof window.nyushuttle == "undefined") { + if (typeof window.nyushuttle == 'undefined') { window.nyushuttle = {}; } - const busStops = { - unionsquare: [40.7349, -73.9906], - tompkins: [40.7251, -73.9812], - hamilton: [40.7202, -73.9802], - eastbroadway: [40.7141, -73.9901], - chinatown: [40.7155, -73.9985], - financial: [40.7081, -74.0079], - tribeca: [40.7167, -74.0091], - canal: [40.7218, -74.0051], - soho: [40.7248, -74.0016], - greenwich: [40.7333, -74.0041], - washingtonsquare: [40.7315, -73.9971], - jayst: [40.6922, -73.9864], - dumbo: [40.7037, -73.9886], - ikea: [40.6726, -74.01], - test1: [39.7392, -104.9903], - test2: [39.7479, -104.9994], - test3: [39.7398, -104.9892], - test4: [39.7394, -104.9849], - }; - const routes = { - route1: [ - busStops.washingtonsquare, - busStops.unionsquare, - busStops.tompkins, - busStops.hamilton, - busStops.eastbroadway, - busStops.chinatown, - busStops.financial, - busStops.tribeca, - busStops.canal, - busStops.soho, - busStops.greenwich, - busStops.washingtonsquare, - ], - route2: [busStops.jayst, busStops.dumbo, busStops.ikea], - route3: [ - busStops.jayst, - busStops.eastbroadway, - busStops.washingtonsquare, - busStops.chinatown, - busStops.financial, - ], - route4: [ - busStops.eastbroadway, - busStops.washingtonsquare, - busStops.unionsquare, - busStops.tompkins, - busStops.hamilton, - busStops.eastbroadway, - ], - route5: [busStops.test1, busStops.test2, busStops.test3, busStops.test4], - }; // Load Google Maps API useEffect(() => { @@ -126,92 +64,16 @@ function Map({ line, lineColor }) { updateTransportMarkers(transportData, markerRef, map); }, [transportData]); - //update map when line changes - useEffect(() => { - //wait for map to return - if (!startLoc || !endLoc || !map || !line || !lineColor) return; - console.log("----------------------------"); - console.log("line changed"); - console.log(line); - console.log("startLoc" + startLoc); - console.log("endLoc" + endLoc); - console.log("----------------------------"); - - //set start and end location - let curline = routes["route" + String(line)]; - console.log("selected route: " + curline); - plotRoute(curline, lineColor); - }, [map, line, startLoc, endLoc]); - const fetchTransportData = async () => { try { const transportations = await queryTransportations(true); setTransportData(transportations); } catch (error) { - console.log("error fetching transport data", error); + console.log('error fetching transport data', error); // Other error handling? message? } }; - const plotRoute = async (curline, lineColor) => { - let directionsService = new window.google.maps.DirectionsService(); - - for (let i = 0; i < curline.length - 1; i++) { - let start = curline[i]; - let end = curline[i + 1]; - - let request = { - origin: new window.google.maps.LatLng(start[0], start[1]), - destination: new window.google.maps.LatLng(end[0], end[1]), - travelMode: window.google.maps.TravelMode.DRIVING, - }; - - directionsService.route(request, function (response, status) { - if (status === "OK") { - let directionsRenderer = new window.google.maps.DirectionsRenderer({ - polylineOptions: new window.google.maps.Polyline({ - strokeColor: lineColor, - strokeOpacity: 0.8, - strokeWeight: 5, - }), - suppressMarkers: true, - }); - directionsRenderer.setDirections(response); - directionsRenderer.setMap(map); - - // Create markers at the start and end of each segment - new window.google.maps.Marker({ - position: new window.google.maps.LatLng(start[0], start[1]), - map: map, - icon: { - path: window.google.maps.SymbolPath.CIRCLE, - scale: 8, - fillColor: "#b3b3b3", - fillOpacity: 0.8, - strokeWeight: 0, - }, - }); - - new window.google.maps.Marker({ - position: new window.google.maps.LatLng(end[0], end[1]), - map: map, - icon: { - path: window.google.maps.SymbolPath.CIRCLE, - scale: 8, - fillColor: "#b3b3b3", - fillOpacity: 0.8, - strokeWeight: 0, - }, - }); - } else { - console.log( - "Directions request for segment " + i + " failed due to " + status - ); - } - }); - } - }; - return ( <>
; diff --git a/front-end/src/components/MapPage.js b/front-end/src/components/MapPage.js index 32fd0e6..0c71c19 100644 --- a/front-end/src/components/MapPage.js +++ b/front-end/src/components/MapPage.js @@ -1,21 +1,15 @@ import '../css/mapPage.css'; import Filter from './Filter'; import Map from './Map'; -import { useEffect, useState, useRef } from 'react'; +// import { useEffect, useState, useRef } from 'react'; function MapPage() { - const [lineSelected, setLineSelected] = useState(null); - const [lineColor, setLineColor] = useState(null); - const handleFilterChange = (newLineSelected, newLineColor) => { - setLineSelected(newLineSelected); - setLineColor(newLineColor); - }; return ( <>
- +
- +
diff --git a/front-end/src/css/filter.css b/front-end/src/css/filter.css index 4faf929..bef74e0 100644 --- a/front-end/src/css/filter.css +++ b/front-end/src/css/filter.css @@ -1,39 +1,59 @@ @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400&display=swap'); +.route-color-bar { + @apply flex top-0 left-0 h-10 w-3; +} + +@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400&display=swap'); + .filter-container { - @apply relative h-full font-mainUI; + @apply relative font-mainUI; +} + +.filter { + @apply absolute flex flex-row items-center overflow-auto opacity-90 m-2 mt-6 top-1 z-10 min-w-max bg-lightTone rounded-2xl shadow-lg transition-all duration-300 ease-in-out; } -.filter{ - @apply absolute flex flex-col overflow-auto opacity-90 m-2 mt-6 top-1 z-10 left-4 w-28 bg-lightTone rounded-2xl shadow-lg transition-all duration-300 ease-in-out;; +.dark .filter { + @apply bg-darkMode-lightTone; } -.dark .filter{ - @apply bg-darkMode-lightTone; +/* .filter.closed { + @apply min-w-max; } -.filter-container{ - @apply relative h-1/4 +.filter.open { + @apply w-32; +} */ + +.filter-container { + @apply relative; } -.list-item-wrapper{ - @apply w-full py-2 pt-3 px-5 text-sm text-black hover:bg-lightMidTone; +.list-item-wrapper { + @apply py-2 pt-3 pl-2 pr-5 text-sm text-black hover:bg-lightMidTone; } -ul{ - @apply flex flex-col h-screen; +.list-item-wrapper > li { + @apply whitespace-nowrap; /* Prevent line breaks */ } +.filter-container ul { + @apply flex flex-col; +} -.filter.open{ - @apply h-96 w-28; +.filterIcon { + @apply opacity-60 transform transition duration-300; } -.filter.closed{ - @apply h-12 w-28; +.filterIcon.open { + @apply rotate-180 top-3 right-3 absolute; } +.filterIcon.closed { + @apply mr-3; +} -.route-color-bar{ - @apply flex top-0 left-0 h-10 w-1/12; -} \ No newline at end of file +/* #dropdown { + @apply flex flex-col; +} */ diff --git a/front-end/src/utils/mapUtility.js b/front-end/src/utils/mapUtility.js index 3de9983..3b78ab5 100644 --- a/front-end/src/utils/mapUtility.js +++ b/front-end/src/utils/mapUtility.js @@ -1,19 +1,5 @@ import axios from 'axios'; -const nycCoordinates = [ - [-73.935242, 40.73061], // Manhattan - [-73.944158, 40.678178], // Brooklyn - [-73.794851, 40.728224], // Queens - [-73.977622, 40.789142], // Upper West Side, Manhattan - [-73.939202, 40.752998], // Astoria, Queens - [-73.990338, 40.735781], // Greenwich Village, Manhattan - [-74.005941, 40.712784], // Lower Manhattan - [-73.949997, 40.650002], // Crown Heights, Brooklyn - [-73.870229, 40.77375], // Flushing, Queens - [-73.963548, 40.779437], // Upper East Side, Manhattan - // ... Add more as needed -]; - const MAP_OPTIONS = { disableDefaultUI: true, // This disables the default UI including mapTypeControl zoomControl: true, // Re-enables zoom control @@ -78,7 +64,7 @@ export function initializeMap(mapRef, setIsMapLoaded, setMap) { }); } -export async function getUserPos() { +export async function getMapCenter() { const url = new URL('mapGetData.php', localStorage.serviceEndpointSub); url.search = new URLSearchParams({ getSystems: '2', @@ -97,19 +83,3 @@ export async function getUserPos() { console.error('Error fetching systems:', error); } } - -export function getCoordinates() { - return nycCoordinates; -} - -export function generateTwoUniqueRandomInts(min, max) { - const firstInt = Math.floor(Math.random() * (max - min + 1)) + min; - let secondInt = Math.floor(Math.random() * (max - min + 1)) + min; - - // Ensure secondInt is different from firstInt - while (secondInt === firstInt) { - secondInt = Math.floor(Math.random() * (max - min + 1)) + min; - } - - return [firstInt, secondInt]; -} From 9999235817c6f11f12e4cea27e432066b149a611 Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Thu, 30 Nov 2023 16:20:07 -0500 Subject: [PATCH 03/15] removed test code --- front-end/src/utils/stops.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/front-end/src/utils/stops.js b/front-end/src/utils/stops.js index ed82c4e..6e703b0 100644 --- a/front-end/src/utils/stops.js +++ b/front-end/src/utils/stops.js @@ -381,7 +381,3 @@ function updateMarkerVisibility(zoomLevel) { marker.setVisible(zoomLevel >= stopMarkerZoomVisibilityTreshold); }); } - -window.debugTools = {}; -window.debugTools.queryStops = queryStops; -window.debugTools.drawStopMarkers = drawStopMarkers; From b430555f5ed822a065957d630a818ed6c28ec0e6 Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Thu, 30 Nov 2023 21:17:22 -0500 Subject: [PATCH 04/15] loading filter --- front-end/src/components/Filter.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/front-end/src/components/Filter.js b/front-end/src/components/Filter.js index f742ac8..64173e8 100644 --- a/front-end/src/components/Filter.js +++ b/front-end/src/components/Filter.js @@ -4,6 +4,7 @@ import '../css/filter.css'; import DropDownArrow from './DropDownArrow.js'; function Filter() { + const rs = window.nyushuttle.routesSelected; const [routesData, setRoutesFilter] = useState([]); const [isOpen, setIsOpen] = useState(false); const [selectedRoute, setSelectedRoute] = useState('Show All'); @@ -12,6 +13,11 @@ function Filter() { useEffect(() => { initializeFilter(); + loadPrevFilter(); + }, []); + + const initializeFilter = () => { + setRoutesFilter([{ name: 'Show All', color: 'black' }]); const routesArray = Object.keys(window.nyushuttle.routes).map((key) => { const route = window.nyushuttle.routes[key]; return { @@ -21,10 +27,15 @@ function Filter() { }; }); setRoutesFilter((defaultArray) => [...defaultArray, ...routesArray]); - }, []); + }; - const initializeFilter = () => { - setRoutesFilter([{ name: 'Show All', color: 'black' }]); + const loadPrevFilter = () => { + if (rs && rs.length) { + const route = window.nyushuttle.routes[rs[0]]; + setSelectedRoute(route[0]); + setTextColor('white'); + setRouteColor(route[1]); + } }; const toggleFilter = () => { From 38d239d88a259f6d9deda3c25e14e17a4a061462 Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 00:35:54 -0500 Subject: [PATCH 05/15] fix drop down arrow not showing --- front-end/src/css/filter.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/front-end/src/css/filter.css b/front-end/src/css/filter.css index bef74e0..7b770f7 100644 --- a/front-end/src/css/filter.css +++ b/front-end/src/css/filter.css @@ -4,8 +4,6 @@ @apply flex top-0 left-0 h-10 w-3; } -@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400&display=swap'); - .filter-container { @apply relative font-mainUI; } @@ -31,7 +29,7 @@ } .list-item-wrapper { - @apply py-2 pt-3 pl-2 pr-5 text-sm text-black hover:bg-lightMidTone; + @apply w-full py-2 pt-3 pl-2 pr-5 text-sm text-black hover:bg-lightMidTone; } .list-item-wrapper > li { @@ -48,6 +46,7 @@ .filterIcon.open { @apply rotate-180 top-3 right-3 absolute; + fill: black; } .filterIcon.closed { From c911cd01661039b145c4a16ced7a17aa4336e73a Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 00:36:40 -0500 Subject: [PATCH 06/15] load route info automatically --- front-end/src/components/Filter.js | 95 +++++++++++++---------------- front-end/src/components/MapPage.js | 1 - 2 files changed, 43 insertions(+), 53 deletions(-) diff --git a/front-end/src/components/Filter.js b/front-end/src/components/Filter.js index 64173e8..6863d48 100644 --- a/front-end/src/components/Filter.js +++ b/front-end/src/components/Filter.js @@ -1,66 +1,60 @@ -import { useState, Fragment, useEffect } from 'react'; +import { useState, useEffect, useCallback } from 'react'; import '../css/filter.css'; // import { ReactComponent as FilterIcon } from '../images/filter.svg'; import DropDownArrow from './DropDownArrow.js'; function Filter() { - const rs = window.nyushuttle.routesSelected; const [routesData, setRoutesFilter] = useState([]); const [isOpen, setIsOpen] = useState(false); const [selectedRoute, setSelectedRoute] = useState('Show All'); const [routeColor, setRouteColor] = useState('white'); const [textColor, setTextColor] = useState('black'); + const nyushuttle = window.nyushuttle; - useEffect(() => { - initializeFilter(); - loadPrevFilter(); - }, []); - - const initializeFilter = () => { - setRoutesFilter([{ name: 'Show All', color: 'black' }]); - const routesArray = Object.keys(window.nyushuttle.routes).map((key) => { - const route = window.nyushuttle.routes[key]; - return { - id: key, - name: route[0], - color: route[1], - }; + const initializeRoutes = useCallback(() => { + const routesArray = Object.keys(nyushuttle.routes).map((key) => { + const route = nyushuttle.routes[key]; + return { id: key, name: route[0], color: route[1] }; }); - setRoutesFilter((defaultArray) => [...defaultArray, ...routesArray]); - }; + setRoutesFilter([...[{ name: 'Show All', color: 'black' }], ...routesArray]); + }, [nyushuttle.routes]); - const loadPrevFilter = () => { - if (rs && rs.length) { - const route = window.nyushuttle.routes[rs[0]]; + const loadPreviousFilter = useCallback(() => { + const routesSelected = nyushuttle.routesSelected; + if (routesSelected && routesSelected.length) { + const route = nyushuttle.routes[routesSelected[0]] || ['Show All', 'white']; setSelectedRoute(route[0]); setTextColor('white'); setRouteColor(route[1]); } - }; + }, [nyushuttle.routes, nyushuttle.routesSelected]); - const toggleFilter = () => { - setIsOpen(!isOpen); - if (!isOpen) { - // When opening the dropdown - setSelectedRoute('Show All'); - setRouteColor('white'); - setTextColor('black'); - } - }; + useEffect(() => { + initializeRoutes(); + loadPreviousFilter(); + }, [initializeRoutes, loadPreviousFilter]); + + const toggleFilter = useCallback(() => { + setIsOpen((prevIsOpen) => { + if (!prevIsOpen) { + setSelectedRoute('Show All'); + setRouteColor('white'); + setTextColor('black'); + console.log('black', textColor); + } + return !prevIsOpen; + }); + }, []); - const selectRoute = (id, routeName, color) => { - if (routeName === 'Show All' || routeName === 'None') { - setSelectedRoute('Show All'); - setTextColor('black'); - setRouteColor('white'); - window.nyushuttle.routesSelected = []; - } else { + const selectRoute = useCallback( + (id, routeName, color) => { setSelectedRoute(routeName); - setTextColor('white'); - setRouteColor(color); - window.nyushuttle.routesSelected = [id]; - } - }; + setTextColor(routeName === 'Show All' || routeName === 'None' ? 'black' : 'white'); + setRouteColor(routeName === 'Show All' || routeName === 'None' ? 'white' : color); + nyushuttle.routesSelected = routeName === 'Show All' || routeName === 'None' ? [] : [id]; + }, + [nyushuttle.routesSelected] + ); return ( <> @@ -78,17 +72,14 @@ function Filter() { )} -
diff --git a/front-end/src/components/MapPage.js b/front-end/src/components/MapPage.js index 0c71c19..745c1cd 100644 --- a/front-end/src/components/MapPage.js +++ b/front-end/src/components/MapPage.js @@ -1,7 +1,6 @@ import '../css/mapPage.css'; import Filter from './Filter'; import Map from './Map'; -// import { useEffect, useState, useRef } from 'react'; function MapPage() { return ( From f68e57997cf2ab9a5d02153dcdb50ee4d43856c3 Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 00:39:51 -0500 Subject: [PATCH 07/15] set up shared variable --- front-end/src/App.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/front-end/src/App.js b/front-end/src/App.js index 86a9540..8c37a6a 100644 --- a/front-end/src/App.js +++ b/front-end/src/App.js @@ -40,6 +40,11 @@ function App() { //console.log(key, value) } + // Shared variable + if (typeof window.nyushuttle == 'undefined') { + window.nyushuttle = {}; + } + useEffect(() => { initializeLocalStorage(isFirstTimeUser); loadGoogleMapsAPI(() => setIsLoading(false)); From 742fd2f6810bef51d1422ccc608a7d841230eb8e Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 00:43:43 -0500 Subject: [PATCH 08/15] removed debug printout --- front-end/src/components/Filter.js | 1 - 1 file changed, 1 deletion(-) diff --git a/front-end/src/components/Filter.js b/front-end/src/components/Filter.js index 6863d48..d4fe292 100644 --- a/front-end/src/components/Filter.js +++ b/front-end/src/components/Filter.js @@ -40,7 +40,6 @@ function Filter() { setSelectedRoute('Show All'); setRouteColor('white'); setTextColor('black'); - console.log('black', textColor); } return !prevIsOpen; }); From cd35dd2ff2620489fa720e97b7d88bccadd203a2 Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 03:08:54 -0500 Subject: [PATCH 09/15] filter route path --- front-end/src/utils/stops.js | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/front-end/src/utils/stops.js b/front-end/src/utils/stops.js index 6e703b0..a785b4d 100644 --- a/front-end/src/utils/stops.js +++ b/front-end/src/utils/stops.js @@ -14,6 +14,7 @@ window.nyushuttle.stops = {}; window.nyushuttle.routes = []; let center = {}; let stopMarkers = []; +let routePathMarkers = []; let routePaths = []; let stopMarkerCluster = null; let groupRoutes = false; @@ -97,7 +98,7 @@ function clearAllMarkers() { stopMarkerCluster.clearMarkers(); } clearMarkers(stopMarkers, true); - clearMarkers(routePaths, true); + clearMarkers(routePathMarkers, true); } function initializeBounds(center) { @@ -133,9 +134,11 @@ function drawRoutes(showStopName) { return; } const routes = window.nyushuttle.routes; - Object.keys(routes).forEach((routeId) => { - drawRoute(routeId, routes[routeId], showStopName); - }); + Object.keys(routes) + .filter((routeId) => isSelectedRoute(routeId)) + .forEach((routeId) => { + drawRoute(routeId, routes[routeId], showStopName); + }); } function drawRoute(routeId, route, showStopName) { @@ -163,6 +166,7 @@ function drawRoutePath(path, routeColor, routeId, routeGroupId) { const opacity = getOpacity(selected); const polylineOptions = createPolylineOptions(path, routeColor, opacity, routeId, routeGroupId); const polyline = new window.google.maps.Polyline(polylineOptions); + routePathMarkers.push(polyline); polyline.setMap(window.nyushuttle.currentMap); } @@ -219,12 +223,14 @@ function drawStops() { const routes = window.nyushuttle.routes; const map = window.nyushuttle.currentMap; - Object.keys(routes).forEach((routeId) => { - const routestops = routes[routeId]; - const routeGroupId = routes[routeId][2]; + Object.keys(routes) + .filter((routeId) => isSelectedRoute(routeId)) + .forEach((routeId) => { + const routestops = routes[routeId]; + const routeGroupId = routes[routeId][2]; - addRouteMarkersOnMap(routeId, routestops, routeGroupId, showStopName); - }); + addRouteMarkersOnMap(routeId, routestops, routeGroupId, showStopName); + }); recreateStopMarkerCluster(); if (stopMarkerCluster != null) { @@ -381,3 +387,8 @@ function updateMarkerVisibility(zoomLevel) { marker.setVisible(zoomLevel >= stopMarkerZoomVisibilityTreshold); }); } + +function isSelectedRoute(id) { + const s = window.nyushuttle.routesSelected; + return !s || s.length === 0 || s.includes(id); +} From f02e0e71b2b7e0187470450524d13134de6c0e45 Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 03:19:06 -0500 Subject: [PATCH 10/15] fixed stop markers not being cleared properly --- front-end/src/utils/stops.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front-end/src/utils/stops.js b/front-end/src/utils/stops.js index a785b4d..0e3315c 100644 --- a/front-end/src/utils/stops.js +++ b/front-end/src/utils/stops.js @@ -126,7 +126,7 @@ function clearMarkers(markers, isArray = false) { } else if (markers != null) { markers.clearMarkers(); } - markers = []; + markers.length = 0; } function drawRoutes(showStopName) { From 2afb3aafb37661a19a8ce3c0070b0a4fd3e12c2f Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 03:20:54 -0500 Subject: [PATCH 11/15] lazy fix to stops not appearing on zoom reset --- front-end/src/utils/stops.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front-end/src/utils/stops.js b/front-end/src/utils/stops.js index 0e3315c..df031d1 100644 --- a/front-end/src/utils/stops.js +++ b/front-end/src/utils/stops.js @@ -18,7 +18,7 @@ let routePathMarkers = []; let routePaths = []; let stopMarkerCluster = null; let groupRoutes = false; -let stopMarkerZoomVisibilityTreshold = 14; +let stopMarkerZoomVisibilityTreshold = 13; let bounds; let lastZoom = 99; From 9b43953f292b2bcb370c78a98f1652eebbd9c6b8 Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 12:06:34 -0500 Subject: [PATCH 12/15] transportation stays on top of routes & stops --- front-end/src/utils/transportMarker.js | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/front-end/src/utils/transportMarker.js b/front-end/src/utils/transportMarker.js index 52ffd00..6cba6f2 100644 --- a/front-end/src/utils/transportMarker.js +++ b/front-end/src/utils/transportMarker.js @@ -1,4 +1,5 @@ const MAX_ANIMATION_DURATION = 9000; +const TRANSPORTATION_BASE_Z_INDEX = 100; export function updateTransportMarkers(transportData, markerRef, map) { if (!transportData) { @@ -20,7 +21,8 @@ export function updateTransportMarkers(transportData, markerRef, map) { const lat = parseFloat(transportInfo.latitude); const lng = parseFloat(transportInfo.longitude); const newPosition = new window.google.maps.LatLng(lat, lng); - const iconUpdate = marker && (marker.direction !== transportInfo.calculatedCourse || transportInfo.route === 'Ferry Route'); + const iconUpdate = + marker && (marker.direction !== transportInfo.calculatedCourse || transportInfo.route === 'Ferry Route'); if (marker) { // Update the position of the existing marker @@ -29,12 +31,20 @@ export function updateTransportMarkers(transportData, markerRef, map) { // Update the icon of the existing marker if (iconUpdate) { - const newIcon = generateTransportMarkerIcon(transportInfo.color, transportInfo.calculatedCourse, transportInfo.route); + const newIcon = generateTransportMarkerIcon( + transportInfo.color, + transportInfo.calculatedCourse, + transportInfo.route + ); marker.setIcon(newIcon); } } else { // Create a new marker - const newIcon = generateTransportMarkerIcon(transportInfo.color, transportInfo.calculatedCourse, transportInfo.route); + const newIcon = generateTransportMarkerIcon( + transportInfo.color, + transportInfo.calculatedCourse, + transportInfo.route + ); let transportMarker = createTransportMarker(newPosition, transportInfo, map, newIcon); markerRef.current[transport] = transportMarker; } @@ -46,7 +56,12 @@ function createTransportMarker(position, transportInfo, map) { position, map, title: String(transportInfo.busId), - icon: generateTransportMarkerIcon(transportInfo.color || '#000', transportInfo.calculatedCourse || 0, transportInfo.route || 0), + icon: generateTransportMarkerIcon( + transportInfo.color || '#000', + transportInfo.calculatedCourse || 0, + transportInfo.route || 0 + ), + zIndex: TRANSPORTATION_BASE_Z_INDEX, }); let infowindow = new window.google.maps.InfoWindow({ @@ -126,7 +141,7 @@ function generateTransportMarkerIcon(color, direction, route) { let scaledSize = new window.google.maps.Size(40, 40); if (route === 'Ferry Route') { iconImg = 'busIcons/busIcon_routeFerry_Route.png'; - scaledSize= new window.google.maps.Size(30, 30); + scaledSize = new window.google.maps.Size(30, 30); } const icon = { url: iconImg, From 4f49683f28ae01a7e1243e29ff41bb732d4df09a Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 12:51:07 -0500 Subject: [PATCH 13/15] edit websocket setup --- front-end/src/components/Map.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/front-end/src/components/Map.js b/front-end/src/components/Map.js index 0568342..f8004ed 100644 --- a/front-end/src/components/Map.js +++ b/front-end/src/components/Map.js @@ -12,6 +12,7 @@ function Map() { const [isMapLoaded, setIsMapLoaded] = useState(false); const [map, setMap] = useState(null); const [ws, setWebSocket] = useState(null); + const [wsOpen, setwsOpen] = useState(false); const [transportData, setTransportData] = useState(null); const markerRef = useRef({}); @@ -57,9 +58,10 @@ function Map() { // Set up websocket after transportdata is fetched useEffect(() => { - if (ws && transportData) { + if (ws && transportData && !wsOpen) { ws.setup(transportData, setTransportData); ws.start(); + setwsOpen(true); } updateTransportMarkers(transportData, markerRef, map); }, [transportData]); From dcc37ed46f667fe892caa1f751fe5d82aaf65c76 Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 13:01:03 -0500 Subject: [PATCH 14/15] minor change --- front-end/src/utils/websocket.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front-end/src/utils/websocket.js b/front-end/src/utils/websocket.js index 11a1441..46b860d 100644 --- a/front-end/src/utils/websocket.js +++ b/front-end/src/utils/websocket.js @@ -1,9 +1,9 @@ function RealTimeDataWebSocket() { - this.wsUrl = 'wss://passio3.com/'; + this.wsUrl = localStorage.wsUrl || 'wss://passio3.com/'; this.ws = null; this.transports = null; this.setTransports = null; - this.wsUserIds = [1007]; + this.wsUserIds = [localStorage.agencyId] || [1007]; this.setup = (transports, setTransports) => { this.transports = transports; From d97aaa894bb66e5b031e73e403dc1152a398465b Mon Sep 17 00:00:00 2001 From: r8btx <60275558+r8btx@users.noreply.github.com> Date: Fri, 1 Dec 2023 14:11:14 -0500 Subject: [PATCH 15/15] correctly display bus based on filter --- front-end/src/components/Filter.js | 13 ++++- front-end/src/components/Map.js | 8 ++- front-end/src/components/MapPage.js | 22 ++++--- front-end/src/utils/transportMarker.js | 80 +++++++++++++++----------- 4 files changed, 79 insertions(+), 44 deletions(-) diff --git a/front-end/src/components/Filter.js b/front-end/src/components/Filter.js index d4fe292..2462f52 100644 --- a/front-end/src/components/Filter.js +++ b/front-end/src/components/Filter.js @@ -1,9 +1,11 @@ import { useState, useEffect, useCallback } from 'react'; +import { updateTransportMarkers } from '../utils/transportMarker'; +import { drawStopMarkers } from '../utils/stops'; import '../css/filter.css'; // import { ReactComponent as FilterIcon } from '../images/filter.svg'; import DropDownArrow from './DropDownArrow.js'; -function Filter() { +function Filter({ onFilterChange }) { const [routesData, setRoutesFilter] = useState([]); const [isOpen, setIsOpen] = useState(false); const [selectedRoute, setSelectedRoute] = useState('Show All'); @@ -50,7 +52,12 @@ function Filter() { setSelectedRoute(routeName); setTextColor(routeName === 'Show All' || routeName === 'None' ? 'black' : 'white'); setRouteColor(routeName === 'Show All' || routeName === 'None' ? 'white' : color); - nyushuttle.routesSelected = routeName === 'Show All' || routeName === 'None' ? [] : [id]; + nyushuttle.routesSelected = routeName === 'Show All' || routeName === 'None' ? [] : [id]; // only allow one for now + + // Apply filter to map items + drawStopMarkers(); + updateTransportMarkers(); + onFilterChange(id); }, [nyushuttle.routesSelected] ); @@ -73,7 +80,7 @@ function Filter() {