VRFS-77 VRFS-202 musician profile work

app/assets/javascripts/profile.js

@@ -0,0 +1,167 @@
+(function(context,$) {
+
+    "use strict";
+
+    context.JK = context.JK || {};
+    context.JK.ProfileScreen = function(app) {
+        var logger = context.JK.logger;
+        var userId;
+        var user = {};
+
+        var proficiencyDescriptionMap = {
+            "1": "BEGINNER",
+            "2": "INTERMEDIATE",
+            "3": "EXPERT"
+        };
+
+        var proficiencyCssMap = {
+            "1": "proficiency-beginner",
+            "2": "proficiency-intermediate",
+            "3": "proficiency-expert"
+        };
+
+        function beforeShow(data) {
+            userId = data.id;
+        }
+
+        function afterShow(data) {
+            resetForm();
+            events();
+            bindUser();
+        }
+
+        function resetForm() {
+            $('#profile-instruments').empty();
+        }
+
+        function events() {
+            // TODO: wire up panel clicks
+
+            // wire up buttons if you're not viewing your own profile 
+            if (userId != context.JK.currentUserId) {
+                // wire up Add Friend click
+                $('#btn-add-friend').click(sendFriendRequest);
+
+                // wire up Follow click
+                $('#btn-follow').click(addFollowing);
+
+                $('#btn-add-friend').show();
+                $('#btn-follow').show();
+            }
+            else {
+                $('#btn-add-friend').hide();
+                $('#btn-follow').hide();
+            }
+        }
+
+        function sendFriendRequest(evt) {
+            evt.stopPropagation();
+            context.JK.sendFriendRequest(app, userId, friendRequestCallback);
+        }
+
+        function friendRequestCallback() {
+            $('#btn-add-friend').hide();
+        }
+
+        function addFollowing() {
+            var newFollowing = {};
+            newFollowing.user_id = userId;
+
+            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) {
+                    resetForm();
+                    bindUser();  // refresh stats
+                },
+                error: app.ajaxError
+            });
+        }
+
+        function bindUser() {
+            var url = "/api/users/" + userId;
+            $.ajax({
+                type: "GET",
+                dataType: "json",
+                contentType: 'application/json',
+                url: url,
+                async: false,
+                processData:false,
+                success: function(response) {
+                    user = response;
+                },
+                error: app.ajaxError
+            });
+
+            if (user) {
+
+                // name
+                $('#profile-username').html(user.name);
+
+                // avatar
+                $('#profile-avatar').attr('src', context.JK.resolveAvatarUrl(user.photo_url));
+
+                // instruments
+                if (user.instruments) {
+                    for (var i=0; i < user.instruments.length; i++) {
+                        var instrument = user.instruments[i];
+                        var description = instrument.instrument_id;
+                        var proficiency = instrument.proficiency_level;
+                        var instrument_icon_url = context.JK.getInstrumentIcon45(description);
+
+                        // add instrument info to layout
+                        var template = $('#template-profile-instruments').html();
+                        var instrumentHtml = context.JK.fillTemplate(template, {
+                            instrument_logo_url: instrument_icon_url,
+                            instrument_description: description,
+                            proficiency_level: proficiencyDescriptionMap[proficiency],
+                            proficiency_level_css: proficiencyCssMap[proficiency]
+                        });
+
+                        $('#profile-instruments').append(instrumentHtml);
+                    }
+                }
+
+                // location
+                $('#profile-location').html(user.location);
+
+                // stats
+                var text = user.friend_count > 1 || user.friend_count == 0 ? " Friends" : " Friend";
+                $('#profile-friend-stats').html(user.friend_count + text);
+
+                text = user.follower_count > 1 || user.follower_count == 0 ? " Followers" : " Follower";
+                $('#profile-follower-stats').html(user.follower_count + text);
+
+                text = user.session_count > 1 || user.session_count == 0 ? " Sessions" : " Session";
+                $('#profile-session-stats').html(user.session_count + text);
+
+                text = user.recording_count > 1 || user.recording_count == 0 ? " Recordings" : " Recording";
+                $('#profile-recording-stats').html(user.recording_count + text);
+
+                //$('#profile-biography').html(user.biography);
+            }
+            else {
+
+            }
+        }
+
+        function initialize() {
+            var screenBindings = {
+                'beforeShow': beforeShow,
+                'afterShow': afterShow
+            };
+            app.bindScreen('profile', screenBindings);
+        }
+
+        this.initialize = initialize;
+        this.beforeShow = beforeShow;
+        this.afterShow = afterShow;
+        return this;
+    };
+
+ })(window,jQuery);

app/assets/javascripts/searchResults.js

