From 5c27b257eea9a9c8f5a70f5ffc9c2a290626f001 Mon Sep 17 00:00:00 2001
From: Yuval Adam <yuv.adm@gmail.com>
Date: Wed, 28 May 2014 13:18:45 +0300
Subject: Proper channels and subchannels

---
 static/css/main.css |  3 +++
 templates/home.html | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 62dea16..6ec56a8 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,3 +1,6 @@
+.light-channel:nth-child(2n) {
+    background-color: #ccc;
+}
 .light-cell-btn {
     margin: 2px;
 }
diff --git a/templates/home.html b/templates/home.html
index 0140224..b8f8e18 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -11,10 +11,11 @@
         <script>
         $(document).ready(function() {
             var CHANNELS = 8;
-            var LIGHTS = 8;
+            var SUB_CHANNELS = 8;
+            var LOOP_LENGTH = 24;
 
             _.each(_.range(CHANNELS), function(i) {
-                var row = $(_.template($('#light-row-template').text(), {i: i, lights: LIGHTS}));
+                var row = $(_.template($('#light-row-template').text(), {i: i, subchannels: SUB_CHANNELS, cells: LOOP_LENGTH}));
                 $('#light-container').append(row);
             });
         });
@@ -26,9 +27,15 @@
             <div id="light-container"></div>
         </div>
         <script type="text/template" class="template" id="light-row-template">
-            <div class="light-row" data-light-row="<%= i %>">
-                <% _.each(_.range(lights), function(j) { %>
-                    <button type="button" class="btn btn-success light-cell-btn" data-toggle="button" data-light-cell="<%= j %>">&nbsp;</button>
+            <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>
-- 
cgit v1.3.1