From df9e311f2ba9170444c91353e6c5644e6012744c Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Mon, 2 Mar 2015 14:24:07 +0900
Subject: [PATCH] Templating work

---
 client/profile.html       | 86 ++++++++++-----------------------------
 client/scripts/profile.js | 30 ++++++++++++++
 2 files changed, 51 insertions(+), 65 deletions(-)

diff --git a/client/profile.html b/client/profile.html
index d905c3c..0e2c441 100644
--- a/client/profile.html
+++ b/client/profile.html
@@ -25,80 +25,36 @@
                         <th class="text-right">Rating</th>
                     </tr>
                 </thead>
-                <tr>
-                    <td class="text-left">Now is the time for all good men</td>
-                    <td class="text-right">
-                        <label class="radio-inline">
-                            <input type="radio" name="test1" value="-1"> Agree
-                        </label>
-                        <label class="radio-inline">
-                            <input type="radio" name="test1" value="-1" checked> Neither
-                        </label>
-                        <label class="radio-inline">
-                            <input type="radio" name="test1" value="-1"> Disagree
-                        </label>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="text-left">Now is the time for all good men</td>
-                    <td class="text-right">
-                        <label class="radio-inline">
-                            <input type="radio" name="test2" value="-1"> Agree
-                        </label>
-                        <label class="radio-inline">
-                            <input type="radio" name="test2" value="-1" checked> Neither
-                        </label>
-                        <label class="radio-inline">
-                            <input type="radio" name="test2" value="-1"> Disagree
-                        </label>
-                    </td>
-                </tr>
+                <tbody id="categories">
+                    <script id="template" type="text/x-handlers-template">
+                            {{#each categories}}
+                            <tr>
+                                <td class="text-left">{{description}}</td>
+                                <td class="text-right">
+                                    <label class="radio-inline">
+                                        <input type="radio" name="category_{{id}}" value="1" {{checkMatch 1}}> Agree
+                                    </label>
+                                    <label class="radio-inline">
+                                        <input type="radio" name="category_{{id}}" value="0" {{checkMatch 0}}> Neither
+                                    </label>
+                                    <label class="radio-inline">
+                                        <input type="radio" name="category_{{id}}" value="-1" {{checkMatch -1}}> Disagree
+                                    </label>
+                                </td>
+                            </tr>
+                            {{/each}}
+                    </script>
+                </tbody>
             </table>
 
             <!-- category adder -->
             <div class="input-group">
-                <input type="text" class="form-control" placeholder="New category text">
+                <input type="text" class="form-control" placeholder="New category description">
                 <span class="input-group-btn">
                     <button class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
                 </span>
             </div>
 
-            <!-- result listing -->
-            <!-- <div class="panel panel-default" style="display: none;" id="resultPanel"> -->
-            <!--     <div class="panel-heading"> -->
-            <!--         <big>Results (<span id="resultCount"></span>)</big> -->
-            <!--     </div> -->
-            <!--     <div class="panel-body"> -->
-            <!--         <script id="template" type="text/x-handlers-template"> -->
-            <!--             {{#if results}} -->
-            <!--             <table class="table table-striped table-condensed"> -->
-            <!--             <thead> -->
-            <!--                 <tr> -->
-            <!--                     <th>Id</th> -->
-            <!--                     <th>Name</th> -->
-            <!--                     <th>Distance to user</th> -->
-            <!--                     <th>Closest station</th> -->
-            <!--                     <th>Distance to station</th> -->
-            <!--                     <th>Score</th> -->
-            <!--                 </tr> -->
-            <!--             </thead> -->
-            <!--             {{#each results}} -->
-            <!--                 <tr> -->
-            <!--                     <td>{{id}}</td> -->
-            <!--                     <td><a href="{{url}}">{{name}}</a></td> -->
-            <!--                     <th>{{distanceToUser}} km</th> -->
-            <!--                     <th>{{closestStn}}</th> -->
-            <!--                     <th>{{distanceToStn}} km</th> -->
-            <!--                     <td>{{score}}</td> -->
-            <!--                 </tr> -->
-            <!--             {{/each}} -->
-            <!--             </table> -->
-            <!--             {{/if}} -->
-            <!--         </script> -->
-            <!--         <div id="results"></div> -->
-            <!--     </div> -->
-            <!-- </div> -->
-
         </div>
         <script src="bower_components/jquery/dist/jquery.js"></script>
         <script src="bower_components/handlebars/handlebars.js"></script>
diff --git a/client/scripts/profile.js b/client/scripts/profile.js
index 156c910..7d7c206 100644
--- a/client/scripts/profile.js
+++ b/client/scripts/profile.js
@@ -20,4 +20,34 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+(function(hscd) {
+    'use strict';
 
+    function displayCategories(categories) {
+        var template = Handlebars.compile($('#template').html());
+        $('#categories').empty();
+        $('#categories').append(template({categories: categories}));
+    }
+
+    function onReady() {
+        Handlebars.registerHelper('checkMatch', function(value, options) {
+            return new Handlebars.SafeString(
+                value == this.value ? 'checked' : ''
+            );
+        });
+
+        var categories = [
+            {description: 'Description1', id: 0, value: -1},
+            {description: 'Description2', id: 1, value: 0},
+            {description: 'Description3', id: 2, value: 1},
+        ];
+
+        displayCategories(categories);
+    }
+
+    $(document).on({
+        ajaxStart: function() { $('#spinner').show(); },
+        ajaxStop: function() { $('#spinner').hide(); },
+        ready: onReady()
+    });
+})();