ryan/Coding
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added users list on bottom

Browse Source
This commit is contained in:
Ryan Peters 2021-07-20 21:53:39 -04:00
parent f56e24f7ef
commit a1e97d6063
6 changed files with 91 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
BinaryDad.Coding/Hubs/CodeHub.cs
View File

@ -1,13 +1,46 @@
using Microsoft.AspNetCore.SignalR; using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Threading.Tasks; using System.Threading.Tasks;
namespace BinaryDad.Coding.Hubs namespace BinaryDad.Coding.Hubs
{ {
public class CodeHub : Hub public class CodeHub : Hub
{ {
private static readonly IDictionary<string, User> users = new Dictionary<string, User>(StringComparer.OrdinalIgnoreCase);
public Task UpdateCode(string user, int index, string code) public Task UpdateCode(string user, int index, string code)
{ {
return Clients.All.SendAsync("ReceiveCode", user, index, code); return Clients.All.SendAsync("ReceiveCode", user, index, code);
} }
public async Task SaveName(string name, string color)
{
users[Context.ConnectionId].Name = name;
users[Context.ConnectionId].Color = color;
await Clients.All.SendAsync("UsersList", users);
}
public override async Task OnConnectedAsync()
{
users[Context.ConnectionId] = new User
{
Name = ""
};
await Clients.All.SendAsync("UsersList", users);
await base.OnConnectedAsync();
}
public override async Task OnDisconnectedAsync(Exception exception)
{
users.Remove(Context.ConnectionId);
await Clients.All.SendAsync("UsersList", users);
await base.OnDisconnectedAsync(exception);
}
} }
} }

4
BinaryDad.Coding/Pages/Index.cshtml
View File

@ -31,4 +31,6 @@
<link href="~/css/jotted/jotted.min.css" rel="stylesheet" /> <link href="~/css/jotted/jotted.min.css" rel="stylesheet" />
} }
<div id="editor"></div> <div id="editor"></div>
<div id="users-list"></div>

6
BinaryDad.Coding/Pages/Shared/_Layout.cshtml
View File

@ -13,8 +13,12 @@
</head> </head>
<body> <body>
<header class="container"> <header class="container">
<nav class="navbar navbar-expand navbar-light"> <nav class="navbar navbar-expand navbar-light justify-content-between">
<a class="navbar-brand" href="#">HTML 101</a> <a class="navbar-brand" href="#">HTML 101</a>
<form class="form-inline" action="">
<input type="text" class="form-control mr-sm-2" id="your-name-text" placeholder="Enter your name" />
<input type="text" class="form-control" maxlength="6" id="your-color-text" placeholder="Color" />
</form>
<div class="collapse navbar-collapse"> <div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto"> <ul class="navbar-nav ml-auto">
<li class="nav-item d-none d-md-block"> <li class="nav-item d-none d-md-block">

8
BinaryDad.Coding/User.cs Normal file
View File

@ -0,0 +1,8 @@
namespace BinaryDad.Coding
{
public class User
{
public string Name { get; set; }
public string Color { get; set; }
}
}

11
BinaryDad.Coding/wwwroot/css/site.css
View File

@ -21,3 +21,14 @@ textarea, .navbar-brand {
padding: 4px 10px 0; padding: 4px 10px 0;
line-height: 18px; line-height: 18px;
} }
#your-color-text {
width: 90px;
text-align: center;
}
#users-list {
color: #777;
font-size: 12px;
margin-top: 10px;
}

36
BinaryDad.Coding/wwwroot/js/hub.js
View File

@ -1,7 +1,12 @@
$(function () { $(function () {
var connection = new signalR.HubConnectionBuilder().withUrl('/codeHub').build();
let $liveModeLink = $('#live-mode-link'); let $liveModeLink = $('#live-mode-link');
let $liveModeStatus = $('#live-mode-status'); let $liveModeStatus = $('#live-mode-status');
let $usersList = $('#users-list');
let $yourNameText = $('#your-name-text');
let $yourColorText = $('#your-color-text');
let isLive = false; let isLive = false;
@ -16,16 +21,24 @@
isLive ? $liveModeStatus.fadeIn() : $liveModeStatus.fadeOut(); isLive ? $liveModeStatus.fadeIn() : $liveModeStatus.fadeOut();
}; };
let sendName = function (e) {
let color = $yourColorText.val();
$yourNameText.css('color', `${color}`);
connection.invoke('SaveName', $yourNameText.val(), color);
};
isLiveMode(); isLiveMode();
// events
$(window).on('hashchange', isLiveMode); $(window).on('hashchange', isLiveMode);
$('#your-name-text, #your-color-text').on('blur', sendName);
var connection = new signalR.HubConnectionBuilder().withUrl("/codeHub").build();
let isTeacher = window.location.hash === '#4ELQcUq7UnFGghAZCVr4Chr9JmtncigfkGu5WSf9'; let isTeacher = window.location.hash === '#4ELQcUq7UnFGghAZCVr4Chr9JmtncigfkGu5WSf9';
if (isTeacher) { if (isTeacher) {
//window.location.hash = '#';
$liveModeLink.hide(); $liveModeLink.hide();
$liveModeStatus.hide(); $liveModeStatus.hide();
} }
@ -43,14 +56,14 @@
let user = 'ryan'; let user = 'ryan';
let code = editor.getValue(); let code = editor.getValue();
connection.invoke("UpdateCode", user, i, code).catch(function (err) { connection.invoke('UpdateCode', user, i, code).catch(function (err) {
return console.error(err.toString()); return console.error(err.toString());
}); });
}); });
}); });
} }
connection.on("ReceiveCode", function (user, index, code) { connection.on('ReceiveCode', function (user, index, code) {
if (!isTeacher && isLive) { if (!isTeacher && isLive) {
@ -60,8 +73,19 @@
} }
}); });
connection.on('UsersList', function (users) {
let usersList = Object.values(users)
.filter(u => u.name !== '')
.map(u => `<span style='color: ${u.color};'>${u.name}</span>`);
$usersList.html(`<strong>${usersList.length} users online:</strong> ${usersList.join(', ')}`);
});
connection.start().then(function () { connection.start().then(function () {
//$('#send').prop('disabled', false);
sendName();
}).catch(function (err) { }).catch(function (err) {
return console.error(err.toString()); return console.error(err.toString());
}); });