sigonasr2
/
projectdivar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add in LoadMore component and removed ugly and clunky div height boxes

Browse Source
changes
sigonasr2 5 years ago
parent 4e6df0beb6
commit 6a6cf508a3
3 changed files with 150 additions and 26 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 19
      frontend/src/App.css
  2. 142
      frontend/src/App.js
  3. 13
      server/app.js

19
frontend/src/App.css
Unescape View File

@ -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);*/

142
frontend/src/App.js
Unescape View File

@ -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())}<span className="tinytime">{GetDateDiff()}</span></>
return <>{months[date.getMonth()]+" "+date.getDate()+" "+date.getFullYear()+" "+date.getHours()+":"+((date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes())}<span className="tinytime infront">{GetDateDiff()}</span></>
}
if (p.mini) {
return (
@ -423,33 +423,131 @@ function Play(p) {
}
}
function BestPlaysPanel(p) {
var [bestPlays,setBestPlays] = useState([])
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("http://www.projectdivar.com/bestplays/"+p.username+"?fails=false&limit=5&offset=0")
.then((data)=>{setBestPlays(data.data);})
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 (
<>
<div className="d-none d-md-block row">
<div className="col-md-12 mt-3 mb-3">
<ul className="list-group list-group-flush overflow-auto border border-danger rounded-lg" style={{height:"320px"}}>
{bestPlays.map((play,i)=>{return <li key={play.id} className={"list-group-item list-group-item-action "+(i%2==0?"background-list-1":"background-list-2")}>
<Play index={i} play={play} song={p.songs[play.songid]}/>
</li>})}
</ul>
<li className="list-group-item list-group-item-action homelink" onClick={()=>{
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<p.params.limit) {
setVisible(false)
}
} else {
setVisible(false)
setLoading(false)
}
})
}
}>
<div className="row text-center">
<div className="col-12">
{(!loading)?<h6 className="link"><i>- Load More -</i></h6>:<div className="spinner-grow text-primary" role="status"><span className="sr-only">Loading...</span></div>
}
</div>
</div>
</li>
)
} else
return (
<div className="row text-center homelink" onClick={()=>{
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<p.params.limit) {
setVisible(false)
}
} else {
setVisible(false)
setLoading(false)
}
})
}
}>
<div className="col-12">
{(!loading)?<h6 className="link"><i>- Load More -</i></h6>:<div className="spinner-grow text-primary" role="status"><span className="sr-only">Loading...</span></div>
}
</div>
</div>
<div className="d-block d-sm-block d-md-none row ml-3 mr-3">
<div className="col-md-12 mt-3 mb-3">
<ul className="list-group list-group-flush overflow-auto border border-danger rounded-lg" style={{height:"320px"}}>
)
}
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])
var content=<div className="col-md-12 mt-3 mb-3">
<ul className="list-group list-group-flush border border-danger rounded-lg">
{bestPlays.map((play,i)=>{return <li key={play.id} className={"list-group-item list-group-item-action "+(i%2==0?"background-list-1":"background-list-2")}>
<Play index={i} play={play} song={p.songs[play.songid]}/>
</li>})}
<LoadMore listItem={true} url={"http://www.projectdivar.com/bestplays/"+p.username} params={{fails:false,limit:15,offset:5}} value={bestPlays} setValue={setBestPlays}/>
</ul>
</div>
return (
<>
<div className="row ml-3 mr-3">
{content}
</div>
</>
);
@ -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 (
<>
<div className="overflow-auto text-center" style={{height:"160px",width:"90%"}}>
<div className="text-center background-songs">
<h5>Individual Plays for {p.song.name} from {p.username}</h5>
<div className="border rounded">
{data.map((play,i)=><Play key={i} play={play} mini={true} song={p.song}/>)}
<LoadMore url={"http://www.projectdivar.com/plays/"+p.username+"/"+p.song.id} params={{limit:15,offset:5}} value={data} setValue={setData}/>
</div>
</div>
</>
)
@ -548,7 +650,7 @@ function HoverSongName(p) {
var [toggle,setToggle] = useState(false)
return (
<>
<tr key={p.song.id} className="lighthover" onMouseOver={()=>{setName((p.song.romanized_name.length>0)?p.song.romanized_name:p.song.english_name)}} onMouseOut={()=>{setName(p.song.name)}}
<tr key={p.song.id} className="lighthover"
data-toggle="collapse" data-target={"#collapse"+p.song.id} aria-expanded="false" aria-controls="collapseExample" onClick={()=>{
if (!toggle) {
setExpand(<PlayData song={p.song} username={p.username}/>)
@ -559,7 +661,7 @@ function HoverSongName(p) {
}
}>
<td>
{name}
{(toggle)?<>⯆</>:<>⯈</>} {name} <span className="tinytext">{(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}</>:<></>}</>}</span>
</td>
<PlayDetail song={p.song}/>
</tr>

13
server/app.js
Unescape View File

@ -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)
})

Write Preview
Loading…
Cancel
Save