From 2c5ce3a80d933ea89b21032d095d04f93a080c48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Reichert?= Date: Wed, 23 Oct 2024 22:55:53 +0200 Subject: [PATCH] add ranking --- public/data/statistics.json | 1 + public/images/leaderboard.jpg | Bin 0 -> 3353 bytes src/components/Icons.tsx | 3 ++ src/components/Nav/index.tsx | 2 ++ .../Sidebar/SidebarStatistics/index.tsx | 26 ++++++++++++++++++ src/components/Sidebar/index.tsx | 4 ++- src/utils/hooks/useStatisticsJson.ts | 23 ++++++++++++++++ src/utils/requests/loadStatisticsData.ts | 13 +++++++++ 8 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 public/data/statistics.json create mode 100644 public/images/leaderboard.jpg create mode 100644 src/components/Sidebar/SidebarStatistics/index.tsx create mode 100644 src/utils/hooks/useStatisticsJson.ts create mode 100644 src/utils/requests/loadStatisticsData.ts diff --git a/public/data/statistics.json b/public/data/statistics.json new file mode 100644 index 000000000..f9ceaa42e --- /dev/null +++ b/public/data/statistics.json @@ -0,0 +1 @@ +[{"pos":1,"username":"Stefan_M","liter":50400},{"pos":2,"username":"birdseye-adventure","liter":17750},{"pos":3,"username":"Steff","liter":9690},{"pos":4,"username":"l_s***","liter":6750},{"pos":5,"username":"Hildegarten Leipzig","liter":5800},{"pos":6,"username":"Sascha","liter":5200},{"pos":7,"username":"ren***","liter":4329},{"pos":8,"username":"AnToxi","liter":3470},{"pos":9,"username":"ant***","liter":2135},{"pos":10,"username":"Eurydike","liter":2131},{"pos":11,"username":2022,"liter":1875},{"pos":12,"username":"DANIELA","liter":1830},{"pos":13,"username":"Falk","liter":1735},{"pos":14,"username":"anni","liter":1560},{"pos":15,"username":"Nils","liter":1330},{"pos":16,"username":"ptk***","liter":1325},{"pos":17,"username":"Jonas.gießt","liter":1243},{"pos":18,"username":"WateringGirl","liter":1185},{"pos":19,"username":"naumann","liter":1180},{"pos":20,"username":"Marek","liter":1120},{"pos":21,"username":"Susa-gießt","liter":1040},{"pos":22,"username":"maj***","liter":1000},{"pos":23,"username":"janina","liter":962},{"pos":24,"username":"m.r***","liter":950},{"pos":24,"username":"Ostbüro Leipzig","liter":950},{"pos":26,"username":"Rapha gießt","liter":910},{"pos":27,"username":"Claudia K.","liter":840},{"pos":28,"username":"vol***","liter":740},{"pos":29,"username":"dan***","liter":645},{"pos":30,"username":"sophia","liter":635},{"pos":31,"username":"Mr D","liter":583},{"pos":32,"username":"tan***","liter":540},{"pos":33,"username":"kaw***","liter":485},{"pos":34,"username":"neb***","liter":480},{"pos":35,"username":"wla***","liter":445},{"pos":36,"username":"Elmar","liter":440},{"pos":37,"username":"Wandertour","liter":430},{"pos":38,"username":"Patrick","liter":420},{"pos":39,"username":"ruc***","liter":400},{"pos":40,"username":"hel***","liter":380},{"pos":40,"username":"Ralf, BUND Leipzig","liter":380},{"pos":42,"username":"ks-***","liter":298},{"pos":43,"username":"der***","liter":285},{"pos":44,"username":"elk***","liter":255},{"pos":45,"username":"man***","liter":250},{"pos":46,"username":"bur***","liter":240},{"pos":46,"username":"fel***","liter":240},{"pos":48,"username":"ell***","liter":235},{"pos":48,"username":"tom***","liter":235},{"pos":50,"username":"Flojo","liter":220},{"pos":51,"username":"Kroetlaender • Team Stadtstromer","liter":200},{"pos":51,"username":"Mario • Team Stadtstromer","liter":200},{"pos":51,"username":"Peppert","liter":200},{"pos":51,"username":"que***","liter":200},{"pos":51,"username":"w.p***","liter":200},{"pos":56,"username":"h_v***","liter":190},{"pos":57,"username":"beg***","liter":180},{"pos":57,"username":"ma_gi","liter":180},{"pos":57,"username":"mur***","liter":180},{"pos":60,"username":"Aquano","liter":175},{"pos":61,"username":"kri***","liter":170},{"pos":61,"username":"wne***","liter":170},{"pos":63,"username":"moh***","liter":160},{"pos":64,"username":"buchele cc","liter":150},{"pos":65,"username":"Denis","liter":140},{"pos":66,"username":"JU2306","liter":130},{"pos":66,"username":"mar***","liter":130},{"pos":66,"username":"Mero","liter":130},{"pos":66,"username":"mvi***","liter":130},{"pos":70,"username":"anonym","liter":127},{"pos":71,"username":"konunc","liter":125},{"pos":72,"username":"cla***","liter":121},{"pos":73,"username":"M&A","liter":110},{"pos":74,"username":"VogelK","liter":96},{"pos":75,"username":"66r***","liter":90},{"pos":76,"username":"Anna","liter":80},{"pos":76,"username":"kar***","liter":80},{"pos":76,"username":"lia***","liter":80},{"pos":76,"username":"Rüdiger","liter":80},{"pos":80,"username":"kat***","liter":70},{"pos":81,"username":"fel***","liter":60},{"pos":81,"username":"Für Luisa","liter":60},{"pos":81,"username":"jet***","liter":60},{"pos":81,"username":"kar***","liter":60},{"pos":81,"username":"klaus108","liter":60},{"pos":86,"username":"jul***","liter":53},{"pos":87,"username":"k-k***","liter":50},{"pos":87,"username":"tge***","liter":50},{"pos":89,"username":"amy***","liter":45},{"pos":89,"username":"LIS Green Team","liter":45},{"pos":91,"username":"Gigi","liter":40},{"pos":92,"username":"kaSch","liter":30},{"pos":92,"username":"Roman","liter":30},{"pos":92,"username":"war***","liter":30},{"pos":95,"username":"Robátko","liter":27},{"pos":96,"username":"Angela","liter":20},{"pos":96,"username":"bas***","liter":20},{"pos":96,"username":"Ben10","liter":20},{"pos":96,"username":"bor***","liter":20},{"pos":96,"username":"Brokkoli","liter":20},{"pos":96,"username":"Dirk","liter":20},{"pos":96,"username":"dre***","liter":20},{"pos":103,"username":"SR","liter":17},{"pos":104,"username":"lenam","liter":10},{"pos":104,"username":"mai***","liter":10},{"pos":104,"username":"ren***","liter":10},{"pos":104,"username":"syl***","liter":10},{"pos":108,"username":"hal***","liter":5},{"pos":109,"username":"Alejandro","liter":1}] \ No newline at end of file diff --git a/public/images/leaderboard.jpg b/public/images/leaderboard.jpg new file mode 100644 index 0000000000000000000000000000000000000000..afad88e97a1f27cb482421873a9a614041bc4b13 GIT binary patch literal 3353 zcmb7`2T)Vn)__kMB_WVt0!T-KBnZ-^Dk5M=K#<+wZ6U9-XGa#0w_a$1APDl z0s&;!1MKeshxGiNDS^&c#Dm=eUByWT#-{sYfF1w=gAWEvpsWGofWe?p7@VD*je`r$ z#f5+)5J+xb6p|awjXP^V z+W<5Na2dD^0igjf8U#Uu_MZbH004%tTwpozk8r@)*r5;*n3J{4_diyCX@J1{?*T3d z2mqrXC;$Mtp8>dnLX2Bki;Beh`^*bN3U2*$m!4 za-tYXg|Mk81}&?`UNz+#v>Q4@u>jjnQi-ij$Q8kNuyL!w43S!k+9LMB46S0n8~SNr z=o!JrltcLTi+VHN-b0pJo*yEkFh?8M<1;9g66?-t?izxD^&l|bI7FyazHD2y=C$>~ zAE2tzp_#M#TX#S{iPvBxg&zM?Y*4ikTdCe$Y5R;sU9(&vu9v=HLfdGC=ePZ&-$DkP|vKRXt- zYcttl7CBns=iAJT<!fBuC zJm#r#oq82AKSD0dFV~!P(BN#$=X-Wa4#CHTAOH1sw8KdnZ^KHG5Q|RJ23IpB!D zw+4YBPyh|%MM)?g!W>aC^9u+}XDI1Vf?}#$+t|c){i9+tXjN~qk~jtB6XwxH?UVmT zgH0Q}Ssah0H!2#uK9>)N`5Z2%-IamX);`K~IOo4N={waqk*rqIakV@38o~QSde5s_ zzf7So`#_GiL94U5IUV}fdzE7J)Dx9kz0Q7z9k?{B3>?UKV*1B#<^Px}(A|~LEfOjRUxfYy35=ffk^Ub9T@%-UxPX|ntsbv9n z#4S%(t`~MsOmxgljS2!S4bVasvx!!B>440~ zo7dHrFhAx#7VY1&R-PK{!-c5DT)IwZKZNSL-{{x#%na>F7tXd_8-8oo)Ma>x4# zm8R1d*aIF|`nffipQr2?ZjryN+6bNBG290`}(ja^PWmt6P7?V15Mf>%v5rmw)Zk^4J(uTkB; z#LeAHu09C*0hyyjlQNX6znm74TH2mEi+SJ11JixsR!+={yDChb<<&6oeVe%I-!O0& zBOe}IZp>j|K8Wq(Rn6xtCi}s4W2B>LPP@dJpilkn_Fa;J1m9z zEH4(7u=SyTcki3dGpQ)ot0;IuDkRnB^3*&?xWz54@TC8D!M1Jax96eNc>|Yhf}i~_ z%8z|is+O$z`=rlH4pJ9$wx2b=Zx5F)v!d*D^bO4wX!T*M<>j^5+s&}JGSzPlV{dY^ zevA=^N8_7({GUpw<^Rk{?H!IuqEVSpP~}v5BUtN6%(aS?(8ou;0>D~Gq**33-8uN8Ma_Pyv41R1k$=vC$kpL6atWe$!#NTka11lC0M zt8*i8o}wa@5r3z4cNwalhUpD=WGajXu`aU_XdJx9_}6Jtk4H7w%4Cm?S1SJT_*kODJUoe@JZ|Uw zypGpYWn_kRs&Ob*r3SMdbhy6{^+BzWKq=~&QI^GNeo?JyEC1AUZHbi>Vf-sEi6BZ% zj@fR;Ed!VA*lLB&oUOmGKd*Uqdt_MXF-)__v$RHrSJVPqbc@T`#D_9q=Ja=$51e)( z?TO`xZ07ibd|`f1Sh2=F5cV66Bt)LiPL^?1E&OWauaweUr8qBE*~UrMU7o#l?`0O|xnti0QCWYI^HEtDonF&L!MBoN{zY;DJML z<+oV(V0=hP9KBd7;gm|SyYLzC?qH4ibEr^;3u;tfT*iqDuP!W%JOZuFIT4W(@7KSnJ@k4S<$Y7;$G1G;fEY<> znHU)HUA>xzA(kJL$e@XV}SlKuXbdF7B4^tzV1`wOv-$DrDl-PUmOe zn&T|he7C=~>a z?Ya!sk&R3fKWf0T!m+>-W;LN-*QS4C#hO4Uw4#o07d=tx4f&pzOok#)nBr$&I|0;2yC|m}5os31<9rNH zlM#3vVTgCPHX%7yGgiG5_++abd-#rP{~rwvb&2PQ&YXq!!6{KaD^e}DY%{E* zCA*Y)hLPN``yOqlbkrH!w(})om$#>)v(6a^6{C=AhLvwABe*W z%nPfOc+`SOGv2zS3$!0m!1n4%_9I7%E~9F#4VSu<-4L z_2n%kG(cLFY)Ks42U@#4uPGGO;G=U7PuuJiIFOfYOevg6qXX;9GoP*$6TgGYwwbB4 z85#&LwNC9#iZOTzk1qC2;!{wElFoPf&ABR#2$n_)K2lx&a4!Q|q)lHA%r`PUa!0{u z<~j#x&hcVzD0m>=xzjGV_Z^wDMKc^YT=qrjAJl?k)bHhpT2d*b?`qGFWd>qUL@ZT8R6?* zpYE}^q)LkmHHzt&oy_#@)Es#hRTigPK%f;4ov6cLLTR*o-;W6R}F5F^M b#C4Go%{17cextm0Gf(?H0=ds`YJc=!`^|&k literal 0 HcmV?d00001 diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx index 0695ba436..5c3d707b9 100644 --- a/src/components/Icons.tsx +++ b/src/components/Icons.tsx @@ -6,6 +6,7 @@ const iconInfo = '/images/icon-info.svg'; const iconSubscribe = '/images/icon-subscribe.svg'; const iconZoom = '/images/icon-zoom.svg'; const iconTrees = '/images/icon-trees.svg'; +const iconLeaderboard = '/images/leaderboard.jpg'; const IconWrapper = styled.div` height: auto; @@ -49,6 +50,8 @@ const Icon: React.FC<{ iconType: string; height?: number }> = ({ return iconSubscribe; case 'trees': return iconTrees; + case 'leaderboard': + return iconLeaderboard; default: return ''; } diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx index 1e2be8048..38dc39f83 100644 --- a/src/components/Nav/index.tsx +++ b/src/components/Nav/index.tsx @@ -6,6 +6,7 @@ import AccountCircle from '@material-ui/icons/AccountCircleOutlined'; import SearchIcon from '@material-ui/icons/Search'; import EventNoteIcon from '@material-ui/icons/EventNote'; import SquareButton from '../SquareButton'; +import Icon from '../Icons'; interface StyledProps { active?: boolean; @@ -45,6 +46,7 @@ const navConfig = [ { path: '/about', title: 'Info', icon: }, { path: '/profile', title: 'Profil', icon: }, { path: '/events', title: 'Gießevents', icon: }, + { path: '/statistics', title: 'Gießstatistiken', icon:
}, ]; const Nav: FC<{ diff --git a/src/components/Sidebar/SidebarStatistics/index.tsx b/src/components/Sidebar/SidebarStatistics/index.tsx new file mode 100644 index 000000000..68b726607 --- /dev/null +++ b/src/components/Sidebar/SidebarStatistics/index.tsx @@ -0,0 +1,26 @@ +import React, { FC } from 'react'; +import styled from 'styled-components'; + +import SidebarTitle from '../SidebarTitle/'; +import SmallParagraph from '../../SmallParagraph'; +import { useStatisticsJson } from '../../../utils/hooks/useStatisticsJson'; + +const Wrapper = styled.div` + z-index: 3; + margin: 0 0 20px; +`; + +const SidebarStatistics: FC = () => { + const { data: statisticsJson } = useStatisticsJson(); + + return ( + + Top-Gießende 2024 + {(statisticsJson || []).map(user => ( + {((user.pos < 10) ? '00' : ((user.pos < 100) ? '0' : '')) + user.pos}. {user.username} ({user.liter} Liter) + ))} + + ); +}; + +export default SidebarStatistics; diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index ce7f43e55..86c1114f2 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -8,12 +8,13 @@ import SidebarEvents from './SidebarEvents'; import SidebarTree from './SidebarTree'; import SidebarWaterSource from './SidebarWaterSource'; import SidebarEvent from './SidebarEvent'; +import SidebarStatistics from './SidebarStatistics'; import SidebarWatering from './SidebarWatering'; import SidebarWrapper from './SidbarWrapper'; const Sidebar: React.FC = () => ( { return ( @@ -21,6 +22,7 @@ const Sidebar: React.FC = () => ( + diff --git a/src/utils/hooks/useStatisticsJson.ts b/src/utils/hooks/useStatisticsJson.ts new file mode 100644 index 000000000..25f2cd2b9 --- /dev/null +++ b/src/utils/hooks/useStatisticsJson.ts @@ -0,0 +1,23 @@ +import { QueryFunction, useQuery } from 'react-query'; +import { UserPosition, loadStatisticsData } from '../requests/loadStatisticsData'; + +const loadData: QueryFunction = async (): Promise => { + return await loadStatisticsData(); +}; + +export const useStatisticsJson = (): { + data: UserPosition[] | null; + error: Error | null; +} => { + const dataParams = 'statistics-json'; + const { data, error } = useQuery( + dataParams, + loadData, + { staleTime: Infinity } + ); + + return { + data: data || null, + error: error || null, + }; +}; diff --git a/src/utils/requests/loadStatisticsData.ts b/src/utils/requests/loadStatisticsData.ts new file mode 100644 index 000000000..417eea3a2 --- /dev/null +++ b/src/utils/requests/loadStatisticsData.ts @@ -0,0 +1,13 @@ +import { requests } from '../requestUtil'; + +export interface UserPosition { + pos: number; + username: string; + liter: number; +} + +export const loadStatisticsData = async (): Promise => { + return await requests<[]>( + '/data/statistics.json' + ); +};