Coding/BinaryDad.Coding/wwwroot/js/hub.js

113 lines
2.9 KiB
JavaScript
Raw Normal View History

$(function () {
2024-01-17 03:10:17 +00:00
var connection = new signalR.HubConnectionBuilder()
.withAutomaticReconnect()
.withUrl('/codeHub')
.build();
2021-07-21 01:53:39 +00:00
2021-07-20 02:02:14 +00:00
let $liveModeLink = $('#live-mode-link');
let $liveModeStatus = $('#live-mode-status');
2021-07-21 01:53:39 +00:00
let $usersList = $('#users-list');
let $yourNameText = $('#your-name-text');
let $yourColorText = $('#your-color-text');
2021-07-20 02:02:14 +00:00
2021-07-23 02:51:24 +00:00
let isTeacher = window.location.hash === '#4ELQcUq7UnFGghAZCVr4Chr9JmtncigfkGu5WSf9';
2021-07-20 02:02:14 +00:00
let isLive = false;
let isLiveMode = function () {
2021-07-20 02:54:16 +00:00
2021-07-20 02:02:14 +00:00
isLive = window.location.hash === '#live';
$liveModeLink
.toggleClass('btn-success text-white', isLive)
.attr('href', isLive ? '#' : '#live');
2021-07-20 03:43:01 +00:00
isLive ? $liveModeStatus.fadeIn() : $liveModeStatus.fadeOut();
2021-07-20 02:02:14 +00:00
};
2021-07-21 01:53:39 +00:00
let sendName = function (e) {
let color = $yourColorText.val();
$yourNameText.css('color', color);
2021-07-21 01:53:39 +00:00
connection.invoke('SaveName', $yourNameText.val(), color);
};
2021-07-23 02:51:24 +00:00
let updateCode = function (editor, index) {
let user = $yourNameText.val();
let code = editor.getValue();
connection.invoke('UpdateCode', user, index, code, isTeacher).catch(function (err) {
return console.error(err.toString());
});
};
2021-07-21 16:43:14 +00:00
let setHeight = function () {
var editorHeight = $(window).height() - $('header').outerHeight() - $('footer').outerHeight();
$('#editor').height(editorHeight - 2);
};
2021-07-21 01:53:39 +00:00
// events
2021-07-20 02:02:14 +00:00
$(window).on('hashchange', isLiveMode);
2021-07-21 16:43:14 +00:00
$(window).resize(setHeight);
2021-07-21 15:00:05 +00:00
$('#your-name-text, #your-color-text').doneTyping(sendName);
2021-07-22 20:31:54 +00:00
isLiveMode();
setHeight();
2021-07-20 02:02:14 +00:00
if (isTeacher) {
$liveModeLink.hide();
$liveModeStatus.hide();
2021-07-23 00:41:12 +00:00
} else {
window.location.hash = '#live'; // set live mode on by default
2021-07-20 02:02:14 +00:00
}
let $editors = $('.ace_editor');
2021-07-21 01:53:39 +00:00
connection.on('ReceiveCode', function (user, index, code) {
2021-07-20 02:02:14 +00:00
if (!isTeacher && isLive) {
let editor = ace.edit($editors[index]);
editor.session.setValue(code);
}
});
2021-07-21 01:53:39 +00:00
connection.on('UsersList', function (users) {
let usersList = Object.values(users)
.filter(u => u.name !== '')
2021-07-23 01:57:13 +00:00
.map(u => `<a target="_blank" href="/view/${u.id}" style="color: ${u.color};" title="${u.color}">${u.name}</a>`);
2021-07-21 01:53:39 +00:00
$usersList.html(`<strong>${usersList.length} users online:</strong> ${usersList.join(', ')}`);
2021-07-21 17:37:52 +00:00
// set the height in case we have more than one row
setHeight();
2021-07-21 01:53:39 +00:00
});
connection.start().then(function () {
2021-07-21 01:53:39 +00:00
sendName();
2021-07-23 02:51:24 +00:00
$editors.each(function (i, e) {
let editor = ace.edit(e);
editor.session.on('change', function () {
updateCode(editor, i);
});
// send initial code
updateCode(editor, i);
});
}).catch(function (err) {
2021-07-19 01:24:08 +00:00
return console.error(err.toString());
});
});