From 62c116189a1b66667f5843e3a069add05c2487f8 Mon Sep 17 00:00:00 2001 From: Nidboj132 <28981031+Nidboj132@users.noreply.github.com> Date: Sat, 23 Dec 2023 14:09:35 +0100 Subject: feat: discussion page (#137) --- frontend/src/components/pages/profile.css | 5 +- frontend/src/components/pages/profile.js | 4 +- frontend/src/components/pages/summary.css | 226 ++++++++++++++++++++++++++++++ frontend/src/components/pages/summary.js | 176 ++++++++++++++++++++++- 4 files changed, 406 insertions(+), 5 deletions(-) (limited to 'frontend/src') diff --git a/frontend/src/components/pages/profile.css b/frontend/src/components/pages/profile.css index 677fa9b..4944ade 100644 --- a/frontend/src/components/pages/profile.css +++ b/frontend/src/components/pages/profile.css @@ -174,7 +174,7 @@ span.titles{ height: 34px; display: grid; font-size: 20px; - padding-left: 60px; + padding-left: 40px; margin: 0 20px; grid-template-columns: 15% 15% 5% 15% 5% 15% 15% 15%; } @@ -194,7 +194,7 @@ span.titles{ height: 44px; border-radius: 20px; - padding: 0 0 0 60px; + padding: 0 0 0 40px; font-size: 20px; color: inherit; @@ -205,6 +205,7 @@ span.titles{ display: grid; grid-template-columns: 15% 15% 5% 15% 5% 15% 15% 15%; overflow: hidden; + white-space: nowrap; transition: height .2s } diff --git a/frontend/src/components/pages/profile.js b/frontend/src/components/pages/profile.js index 041f585..7c45320 100644 --- a/frontend/src/components/pages/profile.js +++ b/frontend/src/components/pages/profile.js @@ -129,7 +129,7 @@ function UpdateProfile(){ method: 'POST', headers: {Authorization: token} }).then(r=>r.json()) - .then(d=>d.success?window.location.reload():window.alert(`Error: ${d.message}`)) + .then(d=>d.success?window.alert("profile updated"):window.alert(`Error: ${d.message}`)) } function TimeAgo(date) { @@ -348,7 +348,7 @@ return ( {r.name} {record.scores[i].score_count} {record.scores[i].score_count-record.map_wr_count} - {TicksToTime(record.scores[i].score_time)} + {TicksToTime(record.scores[i].score_time)} {i===0?#{record.placement}: } {record.scores[i].date.split("T")[0]} diff --git a/frontend/src/components/pages/summary.css b/frontend/src/components/pages/summary.css index 47c3f4b..c99a0bf 100644 --- a/frontend/src/components/pages/summary.css +++ b/frontend/src/components/pages/summary.css @@ -449,7 +449,233 @@ text-align: center; .leaderboard-record:last-child{margin: 10px 20px 10px 20px;} +#section7{ + margin: 40px 0 20px 0; + background-color: #202232; + border-radius: 24px; + padding: 10px; +} + +#discussion-search{ + height: 46px; + width: 100%; + display: grid; + grid-template-columns: 1fr 100px; + margin: 0 0 20px 0; +} +#discussion-search>input::placeholder{color: #aaa;} +#discussion-search>input{ + background-color: #2b2e46; + font-size: 20px; + padding-left: 10px; + color: white; + border: 0; + border-radius: 16px 0 0 16px; + font-family: inherit; +} +#discussion-search>div>button:hover{filter: brightness(75%);} +#discussion-search>div>button{ + padding: 7px 16px; + margin: 8px 0; + border: 0; + font-size: 16px; + border-radius: 24px; + display: block; + background-color:#3c91e6; + font-family: inherit; + font-weight: bold; + cursor: pointer; + color: white; + + transition: filter .2s; +} +#discussion-search>div{ + background-color: #2b2e46; + border-radius: 0 16px 16px 0; +} +#discussion-post>button:nth-child(1)>span>b{font-size: 18px;color:#cdcfdf;font-weight: lighter;} +#discussion-post>button:nth-child(1){ + background-color: #2b2e46; + display: grid; + grid-template-columns: minmax(0, 1fr) 150px; + + border-radius: 16px; + padding: 16px 12px; + margin: 8px 0 0 0; + border: 0; + width: 100%; height: 100px; + text-align: start; + white-space: nowrap; + color: #cdcfdf; + cursor: pointer; + overflow: hidden; +} +#discussion-post>button:nth-child(1)>span:nth-child(1){font-size: 32px;} +#discussion-post>button:nth-child(1)>span:nth-child(3){color: #aaa; font-size: 18px;} +#discussion-post>button:nth-child(1)>span:nth-child(4){ + opacity: .7; + height: 40px; + display: flex; + place-items: end; + justify-content: end; +} + +#discussion-post{height: 100px;} +#discussion-post>button>button:hover{filter: brightness(75%); } +#discussion-post>button>button{ + padding: 7px 16px; + + border: 0; + font-size: 16px; + border-radius: 24px; + background-color:#e52d04; + font-family: BarlowSemiCondensed-Regular; + font-weight: bold; + cursor: pointer; + color: white; + + transition: filter .2s; +} + + +#discussion-create>div{ + display: grid; + text-align: start; +} +#discussion-create{ + display: grid; + grid-template-columns: 1fr 40px; + height: auto; + word-wrap: break-word; +} + +#discussion-create>span{padding-left: 20px;} +#discussion-create>div>input::placeholder{color: #aaa;} +#discussion-create>div>input{ + background-color: #2b2e46; + font-size: 20px; + padding-left: 10px; + margin-top: 10px; + height: 32px; + color: white; + border: 0; + font-family: inherit; +} +#discussion-create>div>input:nth-child(2){font-size: 16px;} +#discussion-create-button:hover{filter: brightness(75%);} +#discussion-create-button{ + padding: 7px 16px; + margin: 8px 0 0 0; + border: 0; + font-size: 16px; + border-radius: 24px; + + background-color:#3c91e6; + font-family: inherit; + font-weight: bold; + cursor: pointer; + color: white; + width: min-content; + grid-column: 1 / span 2; + + + transition: filter .2s; +} + + +#discussion-thread>div:nth-child(1){ + display: grid; + grid-template-columns: 1fr 40px; + height: auto; + padding: 0 0 10px 20px; + word-wrap: break-word; +} + +#discussion-create>button:nth-child(2), +#discussion-thread>div>button{ + height: 40px; + float:inline-end; + color:#cdcfdf; + background-color: #0000; + border: 0; + font-size: 38px; + cursor: pointer; +} + + +#discussion-thread>div:nth-child(2)>img{ + width: 60px; height: 60px; + border-radius: 100px; + margin: 20px 0 0 0; +} +#discussion-thread>div:nth-child(2)>div{ + height: max-content; + padding: 20px 0 0 10px; + display: inline-grid; + grid-template-columns: min-content 1fr ; + overflow: hidden; + +} +#discussion-thread>div:nth-child(2)>div>span:nth-child(1){font-weight: bold;height: 30px;} +#discussion-thread>div:nth-child(2)>div>span:nth-child(2){ + opacity: 0.6; + height: 30px; + font-size: 80%; + padding-left: 10px; +} +#discussion-thread>div:nth-child(2)>div>span:nth-child(3){ + grid-column: 1 / span 2; + height: max-content; + word-wrap: break-word; +} +#discussion-thread>div:nth-child(2){ + display: grid; + grid-template-columns: 60px 1fr; + font-size: 20px; + max-height: 522px; + overflow-y: auto; +} + + +#discussion-send{ + height: 48px; + width: 100%; + display: grid; + grid-template-columns: 1fr 80px; + margin: 10px 0 0 0; +} +#discussion-send>input::placeholder{color: #aaa;} +#discussion-send>input{ + background-color: #2b2e46; + padding-left: 10px; + color: white; + border: 0; + font-size: 20px; + border-radius: 16px 0 0 16px; + font-family: inherit; +} +#discussion-send>div{ + background-color: #2b2e46; + border-radius: 0 16px 16px 0; + +} +#discussion-send>div>button:hover{ filter: brightness(75%);} +#discussion-send>div>button{ + padding: 7px 20px; + margin: 8px 0; + font-size: 16px; + border: 0; + border-radius: 24px; + display: block; + background-color:#3c91e6; + font-family: inherit; + font-weight: bold; + cursor: pointer; + color: white; + + transition: filter .2s; +} diff --git a/frontend/src/components/pages/summary.js b/frontend/src/components/pages/summary.js index 7c72c48..228ce01 100644 --- a/frontend/src/components/pages/summary.js +++ b/frontend/src/components/pages/summary.js @@ -21,6 +21,10 @@ const fakedata={} //for debug const [data, setData] = React.useState(null); React.useEffect(() => { setData(null) + setDiscussionThread(null) + setCreatePostState(0) + setSelectedRun(0) + setCatState(1) fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/summary`) .then(r => r.json()) .then(d => { @@ -40,6 +44,28 @@ const fakedata={} //for debug // eslint-disable-next-line }, [pageNumber,location.pathname]); + const [discussions,setDiscussions] = React.useState(null) + function fetchDiscussions() { + fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions`) + .then(r=>r.json()) + .then(d=>setDiscussions(d.data.discussions)) + } + + React.useEffect(()=>{ + fetchDiscussions() + },[location.pathname]) + + + +const [discussionThread,setDiscussionThread] = React.useState(null) +function openDiscussion(x){ + fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions/${x}`) + .then(r=>r.json()) + .then(d=>setDiscussionThread(d.data.discussion)) +} +const [discussionSearch, setDiscussionSearch] = React.useState("") + + const [navState, setNavState] = React.useState(0); // eslint-disable-next-line @@ -204,7 +230,9 @@ function YouTubeGetID(url){ } function TimeAgo(date) { - const seconds = Math.floor((new Date() - date) / 1000); + // const seconds = Math.floor((new Date() - date) / 1000); + + const seconds = Math.floor(((new Date(new Date() - (date.getTimezoneOffset()*-60000))) - date) / 1000); let interval = Math.floor(seconds / 31536000); if (interval > 1) {return interval + ' years ago';} @@ -239,6 +267,52 @@ function TicksToTime(ticks) { return `${hours===0?"":hours+":"}${minutes===0?"":hours>0?minutes.toString().padStart(2, '0')+":":(minutes+":")}${minutes>0?seconds.toString().padStart(2, '0'):seconds}.${milliseconds.toString().padStart(3, '0')} (${ticks})`; } +function PostComment() { + + fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions/${discussionThread.id}`,{ + method:"POST", + headers:{authorization:token}, + body:JSON.stringify({"comment":document.querySelector("#discussion-send>input").value}) +}) +.then(r=>r.json()) +.then(d=>{ + document.querySelector("#discussion-send>input").value="" + openDiscussion(discussionThread.id) +}) +} + + +const [createPostState,setCreatePostState] = React.useState(0) +function CreatePost() { + + fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions`,{ + method:"POST", + headers:{authorization:token}, + body:JSON.stringify({"title":document.querySelector("#discussion-create-title").value,"content":document.querySelector("#discussion-create-content").value}) + }) + .then(r=>r.json()) + .then(d=>{ + setCreatePostState(0) + fetchDiscussions() + }) +} + +function DeletePost(post) { +if(window.confirm(`Are you sure you want to remove post: ${post.title}?`)){ + console.log("deleted",post.id) + fetch(`https://lp.ardapektezol.com/api/v1/maps/${location.pathname.split('/')[2]}/discussions/${post.id}`,{ + method:"DELETE", + headers:{authorization:token}, + }) + .then(r=>r.json()) + .then(d=>{ + fetchDiscussions() + }) +} +} + + + if(data!==null){ return ( <> @@ -365,6 +439,8 @@ return ( + {/* Leaderboards */} + {lbData===null?"":lbData.success===false?(

Map is not available for competitive boards.

@@ -445,6 +521,104 @@ return (
)} + + {/* Discussions */} +
+ + {discussionThread === null ? ( + createPostState === 0 ? ( + discussions !== null ? ( + // Main screen + <> + + {discussions.filter(f=>f.title.includes(discussionSearch)).sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at)) + .map((e, i) => ( +
+ + + ::} + {e.creator.user_name}: {e.content} + last updated: {TimeAgo(new Date(e.updated_at.replace("T"," ").replace("Z","")))} + +
+ ))} + + ):( + + // Main screen (no posts) + <> + + no discussions + + ) + ):( + // Creating post +
+ Create post + +
+ + +
+
+ +
+ +
+ + )):( + // Post screen +
+
+ {discussionThread.title} + +
+ +
+ +
+ {discussionThread.creator.user_name} + {TimeAgo(new Date(discussionThread.created_at.replace("T"," ").replace("Z","")))} + {discussionThread.content} +
+ {discussionThread.comments!==null? + discussionThread.comments.sort((a, b) => new Date(a.date) - new Date(b.date)) + .map(e=>( + <> + +
+ {e.user.user_name} + {TimeAgo(new Date(e.date.replace("T"," ").replace("Z","")))} + {e.comment} +
+ + + )):""} + + +
+
+ e.key==="Enter"?PostComment():""}/> +
+
+ +
+ + + )} + +
+ ) -- cgit v1.2.3