1 files changed, 102 insertions, 0 deletions
diff --git a/templates/sequence.html b/templates/sequence.html
new file mode 100644
index 0000000..7c32f5a
--- /dev/null
+++ b/templates/sequence.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Light Loop Pi - Sequence Editor</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/bootstrap-slider.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 src="/static/js/bootstrap-slider.min.js"></script>
+        <script>
+        function load_data() {
+            $.get('/data', function(res) {
+                console.log('Loading: ', res);
+                $('#speed-slider').slider({
+                    tooltip: 'always',
+                    value: res.tempo
+                });
+
+                _.each(res.trees, function(tree, i) {
+                    var $tree = $('div[data-light-tree=' + i + ']');
+                    _.each(tree, function(channel, j) {
+                        var $channel = $tree.find('div[data-light-channel=' + j + ']');
+                        _.each(channel, function(cell, k) {
+                            var $cell = $channel.find('button[data-light-cell=' + k + ']');
+                            if (cell) {
+                                $cell.addClass('active');
+                            }
+                        });
+                    });
+                });
+            });
+        };
+
+        function save_data(data) {
+            var data = {
+                tempo: +$('#speed-slider').val(),
+                trees: []
+            };
+
+            $('.light-tree').each(function(_idx, tree) {
+                tree = $(tree);
+                var tree_data = []
+                tree.find('.light-row').each(function(_idx, row) {
+                    var vals = $(row).find('.light-cell-btn').toArray().map(function(x) {
+                        return x.className.contains('active') ? 1 : 0;
+                    });
+                    tree_data.push(vals);
+                });
+                data.trees.push(tree_data);
+            });
+
+            console.log('Saved:', data);
+
+            $.ajax({
+                type: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify(data),
+                dataType: 'json',
+                url: '/sequence/name',
+            });
+        }
+
+        $(document).ready(function() {
+            $('.sequence-name-item').click(function() {
+                var name = $(this).attr('data-sequence-name');
+                $.get('/sequence/' + name, function(res) {
+                    
+                })
+            })
+        });
+        </script>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Light Loop Pi</h1>
+            <h2>Sequence Editor</h2>
+
+            <div class="btn-group">
+                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                    Sequences <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" role="menu">
+                    {% for sequence in sequences %}
+                    <li><a href="#" class="sequence-name-item" data-sequence-name="{{ sequence.name }}">{{ sequence.name }}</a></li>
+                    {% endfor %}
+                    <li class="divider"></li>
+                    <li><a href="#">New</a></li>
+                </ul>
+            </div>
+
+            <div class="btn-group">
+                <button id="save-btn" type="button" class="btn btn-primary">Save</button>
+            </div>
+
+            <div id="light-container"></div>
+        </div>
+
+    </body>
+</html>