Skip to content

Commit 7812d85

Browse files
pgbovinepgbovine
committed
set up UI skeletons for "Start a shared session" mode
1 parent ee20512 commit 7812d85

3 files changed

Lines changed: 85 additions & 60 deletions

File tree

‎v3/css/opt-frontend.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,5 +93,12 @@ button.surveyBtn {
9393
margin-top: 8px;
9494
}
9595

96+
.togetherjsBtn {
97+
color: #b80000;
98+
font-size: 11pt;
99+
padding: 5px;
100+
margin-top: 6px;
101+
}
102+
96103
/* necessary for CodeMirror error line highlighting to work! */
97104
.CodeMirror .errorLine { background: #ffff3f !important; }

‎v3/js/opt-frontend.js‎

Lines changed: 37 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,9 @@ var TogetherJSConfig_hubBase = "http://localhost:30035/"; // local
6767
// can imagine other learners joining into the original session as well
6868
var isTutor = false;
6969

70-
var manuallySharingUrl = false; // TODO: refactor
70+
var manualSharedSession = false; // XXX: this is uber-unreliable since
71+
// it's not set on page reload unless
72+
// there's a special url hash
7173

7274
// TODO: consider deferred initialization later: "TogetherJS starts up
7375
// automatically as soon as it can, especially when continuing a
@@ -80,7 +82,7 @@ var manuallySharingUrl = false; // TODO: refactor
8082
var origDocURL = document.URL; // capture this ASAP before TogetherJS munges the URL
8183

8284
var tutorWaitText = 'Please wait for the next available tutor.';
83-
var informedConsentText = '<br/>During the tutoring session, chat logs and code may be recorded and published for<br/>educational purposes. Please do not reveal any private or confidential information.';
85+
var informedConsentText = '<p/>During shared sessions, chat logs and code may be recorded and published for<br/>educational purposes. Please do not reveal any private or confidential information.';
8486

8587
// nasty globals
8688
var updateOutputSignalFromRemote = false;
@@ -132,20 +134,29 @@ var TogetherJSConfig_getUserName = function () {
132134
}
133135
}
134136

135-
// temporary stent:
137+
138+
function getTutor() {
139+
manualSharedSession = false; // icky global!
140+
TogetherJS();
141+
}
142+
136143
function startSharedSession() {
137-
manuallySharingUrl = true; // icky global!
144+
manualSharedSession = true; // icky global!
138145
TogetherJS();
139146
}
140147

