Added working version of SignalR poll, asking user about project temp…

…late choices

experimental/NetLearner.SignalRPoll/Hubs/PollHub.cs

@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.SignalR;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace NetLearner.SignalRPoll.Hubs
+{
+    public class PollHub : Hub
+    {
+        public async Task SendMessage(string user, string message, string myProjectId, string myProjectVal)
+        {
+            await Clients.All.SendAsync("ReceiveMessage", user, message, myProjectId, myProjectVal);
+        }
+    }
+}

experimental/NetLearner.SignalRPoll/Pages/Poll/Index.cshtml

@@ -0,0 +1,43 @@
+@page
+<div class="container">
+    <div class="row">
+        <div class="col-6">
+            User: <input type="text" id="userInput" />
+            <!--
+                <br />
+                Message...<input type="text" id="messageInput" />
+            -->
+        </div>
+        <div class="col-6">&nbsp;</div>
+    </div>
+    <div class="row">POLL: Which ASP .NET Core web project template do you prefer?&nbsp;</div>
+    <div class="row">
+        <div class="col-12">
+            <!-- input type="radio" name="group1" id="r1" value="1" /><label for="r1"> button one</label>-->
+
+            <input type="radio" name="myProject" id="webmvc" value="MVC (Model-View-Controller)" />
+            <label for="webmvc">MVC (Model-View-Controller)</label>
+            <br /><span id="webmvcBlock"></span><br />
+            <input type="radio" name="myProject" id="webpages" value="Razor Pages" />
+            <label for="webpages">Razor Pages</label>
+            <br /><span id="webpagesBlock"></span><br />
+            <input type="radio" name="myProject" id="webBlazor" value="Blazor" />
+            <label for="webBlazor">Blazor</label>
+            <br /><span id="webBlazorBlock"></span><br />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12">
+            <input type="button" id="sendButton" value="Vote Now" />
+            <hr />
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12">
+            <ul id="messagesList"></ul>
+        </div>
+    </div>
+</div>
+<script src="~/lib/jquery/dist/jquery.js"></script>
+<script src="~/js/signalr/dist/browser/signalr.js"></script>
+<script src="~/js/poll.js"></script>

experimental/NetLearner.SignalRPoll/Pages/Shared/_Layout.cshtml

@@ -24,6 +24,9 @@
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-page="/Chat/Index">Chat</a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link text-dark" asp-area="" asp-page="/Poll/Index">Poll</a>
+                        </li>
                     </ul>
                 </div>
             </div>

experimental/NetLearner.SignalRPoll/Startup.cs

@@ -53,6 +53,7 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             {
                 endpoints.MapRazorPages();
                 endpoints.MapHub<ChatHub>("/chatHub");
+                endpoints.MapHub<PollHub>("/pollHub");
             });
         }
     }

experimental/NetLearner.SignalRPoll/wwwroot/js/poll.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var connection = new signalR.HubConnectionBuilder().withUrl("/pollHub").build();
+var chartBlock = '\u25A3'; //(U+25A3) is "▣" 
+
+connection.on("ReceiveMessage", function (user, message, myProjectId, myProjectVal) {
+    // alert("myProjectId=" + myProjectId + ",myProjectVal=" + myProjectVal);
+    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    // var encodedMsg = user + " says " + msg;
+    var pollResultMsg = user + " voted for '" + myProjectVal + "'.";
+
+    // var liMessage = document.createElement("li");
+    // liMessage.textContent = encodedMsg;
+    // document.getElementById("messagesList").appendChild(liMessage);
+
+    var ulPoll = document.getElementById("messagesList");
+    var liPollResult = document.createElement("li");
+    liPollResult.textContent = pollResultMsg;
+
+    // append to top
+    ulPoll.insertBefore(liPollResult, ulPoll.childNodes[0]);
+
+    // append to end
+    // document.getElementById("messagesList").appendChild(liPollResult);
+
+    // append to chart block
+    document.getElementById(myProjectId + 'Block').innerHTML += chartBlock;
+});
+
+connection.start().catch(function (err) {
+    return console.error(err.toString());
+});
+
+document.getElementById("sendButton").addEventListener("click", function (event) {
+    var user = document.getElementById("userInput").value;
+    var message = ""; //document.getElementById("messageInput").value;
+    //var myProject = document.getElementById("myProject").value;
+
+    if (!user) {
+        user = "[anonymous]";
+    }
+
+    if ($('input:radio[name=myProject]').is(':checked')) {
+        var myProjectId = $('input[name=myProject]:checked').attr('id');
+        var myProjectVal = $('input[name=myProject]:checked').val();
+        connection.invoke("SendMessage", user, message, myProjectId, myProjectVal).catch(function (err) {
+            return console.error(err.toString());
+        });
+    } else {
+        return console.log("No option selected.");
+    }
+
+    event.preventDefault();
+});