social_networking 0.9.3

data/app/views/social_networking/coach/patient_dashboards/tables/_on_my_mind_statements.html.erb

@@ -0,0 +1,62 @@
+<div class="panel panel-default cdb_panel" id="on-my-mind-container">
+  <div class="panel-heading">
+    <h3 class="panel-title adjusted-panel-title">
+      <a data-toggle="collapse" data-parent="#accordion" href="#on-my-mindCollapse">
+        On-My-Mind Statements
+      </a>
+    </h3>
+  </div>
+
+  <div id="on-my-mindCollapse" class="panel-collapse collapse in">
+    <div class="panel-body">
+      <div class="table-responsive div-table-viz">
+        <table class="table table-hover data-table" id="on-my-mind_data">
+          <thead>
+          <tr>
+            <th class="not-displayed"></th>
+            <th>Description</th>
+            <th>Created</th>
+            <th>Week</th>
+            <th>Likes</th>
+            <th>Comments</th>
+          </tr>
+          </thead>
+          <tbody>
+
+          <% membership.on_the_minds.each do |statement| %>
+
+            <tr>
+              <td class="not-displayed">
+                <%= statement.created_at.to_i %>
+              </td>
+              <td><%= statement.description %></td>
+              <td><%= statement.created_at.to_s(:standard) %></td>
+              <td><%= week_in_study(statement.created_at, membership) %></td>
+              <td><%= statement.likes.count %></td>
+              <td><%= statement.comments.count %></td>
+            </tr>
+          <% end %>
+
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  $(function () {
+    return $('#on-my-mind_data').dataTable({
+      order: [[0, "desc"]],
+      columnDefs: [
+        {
+          targets: [0],
+          visible: false
+        },
+        {
+          targets: [3],
+          iDataSort: [0]
+        }
+      ]
+    });
+  });
+</script>

data/app/views/social_networking/coach/patient_dashboards/tables/_social_summary_totals.html.erb

@@ -0,0 +1,39 @@
+<table id="<%= @participant.id %>-social-summary-totals" class="table table-hover">
+  <thead>
+    <tr>
+      <th>Social Activity</th><th>Today</th><th>Last 7 Days</th><th>Totals</th>
+    </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td><a href="#likesCollapse">Likes</a></td>
+    <td><%= membership.likes.for_today.count %></td>
+    <td><%= membership.likes.for_week.count %></td>
+    <td><%= membership.likes.count %></td>
+  </tr>
+  <tr>
+    <td><a href="#nudges-initiated">Nudges</a></td>
+    <td><%= membership.nudges.for_today.count %></td>
+    <td><%= membership.nudges.for_week.count %></td>
+    <td><%= membership.nudges.count %></td>
+  </tr>
+  <tr>
+    <td><a href="#commentsCollapse">Comments</a></td>
+    <td><%= membership.comments.for_today.count %></td>
+    <td><%= membership.comments.for_week.count %></td>
+    <td><%= membership.comments.count %></td>
+  </tr>
+  <tr>
+    <td><a href="#goalsCollapse">Goals</a></td>
+    <td><%= membership.goals.for_today.count %></td>
+    <td><%= membership.goals.for_week.count %></td>
+    <td><%= membership.goals.count %></td>
+  </tr>
+  <tr>
+    <td><a href="#on-my-mindCollapse">"On My Mind" Statements</a></td>
+    <td><%= membership.on_the_minds.for_today.count %></td>
+    <td><%= membership.on_the_minds.for_week.count %></td>
+    <td><%= membership.on_the_minds.count %></td>
+  </tr>
+  </tbody>
+</table>

data/app/views/social_networking/coach/patient_dashboards/tables/nudges/_initiator_nudges.html.erb

