VRFS-305 musician profile bands tab

This commit is contained in:
Brian Smith 2013-04-28 15:06:01 -04:00
parent c5e0371250
commit 1acba9dee6
14 changed files with 332 additions and 149 deletions

View File

@ -43,71 +43,8 @@
$('.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');
}
/****************** MAIN PORTION OF SCREEN *****************/
// events for main screen
function events() {
// wire up panel clicks
$('#profile-about-link').click(renderAbout);
@ -128,7 +65,7 @@
}
else {
$('#btn-add-friend').hide();
$('#btn-follow').hide();
$('#btn-follow-user').hide();
}
}
@ -215,9 +152,15 @@
});
}
function removeFollowing() {
function removeFollowing(isBand, id) {
var following = {};
following.user_id = userId;
if (!isBand) {
following.user_id = id;
}
else {
following.band_id = id;
}
var url = "/api/users/" + context.JK.currentUserId + "/followings";
$.ajax({
@ -229,7 +172,12 @@
processData: false,
success: function(response) {
renderActive(); // refresh stats
configureFollowingButton(false);
if (!isBand) {
configureFollowingButton(false);
}
else {
configureBandFollowingButton(false, id);
}
},
error: app.ajaxError
});
@ -260,18 +208,21 @@
}
function configureFollowingButton(following) {
$('#btn-follow').unbind("click");
$('#btn-follow-user').unbind("click");
if (following) {
$('#btn-follow').text('STOP FOLLOWING');
$('#btn-follow').click(removeFollowing);
$('#btn-follow-user').text('STOP FOLLOWING');
$('#btn-follow-user').click(function() {
removeFollowing(false, userId);
});
}
else {
$('#btn-follow').text('FOLLOW');
$('#btn-follow').click(addFollowing);
$('#btn-follow-user').text('FOLLOW');
$('#btn-follow-user').click(addFollowing);
}
}
// refreshes the currently active tab
function renderActive() {
if ($('#profile-about-link').hasClass('active')) {
renderAbout();
@ -290,6 +241,22 @@
}
}
/****************** ABOUT TAB *****************/
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 bindAbout() {
$('#profile-instruments').empty();
var url = "/api/users/" + userId;
@ -357,6 +324,24 @@
}
}
/****************** SOCIAL TAB *****************/
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 bindSocial() {
// FRIENDS
var url = "/api/users/" + userId + "/friends";
@ -382,7 +367,7 @@
error: app.ajaxError
});
// FOLLOWINGS
// FOLLOWINGS (USERS)
url = "/api/users/" + userId + "/followings";
$.ajax({
type: "GET",
@ -405,6 +390,29 @@
error: app.ajaxError
});
// FOLLOWINGS (BANDS)
// url = "/api/users/" + userId + "/band_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.logo_url),
// userName: val.name,
// location: val.location
// });
// $('#profile-social-followings').append(followingHtml);
// });
// },
// error: app.ajaxError
// });
// FOLLOWERS
url = "/api/users/" + userId + "/followers";
$.ajax({
@ -429,6 +437,162 @@
});
}
/****************** HISTORY TAB *****************/
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');
bindHistory();
}
function bindHistory() {
}
/****************** BANDS TAB *****************/
function renderBands() {
$('#profile-bands').empty();
$('#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');
bindBands();
}
function bindBands() {
var url = "/api/users/" + userId + "/bands";
$.ajax({
type: "GET",
dataType: "json",
url: url,
async: false,
processData:false,
success: function(response) {
$.each(response, function(index, val) {
var template = $('#template-profile-bands').html();
var bandHtml = context.JK.fillTemplate(template, {
bandId: val.id,
avatar_url: context.JK.resolveAvatarUrl(val.logo_url),
name: val.name,
location: val.location,
genres: formatGenres(val.genres)
});
$('#profile-bands').append(bandHtml);
// wire up Band Follow button click handler
var following = isFollowingBand(val.id);
configureBandFollowingButton(following, val.id);
});
},
error: app.ajaxError
});
}
function formatGenres(genres) {
var formattedGenres = '';
for (var i=0; i < genres.length; i++) {
var genre = genres[i];
formattedGenres += genre.description;
if (i < genres.length -1) {
formattedGenres += ', ';
}
}
return formattedGenres;
}
function addBandFollowing(evt) {
evt.stopPropagation();
var bandId = $(this).parent().attr('band-id');
var newFollowing = {};
newFollowing.band_id = bandId;
var url = "/api/users/" + context.JK.currentUserId + "/followings";
$.ajax({
type: "POST",
dataType: "json",
contentType: 'application/json',
url: url,
data: JSON.stringify(newFollowing),
processData: false,
success: function(response) {
renderActive(); // refresh stats
configureBandFollowingButton(true, bandId);
},
error: app.ajaxError
});
}
function isFollowingBand(bandId) {
var alreadyFollowing = false;
var url = "/api/users/" + context.JK.currentUserId + "/band_followings/" + bandId;
$.ajax({
type: "GET",
dataType: "json",
url: url,
async: false,
processData: false,
success: function(response) {
if (response.id !== undefined) {
alreadyFollowing = true;
}
else {
alreadyFollowing = false;
}
},
error: app.ajaxError
});
return alreadyFollowing;
}
function configureBandFollowingButton(following, bandId) {
var $btnFollowBand = $('div[band-id=' + bandId + ']', '#profile-bands').find('#btn-follow-band');
$btnFollowBand.unbind("click");
if (following) {
$btnFollowBand.text('UN-FOLLOW');
$btnFollowBand.click(function() {
removeFollowing(true, bandId);
});
}
else {
$btnFollowBand.text('FOLLOW');
$btnFollowBand.click(addBandFollowing);
}
}
/****************** FAVORITES TAB *****************/
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');
bindFavorites();
}
function bindFavorites() {
}
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: "/#/profile/" + val.id,
profile_url: "/#/musicians/" + val.id,
userName: val.name,
location: val.location,
instruments: getInstrumentHtml(val.instruments)
@ -58,7 +58,7 @@
var invitationSentHtml = context.JK.fillTemplate(template, {
userId: val.id,
first_name: val.first_name,
profile_url: "/#/profile/" + val.id
profile_url: "/#/musicians/" + val.id
});
$('#search-results').append(invitationSentHtml);

