Merge pull request #6 from elixirschool/mts/track_points

Track user estimates

Author: doomspork

assets/js/socket.js

@@ -1,25 +1,24 @@
-import {Socket, Presence} from 'phoenix'
+import { Socket, Presence } from 'phoenix'
+import updateUsers  from './users'
 
 const socket = new Socket('/socket', {params: {username: window.pointingParty.username}})
 socket.connect()
 
 const channel = socket.channel('room:lobby', {})
 const presence = new Presence(channel)
 
-presence.onSync(() => {
-  const users = document.querySelector('.users')
-  users.innerHTML = ''
+presence.onSync(() => updateUsers(presence))
 
-  presence.list((id, _) => {
-    const user = document.createElement('li')
-    user.setAttribute('class', id)
-    user.appendChild(document.createTextNode(id))
-    users.appendChild(user)
-  })
-})
+if (window.pointingParty.username) {
+  channel.join ()
+    .receive('ok', resp => { console.log('Joined successfully', resp) })
+    .receive('error', resp => { console.log('Unable to join', resp) })
+}
 
-channel.join()
-  .receive('ok', resp => { console.log('Joined successfully', resp) })
-  .receive('error', resp => { console.log('Unable to join', resp) })
+const calculateButton = document.querySelector('.calculate-points')
+calculateButton.addEventListener('click', event => {
+  const storyPoints = document.querySelector('.story-points')
+  channel.push('user_estimated', { points: storyPoints.value })
+})
 
 export default socket

assets/js/users.js

@@ -0,0 +1,40 @@
+import { forEach, isNil, map, none } from 'ramda'
+
+const updateUsers = presence => {
+  const usersElem = document.querySelector('.users')
+  usersElem.innerHTML = ''
+
+  const users = presence.list(userData)
+  forEach(addUser(usersElem))(users)
+
+  if (allHaveEstimated(users)) {
+    forEach(showPoints(usersElem))(users)
+  }
+}
+
+const userData = (userId, { metas: [{ points }, ..._rest]}) => ({ userId, points })
+
+const showPoints = usersElem => ({userId, points}) => {
+  const userElem = document.querySelector(`.${userId}.user-estimate`)
+  userElem.innerHTML = points
+}
+
+const addUser = usersElem => ({userId, points}) => {
+  const userElem = document.createElement('dt')
+  userElem.appendChild(document.createTextNode(userId))
+  userElem.setAttribute('class', 'col-8')
+
+  const estimateElem = document.createElement('dd')
+  estimateElem.setAttribute('class', `${userId} user-estimate col-4`)
+
+  usersElem.appendChild(userElem)
+  usersElem.appendChild(estimateElem)
+}
+
+const allHaveEstimated = users => {
+  const pointsCollection = map(({ points }) => points)(users)
+
+  return none(isNil)(pointsCollection)
+}
+
+export default updateUsers

assets/package-lock.json

@@ -6,6 +6,7 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
+    "ramda": "^0.26.1",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html"
   },

assets/package.json

@@ -15,4 +15,10 @@ defmodule PointingPartyWeb.RoomChannel do
 
     {:noreply, socket}
   end
+
+  def handle_in("user_estimated", %{"points" => points}, socket) do
+    Presence.update(socket, socket.assigns.username, &(Map.put(&1, :points, points)))
+
+    {:noreply, socket}
+  end
 end

lib/pointing_party_web/channels/room_channel.ex

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-10">
+  <div class="col-10">
     <div class="card text-left">
       <div class="card-header">
         <h2><%= @card.title %></h2>
@@ -9,20 +9,16 @@
         <div class="form-group text-left">
           <div class="form-row align-items-center">
             <div class="col-2">
-              <label for="storyPoints">Story Points</label>
-              <select class="form-control" id="storyPoints">
+              <label for="story-points">Story Points</label>
+              <select class="form-control story-points" id="story-points">
                 <%= Enum.map(@points, fn point ->  %>
-                  <%= if @card.points == point do %>
-                    <option selected="selected'"><%= point %></option>
-                  <% else %>
-                    <option><%= point %></option>
-                  <% end %>
+                  <option><%= point %></option>
                 <% end) %>
               </select>
             </div>
           </div>
       </div>
-        <a href="#" class="btn btn-primary">Calculate Points</a>
+        <a href="#" class="btn btn-primary calculate-points">Calculate Points</a>
       </div>
 
       <div class="card-footer text-muted">
@@ -31,9 +27,9 @@
     </div>
   </div>
 
-  <div class="col-md-2">
+  <div class="col-2">
     <h2>Users</h2>
-    <ul class="users">
-    </ul>
+    <dl class="row users">
+    </dl>
   </div>
 </div>