148+
141149
// get this app ready for TogetherJS
142150
function initTogetherJS() {
143151
if (isTutor) {
144-
$("#togetherBtn").html("TUTOR - Join live help session");
152+
$("#getTutorBtn").html("TUTOR - Join live help session");
153+
/*
145154
$("#togetherJSHeader").append('<button id="syncBtn"\
146155
type="button">Sync with learner</button>');
147-
148156
$("#syncBtn").click(requestSync);
157+
*/
158+
159+
$("#sharedSessionBtn").hide();
149160
}
150161

151162
// This event triggers when you first join a session and say 'hello',
@@ -389,32 +400,17 @@ function initTogetherJS() {
389400
source.onmessage = function(e) {
390401
var dat = JSON.parse(e.data);
391402

392-
if (!isTutor) {
393-
if (dat.helpQueueUrls == 1) {
394-
$("#helpQueueUrls").html(tutorWaitText +
395-
' There is 1 person in line.' +
396-
informedConsentText);
397-
}
398-
else if (dat.helpQueueUrls == 0 || dat.helpQueueUrls > 1) {
399-
$("#helpQueueUrls").html(tutorWaitText +
400-
' There are ' + dat.helpQueueUrls +
401-
' people in line.' +
402-
informedConsentText);
403-
}
404-
else {
405-
$("#helpQueueUrls").html('');
406-
}
407-
}
408-
409-
if (dat.helpAvailable) {
410-
$("#togetherJSHeader").fadeIn(750, redrawConnectors);
403+
if (dat.helpAvailable && !TogetherJS.running) {
404+
$("#getTutorBtn").fadeIn(750, redrawConnectors);
411405
}
412406
else {
413-
if (TogetherJS.running && !manuallySharingUrl) {
407+
/* janky
408+
if (TogetherJS.running && !manualSharedSession) {
414409
alert("No more live tutors are available now.\nPlease check back later.");
415410
TogetherJS(); // toggle off
416411
}
417-
$("#togetherJSHeader").fadeOut(750, redrawConnectors);
412+
*/
413+
$("#getTutorBtn").fadeOut(750, redrawConnectors);
418414
}
419415
};
420416
}
@@ -424,30 +420,30 @@ function initTogetherJS() {
424420
console.warn("Sad ... EventSource not supported :(");
425421
}
426422

427-
$("#togetherBtn").click(function() {
428-
TogetherJS(); // toggles on and off
429-
});
423+
$("#getTutorBtn").click(getTutor);
424+
$("#sharedSessionBtn").click(startSharedSession);
425+
$("#stopTogetherJSBtn").click(TogetherJS); // toggles off
430426

431427
// fired when TogetherJS is activated. might fire on page load if there's
432428
// already an open session from a prior page load in the recent past.
433429
TogetherJS.on("ready", function () {
434430
console.log("TogetherJS ready");
435-
$("#togetherBtn").html("Stop live help session");
436-
431+
$("#getTutorBtn,#sharedSessionBtn").hide();
437432
$("#surveyHeader").hide();
433+
$("#stopTogetherJSBtn").show();
438434

439-
$("#helpQueueUrls").fadeIn(500);
435+
$("#togetherjsStatus").html(informedConsentText).fadeIn(500);
440436

441-
$("#togetherJSHeader").fadeIn(750, redrawConnectors); // always show when ready
437+
//$("#getTutorBtn").fadeIn(750, redrawConnectors); // always show when ready
442438

443439
if (isTutor) {
444-
$("#helpQueueUrls").html(origDocURL);
440+
$("#togetherjsStatus").html(origDocURL);
445441
// if you're a tutor, immediately try to sync to the learner upon startup
446442
requestSync();
447443
}
448444
else {
449-
if (manuallySharingUrl) {
450-
console.log('URL TO SHARE', TogetherJS.shareUrl() + '&role=tutor&share=manual');
445+
if (manualSharedSession) {
446+
console.log('URL TO SHARE:', TogetherJS.shareUrl() + '&share=manual');
451447
}
452448
else {
453449
// if you're a learner, request help when TogetherJS is activated
@@ -467,18 +463,12 @@ function initTogetherJS() {
467463
TogetherJS.on("close", function () {
468464
console.log("TogetherJS close");
469465

466+
$("#stopTogetherJSBtn,#togetherjsStatus").hide();
467+
$("#getTutorBtn,#sharedSessionBtn").show();
468+
470469
if (appMode == "display") {
471470
$("#surveyHeader").show();
472471
}
473-
474-
$("#helpQueueUrls").fadeOut(500);
475-
476-
if (isTutor) {
477-
$("#togetherBtn").html("TUTOR - Join live help session");
478-
}
479-
else {
480-
$("#togetherBtn").html("Chat with a tutor (experimental)");
481-
}
482472
});
483473
}
484474

@@ -596,7 +586,7 @@ $(document).ready(function() {
596586
var role = $.bbq.getState('role');
597587
isTutor = (role == 'tutor'); // GLOBAL
598588

599-
manuallySharingUrl = ($.bbq.getState('share') == 'manual'); // GLOBAL
589+
manualSharedSession = ($.bbq.getState('share') == 'manual'); // GLOBAL
600590

601591
if (enableTogetherJS || isTutor) {
602592
initTogetherJS();

‎v3/visualize.html‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -73,14 +73,6 @@
7373

7474
<body>
7575

76-
<!-- hide by default -->
77-
<div id="togetherJSHeader" style="margin-top: 12pt; margin-bottom: 12pt; display: none;">
78-
<button id="togetherBtn" type="button"
79-
style="color: #b80000; font-size: 12pt; padding: 6px;
80-
margin-right: 5pt;">Chat with a tutor (experimental)</button>
81-
<span style="display: none;" id="helpQueueUrls"></span>
82-
</div>
83-
8476
<!--
8577
// as of 2014-05-03, remove the button click survey questions from the
8678
// visualizer so as not to clutter up the screen. i started running
@@ -101,15 +93,47 @@
10193
10294
-->
10395

96+
<table id="experimentalHeader">
97+
<tr>
98+
<td valign="top">
99+
100+
Experimental features:
101+
102+
<div>
103+
<button id="sharedSessionBtn" type="button" class="togetherjsBtn">
104+
Start a shared session
105+
</button>
106+
</div>
107+
108+
<div>
109+
<button id="getTutorBtn" type="button" class="togetherjsBtn" style="display: none;">
110+
Get help from a tutor
111+
</button>
112+
</div>
113+
114+
<div>
115+
<button id="stopTogetherJSBtn" type="button" class="togetherjsBtn" style="display: none;">
116+
Stop live chat session
117+
</button>
118+
</div>
119+
120+
</td>
121+
<td valign="top" style="padding-left: 15px;">
122+
123+
<div style="display: none;" id="togetherjsStatus"></div>
124+
104125
<!--
105126
// Version 2 of my display-mode survey, greatly simplified and deployed on 2014-05-24
106127
-->
128+
<div id="surveyHeader" style="display: none;">
129+
<div id="vizSurveyLabel" style="font-size: 8pt; color: #666; margin-bottom: 5pt;">
130+
<!-- 2014-05-28 tagline -->
131+
Help future learners by describing what you just learned.
107132

108-
<div id="surveyHeader" style="margin-left: 70px; margin-bottom: 10pt; display: none;">
109-
<div id="vizSurveyLabel" style="font-size: 8pt; color: #666; margin-bottom: 8pt;">
110-
<!-- 2014-05-25 tagline -->
133+
<!-- 2014-05-25 tagline
111134
Help future learners by writing about what you are learning.
112135
Submit as often as you like!
136+
-->
113137

114138
<!-- 2014-05-24 original tagline
115139
Help future learners by filling in this blank whenever you learn
@@ -118,9 +142,9 @@
118142
</div>
119143
<div style="font-size: 10pt; margin-bottom: 5pt; padding: 1pt;">
120144
I just learned that
121-
<input style="font-size: 10pt; padding: 1pt;" type="text" id="iJustLearnedInput" size="75"/>
145+
<input style="font-size: 10pt; padding: 1pt;" type="text" id="iJustLearnedInput" size="70"/>
122146

123-
<button id="iJustLearnedSubmission" type="button" style="font-size: 12pt;">Submit</button>
147+
<button id="iJustLearnedSubmission" type="button" style="font-size: 10pt;">Submit</button>
124148

125149
<span id="iJustLearnedThanks"
126150
style="color: #e93f34; font-weight: bold; font-size: 11pt; display: none;">
@@ -129,6 +153,10 @@
129153
</div>
130154
</div>
131155

156+
</td>
157+
</tr>
158+
</table>
159+
132160

133161
<div id="pyInputPane">
134162

0 commit comments

Comments
 (0)