application.js

// Twilio Setup

var last_called    = null;
var halt_auto_flag = false;

Twilio.Device.ready(function (device) {
    $('#log').append("Ready; ");
});

Twilio.Device.error(function (error) {
    $('#log').append("Error: " + error.message + "; ");
});

Twilio.Device.connect(function (conn) {
    $('#log').append("Successfully established call; ");
});

Twilio.Device.disconnect(function (conn) {
    $('#log').append("Call ended; ");
    if (halt_auto_flag) { return; }
    $('#log').append("Moving on; ");
    var next_people = App.store.filter(App.Person, function(data) {
        if ((data.id > last_called) && (data.completed === false)) { return true; }
    });
    var next_person = next_people.objectAt(0);
    $('#log').append("Next person: " + next_person.get('name') + "; ");
    call(next_person.get('id'));
});

function call(person_id) {
    halt_auto_flag = false;
    person = App.store.find(App.Person, person_id);
    phone = person.get('phone');
    $('#log').append("Calling " + phone + "; ");
    Twilio.Device.connect({'PhoneNumber': phone});
    last_called = person_id;
}

function hangup() {
    Twilio.Device.disconnectAll();
}

function halt_auto() {
    halt_auto_flag = true;
}


// *** Ember.js Application ***

// App Setup

var App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend();
App.ApplicationView       = Ember.View.extend({ templateName: 'application' });

App.store = DS.Store.create({
    adapter: DS.RESTAdapter.create({bulkCommit: false}),
    revision: 4
});

// Models

App.List = DS.Model.extend({
    name:           DS.attr('string'),
    description:    DS.attr('string'),
    created_at:     DS.attr('date'),
    updated_at:     DS.attr('date'),
    people:         DS.hasMany('App.Person')
});

App.Person = DS.Model.extend({
    name:           DS.attr('string'),
    address:        DS.attr('string'),
    phone:          DS.attr('string'),
    note:           DS.attr('string'),
    completed:      DS.attr('boolean'),
    result:         DS.attr('string'),
    last_called_at: DS.attr('date'),
    list:           DS.belongsTo('App.List')
});

// Views

App.ListsController  = Ember.ArrayController.extend();
App.ListsView        = Ember.View.extend({ templateName: 'lists' });

App.ListController   = Ember.ObjectController.extend();
App.ListView         = Ember.View.extend({ templateName: 'list' });

// Router

App.router = Ember.Router.create({
    enableLogging: true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            redirectsTo: 'lists'
        }),
        lists: Ember.Route.extend({
            route: '/lists',
            connectOutlets: function (router) {
                router.get('applicationController').connectOutlet('lists', App.store.findAll(App.List));
            },
            showList: Ember.Route.transitionTo('list')
        }),
        list: Ember.Route.extend({
            route: '/lists/:id',
            serialize: function(router, context){
                return {id: context.get('id')};
            },
            deserialize: function(router, urlParams){
                return App.store.find(App.List, urlParams.id);
            },
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('list', context);
            },
            showLists: Ember.Route.transitionTo('lists')
        })
    })
});

$(function() { App.initialize(App.router); });

index.html

<%= javascript_include_tag 'application' %>
<script type="text/javascript">
    Twilio.Device.setup("<%= @twilio_client_token %>");
</script>

<button class="hangup" onclick="hangup();">Hangup</button>
<button class="hangup" onclick="halt_auto();">Halt Auto</button>

<p id="log">LOG: </p>


<!-- Ember.js Templates -->

<script type="text/x-handlebars" data-template-name="application">
  <h3>Agent: <%= current_user.display_name %></h3>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="lists">
  <h3>Lists</h3>
  <ul>
    {{#each list in controller}}
      <li><a {{action showList list}}>{{list.name}}</a> - {{list.description}}</li>
    {{/each}}
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="list">
  <a {{action showLists}}>Lists</a>
  <h3>List: {{name}}</h3>
  <table class="list">
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Phone</th>
      <th>Completed</th>
      <th>Result</th>
      <th>Last Called At</th>
      <th></th>
    </tr>
    {{#each person in people}}
    <tr>
      <td>{{person.name}}</td>
      <td>{{person.address}}</td>
      <td>{{person.phone}}</td>
      <td>{{person.completed}}</td>
      <td>{{person.result}}</td>
      <td>{{person.last_called_at}}</td>
      <td rowspan=2><button class="call" onclick="call('{{unbound person.id}}');">Start Calling</button></td>
      <!--<td rowspan=2><button class="call" onclick="call('{{unbound person.id}}');">Start Calling</button></td>-->
    </tr>
    <tr>
      <td colspan=6><i>{{person.note}}</i> &nbsp;</td>
    </tr>
    {{/each}}
  </table>
</script>