@@ -0,0 +1,22 @@
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <h3 class="panel-title">Nudges Initiated</h3>
+  </div>
+
+  <table id="nudges-initiated" class="table">
+    <thead>
+      <tr>
+        <th>Sent At</th>
+        <th>Sent To</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% nudges.each do |nudge| %>
+        <tr>
+          <td><%= nudge.created_at.to_s(:standard) %></td>
+          <td><%= nudge.recipient.study_id %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/social_networking/coach/patient_dashboards/tables/nudges/_nudges.html.erb

@@ -0,0 +1,5 @@
+<a name="nudges"></a>
+
+<%= render "social_networking/coach/patient_dashboards/tables/nudges/initiator_nudges", nudges: patient.initiator_nudges %>
+
+<%= render "social_networking/coach/patient_dashboards/tables/nudges/recipient_nudges", nudges: patient.recipient_nudges %>

data/app/views/social_networking/coach/patient_dashboards/tables/nudges/_recipient_nudges.html.erb

@@ -0,0 +1,22 @@
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <h3 class="panel-title">Nudges Received</h3>
+  </div>
+
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Received At</th>
+        <th>Sent By</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% nudges.each do |nudge| %>
+        <tr>
+          <td><%= nudge.created_at.to_s(:standard) %></td>
+          <td><%= nudge.initiator.study_id %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/social_networking/goals/tool.html.erb

