VRFS-206 remove hardcoded friend list in sidebar
This commit is contained in:
parent
46fa3c5580
commit
2e9a65dbf8
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue