Broadcast estimates

Author: michaelstalker

assets/js/socket.js

@@ -14,12 +14,31 @@ presence.onSync(() => {
     const user = document.createElement('li')
     user.setAttribute('class', id)
     user.appendChild(document.createTextNode(id))
+
+    const estimate = document.createElement('span')
+    estimate.setAttribute('class', 'user-estimate')
+    user.appendChild(estimate)
+
     users.appendChild(user)
   })
 })
 
-channel.join()
-  .receive('ok', resp => { console.log('Joined successfully', resp) })
-  .receive('error', resp => { console.log('Unable to join', resp) })
+if (window.pointingParty.username) {
+  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 })
+})
+
+
+channel.on("user_estimated", ({ points, userId }) => {
+  const user = document.querySelector(`.${userId} .user-estimate`)
+  user.innerHTML = points
+})
 
 export default socket

lib/pointing_party_web/channels/room_channel.ex

@@ -15,4 +15,10 @@ defmodule PointingPartyWeb.RoomChannel do
 
     {:noreply, socket}
   end
+
+  def handle_in("user_estimated", %{"points" => points}, socket) do
+    broadcast!(socket, "user_estimated", %{points: points, userId: socket.assigns.username})
+
+    {:noreply, socket}
+  end
 end

lib/pointing_party_web/templates/card/index.html.eex

@@ -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">