@@ -38,6 +38,7 @@
 
         function onSearchSuccess(response) {
 
+            // TODO: generalize this for each search result type (band, musician, recordings, et. al.)
             $.each(response.musicians, function(index, val) {
                 // fill in template for Connect pre-click
                 var template = $('#template-search-result').html();
@@ -56,7 +57,7 @@
                 var invitationSentHtml = context.JK.fillTemplate(template, {
                     userId: val.id,
                     first_name: val.first_name,
-                    profile_url: "/users/" + val.id
+                    profile_url: "/#/profile/" + val.id
                 });
 
                 $('#search-results').append(invitationSentHtml);

app/assets/javascripts/sidebar.js

@@ -172,8 +172,9 @@
         }
 
         function onSearchSuccess(response) {
-            $.each(response.musicians, function(index, val) {
 
+            // TODO: generalize this for each search result type (band, musician, recordings, et. al.)
+            $.each(response.musicians, function(index, val) {
                 // fill in template for Connect pre-click
                 var template = $('#template-sidebar-search-result').html();
                 var searchResultHtml = context.JK.fillTemplate(template, {
@@ -190,7 +191,7 @@
                 var invitationSentHtml = context.JK.fillTemplate(template, {
                     userId: val.id,
                     first_name: val.first_name,
-                    profile_url: "/users/" + val.id
+                    profile_url: "/#/profile/" + val.id
                 });
 
                 $('#sidebar-search-results').append(invitationSentHtml);

app/assets/javascripts/utils.js

@@ -48,6 +48,14 @@
         return instrumentIconMap45;
     }
 
+    context.JK.getInstrumentIcon24 = function(instrument) {
+        return instrumentIconMap24[instrument];
+    }
+
+    context.JK.getInstrumentIcon45 = function(instrument) {
+        return instrumentIconMap45[instrument];
+    }
+
     context.JK.search = function(query, app, callback) {
         $.ajax({
             type: "GET",

app/assets/stylesheets/client/profile.css.scss

@@ -0,0 +1,144 @@
+@import "client/common.css.scss";
+
+.profile-header {
+    padding:20px;
+    height:120px;
+}
+
+.profile-header h2 {
+    font-weight:200;
+    font-size: 28px;
+    float:left;
+    margin: 0px 150px 0px 0px;
+}
+
+.profile-status {
+    font-size:12px;
+    float:left;
+    display:inline-block;
+    vertical-align:middle;
+    line-height:30px;
+}
+
+.profile-photo {
+    height: 95px;
+    width: 15%;
+    float:left;
+}
+
+.profile-nav {
+    width:85%;
+    position:relative;
+    float:right;
+    margin-right:-10px;
+}
+
+.profile-nav a {
+    width:19%;
+    text-align:center;
+    height: 27px;
+    display: block;
+    float:left;
+    margin-right:5px;
+    vertical-align:bottom;
+    padding-top:65px;
+    background-color:#535353;
+    color:#ccc;
+    font-size:17px;
+    text-decoration:none;
+}
+
+.profile-nav a:hover {
+    background-color:#666;
+    color:#fff;
+}
+
+.profile-nav a.active {
+    background-color:#ed3618;
+    color:#fff;
+}
+
+.profile-nav a.active:hover {
+    background-color:#ed3618;
+    cursor:default;
+}
+
+.profile-nav a.last {
+    margin-right:0px !important;
+}
+
+.avatar-profile {
+    float:left;
+    padding:2px;
+    width:88px;
+    height:88px;
+    background-color:#ed3618;
+    -webkit-border-radius:44px;
+    -moz-border-radius:44px;
+    border-radius:44px;
+}
+
+.avatar-profile img {
+    width:88px;
+    height:88px;
+    -webkit-border-radius:44px;
+    -moz-border-radius:44px;
+    border-radius:44px;
+}
+
+.profile-wrapper {
+    padding:10px 25px 10px 25px;
+    font-size:15px;
+    color:#ccc;
+    border-bottom: dotted 1px #444;
+    position:relative;
+    display:block;
+}
+
+.profile-about-left {
+    width:16%;
+    float:left;
+    font-size:13px;
+    line-height:140%;
+    display:block;
+}
+
+.profile-about-left h3 {
+    color:#fff;
+    margin-bottom:0px;
+    font-size:13px;
+    font-weight:bold;
+    display:inline;
+}
+
+.profile-about-right {
+    float:right;
+    font-size:13px;
+    width:84%;
+    line-height:140%;
+    display:block;
+}
+
+.profile-about-right .profile-instrument {
+    text-align:center;
+    margin-right:15px;
+    float:left;
+}
+
+.proficiency-beginner {
+    font-size:10px;
+    color:#8ea415;
+    font-weight:600;
+}
+
+.proficiency-intermediate {
+    font-size:10px;
+    color:#0b6672;
+    font-weight:600;
+}
+
+.proficiency-expert {
+    font-size:10px;
+    color:#ed3618;
+    font-weight:600;
+}

app/views/api_users/show.rabl

@@ -1,6 +1,6 @@
 object @user
 
-attributes :id, :first_name, :last_name, :name, :city, :state, :country, :online, :photo_url, :musician, :gender, :birth_date, :internet_service_provider, :friend_count, :liker_count, :like_count, :band_like_count, :follower_count, :following_count, :band_following_count, :favorite_count, :recording_count, :session_count
+attributes :id, :first_name, :last_name, :name, :city, :state, :country, :location, :online, :photo_url, :musician, :gender, :birth_date, :internet_service_provider, :friend_count, :liker_count, :like_count, :band_like_count, :follower_count, :following_count, :band_following_count, :favorite_count, :recording_count, :session_count
 
 unless @user.friends.nil? || @user.friends.size == 0
   child :friends => :friends do

app/views/clients/_profile.html.erb

@@ -1,13 +1,75 @@
 <!-- Profile -->
-<div layout="screen" layout-id="profile" class="screen secondary">
+<div layout="screen" layout-id="profile" layout-arg="id" class="screen secondary">
     <div class="content-head">
-        <!--
         <div class="content-icon">
-            <%= image_tag "shared/icon_session.png", {:height => 19, :width => 19} %>
+            <a><%= image_tag "content/icon_search.png", :size => "19x19" %></a>
         </div>
-        -->
-        <h1>profile</h1>
+
+        <h1>musician profile</h1>
+
         <%= render "screen_navigation" %>
     </div>
-    <p>TODO</p>
+    <form id="profile-form">
+        <div class="profile-header">
+
+            <!-- profile name -->
+            <h2 id="profile-username"></h2>
+
+            <!-- profile status -->
+            <div class="profile-status">
+            </div>
+
+            <!-- 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>
+            </div>
+            <br clear="all" /><br />
+
+            <!-- avatar -->
+            <div class="profile-photo">
+                <div class="avatar-profile">
+                    <img id="profile-avatar" width="200" height="200" />
+                </div>
+            </div>
+
+            <!-- profile navigation -->
+            <div class="profile-nav">
+                <a id="profile-about-link" class="active">about</a>
+                <a id="profile-history-link">history</a>
+                <a id="profile-bands-link">bands</a>
+                <a id="profile-social-link">social</a>
+                <a id="profile-favorites-link" class="last">favorites</a>
+            </div>
+        </div>
+        <br clear="all" />
+        <div id="content-scroller">
+            <div class="profile-wrapper">
+                <!-- stats & location -->
+                <div class="profile-about-left">
+                    <h3>Location:</h3><br />
+                    <span id="profile-location"></span><br /><br /><br />
+                    <h3>Stats:</h3><br />
+                    <span id="profile-friend-stats"></span><br />
+                    <span id="profile-follower-stats"></span><br />
+                    <span id="profile-session-stats"></span><br />
+                    <span id="profile-recording-stats"></span><br />
+                </div>
+                <div class="profile-about-right">
+                    <p id="profile-biography"></p><br />
+                    <div id="profile-instruments">
+                    </div>
+                </div>
+                <br clear="all" />
+            </div>
+        </div>
+    </form>
 </div>
+
+<script type="text/template" id="template-profile-instruments">
+    <div class="profile-instrument">
+        <img src={instrument_logo_url} width="70" height="70" /><br />
+        <span>{instrument_description}</span><br />
+        <span class="{proficiency_level_css}">{proficiency_level}</span>
+    </div>
+</script>

app/views/clients/index.html.erb

@@ -86,6 +86,9 @@
             var homeScreen = new JK.HomeScreen(JK.app);
             homeScreen.initialize();
 
+            var profileScreen = new JK.ProfileScreen(JK.app);
+            profileScreen.initialize();
+
             var searchResultScreen = new JK.SearchResultScreen(JK.app);
             searchResultScreen.initialize();
 

app/views/layouts/client.html.erb

@@ -16,6 +16,7 @@
     <%= stylesheet_link_tag    "client/dialog", media: "all" %>
     <%= stylesheet_link_tag    "client/sidebar", media: "all" %>
     <%= stylesheet_link_tag    "client/home", media: "all" %>
+    <%= stylesheet_link_tag    "client/profile", media: "all" %>
     <%= stylesheet_link_tag    "client/findSession", media: "all" %>
     <%= stylesheet_link_tag    "client/session", media: "all" %>
     <%= stylesheet_link_tag    "client/search", media: "all" %>