VRFS-306 musician profile social tab

This commit is contained in:
Brian Smith 2013-04-26 23:33:52 -04:00
parent 10a8296ae5
commit 3cb28274c0
8 changed files with 303 additions and 34 deletions

View File

@ -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,

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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'