/
index.html
141 lines (128 loc) · 4.42 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head><title>Communication</title>
<style>
body {background-color: #FAB; font-family: 'Tahoma'; font-size: 12px;}
#title {font-size: 24px; text-align: center; color: rgb(102, 0, 51);}
.box {
border: 1px solid black;
width: 18%;
min-width: 210px;
max-width: 250px;
float: left;
margin-left: 10px;
padding-left: 1px;
margin-top: 10px;
height: 250px;
top: 100px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
border-radius: 4px;
overflow-y: auto;
}
.spBoxTitle {display: table; margin: 0 auto;}
#boxes {overflow: hidden;}
#headerDiv {text-align: center}
h1{margin: 10px;}
#linkPrevious{text-decoration: none; position: absolute; top: 1px; right: 12px;margin: auto;}
#linkNext{text-decoration: none; position: absolute; top: 1px; right: 1px;margin: auto;}
</style>
</head>
<body>
<a id="linkPrevious" href="http://stream2me-webapp.herokuapp.com"><</a>
<a id="linkNext" href="https://sway-webapp.herokuapp.com">></a>
<br/><br/><span id="title"><h1>Communication</h1></span>
<div id="headerDiv">
Communicators online: <span id="p"></span><br/><br/>
<input type="button" id="btnNewTopic" value="Open Topic..."></input><br/><br/>
<div id="latestList">
<span id="latestSpan">Latest: </span>
</div>
</div><br/>
<div id="boxes"></div>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
const MAX_CHARS_FOR_MSG = 100;
const MAX_CHARS_FOR_BOX = 20;
function addABox(boxName){
var boxIdDiv = "#box" + boxName;
if ($(boxIdDiv).length === 0){ // if the box was not already placed
newBox = '<div class="box" id="box'+boxName+'">'+
// '<span class="spBoxTitle">'+boxName+'<br/></span>'+
'<span>'+boxName+'<br/></span>'+
'<span></span>'+
'</div>';
$("#boxes").append(newBox);
}
$.get( "/getBox?boxName=" + boxName, function(data) {
var boxIdDiv = "#box" + boxName;
$(boxIdDiv + " span").last().html(data);
});
}
function createLinkInLatestList(topicName){
newLinkToTopic = '<a href="#" class="linkToABox">'+topicName+'</a> ';
$("#latestSpan").after(newLinkToTopic);
}
$(function () {
var socket = io();
//update number of communicators online
socket.on('updateP', function(p) {
$('#p').html(p);
});
//update number of communicators online
socket.on('initialLatest', function(data) {
if ($(".linkToABox").length === 0){
data.forEach(createLinkInLatestList);
}
});
//creates a new topic and puts a new box on the screen
$('#btnNewTopic').click(function(e) {
boxName = prompt("Enter a Topic: ");
if (boxName) {
boxName = boxName.trim().replace(/ /g, "-").substring(0, MAX_CHARS_FOR_BOX).toUpperCase();
var boxIdDiv = "#box" + boxName;
if ($(boxIdDiv).length === 0){ // if the box was not already placed
addABox(boxName);
socket.emit('added a box', boxName);
}
}
});
//clicking to add one of the latest boxes
$(document).on('click', '.linkToABox', function(e) {
e.preventDefault();
var boxName = e.target.innerHTML;
if (boxName) addABox(boxName);
});
//remove last latest, add a new one
socket.on('added a box', function(boxName) {
newLink = ' <a href="#" class="linkToABox" style="display: none;">'+boxName+'</a> ';
$.when( $("#latestList a").last().hide(2500) )
.done(function() {
$("#latestList a").last().remove();
});
$("#latestSpan").after(newLink);
$("#latestSpan").next().show(2500);
});
//for each box clicked, prompts for a message and emits it to all
$(document).on('click', '.box', function(e) {
var boxStr = e.target.id;
if (boxStr === "") boxStr = e.target.parentElement.id;
var boxName = boxStr.substring(3, boxStr.length);
msg = prompt("Say to " + boxName + ":");
if (boxName && msg){
msg = msg.substring(0, MAX_CHARS_FOR_MSG);
socket.emit('chat message', msg, boxName);
}
});
//receives a message from the socket and puts it in the proper box
socket.on('chat message', function(msg, box) {
var boxIdDiv = "#box" + box;
if ($(boxIdDiv))
$(boxIdDiv + " span").last().html( msg+"<br/>"+$(boxIdDiv+" span").last().html() );
});
});
</script>
</body>
</html>