VRFS-206 remove hardcoded friend list in sidebar

This commit is contained in:
Brian Smith 2013-03-03 22:38:12 -05:00
parent 46fa3c5580
commit 2e9a65dbf8
5 changed files with 101 additions and 70 deletions

View File

@ -14,10 +14,6 @@
}
function afterShow(data) {
// TODO remove me - just showing that you should
// have access to the query variable from the search
// box.
//$('#show-query').text('Query is ' + query);
}
function search(evt) {
@ -98,9 +94,8 @@
data: '{"friend_id":"' + userId + '"}',
processData: false,
success: function(response) {
//alert($(this).parent().find('div[user-id=' + userId + '].search-connected'));
// toggle the pre-click and post-click divs
$('div[user-id=' + userId + '].search-connected').show();
//$(this).parent().find('div[user-id=' + userId + '].search-result').empty();
$('div[user-id=' + userId + '].search-result').hide();
},
error: app.ajaxError
@ -122,11 +117,7 @@
}
function events() {
// not sure it should go here long-term, but wiring
// up the event handler for the search box in the sidebar.
$('#searchForm').submit(search);
$('#btn-connect-friend').on("click", sendFriendRequest);
}
this.initialize = function() {

View File

@ -0,0 +1,80 @@
(function(context,$) {
"use strict";
context.JK = context.JK || {};
context.JK.Sidebar = function(app) {
var logger = context.JK.logger;
function populateFriendsPanel() {
var url = "/api/users/" + context.JK.currentUserId + "/friends"
$.ajax({
type: "GET",
dataType: "json",
contentType: 'application/json',
url: url,
processData: false,
success: function(response) {
$.each(response, function(index, val) {
var css = val.online ? '' : 'offline';
// fill in template for Connect pre-click
var template = $('#template-friend-panel').html();
var searchResultHtml = context.JK.fillTemplate(template, {
userId: val.id,
cssClass: css,
avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
userName: val.name,
status: val.online ? 'Available' : 'Offline',
extra_info: '',
info_image_url: ''
});
$('#sidebar-friend-list').append(searchResultHtml);
});
// set friend count
$('#sidebar-friend-count').html(response.length);
},
error: app.ajaxError
});
return false;
}
function sendFriendRequest(evt) {
evt.stopPropagation();
var userId = $(this).parent().attr('user-id');
//$(this).parent().empty();
var url = "/api/users/" + context.JK.currentUserId + "/friend_requests";
$.ajax({
type: "POST",
dataType: "json",
contentType: 'application/json',
url: url,
data: '{"friend_id":"' + userId + '"}',
processData: false,
success: function(response) {
// toggle the pre-click and post-click divs
$('div[user-id=' + userId + '].search-connected').show();
$('div[user-id=' + userId + '].search-result').hide();
},
error: app.ajaxError
});
}
function events() {
populateFriendsPanel();
}
this.initialize = function() {
events();
};
};
})(window,jQuery);

View File

@ -1,3 +1,3 @@
object @user.friends
attributes :id, :first_name, :last_name, :city, :state, :country, :email, :online, :photo_url
attributes :id, :first_name, :last_name, :name, :location, :email, :online, :photo_url

View File

@ -26,67 +26,10 @@
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>friends<div class="badge">4</div></h2>
<h2>friends<div id='sidebar-friend-count' class="badge"></div></h2>
</div>
<div layout-panel="contents" class="panelcontents">
<ul>
<li>
<div class="avatar-small">
<%= image_tag "avatars/avatar_david.jpg" %>
</div>
<div class="friend-name">
David Wilson<br/>
<span class="friend-status">
<a href="#">In Session</a>, started at 12:34 pm
</span>
</div>
<div class="friend-icon">
<%= image_tag "shared/icon_session.png", :width=>24, :height=>24 %>
</div>
<br clear="all" />
</li>
<li>
<div class="avatar-small">
<%= image_tag "shared/avatar_creepyeye.jpg" %>
</div>
<div class="friend-name">
Brian Smith<br/>
<span class="friend-status">Available</span>
</div>
<div class="friend-icon"></div>
<br clear="all" />
</li>
<li>
<div class="avatar-small">
<%= image_tag "shared/avatar_silverfox.jpg" %>
</div>
<div class="friend-name">
Peter Walker<br/>
<span class="friend-status">
Recording: <a href="#">Seven Trails</a>
</span>
</div>
<div class="friend-icon">
<%= image_tag "sidebar/icon_recording.png", :width=>24, :height=>24 %>
</div>
<br clear="all" />
</li>
<li class="offline">
<div class="avatar-small">
<%= image_tag "shared/avatar_saltnpepper.jpg" %>
</div>
<div class="friend-name">
Seth Call<br/>
<span class="friend-status">
Offline
</span>
</div>
<div class="friend-icon"></div>
<br clear="all" />
</li>
<ul id="sidebar-friend-list">
</ul>
</div>
</div>
@ -222,3 +165,17 @@
</div>
</div>
</div>
<script type="text/template" id="template-friend-panel">
<li class="{cssClass}">
<div class="avatar-small"><img src="{avatar_url}" /></div>
<div class="friend-name">
{userName}<br/>
<span class="friend-status">
{status} {extra_info}
</span>
</div>
<div class="friend-icon">{info_image_url}</div>
<br clear="all" />
</li>
</script>

View File

@ -72,6 +72,9 @@
var header = new JK.Header(JK.app);
header.initialize();
var sidebar = new JK.Sidebar(JK.app);
sidebar.initialize();
var homeScreen = new JK.HomeScreen(JK.app);
homeScreen.initialize();