diff options
| -rw-r--r-- | static/css/main.css | 5 | ||||
| -rw-r--r-- | templates/home.html | 10 |
2 files changed, 13 insertions, 2 deletions
diff --git a/static/css/main.css b/static/css/main.css index 6ec56a8..3177c73 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,6 +1,7 @@ -.light-channel:nth-child(2n) { - background-color: #ccc; +.light-channel { + display: none; } + .light-cell-btn { margin: 2px; } diff --git a/templates/home.html b/templates/home.html index b6e76bf..505acda 100644 --- a/templates/home.html +++ b/templates/home.html @@ -33,6 +33,13 @@ _.each(_.range(CHANNELS), function(i) { var row = $(_.template($('#light-row-template').text(), {i: i, subchannels: SUB_CHANNELS, cells: LOOP_LENGTH})); $('#light-container').append(row); + $('#channel-btns').append($('<button type="button" class="btn btn-default channel-btn" data-channel="' + i + '">Channel ' + i + '</button>')); + }); + + $('.channel-btn').click(function() { + var chan = $(this).attr('data-channel'); + $('.light-channel').hide(); + $('.light-channel[data-light-channel=' + chan +']').show(); }); }); </script> @@ -40,8 +47,11 @@ <body> <div class="container"> <h1>Light Loop Pi</h1> + <div id="channel-btns" class="btn-group"></div> + <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> |