templates/home.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

<!DOCTYPE html>
<html>
    <head>
        <title>Light Loop Pi</title>
        <link rel="stylesheet" href="/static/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="/static/css/main.css"/>
        <script src="/static/js/jquery-2.1.1.min.js"></script>
        <script src="/static/js/underscore-min.js"></script>
        <script src="/static/js/bootstrap.min.js"></script>
        <script>
        $(document).ready(function() {
            var CHANNELS = 8;
            var SUB_CHANNELS = 8;
            var LOOP_LENGTH = 24;

            _.each(_.range(CHANNELS), function(i) {
                var row = $(_.template($('#light-row-template').text(), {i: i, subchannels: SUB_CHANNELS, cells: LOOP_LENGTH}));
                $('#light-container').append(row);
            });
        });
        </script>
    </head>
    <body>
        <div class="container">
            <h1>Light Loop Pi</h1>
            <div id="light-container"></div>
        </div>
        <script type="text/template" class="template" id="light-row-template">
            <div class="light-channel" data-light-channel="<%= i %>">
                <h3>Channel <%= i %></h3>
                <% _.each(_.range(subchannels), function(j) { %>
                    <div class="light-row" data-light-row="<%= j %>">
                        <span>Subchan <%= j %></span>
                        <% _.each(_.range(cells), function(k) { %>
                            <button type="button" class="btn btn-success light-cell-btn" data-toggle="button" data-light-cell="<%= k %>">&nbsp;</button>
                        <% }); %>
                    </div>
                <% }); %>
            </div>
        </script>
    </body>
</html>