VRFS-306 musician profile social tab
This commit is contained in:
parent
10a8296ae5
commit
3cb28274c0
|
|
@ -27,15 +27,94 @@
|
|||
function afterShow(data) {
|
||||
resetForm();
|
||||
events();
|
||||
bindUser();
|
||||
renderActive();
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
$('#profile-instruments').empty();
|
||||
|
||||
$('#profile-about').show();
|
||||
$('#profile-history').hide();
|
||||
$('#profile-bands').hide();
|
||||
$('#profile-social').hide();
|
||||
$('#profile-favorites').hide();
|
||||
|
||||
$('.profile-nav a.active').removeClass('active');
|
||||
$('.profile-nav a.#profile-about-link').addClass('active');
|
||||
}
|
||||
|
||||
function renderAbout() {
|
||||
$('#profile-instruments').empty();
|
||||
|
||||
$('#profile-about').show();
|
||||
$('#profile-history').hide();
|
||||
$('#profile-bands').hide();
|
||||
$('#profile-social').hide();
|
||||
$('#profile-favorites').hide();
|
||||
|
||||
$('.profile-nav a.active').removeClass('active');
|
||||
$('.profile-nav a.#profile-about-link').addClass('active');
|
||||
|
||||
bindAbout();
|
||||
}
|
||||
|
||||
function renderHistory() {
|
||||
$('#profile-about').hide();
|
||||
$('#profile-history').show();
|
||||
$('#profile-bands').hide();
|
||||
$('#profile-social').hide();
|
||||
$('#profile-favorites').hide();
|
||||
|
||||
$('.profile-nav a.active').removeClass('active');
|
||||
$('.profile-nav a.#profile-history-link').addClass('active');
|
||||
}
|
||||
|
||||
function renderBands() {
|
||||
$('#profile-about').hide();
|
||||
$('#profile-history').hide();
|
||||
$('#profile-bands').show();
|
||||
$('#profile-social').hide();
|
||||
$('#profile-favorites').hide();
|
||||
|
||||
$('.profile-nav a.active').removeClass('active');
|
||||
$('.profile-nav a.#profile-bands-link').addClass('active');
|
||||
}
|
||||
|
||||
function renderSocial() {
|
||||
$('#profile-social-friends').empty();
|
||||
$('#profile-social-followings').empty();
|
||||
$('#profile-social-followers').empty();
|
||||
|
||||
$('#profile-about').hide();
|
||||
$('#profile-history').hide();
|
||||
$('#profile-bands').hide();
|
||||
$('#profile-social').show();
|
||||
$('#profile-favorites').hide();
|
||||
|
||||
$('.profile-nav a.active').removeClass('active');
|
||||
$('.profile-nav a.#profile-social-link').addClass('active');
|
||||
|
||||
bindSocial();
|
||||
}
|
||||
|
||||
function renderFavorites() {
|
||||
$('#profile-about').hide();
|
||||
$('#profile-history').hide();
|
||||
$('#profile-bands').hide();
|
||||
$('#profile-social').hide();
|
||||
$('#profile-favorites').show();
|
||||
|
||||
$('.profile-nav a.active').removeClass('active');
|
||||
$('.profile-nav a.#profile-favorites-link').addClass('active');
|
||||
}
|
||||
|
||||
function events() {
|
||||
// TODO: wire up panel clicks
|
||||
// wire up panel clicks
|
||||
$('#profile-about-link').click(renderAbout);
|
||||
$('#profile-history-link').click(renderHistory);
|
||||
$('#profile-bands-link').click(renderBands);
|
||||
$('#profile-social-link').click(renderSocial);
|
||||
$('#profile-favorites-link').click(renderFavorites);
|
||||
|
||||
// wire up buttons if you're not viewing your own profile
|
||||
if (userId != context.JK.currentUserId) {
|
||||
|
|
@ -68,8 +147,7 @@
|
|||
url: url,
|
||||
processData: false,
|
||||
success: function(response) {
|
||||
resetForm();
|
||||
bindUser(); // refresh stats
|
||||
renderActive(); // refresh stats
|
||||
configureFriendButton(false);
|
||||
},
|
||||
error: app.ajaxError
|
||||
|
|
@ -130,8 +208,7 @@
|
|||
data: JSON.stringify(newFollowing),
|
||||
processData: false,
|
||||
success: function(response) {
|
||||
resetForm();
|
||||
bindUser(); // refresh stats
|
||||
renderActive(); // refresh stats
|
||||
configureFollowingButton(true);
|
||||
},
|
||||
error: app.ajaxError
|
||||
|
|
@ -151,8 +228,7 @@
|
|||
data: JSON.stringify(following),
|
||||
processData: false,
|
||||
success: function(response) {
|
||||
resetForm();
|
||||
bindUser(); // refresh stats
|
||||
renderActive(); // refresh stats
|
||||
configureFollowingButton(false);
|
||||
},
|
||||
error: app.ajaxError
|
||||
|
|
@ -196,7 +272,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
function bindUser() {
|
||||
function renderActive() {
|
||||
if ($('#profile-about-link').hasClass('active')) {
|
||||
renderAbout();
|
||||
}
|
||||
else if ($('#profile-history-link').hasClass('active')) {
|
||||
renderHistory();
|
||||
}
|
||||
else if ($('#profile-bands-link').hasClass('active')) {
|
||||
renderBands();
|
||||
}
|
||||
else if ($('#profile-social-link').hasClass('active')) {
|
||||
renderSocial();
|
||||
}
|
||||
else if ($('#profile-favorites-link').hasClass('active')) {
|
||||
renderFavorites();
|
||||
}
|
||||
}
|
||||
|
||||
function bindAbout() {
|
||||
$('#profile-instruments').empty();
|
||||
var url = "/api/users/" + userId;
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
|
|
@ -262,6 +357,78 @@
|
|||
}
|
||||
}
|
||||
|
||||
function bindSocial() {
|
||||
// FRIENDS
|
||||
var url = "/api/users/" + userId + "/friends";
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
url: url,
|
||||
async: false,
|
||||
processData:false,
|
||||
success: function(response) {
|
||||
$.each(response, function(index, val) {
|
||||
var template = $('#template-profile-social').html();
|
||||
var friendHtml = context.JK.fillTemplate(template, {
|
||||
avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
|
||||
userName: val.name,
|
||||
location: val.location,
|
||||
type: "Friends"
|
||||
});
|
||||
|
||||
$('#profile-social-friends').append(friendHtml);
|
||||
});
|
||||
},
|
||||
error: app.ajaxError
|
||||
});
|
||||
|
||||
// FOLLOWINGS
|
||||
url = "/api/users/" + userId + "/followings";
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
url: url,
|
||||
async: false,
|
||||
processData:false,
|
||||
success: function(response) {
|
||||
$.each(response, function(index, val) {
|
||||
var template = $('#template-profile-social').html();
|
||||
var followingHtml = context.JK.fillTemplate(template, {
|
||||
avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
|
||||
userName: val.name,
|
||||
location: val.location
|
||||
});
|
||||
|
||||
$('#profile-social-followings').append(followingHtml);
|
||||
});
|
||||
},
|
||||
error: app.ajaxError
|
||||
});
|
||||
|
||||
// FOLLOWERS
|
||||
url = "/api/users/" + userId + "/followers";
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
url: url,
|
||||
async: false,
|
||||
processData:false,
|
||||
success: function(response) {
|
||||
$.each(response, function(index, val) {
|
||||
var template = $('#template-profile-social').html();
|
||||
var followerHtml = context.JK.fillTemplate(template, {
|
||||
avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
|
||||
userName: val.name,
|
||||
location: val.location
|
||||
});
|
||||
|
||||
$('#profile-social-followers').append(followerHtml);
|
||||
});
|
||||
},
|
||||
error: app.ajaxError
|
||||
});
|
||||
}
|
||||
|
||||
function initialize() {
|
||||
var screenBindings = {
|
||||
'beforeShow': beforeShow,
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
var searchResultHtml = context.JK.fillTemplate(template, {
|
||||
userId: val.id,
|
||||
avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
|
||||
profile_url: val.id,
|
||||
profile_url: "/#/profile/" + val.id,
|
||||
userName: val.name,
|
||||
location: val.location,
|
||||
instruments: getInstrumentHtml(val.instruments)
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
border-radius:44px;
|
||||
}
|
||||
|
||||
.profile-wrapper {
|
||||
.profile-about-wrapper {
|
||||
padding:10px 25px 10px 25px;
|
||||
font-size:15px;
|
||||
color:#ccc;
|
||||
|
|
@ -141,4 +141,57 @@
|
|||
font-size:10px;
|
||||
color:#ed3618;
|
||||
font-weight:600;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-social-wrapper {
|
||||
padding:10px 25px 10px 25px;
|
||||
font-size:15px;
|
||||
color:#ccc;
|
||||
border-bottom: dotted 1px #444;
|
||||
position:relative;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.profile-social-left {
|
||||
float:left;
|
||||
width:32%;
|
||||
margin-right:12px;
|
||||
border-right:solid 1px #666;
|
||||
}
|
||||
|
||||
.profile-social-mid {
|
||||
float:left;
|
||||
width:31%;
|
||||
margin-right:12px;
|
||||
border-right:solid 1px #666;
|
||||
}
|
||||
|
||||
.profile-social-right {
|
||||
float:left;
|
||||
width:31%;
|
||||
}
|
||||
|
||||
.profile-social-left h2, .profile-social-mid h2, .profile-social-right h2 {
|
||||
font-weight:200;
|
||||
color:#fff;
|
||||
font-size:20px;
|
||||
}
|
||||
|
||||
.profile-block {
|
||||
clear:left;
|
||||
white-space:nowrap;
|
||||
display:block;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.profile-block-name {
|
||||
display:inline-block;
|
||||
margin-top:13px;
|
||||
font-size:14px;
|
||||
color:#fff;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.profile-block-city {
|
||||
font-size:12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ class ApiUsersController < ApiController
|
|||
before_filter :api_signed_in_user, :except => [:create, :signup_confirm, :auth_session_create, :complete]
|
||||
before_filter :auth_user, :only => [:session_settings_show, :session_history_index, :session_user_history_index, :update, :delete,
|
||||
:like_create, :like_destroy, # likes
|
||||
:following_create, :following_show, :following_destroy, :band_following_index, # followings
|
||||
:following_create, :following_show, :following_destroy, # followings
|
||||
:recording_update, :recording_destroy, # recordings
|
||||
:favorite_create, :favorite_destroy, # favorites
|
||||
:friend_request_index, :friend_request_show, :friend_request_create, :friend_request_update, # friend requests
|
||||
|
|
|
|||
|
|
@ -1,31 +1,37 @@
|
|||
object @user.followers
|
||||
|
||||
attributes :follower_id => :user_id
|
||||
node :id do |follower|
|
||||
follower.id
|
||||
end
|
||||
|
||||
node :first_name do |follower|
|
||||
follower.user.first_name
|
||||
follower.first_name
|
||||
end
|
||||
|
||||
node :last_name do |follower|
|
||||
follower.user.last_name
|
||||
follower.last_name
|
||||
end
|
||||
|
||||
node :name do |follower|
|
||||
follower.name
|
||||
end
|
||||
|
||||
node :city do |follower|
|
||||
follower.user.city
|
||||
follower.city
|
||||
end
|
||||
|
||||
node :state do |follower|
|
||||
follower.user.state
|
||||
follower.state
|
||||
end
|
||||
|
||||
node :country do |follower|
|
||||
follower.user.country
|
||||
node :location do |follower|
|
||||
follower.location
|
||||
end
|
||||
|
||||
node :musician do |follower|
|
||||
follower.user.musician
|
||||
follower.musician
|
||||
end
|
||||
|
||||
node :photo_url do |follower|
|
||||
follower.user.photo_url
|
||||
end
|
||||
follower.photo_url
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,31 +1,37 @@
|
|||
object @user.followings
|
||||
|
||||
attributes :user_id
|
||||
node :id do |following|
|
||||
following.id
|
||||
end
|
||||
|
||||
node :first_name do |following|
|
||||
following.user.first_name
|
||||
following.first_name
|
||||
end
|
||||
|
||||
node :last_name do |following|
|
||||
following.user.last_name
|
||||
following.last_name
|
||||
end
|
||||
|
||||
node :name do |following|
|
||||
following.name
|
||||
end
|
||||
|
||||
node :city do |following|
|
||||
following.user.city
|
||||
following.city
|
||||
end
|
||||
|
||||
node :state do |following|
|
||||
following.user.state
|
||||
following.state
|
||||
end
|
||||
|
||||
node :country do |following|
|
||||
following.user.country
|
||||
node :location do |following|
|
||||
following.location
|
||||
end
|
||||
|
||||
node :musician do |following|
|
||||
following.user.musician
|
||||
following.musician
|
||||
end
|
||||
|
||||
node :photo_url do |following|
|
||||
following.user.photo_url
|
||||
following.photo_url
|
||||
end
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</div>
|
||||
<br clear="all" />
|
||||
<div id="content-scroller">
|
||||
<div class="profile-wrapper">
|
||||
<div id="profile-about" class="profile-about-wrapper">
|
||||
<!-- stats & location -->
|
||||
<div class="profile-about-left">
|
||||
<h3>Location:</h3><br />
|
||||
|
|
@ -62,6 +62,33 @@
|
|||
</div>
|
||||
<br clear="all" />
|
||||
</div>
|
||||
<div id="profile-history" class="profile-history-wrapper">
|
||||
<br clear="all" />
|
||||
</div>
|
||||
<div id="profile-bands" class="profile-bands-wrapper">
|
||||
<br clear="all" />
|
||||
</div>
|
||||
<div id="profile-social" class="profile-social-wrapper">
|
||||
<div class="profile-social-left">
|
||||
<h2>Friends</h2>
|
||||
<div id="profile-social-friends">
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-social-mid">
|
||||
<h2>Following</h2>
|
||||
<div id="profile-social-followings">
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-social-right">
|
||||
<h2>Followers</h2>
|
||||
<div id="profile-social-followers">
|
||||
</div>
|
||||
</div>
|
||||
<br clear="all" />
|
||||
</div>
|
||||
<div id="profile-favorites" class="profile-favorites-wrapper">
|
||||
<br clear="all" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -72,4 +99,14 @@
|
|||
<span>{instrument_description}</span><br />
|
||||
<span class="{proficiency_level_css}">{proficiency_level}</span>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="template-profile-social">
|
||||
<div class="profile-block">
|
||||
<div class="avatar-small">
|
||||
<img src="{avatar_url}" />
|
||||
</div>
|
||||
<div class="profile-block-name">{userName}</div>
|
||||
<div class="profile-block-city">{location}</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -99,7 +99,7 @@ SampleApp::Application.routes.draw do
|
|||
match '/users/:id/likes' => 'api_users#like_destroy', :via => :delete
|
||||
|
||||
# user followers
|
||||
match '/users/:id/followers' => 'api_users#follower_index', :via => :get
|
||||
match '/users/:id/followers' => 'api_users#follower_index', :via => :get, :as => 'api_user_follower_index'
|
||||
|
||||
# user followings
|
||||
match '/users/:id/followings' => 'api_users#following_index', :via => :get, :as => 'api_user_following_index'
|
||||
|
|
|
|||
Loading…
Reference in New Issue