2018-11-04 04:09:51 +00:00
< template >
< div class = "container" >
< section class = "mb-5 section-people" >
< p class = "lead text-muted font-weight-bold mb-0" > Discover People < / p >
< div class = "loader text-center" >
< div class = "lds-ring" > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < / div >
< / div >
< div class = "row d-none" >
< div class = "col-4 p-0 p-sm-2 p-md-3" v-for ="profile in people" >
< div class = "card card-md-border-0" >
< div class = "card-body p-4 text-center" >
< div class = "avatar pb-3" >
< a :href ="profile.url" >
< img :src ="profile.avatar" class = "img-thumbnail rounded-circle" width = "64px" >
< / a >
< / div >
< p class = "lead font-weight-bold mb-0 text-truncate" > < a :href ="profile.url" class = "text-dark" > { { profile . username } } < / a > < / p >
< p class = "text-muted text-truncate" > { { profile . name } } < / p >
2018-11-27 08:56:22 +00:00
< button class = "btn btn-primary font-weight-bold px-4 py-0" v -on : click = "followUser(profile.id, $event)" > Follow < / button >
2018-11-04 04:09:51 +00:00
< / div >
< / div >
< / div >
< / div >
< / section >
< section class = "mb-5 section-explore" >
< p class = "lead text-muted font-weight-bold mb-0" > Explore < / p >
< div class = "profile-timeline" >
< div class = "loader text-center" >
< div class = "lds-ring" > < div > < / div > < div > < / div > < div > < / div > < div > < / div > < / div >
< / div >
< div class = "row d-none" >
< div class = "col-4 p-0 p-sm-2 p-md-3" v-for ="post in posts" >
< a class = "card info-overlay card-md-border-0" :href ="post.url" >
< div class = "square filter_class" >
< div class = "square-content" v -bind : style = "{ 'background-image': 'url(' + post.thumb + ')' }" > < / div >
< / div >
< / a >
< / div >
< / div >
< / div >
< / section >
< section class = "mb-5" >
2018-11-27 08:56:22 +00:00
< p class = "lead text-center" > To view more posts , check the < a href = "/" class = "font-weight-bold" > home < / a > or < a href = "/timeline/public" class = "font-weight-bold" > local < / a > timelines . < / p >
2018-11-04 04:09:51 +00:00
< / section >
< / div >
< / template >
< script type = "text/javascript" >
export default {
data ( ) {
return {
people : { } ,
posts : { } ,
trending : { }
}
} ,
mounted ( ) {
2018-11-27 08:56:22 +00:00
this . slowTimeout ( ) ;
this . fetchData ( ) ;
2018-11-04 04:09:51 +00:00
} ,
methods : {
2018-11-27 08:56:22 +00:00
followUser ( id , event ) {
axios . post ( '/i/follow' , {
item : id
} ) . then ( res => {
let el = $ ( event . target ) ;
el . addClass ( 'btn-outline-secondary' ) . removeClass ( 'btn-primary' ) ;
el . text ( 'Unfollow' ) ;
} ) . catch ( err => {
swal (
'Whoops! Something went wrong...' ,
'An error occured, please try again later.' ,
'error'
) ;
} ) ;
} ,
2018-11-04 04:09:51 +00:00
fetchData ( ) {
axios . get ( '/api/v2/discover' )
. then ( ( res ) => {
let data = res . data ;
this . people = data . people ;
this . posts = data . posts ;
if ( this . people . length > 1 ) {
2018-11-27 08:56:22 +00:00
$ ( '.section-people .loader' ) . hide ( ) ;
2018-11-04 04:09:51 +00:00
$ ( '.section-people .row.d-none' ) . removeClass ( 'd-none' ) ;
}
if ( this . posts . length > 1 ) {
2018-11-27 08:56:22 +00:00
$ ( '.section-explore .loader' ) . hide ( ) ;
2018-11-04 04:09:51 +00:00
$ ( '.section-explore .row.d-none' ) . removeClass ( 'd-none' ) ;
}
} ) ;
2018-11-27 08:56:22 +00:00
} ,
slowTimeout ( ) {
setTimeout ( function ( ) {
let el = $ ( '<p>' ) . addClass ( 'font-weight-bold' ) . text ( 'This is taking longer than expected to load. Please try reloading the page if this does not load after 30 seconds.' ) ;
$ ( '.section-people .loader' ) . append ( el ) ;
$ ( '.section-explore .loader' ) . append ( el ) ;
} , 5000 ) ;
}
2018-11-04 04:09:51 +00:00
}
}
< / script >