More cleanup for show and tell

twilio/app/assets/javascripts/messages.js

@@ -1,56 +1,56 @@
 (function () {
-    var app = angular.module('messages', ['restangular', 'templates']);
-
-    app.controller('MessagesController', function($scope, Restangular){
-        $scope.baseMessages = Restangular.all('messages');
-
-        $scope.baseMessages.refresh = function(){
-            $scope.baseMessages.getList().then(function(messages){
-                $scope.messages = messages;
-            })
-        };
-
-        $scope.baseMessages.remove = function(message){
-            message.remove();
+  var app = angular.module('messages', ['restangular', 'templates']);
+
+  app.controller('MessagesController', function($scope, Restangular){
+    $scope.baseMessages = Restangular.all('messages');
+
+    $scope.baseMessages.refresh = function(){
+      $scope.baseMessages.getList().then(function(messages){
+        $scope.messages = messages;
+      });
+    };
+
+    $scope.baseMessages.remove = function(message){
+      message.remove();
+      $scope.baseMessages.refresh();
+    };
+
+    $scope.baseMessages.refresh();
+
+  });
+
+  app.directive('messageForms', function(){
+    return {
+      restrict: "E",
+      templateUrl: 'message-forms.html'
+    };
+  });
+
+  app.controller('MessageController', function($scope, $timeout){
+    var timeout = null;
+    var debounceUpdate = function(new_message, old_message){
+      if(!new_message.id){
+        if($scope['message__form'].$valid){
+          if(timeout){
+            $timeout.cancel(timeout);
+          }
+          timeout = $timeout(function(){
+            $scope.baseMessages.post(new_message);
             $scope.baseMessages.refresh();
-        };
-
-        $scope.baseMessages.refresh();
-
-    });
-
-    app.directive('messageForms', function(){
-        return {
-            restrict: "E",
-            templateUrl: 'message-forms.html'
+          }, 1000);
         }
-    });
-
-    app.controller('MessageController', function($scope, $timeout){
-        var timeout = null;
-        var debounceUpdate = function(new_message, old_message){
-            if(!new_message.id){
-                if($scope['message__form'].$valid){
-                    if(timeout){
-                        $timeout.cancel(timeout);
-                    }
-                    timeout = $timeout(function(){
-                        $scope.baseMessages.post(new_message);
-                        $scope.baseMessages.refresh();
-                    }, 1000);
-                }
-
-                return;
-            }
-
-            if(new_message == old_message || $scope['message_' + new_message.id + '_form'].$invalid){
-                return;
-            }
-            if(timeout) {
-                $timeout.cancel(timeout);
-            }
-            timeout = $timeout(new_message.save, 1000);
-        };
-        $scope.$watchCollection('message', debounceUpdate);
-    });
+
+        return;
+      }
+
+      if(new_message == old_message || $scope['message_' + new_message.id + '_form'].$invalid){
+        return;
+      }
+      if(timeout) {
+        $timeout.cancel(timeout);
+      }
+      timeout = $timeout(new_message.save, 1000);
+    };
+    $scope.$watchCollection('message', debounceUpdate);
+  });
 })();

twilio/app/assets/javascripts/templates/message-form.html

@@ -0,0 +1,39 @@
+<div class='message panel panel-default col-md-4' ng-controller='MessageController'>
+  <form novalidate name="message_{{message.id}}_form">
+    <div class='panel-heading text-center'><input placeholder="title" name="title" class="form-control" type="text" ng-model="message.title" required /></div>
+    <div class='panel-body'>
+      <span ng-show='message_{{message.id}}_form.title.$dirty && message_{{message.id}}_form.title.$invalid'>Invalid title</span>
+      <span ng-show='message_{{message.id}}_form.body.$dirty && message_{{message.id}}_form.body.$invalid'>Invalid body</span>
+      <span ng-show='message_{{message.id}}_form.secret.$dirty &&  message_{{message.id}}_form.secret.$invalid'>Invalid secret</span>
+      <div class='form-group'>
+        <label>Message Body <textarea placeholder="body" name="body" class="form-control" type="text" ng-model="message.body" required /></label>
+      </div>
+      <div class='form-group'>
+        <label>Message Secret <input placeholder="secret" name="secret" class="form-control" type="number" ng-model="message.secret" required /></label>
+      </div>
+      <div class='form-group' ng-show='message.created_at'>
+        <label>Created</label>
+        {{message.created_at | date:"short"}}
+      </div>
+      <div class='form-group' ng-show='message.updated_at'>
+        <label>Last Updated</label>
+        {{message.updated_at | date:"short"}}
+      </div>
+      <div class='form-group'>
+        <label>Disabled? <input class="form-control" type="checkbox" ng-model="message.disabled" /></label>
+      </div>
+      <div class='form-group'>
+        <button class="btn btn-default" ng-click="baseMessages.remove(message)" ng-show="message.id">Delete</button>
+      </div>
+      <div class='panel panel-default' ng-show='message.call_logs'>
+        <div class='panel-heading'>Call Logs</div>
+        <div class='panel-body'>
+          <div class='panel panel-default call_log' ng-repeat='log in message.call_logs'>
+            <div class='panel-heading'>{{log.number}}</div>
+            <div class='panel-body'>{{log.created_at | date:"short"}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>

twilio/app/assets/javascripts/templates/message-form.html.haml

@@ -1,27 +0,0 @@
-.message.panel.panel-default.col-md-4{"ng-controller" => "MessageController"}
-  %form{"novalidate" => true, "name"=>"message_{{message.id}}_form"}
-    .panel-heading.text-center <input placeholder="title" name="title" class="form-control" type="text" ng-model="message.title" required />
-    .panel-body
-      %span{"ng-show" => "message_{{message.id}}_form.title.$dirty && message_{{message.id}}_form.title.$invalid"} Invalid title
-      %span{"ng-show" => "message_{{message.id}}_form.body.$dirty && message_{{message.id}}_form.body.$invalid"} Invalid body
-      %span{"ng-show" => "message_{{message.id}}_form.secret.$dirty && message_{{message.id}}_form.secret.$invalid"} Invalid secret
-      .form-group
-        %label Message Body <textarea placeholder="body" name="body" class="form-control" type="text" ng-model="message.body" required />
-      .form-group
-        %label Message Secret <input placeholder="secret" name="secret" class="form-control" type="number" ng-model="message.secret" required />
-      .form-group{"ng-show" => "message.created_at"}
-        %label Created
-        {{message.created_at | date:"short"}}
-      .form-group{"ng-show" => "message.updated_at"}
-        %label Last Updated
-        {{message.updated_at | date:"short"}}
-      .form-group
-        %label Disabled? <input class="form-control" type="checkbox" ng-model="message.disabled" />
-      .form-group
-        <button class="btn btn-default" ng-click="baseMessages.remove(message)" ng-show="message.id">Delete</button>
-      .panel.panel-default{"ng-show" => "message.call_logs"}
-        .panel-heading Call Logs
-        .panel-body
-          .panel.panel-default.call_log{"ng-repeat" => "log in message.call_logs"}
-            .panel-heading {{log.number}}
-            .panel-body {{log.created_at | date:"short"}}

twilio/app/assets/javascripts/templates/message-forms.html

@@ -0,0 +1,3 @@
+<div ng-repeat='message in messages'>
+  <ng-include src="'message-form.html'"></ng-include>
+</div>

twilio/app/assets/javascripts/templates/message-forms.html.haml

@@ -1,2 +0,0 @@
-%div{"ng-repeat" => "message in messages"}
-  %ng-include{"src"=>"'message-form.html'"}