From f3868ede2b563a9eb88e9d288dbfac7978bafdf5 Mon Sep 17 00:00:00 2001
From: Jonathon Wilson <jonathon@jamkazam.com>
Date: Thu, 25 Oct 2012 21:24:05 -0600
Subject: [PATCH] Load genres from ajax. Add clientId to jamkazam. Add genre
 and clientId to createSession call

---
 app/assets/javascripts/createSession.js       | 20 +++++++++++++
 app/assets/javascripts/jamkazam.js            | 20 +++++++++++--
 .../stylesheets/client/jamkazam.css.scss      |  5 ++++
 app/views/clients/index.html.erb              | 29 +++++--------------
 4 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/createSession.js b/app/assets/javascripts/createSession.js
index 9399d1229..89f9d6aa8 100644
--- a/app/assets/javascripts/createSession.js
+++ b/app/assets/javascripts/createSession.js
@@ -25,9 +25,11 @@ Message from Seth on sequence for creating/joining sessions:
         function submitForm(evt) {
             var $this = $(this);
             var data = $this.formToObject();
+            data.client_id = app.clientId;
             var url = "/api/sessions";
             $.ajax({
                 type: "POST",
+                dataType: "json",
                 url: url,
                 data: data
             }).done(
@@ -45,8 +47,26 @@ Message from Seth on sequence for creating/joining sessions:
             $('#create-session-form').submit(submitForm);
         }
 
+        function loadGenres() {
+            var url = "/api/genres";
+            $.ajax({
+                type: "GET",
+                url: url
+            }).done(function(response) {
+                var options = [];
+                var optionTemplate = $('#template-genre-option').html();
+                $.each(response, function() {
+                    var d = {value: this.description, label: this.description};
+                    var opt = context.JK.fillTemplate(optionTemplate, d);
+                    options.push(opt);
+                });
+                $('#create-session-form select[name="genre"]').html(options.join(''));
+            });
+        }
+
         this.initialize = function() {
             events();
+            loadGenres();
             screenBindings = { 'afterShow': afterShow };
             app.bindScreen('session', screenBindings);
         };
diff --git a/app/assets/javascripts/jamkazam.js b/app/assets/javascripts/jamkazam.js
index 7b79305d6..e74d1ec9a 100644
--- a/app/assets/javascripts/jamkazam.js
+++ b/app/assets/javascripts/jamkazam.js
@@ -77,11 +77,20 @@
             context.JK.JamServer.send(message);
         }
 
+        function loggedIn(header, payload) {
+            app.clientId = payload.client_id;
+        }
+
+        function registerLoginAck() {
+            context.JK.JamServer.registerMessageCallback(
+                context.JK.MessageType.LOGIN_ACK, loggedIn);
+        }
+
         /**
         * Register for all known types, logging events as they happen, and
         * notifying subscribers (see this.subscribe) as they occur.
         */
-        function _registerMessages() {
+        function registerMessages() {
             for (var message in context.JK.MessageType) {
                 logger.debug("registering " + message);
                 context.JK.JamServer.registerMessageCallback(message, handleMessage);
@@ -130,7 +139,8 @@
             this.layout = new JK.Layout();
             this.layout.initialize();
             routing();
-            _registerMessages();
+            registerMessages();
+            registerLoginAck();
             events();
 
             hash = location.hash;
@@ -141,6 +151,12 @@
             self.location = url;
         };
 
+        /**
+        * Expose clientId as a public variable.
+        * Will be set upon LOGIN_ACK
+        */
+        this.clientId = null;
+
         return this;
     };
 
diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss
index b4e49efbc..a0adecf6a 100644
--- a/app/assets/stylesheets/client/jamkazam.css.scss
+++ b/app/assets/stylesheets/client/jamkazam.css.scss
@@ -59,10 +59,15 @@ fieldset.unstyled {
     border: 1px solid #555;
     float:left;
 }
+
 label {
     display:block;
 }
 
+.hidden {
+    display:none;
+}
+
 .curtain {
     background-color: shade($color7, 10%);
 }
diff --git a/app/views/clients/index.html.erb b/app/views/clients/index.html.erb
index bf339685e..b0fc06df0 100644
--- a/app/views/clients/index.html.erb
+++ b/app/views/clients/index.html.erb
@@ -169,33 +169,15 @@
                             </label>
                         </label>
                     </div>
+                    -->
 
                     <div class="formrow">
                         <label>Genre 
-                            <select>
-                                <option>African</option>
-                                <option>Ambient</option>
-                                <option>Asian</option>
-                                <option>Blues</option>
-                                <option>Classical</option>
-                                <option>Country</option>
-                                <option>Electronic</option>
-                                <option>Folk</option>
-                                <option>Hop Hop</option>
-                                <option>Jazz</option>
-                                <option>Latin</option>
-                                <option>Metal</option>
-                                <option>Pop</option>
-                                <option>R&amp;B</option>
-                                <option>Reggae</option>
-                                <option>Religious</option>
-                                <option>Rock</option>
-                                <option>Ska</option>
-                                <option>Other</option>
+                            <select name="genre">
                             </select>
                         </label>
+                        <input type="text" class="hidden"/>
                     </div>
-                    -->
 
                     <div class="formrow">
                         <label>Session Description</label>
@@ -240,6 +222,11 @@
             </form>
         </div>
 
+        <!-- Genre option template -->
+        <script type="text/template" id="template-genre-option">
+            <option value="{value}">{label}</option>
+        </script>
+
         <!-- Create Session:Audio Screen -->
         <!-- Keeping as this will move into a user settings dialog... -->
         <div layout="screen" layout-id="createSessionAudio" class="screen secondary">