From 26cdd0d363b1e279b14f7c5c3c12bb7d5e6d87d8 Mon Sep 17 00:00:00 2001 From: Nidboj132 Date: Wed, 12 Jul 2023 17:58:04 +0200 Subject: summary --- frontend/src/App.js | 14 +- frontend/src/components/login.css | 2 +- frontend/src/components/login.js | 15 +- frontend/src/components/main.css | 12 +- frontend/src/components/pages/summary.css | 322 ++++++++++++++++++++++ frontend/src/components/pages/summary.js | 225 +++++++++++++++ frontend/src/components/pages/summary_modview.css | 112 ++++++++ frontend/src/components/pages/summary_modview.js | 254 +++++++++++++++++ frontend/src/components/sidebar.css | 6 +- frontend/src/components/sidebar.js | 33 ++- 10 files changed, 963 insertions(+), 32 deletions(-) create mode 100644 frontend/src/components/pages/summary.css create mode 100644 frontend/src/components/pages/summary.js create mode 100644 frontend/src/components/pages/summary_modview.css create mode 100644 frontend/src/components/pages/summary_modview.js (limited to 'frontend/src') diff --git a/frontend/src/App.js b/frontend/src/App.js index 26aec98..c1745a7 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -5,14 +5,23 @@ import Sidebar from "./components/sidebar.js" import Main from "./components/main.js" import "./App.css"; +import Summary from "./components/pages/summary.js" export default function App() { + const [token, setToken] = React.useState(null); + const [mod,setMod] = React.useState(false) + React.useEffect(()=>{ + if(token!==null){ + setMod(JSON.parse(atob(token.split(".")[1])).mod) + } + },[token]) + return ( <> - + }> }> @@ -23,7 +32,8 @@ export default function App() { }> }> }> - }> + }> + }> diff --git a/frontend/src/components/login.css b/frontend/src/components/login.css index 633145e..b46be10 100644 --- a/frontend/src/components/login.css +++ b/frontend/src/components/login.css @@ -1,6 +1,6 @@ span>img { scale: 1.1; - padding-top: 4px; + padding: 4px 0 0 8px; } .login>button>span{ max-width: 22ch; diff --git a/frontend/src/components/login.js b/frontend/src/components/login.js index 7bff5f0..204007f 100644 --- a/frontend/src/components/login.js +++ b/frontend/src/components/login.js @@ -7,8 +7,8 @@ import img2 from "../imgs/10.png" import img3 from "../imgs/11.png" -export default function Login() { - +export default function Login(prop) { +const {token,setToken} = prop function login() { window.location.href="https://lp.ardapektezol.com/api/v1/login" } @@ -19,7 +19,6 @@ function logout() { fetch(`/api/v1/token`,{'method':'DELETE'}) .then(r=>window.location.href="/") } -const [token, setToken] = React.useState(null); const [isLoggedIn, setIsLoggedIn] = React.useState(false); React.useEffect(() => { fetch(`/api/v1/token`) @@ -46,19 +45,19 @@ return ( <> {isLoggedIn ? ( - - + ) : ( - - - + )} diff --git a/frontend/src/components/main.css b/frontend/src/components/main.css index 990bc41..48e6379 100644 --- a/frontend/src/components/main.css +++ b/frontend/src/components/main.css @@ -1,11 +1,17 @@ + main { overflow: auto; + overflow-x: hidden; position: relative; - width: calc(100% - 350px); + + width: calc(100% - 380px); height: 100vh; left: 350px; - /* background-color: red; */ + + padding-right: 30px; + font-size: 40px; font-family: BarlowSemiCondensed-Regular; - color: white; + color: #cdcfdf; + } diff --git a/frontend/src/components/pages/summary.css b/frontend/src/components/pages/summary.css new file mode 100644 index 0000000..e97dc0f --- /dev/null +++ b/frontend/src/components/pages/summary.css @@ -0,0 +1,322 @@ + +#background-image{ + z-index: -1; + position: absolute; + opacity: 10%; + height: 50%; + width: 100% +} +#background-image>img{ + object-fit: cover; + width: 100%; + height: 100%; +} +#background-image::before{ + content: ""; + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(to top, #161723, #0000); +} + +/* Section 1: map name + difficulty*/ + +#section1{ + margin: 20px 0 0 0; + width: 100%; + + display:grid; + grid-template-columns: auto 470px; + cursor: default; +} + +.nav-button{ + height: 40px; + background-color: #2b2e46; + + color: #cdcfdf;; + font-size: 18px; + font-family: inherit; + border: none; + transition: background-color .1s; +} +#section1>div>.nav-button:nth-child(1){border-radius: 20px 0 0 20px;} +#section1>div>.nav-button:nth-child(2){border-radius: 0 20px 20px 0;margin-left: 2px;} +.nav-button>span{padding: 0 8px 0 8px;} +.nav-button:hover{background-color: #202232;cursor: pointer;} + + + +/* Section 2: navbar */ + +#section2{ + margin: 40px 0 0 0; + width: 100%; + + display: grid; + grid-template-columns: auto auto auto; +} + +#section2>.nav-button{ + height: 50px; + font-size: 22px; + display: flex; + justify-content: center; + place-items: center; + +} +#section2>.nav-button>img{scale: 1.2;} +#section2>.nav-button:nth-child(1){border-radius: 30px 0 0 30px;} +#section2>.nav-button:nth-child(2){margin-left:2px;} +#section2>.nav-button:nth-child(3){border-radius: 0 30px 30px 0;margin-left: 2px;} + + +/* Section 3: category + history */ + +#section3{ + margin: 40px 0 0 0; + height: auto; + + display: grid; + grid-template-columns: 50% 50%; + gap: 20px; + +} + +#category{ + display: grid; + height: 350px; + border-radius: 30px; + overflow: hidden; + +} +#category>p{ + margin-bottom: 20px; + display: inline; + text-align: center; + font-size: 50px; + cursor: default; + color: white; +} + +p>span.portal-count{font-weight: bold;font-size: 100px;vertical-align: -15%;} + +#category-image{ + transform: translate(-20%, -15%); + z-index: -1; + border-radius: 20px; + overflow: hidden; + width: 125%; + margin: 22px; + filter: blur(4px) contrast(80%) brightness(80%); +} + +#category>span{ + margin-top: 70px; + background-color: #202232; + + display: grid; + grid-template-columns: auto auto auto auto; + gap: 2px; +} +#category>span>button{ + font-family: BarlowSemiCondensed-Regular; + font-size: 18px; + border: none; + height: 40px; + color: #cdcfdf; + background-color: #2b2e46; + + cursor: pointer; + transition: background-color .1s; +} +#category>span>button:hover{background-color: #202232;} + + + +#history>div>hr{border: 1px solid #2b2e46;margin: 4px 20px 4px 20px;} +#history{ + height: 350px; + min-width: 560px; + background-color: #202232; + border-radius: 30px; + +} + +#history>div{height: 290px;} +#records{overflow-y: auto; height: 255px;} +.record-top, .record{ + font-size: 18px; + + display: grid; + text-align: center; + grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3); +} +.record-top{font-weight: bold;margin: 20px 20px 0 20px;} +.record{ + margin: 10px 20px 0 20px; + height: 44px; width: calc(100% - 40px); + + + background-color: #2b2e46; + color: inherit; + border-radius: 40px; + place-items: center; + + border: 0; + cursor: pointer; + transition: background-color .1s; +} +.record:hover{background-color: #161723;} + +#history>span{ + display: grid; + grid-template-columns: 50% 50%; +} +#history>span>button{ + + width: 100%; height: 40px; + font-family: BarlowSemiCondensed-Regular; + font-size: 18px; + border: none; + + color: #cdcfdf; + background-color: #2b2e46; + + cursor: pointer; + transition: background-color .1s; +} +#history>span>button:hover{background-color: #202232 !important;} +#history>span>button:nth-child(1){border-radius: 0 0 0 30px;} +#history>span>button:nth-child(2){border-radius: 0 0 30px 0;} + +/* Section 4: Difficulty + count */ + +#section4{ + display: grid; + grid-template-columns: 50% 50%; + margin: 40px 0 20px 0; + width: 100%; + gap: 8px; +} + +#difficulty, +#count { + background-color: #202232; + width: 100%; height: 100px; + min-width: 250px; + margin: 10px; + + text-align: center; + + border-radius: 20px; + display: grid; + grid-template-rows: 20px 40px 40px; +} +#difficulty>span:nth-child(1), +#count>span:nth-child(1){ + padding-top:10px; + font-size: 18px; + color:#cdcfdf +} +#difficulty>span:nth-child(2){ + font-size: 40px; + color:lime +} +#difficulty>div{ + width: 250px; + display: grid; + grid-template-columns: auto auto auto auto auto; + padding: 0 calc(50% - 125px) 0 calc(50% - 125px); + place-items: center; +} + +.difficulty-rating{ + border-radius: 20px; + width: 40px; height: 3px; + background-color: #2b2e46; +} + +#count>div{ + padding-top:10px; + font-size: 50px; + color:white +} + +/* Section 5: route desc + video */ +#section5{ + margin: 40px 0 20px 0; + width: 100%; +} + +#description{ + width: 100%; height: auto; + min-height: 342px; +} + + + + +#description>iframe{ + margin: 4px; + float:right; + border: 0; + border-radius: 20px; + width: 608px; height: 342px; +} + +#description>h3{margin: 0 0 10px 0; color: white;} +#description-text{ + display: block; + font-size: 21px; + word-wrap: break-word; +} +#description-text>b{font-size: inherit;} +#description-text>a{font-size: inherit;color: #3c91e6;} + +.triangle{ + display: inline-block; + width: 8px; height: 0; + border-top: 7px solid transparent; + border-right: 8px solid #cdcfdf; + border-bottom: 7px solid transparent; +} + + /* such responsive, very mobile */ +@media screen and (max-width: 1480px) { + #section3{grid-template-columns: auto;} + #category{min-width: 608px;} + #history{min-width: 608px;} + #description{min-width: 608px;} + #section4{min-width: 588px;} + + #description>iframe{ + padding: 0 0 0 calc(50% - 304px); + float:none; + justify-content: center; + align-items: center; + } +/* } + +@media screen and (max-width: 1280px) { */ + #section1{ + grid-template-columns: auto; + place-items: center; + text-align: center; + + } + + #section2{ + grid-template-columns: auto; + width: 450px; + margin: 40px auto 0 auto; + } + #section2>.nav-button{ + margin: 1px 0 1px 0 !important; + } + #section2>.nav-button:nth-child(1){border-radius: 30px 30px 0 0;} + #section2>.nav-button:nth-child(2){border-radius: 0;} + #section2>.nav-button:nth-child(3){border-radius: 0 0 30px 30px;} + + +} \ No newline at end of file diff --git a/frontend/src/components/pages/summary.js b/frontend/src/components/pages/summary.js new file mode 100644 index 0000000..c628dd4 --- /dev/null +++ b/frontend/src/components/pages/summary.js @@ -0,0 +1,225 @@ +import React from 'react'; +import { useLocation } from "react-router-dom"; +import ReactMarkdown from 'react-markdown' + +import "./summary.css"; + +import img4 from "../../imgs/4.png" +import img5 from "../../imgs/5.png" +import img6 from "../../imgs/6.png" +import Modview from "./summary_modview.js" + +export default function Summary(prop) { +const {token,mod} = prop +const fakedata={} //for debug + + const location = useLocation() + + //fetching data + const [data, setData] = React.useState(null); + React.useEffect(() => { + fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`) + .then(r => r.json()) + .then(d => { + if(Object.keys(fakedata).length!==0){setData(fakedata)} + else{setData(d.data)} + if(d.data.summary.routes.length===0){d.data.summary.routes[0]={"category": "","history": {"score_count": 0,},"rating": 0,"description": "","showcase": ""}} + }) + // eslint-disable-next-line + }, []); + + + + + +const [navState, setNavState] = React.useState(0); // eslint-disable-next-line +React.useEffect(() => {NavClick();}, [[],navState]); + +function NavClick() { + if(data!==null){ + const btn = document.querySelectorAll("#section2 button.nav-button"); + btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"}); + btn[navState].style.backgroundColor = "#202232"; +}} + + +const [catState, setCatState] = React.useState(1); // eslint-disable-next-line +React.useEffect(() => {CatClick();}, [[],catState]); + +function CatClick() { + if(data!==null){ + const btn = document.querySelectorAll("#section3 #category span button"); + btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"}); + btn[catState-1].style.backgroundColor = "#202232"; +}} +React.useEffect(()=>{ + if(data!==null && data.summary.routes.filter(e=>e.category.id===catState).length!==0){ + selectRun(0,catState)} // eslint-disable-next-line +},[catState,data]) + + +const [hisState, setHisState] = React.useState(0); // eslint-disable-next-line +React.useEffect(() => {HisClick();}, [[],hisState]); + +function HisClick() { + if(data!==null){ + const btn = document.querySelectorAll("#section3 #history span button"); + btn.forEach((e) => {e.style.backgroundColor = "#2b2e46"}); + btn[hisState].style.backgroundColor = "#202232"; +}} + +const [selectedRun,setSelectedRun] = React.useState(0) + +function selectRun(x,y){ + let r = document.querySelectorAll("button.record") + r.forEach(e=>e.style.backgroundColor="#2b2e46") + r[x].style.backgroundColor="#161723" + + + if(data!==null && data.summary.routes.length!==0 && data.summary.routes.length!==0){ + if(y===2){x+=data.summary.routes.filter(e=>e.category.id<2).length} + if(y===3){x+=data.summary.routes.filter(e=>e.category.id<3).length} + if(y===4){x+=data.summary.routes.filter(e=>e.category.id<4).length} + setSelectedRun(x) + } +} + +const [vid,setVid] = React.useState("") +React.useEffect(()=>{ + if(data!==null){ + let showcase = data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].showcase + showcase.length>6 ? setVid("https://www.youtube.com/embed/"+YouTubeGetID(showcase)) + : setVid("") + } // eslint-disable-next-line +},[[],selectedRun]) + +function YouTubeGetID(url){ + url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/); + return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_]/i)[0] : url[0]; + } + +if(data!==null){ +return ( + <> + {token!==null?mod===true?:"":""} + +
+ +
+
+
+
+ + +
{data.map.map_name} +
+ + +
+ +
+ + + +
+ +
+
+ +

{data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].history.score_count} + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].history.score_count === 1 ? ` portal` : ` portals` }

+ + + + {data.map.is_coop? + :} + + + +
+ +
+
+
+ Date + Record + First completion +
+
+
+ + {data.summary.routes + .sort((a, b) => a.history.score_count - b.history.score_count) + .filter(e=>e.category.id===catState) + .map((r, index) => ( + + ))} + +
+
+ + + + +
+ +
+ +
+
+ Difficulty + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 0 ? (Very easy):null} + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 1 ? (Easy):null} + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 2 ? (Medium):null} + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 3 ? (Hard):null} + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 4 ? (Very hard):null} +
+ {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 0 ? (
) : (
)} + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 1 ? (
) : (
)} + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 2 ? (
) : (
)} + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 3 ? (
) : (
)} + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].rating === 4 ? (
) : (
)} +
+
+
+ Completion count +
6275
+
+
+ +
+
+ {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].showcase!=="" ? + + : ""} +

