nodecellar/public/dashboard.html at d1c8fb1fc00448734855739077775d7df2b3d122 · ccoenraets/nodecellar · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Node Cellar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


    <script src="http://use.edgefonts.net/andika.js"></script>
    <script src="http://use.edgefonts.net/arvo.js"></script>

</head>

<html>
<body>

<div class="header">
    <div class="navbar navbar-fixed-top" style="z-index: 10;">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="#">Real Time Analytics</a>
            </div>
        </div>
    </div>
</div>

<div class="container">

    <div class="row-fluid" >

        <div id="content" class="span12">


            <div class="well span3" style="text-align: center;">
                    <h3>Right Now</h3>
                    <p id="connections" style="font-size: 96px;line-height: 96px;">0</p>
                    <h5>active visitors</h5>
            </div>

            <div class="span9">

                <legend>Real Time Activity</legend>
                <div class="row-fluid">
                    <table id="visits" class="table table-bordered table-striped table-condensed">
                        <thead>
                            <tr><td>URL</td><td>IP</td><td>Timestamp</td></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <legend>Page Views</legend>
                <div class="row-fluid">
                    <table id="pageViews" class="table table-bordered table-striped table-condensed">
                        <thead>
                            <tr><td>URL</td><td>Page Views</td></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    <footer class="footer">
        <p>Built as a sample application with
            <a href="http://nodejs.org/">Node.js</a>,
            <a href="http://socket.io/">Socket.io</a>,
            <a href="http://expressjs.com/">Express</a>, and
        <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a>,
        by <a href="http://coenraets.org" target="_blank">Christophe Coenraets</a>.<br/>
        The source code for this application is available in <a href="#">this repository</a> on GitHub.</p>
    </footer>

</div>

<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>

<script>

    var socket = io.connect();
    var pages = {};
    var lastPageId = 0;

    socket.on('connect', function () {

        console.log('Socket connected');

        socket.on('pageview', function (msg) {
            $('#connections').html(msg.connections - 1);  // less one since we don't count our own dashboard connection
            if (msg.url) {
                if ($('#visits tr').length > 10) {
                    $('#visits tr:last').remove();
                }
                $('#visits tbody').prepend('<tr><td>' + msg.url + '</td><td>' + msg.ip + '</td><td>' + msg.timestamp + '</td></tr>');

                if (pages[msg.url]) {
                    pages[msg.url].views = pages[msg.url].views + 1;
                    $('#page' + pages[msg.url].pageId).html(pages[msg.url].views);
                } else {
                    pages[msg.url] = {views: 1, pageId: ++lastPageId};
                    $('#pageViews tbody').append('<tr><td>' + msg.url + '</td><td id="page' + lastPageId + '">1</td></tr>');
                }

            }
        });

    });


</script>

</body>
</html>