-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
86 lines (81 loc) · 2.96 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
<!DOCTYPE html>
<html>
<head>
<title>Tail -F</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.8.19.custom.css" />
<style>
html, body { height: 90% }
body { font-size: 62.5%; }
#tabs { position: absolute; width:auto; right:0; left:0; top: 50px; bottom: 0 }
#tabs li .ui-icon { float: left; margin: 0.4em 0.6em 0 0; cursor: pointer; }
#tabs li a { cursor: default; }
#tabs .ui-tabs-panel {
height: 90%;
overflow-y: auto;
}
</style>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket;
var files = {};
$(function() {
var $tabs = $("#tabs").tabs({
tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-play">Status</span></li>',
add: function(event, ui) {
var $a = $(ui.tab);
var file_index = +$a.attr('href').match(/\d/)[0];
files[file_index].icon = $a.siblings('.ui-icon');
files[file_index].panel = ui.panel;
$a.siblings('.ui-icon').data('file_index',file_index);
},
show: function(event, ui) {
$(ui.panel).scrollTop($(ui.panel).get(0).scrollHeight);
}
});
$tabs.find( ".ui-tabs-nav" ).sortable({ axis: "x" });
$tabs.on('click', '.ui-icon-play', function() {
var $icon = $(this);
var file = files[$icon.data('file_index')];
$icon.removeClass('ui-icon-play').addClass('ui-icon-transfer-e-w');
socket.emit('follow', file.filename, function(data) {
$icon.removeClass('ui-icon-transfer-e-w').addClass('ui-icon-pause');
});
});
$tabs.on('click', '.ui-icon-pause', function() {
var $icon = $(this);
var file = files[$icon.data('file_index')];
$icon.removeClass('ui-icon-pause').addClass('ui-icon-transfer-e-w');
socket.emit('unfollow', file.filename, function(data) {
$icon.removeClass('ui-icon-transfer-e-w').addClass('ui-icon-play');
});
});
});
socket = io.connect(document.url);
socket.on('init', function (data) {
files = data.files;
for (file_index in files) {
file = files[file_index];
$('#tabs').tabs('add','#tabs-'+file_index,file.display_name);
}
});
socket.on('message', function (data) {
// todo figure out a better file lookup by filename
for (file_index in files) {
if (files[file_index].filename == data.file.filename) {
file = files[file_index];
$(file.panel).append('<p>'+data.message+'</p>');
$(file.panel).scrollTop($(file.panel).get(0).scrollHeight);
}
}
});
</script>
</head>
<body>
<div id="tabs">
<ul></ul>
</div>
</body>
</html>