From 6a6cf508a3bbb698530a3499f60980d51054f013 Mon Sep 17 00:00:00 2001 From: sigonasr2 Date: Sun, 9 Aug 2020 19:41:20 -0500 Subject: [PATCH] Add in LoadMore component and removed ugly and clunky div height boxes --- frontend/src/App.css | 19 +++++- frontend/src/App.js | 144 ++++++++++++++++++++++++++++++++++++------- server/app.js | 13 ++-- 3 files changed, 150 insertions(+), 26 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 5790987..00354c4 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -4,6 +4,10 @@ badge-success {hard} badge-warning {ex} badge-danger {exex}*/ +.link{ + color:#66e; +} + .highest{ z-index:1000001; } @@ -15,6 +19,7 @@ badge-danger {exex}*/ font-size:12px; } + .display-tooltipside{ position:absolute; z-index:1000000; @@ -81,6 +86,10 @@ table th { z-index: 100000; } +.background-songs{ + background-color:#eef; +} + .background-list-1{ background-color:#cee; } @@ -98,12 +107,20 @@ table th { background-color:rgba(160,160,255,0.5); } +.tinytext{ + font-size:10px; + /*z-index:-10000;*/ + color:#666; + font-style:italic; + /*background-color:rgba(240,240,255,0.8);*/ +} + .tinytime{ font-size:10px; position:absolute; bottom:0px; right:7px; - z-index:-10000; + /*z-index:-10000;*/ color:#666; font-style:italic; /*background-color:rgba(240,240,255,0.8);*/ diff --git a/frontend/src/App.js b/frontend/src/App.js index 83081a8..ffd8c89 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -331,7 +331,7 @@ function Play(p) { function GetDateDisplay() { var date = new Date(p.play.date); var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"] - return <>{months[date.getMonth()]+" "+date.getDate()+" "+date.getFullYear()+" "+date.getHours()+":"+((date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes())}{GetDateDiff()} + return <>{months[date.getMonth()]+" "+date.getDate()+" "+date.getFullYear()+" "+date.getHours()+":"+((date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes())}{GetDateDiff()} } if (p.mini) { return ( @@ -423,33 +423,131 @@ function Play(p) { } } +function LoadMore(p) { + var [offset,setOffset] = useState(p.params.limit) + var [params,setParams] = useState(p.params) + var [loading,setLoading] = useState(false) + var [visible,setVisible] = useState(false) + var [update,setUpdate] = useState(false) + + useEffect(()=>{ + axios.get(p.url+constructParams(params)) + .then((data)=>{ + if (data.data.length>0) { + setVisible(true) + } + }) + },[update]) + + function constructParams(params) { + var st = Object.keys(params).reduce((str,key)=>{ + if (str==="") { + return str+="?"+key+"="+params[key] + } else { + return str+="&"+key+"="+params[key] + } + },"") + return st + } + if (!visible){ + return (<>) + } + else + if (p.listItem) { + return ( +
  • { + setLoading(true) + axios.get(p.url+constructParams(params)) + .then((data)=>{ + if (data.data.length>0) { + var newVals = [...p.value] + data.data.forEach((val)=>{ + newVals.push(val) + }) + p.setValue(newVals) + //console.log(newVals) + var obj = {...params} + obj.offset+=offset + setParams(obj) + setLoading(false) + if (data.data.length +
    +
    + {(!loading)?
    - Load More -
    :
    Loading...
    + } +
    +
    +
    • + ) + } else + return ( +
    { + setLoading(true) + axios.get(p.url+constructParams(params)) + .then((data)=>{ + if (!data.data) { + setVisible(false) + } else + if (data.data.length>0) { + var newVals = [...p.value] + data.data.forEach((val)=>{ + newVals.push(val) + }) + p.setValue(newVals) + //console.log(newVals) + var obj = {...params} + obj.offset+=offset + setParams(obj) + setLoading(false) + if (data.data.length +
    + {(!loading)?
    - Load More -
    :
    Loading...
    + } +
    +
    + ) +} + function BestPlaysPanel(p) { var [bestPlays,setBestPlays] = useState([]) + var [update,setUpdate] = useState(false) useEffect(()=>{ axios.get("http://www.projectdivar.com/bestplays/"+p.username+"?fails=false&limit=5&offset=0") .then((data)=>{setBestPlays(data.data);}) - }) + },[update]) - return ( - <> -
    -
    -
      - {bestPlays.map((play,i)=>{return
    • - -
      • })} -
    -
    -
    -
    -
    -
      + var content=
      +
        {bestPlays.map((play,i)=>{return
        • })} +
      + + return ( + <> +
      + {content}
      ); @@ -530,13 +628,17 @@ function PlayData(p) { useEffect(()=>{ axios.get("http://projectdivar.com/plays/"+p.username+"/"+p.song.id) - .then((data)=>{setData(data.data)}) + .then((data)=>{setData(data.data);}) },[update]) return ( <> -
      - {data.map((play,i)=>)} +
      +
      Individual Plays for {p.song.name} from {p.username}
      +
      + {data.map((play,i)=>)} + +
      ) @@ -548,7 +650,7 @@ function HoverSongName(p) { var [toggle,setToggle] = useState(false) return ( <> - {setName((p.song.romanized_name.length>0)?p.song.romanized_name:p.song.english_name)}} onMouseOut={()=>{setName(p.song.name)}} + { if (!toggle) { setExpand() @@ -559,7 +661,7 @@ function HoverSongName(p) { } }> - {name} + {(toggle)?<>⯆:<>⯈} {name} {(p.song.romanized_name.length>0)?<>{(p.song.romanized_name!==p.song.name)?<>{p.song.romanized_name}:<>}:<>{(p.song.english_name!==p.song.name)?<>{p.song.english_name}:<>}} diff --git a/server/app.js b/server/app.js index 21988c0..ac1f054 100644 --- a/server/app.js +++ b/server/app.js @@ -423,13 +423,15 @@ app.get('/ratings/:songname/:username',(req,res)=>{ }) app.get('/bestplays/:username',(req,res)=>{ - var songId=-1,userId=-1,songPromises=[],plays=[]; + var songId=-1,userId=-1,songPromises=[],plays=[],limit=5,offset=0; + if (req.query.limit) {limit=req.query.limit} + if (req.query.offset) {offset=req.query.offset} db.query('select id from users where username=$1 limit 1',[req.params.username]) - .then((data)=>{if (data.rows.length>0){userId=data.rows[0].id;return db.query("select * from (select distinct on (songid) * from plays where userid=$1 "+((req.query.fails==="false")?"and score!=0":"")+" order by songid,score desc)t order by score desc;",[userId])}else{throw new Error("Cannot find user!")}}) + .then((data)=>{if (data.rows.length>0){userId=data.rows[0].id;return db.query("select * from (select distinct on (songid) * from plays where userid=$1 "+((req.query.fails==="false")?"and score!=0":"")+" order by songid,score desc)t order by score desc limit $2 offset $3",[userId,Number(limit),Number(offset)])}else{throw new Error("Cannot find user!")}}) .then((data)=>{ res.status(200).json(data.rows) }) - .catch((err)=>{res.status(500).json(err.message+JSON.stringify(req.body))}) + .catch((err)=>{res.status(500).json(err.message)}) }) app.get('/bestplay/:username/:songname/:difficulty',(req,res)=>{ @@ -465,7 +467,10 @@ app.get('/userdata/:username',(req,res)=>{ }) app.get('/plays/:username/:songid',(req,res)=>{ - db.query("select plays.* from plays join users on users.id=plays.userid where users.username=$1 and plays.songid=$2 order by score desc,date desc limit 100",[req.params.username,req.params.songid]) + var limit=5,offset=0; + if (req.query.limit) {limit=req.query.limit} + if (req.query.offset) {offset=req.query.offset} + db.query("select plays.* from plays join users on users.id=plays.userid where users.username=$1 and plays.songid=$2 order by score desc,percent desc,date desc limit $3 offset $4",[req.params.username,req.params.songid,Number(limit),Number(offset)]) .then((data)=>{ res.status(200).json(data.rows) })