@@ -0,0 +1,116 @@
+<div ng-controller="GoalCtrl as goal">
+  <div class="row hidden-xs">
+    <div class="col-sm-3 col-md-3 col-lg-3">
+      <button class="btn btn-default" ng-click="goal.new()" ng-show="goal.inBrowseMode()">+ add a goal</button>
+    </div>
+
+    <div class="col-sm-9 col-md-9 col-lg-9">
+      <ul class="nav nav-tabs" role="tablist" ng-show="goal.inBrowseMode()">
+        <li ng-class="goal.getTab() === 'all' ? 'active' : ''"><a href="" ng-click="goal.setFilter('all'); goal.setTab('all')">All</a></li>
+        <li ng-class="goal.getTab() === 'completed' ? 'active' : ''"><a href="" ng-click="goal.setFilter('completed'); goal.setTab('completed')">Completed</a></li>
+        <li ng-class="goal.getTab() === 'deleted' ? 'active' : ''"><a href="" ng-click="goal.setFilter('deleted'); goal.setTab('deleted')">Deleted</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <button type="button" class="btn btn-link" id="help-pop" data-trigger="focus" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<p>The ACHIEVE tool helps you set goals.</p>
+  <p>When you are writing your goal, be sure to consider the following:</p>
+<ol>
+  <li>What is the specific thing you will do?</li>
+  <li>Where will you do it?</li>
+  <li>When will you do it?</li>
+  <li>How much and how often?</li>
+</ol>
+<p>Remember that SMART goals tend to be the most helpful: Specific (the What), Measurable (helps you track your progress), Attainable (something you believe you can do), Relevant (i.e., meaningful to you, not something other people want you to do), and Time-framed.
+<p>For example, let’s say you want to work toward being less stressed. You might start with a goal to do more calming activities each week. From there, you can make your goal even more helpful by adding in the details: what the specific calming activities will be, where you’ll do them, when, how much and how often. You would then write “I will listen to (WHAT) at least 3 calming songs (HOW MUCH) every evening (HOW OFTEN) after dinner (WHEN) on the couch (WHERE).">
+      Need some help writing a goal?
+  </button>
+
+  <form novalidate role="form" name="goalForm" class="row" ng-show="goal.inEntryMode()">
+    <input type="hidden" ng-model="goal.goalModel.id" ng-if="goal.goalModel.id !== null">
+
+    <div class="form-group col-lg-8 col-md-8">
+      <label for="new-goal-description">What is your goal?</label>
+      <input type="text" class="form-control" id="new-goal-description" ng-model="goal.goalModel.description" ng-maxlength="255" required focus-on="new-goal">
+    </div>
+
+    <div class="form-group col-lg-8 col-md-8">
+      <label>When do you want it completed?</label>
+      <div class="radio">
+        <label>
+          <input type="radio" name="due-on" ng-model="goal.goalModel.dueOn" value=""> no specific date
+        </label>
+      </div>
+      <div class="radio" ng-if="goal.atLeastNWeeksLeftInTrial(1)">
+        <label>
+          <input type="radio" name="due-on" ng-model="goal.goalModel.dueOn" value="{{ goal.dateInNWeeks(1) }}"> end of one week
+        </label>
+      </div>
+      <div class="radio" ng-if="goal.atLeastNWeeksLeftInTrial(2)">
+        <label>
+          <input type="radio" name="due-on" ng-model="goal.goalModel.dueOn" id="due-in-2-weeks" value="{{ goal.dateInNWeeks(2) }}"> end of 2 weeks
+        </label>
+      </div>
+      <div class="radio" ng-if="goal.atLeastNWeeksLeftInTrial(4)">
+        <label>
+          <input type="radio" name="due-on" ng-model="goal.goalModel.dueOn" value="{{ goal.dateInNWeeks(4) }}"> end of 4 weeks
+        </label>
+      </div>
+      <div class="radio" ng-if="goal.dateAtEndOfTrial() !== null">
+        <label>
+          <input type="radio" name="due-on" ng-model="goal.goalModel.dueOn" value="{{ goal.dateAtEndOfTrial() }}"> end of study
+        </label>
+      </div>
+    </div>
+
+    <div class="form-group col-lg-8 col-md-8">
+      <button class="btn btn-primary" ng-click="goal.save()" ng-disabled="goalForm.$invalid">Save</button>
+      <button class="btn btn-default" ng-click="goal.resetForm()">Cancel</button>
+    </div>
+  </form>
+
+  <ul class="list-group" ng-show="goal.inBrowseMode()">
+    <li ng-repeat="participantGoal in goal.participantGoals | filter:goal.getFilter() | orderBy:'isCompleted'"
+        class="list-group-item"
+        id="goal-{{ participantGoal.id }}"
+        ng-class="participantGoal.isCompleted ? 'list-group-item-success' : ''">
+      <p>
+        {{ participantGoal.description }}
+        <span class="text-muted pull-right">
+          Due: {{ participantGoal.dueOn ? participantGoal.dueOn : 'no date given' }}
+        </span>
+      </p>
+
+      <div>
+        <button class="btn btn-default complete" ng-click="goal.toggleComplete(participantGoal)" ng-if="!participantGoal.isDeleted && !participantGoal.isCompleted">
+          Complete
+        </button>
+        <button ng-if="!participantGoal.isDeleted && !participantGoal.isCompleted" class="btn btn-link edit" ng-click="goal.edit(participantGoal)"><i class="fa fa-pencil fa-2x"></i></button>
+        <button ng-if="!participantGoal.isDeleted && !participantGoal.isCompleted" class="btn btn-link delete" ng-click="goal.toggleDeleted(participantGoal)"><i class="fa fa-trash text-danger fa-2x"></i></button>
+      </div>
+    </li>
+  </ul>
+</div>
+
+<% content_for(:bottom) do %>
+  <div ng-controller="GoalCtrl as goal">
+    <nav class="navbar navbar-default navbar-fixed-bottom visible-xs-block" role="navigation" ng-show="goal.inBrowseMode()">
+      <div class="container">
+        <div class="row">
+          <div class="col-xs-2"><button class="btn btn-link" ng-click="goal.new()">+</button></div>
+          <div class="col-xs-2" ng-class="goal.getTab() === 'all' ? 'active' : ''" ng-click="goal.setFilter('all'); goal.setTab('all')"><button class="btn btn-link">All</button></div>
+          <div class="col-xs-4" ng-class="goal.getTab() === 'completed' ? 'active' : ''" ng-click="goal.setFilter('completed'); goal.setTab('completed')"><button class="btn btn-link">Completed</button></div>
+          <div class="col-xs-4" ng-class="goal.getTab() === 'deleted' ? 'active' : ''" ng-click="goal.setFilter('deleted'); goal.setTab('deleted')"><button class="btn btn-link">Deleted</button></div>
+        </div>
+      </div>
+    </nav>
+  </div>
+<% end %>
+
+<!-- bootstrap Angular app with current participant study end date -->
+<script>
+  angular.module('socialNetworking.values').value('participantStudyEndDate', '<%= current_participant.active_membership_end_date %>');
+  angular.module('socialNetworking.values').value('currentGoals', <%= goals.to_json.html_safe %>);
+  angular.module('socialNetworking.values').value('noticesEnabled', <%= Rails.configuration.enable_notices %>);
+  angular.module('socialNetworking.values').value('noticeUtility', Notice);
+</script>