View File

@ -18,8 +18,6 @@
var instrument_logo_map = context.JK.getInstrumentIconMap24();
var _logger = context.JK.logger;
/**
* Render a single session line into the table.
* It will be inserted at the appropriate place according to the

View File

@ -180,7 +180,7 @@
var searchResultHtml = context.JK.fillTemplate(template, {
userId: val.id,
avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
profile_url: "/#/profile/" + val.id,
profile_url: "/#/musicians/" + val.id,
userName: val.name,
location: val.location
});
@ -192,7 +192,7 @@
var invitationSentHtml = context.JK.fillTemplate(template, {
userId: val.id,
first_name: val.first_name,
profile_url: "/#/profile/" + val.id
profile_url: "/#/musicians/" + val.id
});
$('#sidebar-search-results').append(invitationSentHtml);

View File

@ -86,7 +86,7 @@
border-radius:44px;
}
.profile-about-wrapper {
.profile-wrapper {
padding:10px 25px 10px 25px;
font-size:15px;
color:#ccc;
@ -143,13 +143,34 @@
font-weight:600;
}
.profile-social-wrapper {
padding:10px 25px 10px 25px;
font-size:15px;
color:#ccc;
border-bottom: dotted 1px #444;
.profile-bands {
width:215px;
min-height:90px;
background-color:#242323;
position:relative;
display:block;
float:left;
margin:10px 20px 10px 0px;
padding-bottom:5px;
}
.profile-band-name {
float:left;
font-size:12px;
margin-top:12px;
font-weight:bold;
}
.profile-band-location {
font-size:12px;
font-weight:200;
}
.profile-band-genres {
float:left;
width:40%;
font-size:10px;
margin-left:10px;
padding-right:5px;
}
.profile-social-left {

View File

@ -257,6 +257,10 @@ class ApiUsersController < ApiController
@user = User.find(params[:id])
end
def band_following_show
@following = BandFollowing.find_by_band_id_and_follower_id(params[:band_id], params[:id])
end
def following_create
id = params[:id]

View File

@ -1,31 +1,29 @@
object @band.followers
attributes :follower_id => :user_id
node :user_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 :city do |follower|
follower.user.city
node :name do |follower|
follower.name
end
node :state do |follower|
follower.user.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,27 +1,21 @@
object @user.band_followings
collection @user.band_followings
attributes :band_id
node :band_id do |following|
following.id
end
node :name do |following|
following.band.name
following.name
end
node :city do |following|
following.band.city
end
node :state do |following|
following.band.state
end
node :country do |following|
following.band.country
node :location do |following|
following.location
end
node :photo_url do |following|
following.band.photo_url
following.photo_url
end
node :logo_url do |following|
following.band.logo_url
following.logo_url
end

View File

@ -0,0 +1,3 @@
object @following
attributes :id, :band_id, :follower_id

View File

@ -1,4 +1,12 @@
collection @bands
# do not retrieve all child collections when showing a list of bands
attributes :id, :name, :city, :state, :country, :photo_url, :logo_url
attributes :id, :name, :location, :photo_url, :logo_url
node :genres do |band|
unless band.genres.nil? || band.genres.size == 0
child :genres => :genres do
attributes :id, :description
end
end
end

View File

@ -16,14 +16,6 @@ node :name do |follower|
follower.name
end
node :city do |follower|
follower.city
end
node :state do |follower|
follower.state
end
node :location do |follower|
follower.location
end

View File

@ -1,29 +1,13 @@
object @user.followings
collection @user.followings
node :user_id do |following|
following.id
end
node :first_name do |following|
following.first_name
end
node :last_name do |following|
following.last_name
end
node :name do |following|
following.name
end
node :city do |following|
following.city
end
node :state do |following|
following.state
end
node :location do |following|
following.location
end

View File

@ -22,7 +22,7 @@
<!-- action buttons -->
<div class="right">
<a id="btn-add-friend" class="button-orange">ADD FRIEND</a>
<a id="btn-follow" class="button-orange">FOLLOW</a>
<a id="btn-follow-user" class="button-orange">FOLLOW</a>
</div>
<br clear="all" /><br />
@ -44,7 +44,7 @@
</div>
<br clear="all" />
<div id="content-scroller">
<div id="profile-about" class="profile-about-wrapper">
<div id="profile-about" class="profile-wrapper">
<!-- stats & location -->
<div class="profile-about-left">
<h3>Location:</h3><br />
@ -62,13 +62,13 @@
</div>
<br clear="all" />
</div>
<div id="profile-history" class="profile-history-wrapper">
<div id="profile-history" class="profile-wrapper">
<br clear="all" />
</div>
<div id="profile-bands" class="profile-bands-wrapper">
<div id="profile-bands" class="profile-wrapper">
<br clear="all" />
</div>
<div id="profile-social" class="profile-social-wrapper">
<div id="profile-social" class="profile-wrapper">
<div class="profile-social-left">
<h2>Friends</h2>
<div id="profile-social-friends">
@ -86,7 +86,7 @@
</div>
<br clear="all" />
</div>
<div id="profile-favorites" class="profile-favorites-wrapper">
<div id="profile-favorites" class="profile-wrapper">
<br clear="all" />
</div>
</div>
@ -101,6 +101,20 @@
</div>
</script>
<script type="text/template" id="template-profile-bands">
<div band-id="{bandId}" class="profile-bands">
<div class="avatar-small">
<img src="{avatar_url}" width="275" height="183" />
</div>
<div class="profile-band-name">{name}<br />
<span class="profile-band-location">{location}</span>
</div>
<br clear="left" />
<div class="profile-band-genres">{genres}</div>
<a id="btn-follow-band" class="button-orange smallbutton right">FOLLOW</a>
</div>
</script>
<script type="text/template" id="template-profile-social">
<div class="profile-block">
<div class="avatar-small">

View File

@ -104,7 +104,10 @@ SampleApp::Application.routes.draw do
# user followings
match '/users/:id/followings' => 'api_users#following_index', :via => :get, :as => 'api_user_following_index'
match '/users/:id/followings/:user_id' => 'api_users#following_show', :via => :get, :as => 'api_following_detail'
match '/users/:id/band_followings' => 'api_users#band_following_index', :via => :get, :as => 'api_band_following_index'
match '/users/:id/band_followings/:band_id' => 'api_users#band_following_show', :via => :get, :as => 'api_band_following_detail'
match '/users/:id/followings' => 'api_users#following_create', :via => :post
match '/users/:id/followings' => 'api_users#following_destroy', :via => :delete