Route description

+ + + {data.summary.routes.sort((a,b)=>a.category.id - b.category.id)[selectedRun].description} + + +
+ +
+
+ + ) +}else{ + return ( +
+ ) +} + + +} + + diff --git a/frontend/src/components/pages/summary_modview.css b/frontend/src/components/pages/summary_modview.css new file mode 100644 index 0000000..c6d3d8d --- /dev/null +++ b/frontend/src/components/pages/summary_modview.css @@ -0,0 +1,112 @@ +div#modview{ + position: absolute; + left: 50%; + z-index: 20; + width: 320px; height: auto; + /* background-color: red; */ + + transform: translateY(-68%); +} +div#modview>div>button{ + height: 30px; +} + +div#modview>div:nth-child(1){ + display: grid; + grid-template-columns: 50% 50%; +} + +div#modview>div:nth-child(2){ + display: grid; + place-items: center; +} + +#modview-menu{ + position: absolute; + left: calc(50% + 160px); top: 130px; + transform: translateX(-50%); + background-color: #2b2e46; + z-index: 2; color: white; +} + +#modview-menu-image{ + box-shadow: 0 0 40px 16px black; + outline: 8px solid #2b2e46; + border-radius: 20px; + font-size: 40px; + display: grid; + grid-template-columns: 50% 50%; + /* place-items: center; */ + +} +#modview-menu-image>div:nth-child(1){ + height: 400px; width: 500px; + display: grid; + grid-template-rows: 30% 70%; +} +#modview-menu-image>div:nth-child(2){ + height: 400px; width: 500px; + display: grid; + grid-template-rows: 20% 10%; +} + +#modview-menu-image>div>button{width: 300px;margin-left:100px;} +#modview-menu-image>div>img{width: 500px;} +#modview-menu-image>div>button{font-size: 20px;} +#modview-menu-image>div>span>input[type="file"]{font-size: 15px;} + + +#modview-menu-add, +#modview-menu-edit{ + box-shadow: 0 0 40px 16px black; + outline: 8px solid #2b2e46; + border-radius: 20px; + font-size: 40px; + display: grid; + grid-template-columns: 20% 20% 20% 20% 20%; +} + +#modview-menu-add>div, +#modview-menu-edit>div{ + display: grid; + margin: 20px; + width: 200px; + font-size: 20px; +} +#modview-route-description>textarea{ + resize: none; + height: 160px; + width: 1160px; +} +#modview-route-showcase>input::placeholder{opacity: .5;} +#modview_block{ + position: absolute; + background-color: black; + opacity: .3; + left: 320px; + width: calc(100% - 320px); + height: 100%; + z-index: 2; + cursor: no-drop; +} +#modview-md{ + box-shadow: 0 0 40px 16px black; + background-color: #2b2e46; + outline: 8px solid #2b2e46; + + border-radius: 20px; + position: absolute; + padding: 10px; top: 400px; + width: 1180px; height: 300px; + overflow-y: auto; + word-wrap: break-word; +} +#modview-md>span>a{ + padding-left: 20px; + color:aqua; +} +#modview-md>p{ + font-family: BarlowSemiCondensed-Regular; + color: #cdcfdf; + font-size: 21px; +} \ No newline at end of file diff --git a/frontend/src/components/pages/summary_modview.js b/frontend/src/components/pages/summary_modview.js new file mode 100644 index 0000000..3541c48 --- /dev/null +++ b/frontend/src/components/pages/summary_modview.js @@ -0,0 +1,254 @@ +import React from 'react'; +import { useLocation } from "react-router-dom"; +import ReactMarkdown from 'react-markdown' + +import "./summary_modview.css"; + + +export default function Modview(prop) { +const {selectedRun,data,token} = prop + +const [menu,setMenu] = React.useState(0) +React.useEffect(()=>{ +if(menu===3){ // add + document.querySelector("#modview-route-name>input").value="" + document.querySelector("#modview-route-score>input").value="" + document.querySelector("#modview-route-date>input").value="" + document.querySelector("#modview-route-showcase>input").value="" + document.querySelector("#modview-route-description>textarea").value="" + } +if(menu===2){ // edit + document.querySelector("#modview-route-id>input").value=data.summary.routes[selectedRun].route_id + document.querySelector("#modview-route-name>input").value=data.summary.routes[selectedRun].history.runner_name + document.querySelector("#modview-route-score>input").value=data.summary.routes[selectedRun].history.score_count + document.querySelector("#modview-route-date>input").value=data.summary.routes[selectedRun].history.date.split("T")[0] + document.querySelector("#modview-route-showcase>input").value=data.summary.routes[selectedRun].showcase + document.querySelector("#modview-route-description>textarea").value=data.summary.routes[selectedRun].description +} // eslint-disable-next-line +},[menu]) + +function compressImage(file) { + const reader = new FileReader(); + reader.readAsDataURL(file); + return new Promise(resolve => { + reader.onload = () => { + const img = new Image(); + img.src = reader.result; + img.onload = () => { + let {width, height} = img; + if (width > 550) { + height *= 550 / width; + width = 550; + } + if (height > 320) { + width *= 320 / height; + height = 320; + } + const canvas = document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + canvas.getContext('2d').drawImage(img, 0, 0, width, height); + resolve(canvas.toDataURL(file.type, 0.6)); + }; + }; + }); +} +const [image,setImage] = React.useState(null) +function uploadImage(){ + if(window.confirm("Are you sure you want to submit this to the database?")){ + fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/image`,{ + method: 'PUT', + headers: {Authorization: token}, + body: JSON.stringify({"image": image}) + }).then(r=>window.location.reload()) + } +} +const location = useLocation() +function editRoute(){ +if(window.confirm("Are you sure you want to submit this to the database?")){ + let payload = { + "description": document.querySelector("#modview-route-description>textarea").value===""?"No description available.":document.querySelector("#modview-route-description>textarea").value, + "record_date": document.querySelector("#modview-route-date>input").value+"T00:00:00Z", + "route_id": parseInt(document.querySelector("#modview-route-id>input").value), + "score_count": parseInt(document.querySelector("#modview-route-score>input").value), + "showcase": document.querySelector("#modview-route-showcase>input").value, + "user_name": document.querySelector("#modview-route-name>input").value + } + fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{ + method: 'PUT', + headers: {Authorization: token}, + body: JSON.stringify(payload) + }).then(r=>window.location.reload()) + } +} + + +function addRoute(){ + if(window.confirm("Are you sure you want to submit this to the database?")){ + let payload = { + "category_id": parseInt(document.querySelector("#modview-route-category>select").value), + "description": document.querySelector("#modview-route-description>textarea").value===""?"No description available.":document.querySelector("#modview-route-description>textarea").value, + "record_date": document.querySelector("#modview-route-date>input").value+"T00:00:00Z", + "score_count": parseInt(document.querySelector("#modview-route-score>input").value), + "showcase": document.querySelector("#modview-route-showcase>input").value, + "user_name": document.querySelector("#modview-route-name>input").value + } + fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{ + method: 'POST', + headers: {Authorization: token}, + body: JSON.stringify(payload) + }).then(r=>window.location.reload()) + } +} + +function deleteRoute(){ +if(data.summary.routes[0].category==='') +{window.alert("no run selected")}else{ +if(window.confirm(`Are you sure you want to delete this run from the database? +${data.summary.routes[selectedRun].category.name} ${data.summary.routes[selectedRun].history.score_count} portals ${data.summary.routes[selectedRun].history.runner_name}`)===true){ + console.log("deleted:",selectedRun) + fetch(`/api/v1/maps/${location.pathname.split('/')[2]}/summary`,{ + method: 'DELETE', + headers: {Authorization: token}, + body: JSON.stringify({"route_id":data.summary.routes[selectedRun].route_id}) + }).then(r=>window.location.reload()) +}} + +} + +const [showButton, setShowButton] = React.useState(1) +const modview = document.querySelector("div#modview") +React.useEffect(()=>{ + if(modview!==null){ + showButton ? modview.style.transform="translateY(-68%)" + : modview.style.transform="translateY(0%)" + } + let modview_block = document.querySelector("#modview_block") + showButton===1?modview_block.style.display="none":modview_block.style.display="block"// eslint-disable-next-line +},[showButton]) + +const [md,setMd] = React.useState("") + +return ( + <> +
+
+
+ + + + +
+
+ {showButton ?( + + ) : ( + + )} +
+
+ {menu!==0? ( +
+ {menu===1? ( + // image +
+
+ current image: + missing +
+ +
+ new image: + + compressImage(e.target.files[0]) + .then(d=>setImage(d)) + }/> + {image!==null?():} + + +
+
+ ):menu===2?( + // edit route +
+
+ route id: + +
+
+ runner name: + +
+
+ score: + +
+
+ date: + +
+
+ showcase video: + +
+
+ description: + +
+ +
+ ):menu===3?( + // add route +
+
+ category: + +
+
+ runner name: + +
+
+ score: + +
+
+ date: + +
+
+ showcase video: + +
+
+ description: + +
+ +
+ ):("error")} + + {menu!==1?( +
+ Markdown preview + documentation + demo +

+ {md} + +

+
+ ):""} +
):""} + + +) +} + diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css index 84600fb..8011a6e 100644 --- a/frontend/src/components/sidebar.css +++ b/frontend/src/components/sidebar.css @@ -55,7 +55,7 @@ span>b{ justify-items: left; grid-template-rows: calc(100vh - 670px) 50px 50px 50px; } -button>span{ +.sidebar-button>span{ font-family: BarlowSemiCondensed-Regular; font-size: 18px; color: #CDCFDF; @@ -63,7 +63,7 @@ button>span{ line-height: 28px; transition: opacity .1s; } -button{ +.sidebar-button{ display: grid; grid-template-columns: 50px auto; place-items: left; @@ -100,7 +100,7 @@ button>img { width: 268px; height: calc(100vh - 120px); min-height: 550px; } -input[type=text]{ +input#searchbar[type=text]{ margin: 10px 0 0 6px; padding: 1px 0px 1px 16px; width: 240px; diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js index aaaf196..77800bd 100644 --- a/frontend/src/components/sidebar.js +++ b/frontend/src/components/sidebar.js @@ -15,7 +15,8 @@ import img8 from "../imgs/8.png" import img9 from "../imgs/9.png" import Login from "./login.js" -export default function Sidebar() { +export default function Sidebar(prop) { +const {token,setToken} = prop // Locks search button for 300ms before it can be clicked again, prevents spam const [isLocked, setIsLocked] = React.useState(false); @@ -30,7 +31,7 @@ if (!isLocked) { // Clicked buttons function SidebarClick(x){ -const btn = document.querySelectorAll("button"); +const btn = document.querySelectorAll("button.sidebar-button"); if(sidebar===1){setSidebar(0);SidebarHide()} @@ -46,8 +47,8 @@ btn[x].style.backgroundColor="#202232" const [sidebar, setSidebar] = React.useState(); function SidebarHide(){ -const btn = document.querySelectorAll("button"); -const span = document.querySelectorAll("button>span"); +const btn = document.querySelectorAll("button.sidebar-button") +const span = document.querySelectorAll("button.sidebar-button>span"); const side = document.querySelector("#sidebar-list"); const login = document.querySelectorAll(".login>button")[1]; @@ -106,49 +107,51 @@ return (
- +
) -- cgit v1.2.3