data/app/views/social_networking/homes/_action_items.html.erb

@@ -0,0 +1,13 @@
+<div class="panel panel-default" ng-if="home.inFeedBrowseMode()">
+  <div class="panel-heading">
+    <h3 class="panel-title">To Do</h3>
+  </div>
+  <div class="panel-body" ng-if="home.actionItems.length === 0">
+    <p class="text-info">You are all caught up! Great work!</p>
+  </div>
+  <ul class="list-group" ng-if="home.inFeedBrowseMode()">
+    <li class="list-group-item" ng-repeat="item in home.actionItems">
+      <a data-no-turbolink="true" ng-click="home.taskVisited(item)" href="{{ item.link }}">{{ item.label }}</a>
+    </li>
+  </ul>
+</div>

data/app/views/social_networking/homes/show.html.erb

@@ -0,0 +1,64 @@
+<div ng-controller="HomeCtrl as home" ng-cloak>
+  <div class="row hidden-xs hidden-sm">
+    <div ng-controller="ProfilesCtrl as profiles">
+      <div ng-repeat="profile in profiles.members">
+        <div ng-if="!profile.isWoz" class="col-xs-12 col-md-4 text-center">
+          <div class="profile-border profile-icon-top">
+            <p>
+              <a href="<%= profile_path %>/{{ profile.id }}" data-no-turbolink="true">
+                <div><img ng-src="{{ profile.iconSrc }}"></div>
+                <div>{{ profile.username }}</div>
+              </a>
+            </p>
+          </div>
+
+          <div class="profile-border profile-last-seen">
+            <p ng-class="profile.isAdmin ? 'invisible' : ''">
+              Last seen: {{ profile.latestAction | timeFromNow }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <ul class="list-group profile-icon-top" ng-show="home.inFeedBrowseMode()">
+    <li class="list-group-item">
+      <button class="btn-link faded" ng-click="home.newOnYourMindStatement()">What's on your mind?</button>
+    </li>
+  </ul>
+  <form novalidate role="form" name="onYourMindForm" class="row" ng-show="home.inOnYourMindEntryMode()">
+    <div class="form-group col-lg-8 col-md-8">
+      <label for="new-on-your-mind-description">What's on your mind?</label>
+      <input type="text" class="form-control" id="new-on-your-mind-description" ng-model="home.onYourMindModel.description" ng-maxlength="255" required focus-on="new-goal">
+    </div>
+
+    <div class="form-group col-lg-8 col-md-8">
+      <button class="btn btn-primary" ng-click="home.saveOnYourMind()" ng-disabled="onYourMindForm.$invalid">Save</button>
+      <button class="btn btn-default" ng-click="home.cancelOnYourMindEntryMode()">Cancel</button>
+    </div>
+  </form>
+
+  <%= render "social_networking/homes/action_items" %>
+  <ul class="list-group"
+    id="infinite-feed"
+    infinite-scroll="home.getMore()"
+    infinite-scroll-immediate-check="true"
+    infinite-scroll-disabled="false">
+    <%= render "social_networking/shared/infinite_feed" %>
+  </ul>
+
+  <div ng-repeat="profile in home.memberProfiles">
+    <div profile-status></div>
+  </div>
+</div>
+
+<script>
+  angular.module('socialNetworking.values')
+    .value('participantId', <%= current_participant.id %>)
+    .value('actionItems', <%= action_items.to_json.html_safe %>)
+    .value('feedItems', <%= feed_items.to_json.html_safe %>)
+    .value('memberProfiles', <%= member_profiles.to_json.html_safe %>)
+    .value('noticesEnabled', <%= Rails.configuration.enable_notices %>)
+    .value('noticeUtility', Notice)
+    .value('resource', 'shared_items');
+</script>

data/app/views/social_networking/mailer/notify.html.erb

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
+</head>
+<body>
+<p>
+  <%= @message_body %>
+</p>
+</body>
+</html>

data/app/views/social_networking/profile_pages/_profile_questions.html.erb

@@ -0,0 +1,79 @@
+<% panel_class = panel_class || "default" %>
+<% if current_participant.id == @profile.participant_id %>
+  <% unless @nudging_display_names.empty? %>
+    <div class="alert alert-info">
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+        <span class="sr-only">Close</span>
+      </button>
+      <%= @nudging_display_names.to_sentence %> nudged you!
+    </div>
+  <% end %>
+  <div ng-controller="ProfileQuestionsCtrl as profileQuestions">
+    <div ng-controller="ProfileAnswerCtrl as answer">
+      <h3 ng-hide="answer.ifAnswered(profileQuestions.questions)">
+        Fill out your profile so other group members can get to know you!
+      </h3>
+      <div class="panel panel-<%= panel_class %>">
+        <div class="panel-heading">
+          <strong class="panel-title">Profile</strong>
+        </div>
+        <div class="panel-body">
+          <div ng-repeat="question in profileQuestions.questions | orderBy:'order'"
+               class="panel panel-<%= panel_class %>"
+               id="question-{{ question.id }}"
+               ng-init="answer.storeAnswer(<%= @profile.id %>, question.id, answer)">
+            <div class="panel-heading">
+              <label class="panel-title" for="new-answer-description-{{ question.id }}">
+                {{ question.question_text }}
+              </label>
+            </div>
+            <div class="panel-body">
+              <form novalidate role="form" name="answerForm" class="row" ng-show="answer._answerStates[question.id].editable">
+                <input type="hidden" name="profile_question_id" value="{{ question.id }}" ng-if="answer.answerModels[question.id].id === null">
+                <input type="hidden" name="profile_id" value="<%= @profile.id %>" ng-if="answer.answerModels[question.id].id === null">
+                <input type="hidden" name="id" ng-if="answer.answerModels[question.id].id !== null">
+
+                <div class="form-group col-lg-8 col-md-8">
+                  <input type="text" class="form-control" id="new-answer-description-{{question.id}}" ng-model="answer.answerModels[question.id].answer_text" ng-maxlength="255">
+                </div>
+
+                <div class="form-group col-lg-8 col-md-8">
+                  <button class="btn btn-primary" ng-click="answer.save(<%= @profile.id %>, question.id, answer)">Save</button>
+                </div>
+              </form>
+            <div ng-show="!answer._answerStates[question.id].editable">
+              <div class="media-body media-middle">
+                <span>
+                  {{ answer.answerModels[question.id].answer_text }}
+                </span>
+              </div>
+
+              <div class="form-group media-right media-middle">
+                <button class="btn btn-link edit" ng-click="answer.edit(question.id)"><i class="fa fa-pencil"></i></button>
+              </div>
+            </div>
+          </div>
+        </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <div ng-controller="ProfileQuestionsCtrl as profileQuestions">
+    <div ng-controller="ProfileAnswerCtrl as answer">
+      <div class="panel panel-<%= panel_class %>">
+        <div class="panel-heading"><strong class="panel-title">Profile</strong></div>
+        <div class="panel-body">
+          <div ng-repeat="question in profileQuestions.questions | orderBy:'order'" class="panel panel-<%= panel_class %>" ng-init="answer.storeAnswer(<%= @profile.id %>, question.id, answer)">
+            <div class="panel-heading"><strong class="panel-title">{{ question.question_text }}</strong></div>
+
+            <div class="panel-body">
+              {{ answer.answerModels[question.id].answer_text }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/social_networking/profile_pages/index.html.erb

@@ -0,0 +1,27 @@
+<div ng-controller="ProfilesCtrl as profiles" ng-cloak>
+  <div ng-repeat="profile in profiles.members">
+    <div class="row profile-participant">
+      <p>
+        User: 
+        <a href="<%= social_networking_profile_path %>/{{ profile.id }}" data-no-turbolink="true">
+        <img ng-src="{{ profile.iconSrc }}">
+          {{ profile.username }}
+        </a>
+      </p>
+      <p ng-class="profile.isAdmin ? 'invisible' : ''">
+        Last seen: {{ profile.latestAction | timeFromNow }}
+      </p>
+    </div>
+    <dl>
+      <dt ng-repeat-start="r in profile.responses">{{ r.question }}</dt>
+      <dd ng-repeat-end>{{ r.text }}</dd>
+    </dl>
+  </div>
+</div>
+
+<!-- bootstrap Angular app with current participant id -->
+<script>
+  angular.module('socialNetworking')
+    .value('participantId', <%= current_participant.id %>)
+    .value('profileId', <%= @profile.id %>);
+</script>

data/app/views/social_networking/profile_pages/show.html.erb

@@ -0,0 +1,106 @@
+<div ng-controller="ProfileCtrl as profile" ng-cloak>
+  <div class="modal-container">
+    <div class="modal fade" id="profile-icon-selection" tabindex="-1" role="dialog" aria-labelledby="icon-modal" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h3 id="icon-modal">
+              <div ng-if="<%=@profile.icon_name.nil?%>">Start creating your profile by choosing a profile icon:</div>
+              <div ng-if="<%=!@profile.icon_name.nil?%>">Choose a new profile icon:</div>
+            </h3>
+            <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true" id="icon-selection-button">×</button>
+          </div>
+
+          <div class="modal-body">
+            <% @profile_icons.each_with_index do |icon_name, index| %>
+              <% if 0 == index % 6 %><div class="row"><% end %>
+              <div ng-click="profile.updateProfileIcon('<%= icon_name %>')" class="col-lg-2 col-sm-4 col-xs-4 text-center icon-selection">
+                <%= image_tag 'social_networking/profile_icon_'+ icon_name +'.png' %>
+              </div>
+              <% if 5 == index % 6 || index + 1 == @profile_icons.size %></div><% end %>
+            <% end %>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="text-center" id="profile-box">
+    <div class="profile-box-content profile-box-border">
+      <% if current_participant.id == @profile.participant_id %>
+        <a href="" data-toggle="modal" data-target="#profile-icon-selection" id="profile-icon-selector">
+      <% end %>
+
+      <img ng-src="{{ profile.profile.iconSrc }}" id="profile-icon">
+
+      <% if current_participant.id == @profile.participant_id %>
+        </a>
+      <% end %>
+
+      <div class="profiles-username">
+        <h3>{{ profile.profile.username }}</h3>
+      </div>
+    </div>
+
+    <div class="profiles-last-online profile-box-border">
+      <h3 ng-class="profile.profile.isAdmin ? 'invisible' : ''">
+        Last seen: {{ profile.profile.latestAction | timeFromNow }}
+      </h3>
+    </div>
+
+    <% if current_participant.id != @profile.participant_id %>
+      <div class="profiles-nudge profile-box-border well well-lg">
+        <a class="btn btn-lg btn-primary" href="" id="nudge-link" ng-click="profile.nudge(<%= @profile.participant_id %>)">Nudge</a>
+        <br><span>{{ profile.nudgeAlert }}</span>
+      </div>
+    <% end %>
+  </div>
+
+  <div ng-repeat="alert in profile.getAlerts()" class="alert {{alert.cssClass}}">
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close" ng-click="profile.removeAlert(alert)">
+      <span aria-hidden="true">&times;</span>
+      <span class="sr-only">Close</span>
+    </button>
+    {{alert.message}}
+  </div>
+</div>
+
+<%= render partial: "profile_questions", locals: { nudging_display_names: @nudging_display_names } %>
+
+<div ng-controller="HomeCtrl as home">
+  <%= render "social_networking/shared/comment_form" %>
+  <ul class="list-group"
+    id="infinite-feed"
+    infinite-scroll="home.getMore()"
+    infinite-scroll-immediate-check="true"
+    infinite-scroll-disabled="false">
+    <%= render "social_networking/shared/infinite_feed" %>
+  </ul>
+</div>
+
+<form accept-charset="UTF-8" action="/social_networking/profile_icons" id="icon_change" method="post">
+  <input id="profile_id" name="profile[profile_id]" type="hidden" value="<%= @profile.id %>"/>
+  <input id="icon_name" name="profile[icon_name]" type="hidden" value="<%= @profile.icon_name %>"/>
+</form>
+
+<script>
+  angular.module('socialNetworking')
+          .value('participantId', <%= @profile.participant_id %>)
+          .value('profileId', <%= @profile.id %>)
+          .value('ProfileQuestions', <%= @profile_questions.to_json.html_safe %>)
+          .value('actionItems', [])
+          .value('memberProfiles', <%= @member_profiles.to_json.html_safe %>)
+          .value('feedItems', [])
+          .value('noticesEnabled', <%= Rails.configuration.enable_notices %>)
+          .value('noticeUtility', Notice)
+          .value('resource', 'profiles_page');
+
+  function displayProfileIcons() {
+    if (<%= @profile.participant_id == current_participant.id %> && <%= @profile.icon_name.nil? %>) {
+      $('#profile-icon-selection').modal('show');
+    }
+  }
+
+  $(document).on("page:change", displayProfileIcons);
+</script>

data/app/views/social_networking/shared/_comment_form.html.erb

@@ -0,0 +1,25 @@
+<form novalidate role="form" name="commentOnForm" ng-show="home.inCommentOnMode()">
+  <ul class="list-group">
+    <li class="list-group-item">
+      <p><img class="feed-participant-icon" ng-src="{{ home.profileIconSrcFor(home.getSelectedItem()) }}"> {{ home.getSelectedItem().summary }}</p>
+    </li>
+  </ul>
+
+  <div class="form-group col-lg-8 col-md-8">
+    <label for="comment-text">What do you think?</label>
+    <input type="text" class="form-control" id="comment-text" ng-model="home.commentModel.text" ng-maxlength="255" required focus-on="new-comment">
+  </div>
+
+  <div class="form-group col-lg-8 col-md-8">
+    <button class="btn btn-primary" ng-click="home.saveComment()" ng-disabled="commentOnForm.$invalid">Save</button>
+    <button class="btn btn-default" ng-click="home.cancelCommentOnMode()">Cancel</button>
+  </div>
+
+  <div class="form-group col-lg-8 col-md-8">
+    <ul class="list-group" ng-show="home.getSelectedItem().comments.length > 0">
+      <li class="list-group-item">
+        <p class="comment text-muted" ng-repeat="comment in home.getSelectedItem().comments"><img class="feed-participant-icon" ng-src="{{ home.profileIconSrcFor(comment) }}">: <span class="text-info">{{ comment.text }}</span></p>
+      </li>
+    </ul>
+  </div>
+</form>