Sites and Flights

application.template.hbs

<h1>Sites and Flights</h1>

{{outlet}}
<br>
<br>

components.flight-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  flights: null,

  sortedFlights: Ember.computed.sort('flights', '_flightSort'),
  _flightSort: ['executeAt'],

  sortOrder: Ember.computed.alias('_flightSort.firstObject'),
  isAsc: Ember.computed.equal('sortOrder', 'executeAt'),
  isDesc: Ember.computed.equal('sortOrder', 'executeAt:desc'),

  actions: {
    asc() {
      this.set('_flightSort', ['executeAt']);
    },
    desc() {
      this.set('_flightSort', ['executeAt:desc']);
    }
  }
});

components.site-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  sites: null,

  sortedSites: Ember.computed.sort('sites', '_siteSort'),
  _siteSort: ['name']
});

helpers.d.js

import Ember from 'ember';

export default Ember.Helper.helper(function ([d]) {
  return d ? d.toGMTString() : '';
});

instance-initializers.fixture.js

export default {
  name: 'fixture',
  after: 'ember-data',
  initialize: initialize
}


export function initialize(application) {
  let store = application.lookup('service:store');
  store.pushPayload({
    data: [{
      id: '1',
    	type: 'site',
    	attributes: {
    		name: 'Atlanta'
  		},
    	relationships: {
      	flights: {
        	data: [
          	{ id: '10', type: 'flight' },
          	{ id: '11', type: 'flight' },
          	{ id: '14', type: 'flight' }
        	]
      	}
    	}
  	}, {
      id: '2',
    	type: 'site',
    	attributes: {
    		name: 'Chicago'
    	},
    	relationships: {
    		flights: {
    	  	data: [
    	    	{ id: '12', type: 'flight' },
    	      { id: '13', type: 'flight' }
    	    ]
    	  }
    	}
  	}],
    included: [{
      id: '10',
      type: 'flight',
      attributes: {
        'name': 'DL 2341',
        'execute-at': '2015-10-26T08:00Z'
      }
    }, {
      id: '11',
      type: 'flight',
      attributes: {
        'name': 'AA 435',
        'execute-at': '2015-10-25T13:30Z'
      }
    }, {
      id: '12',
      type: 'flight',
      attributes: {
        'name': 'UA 113',
        'execute-at': '2015-10-24T22:45Z'
      }
    }, {
      id: '13',
      type: 'flight',
      attributes: {
        'name': 'US 953',
        'execute-at': '2015-10-25T14:00Z'
      }
    }, {
      id: '14',
      type: 'flight',
      attributes: {
        'name': 'AS 763',
        'execute-at': '2015-10-28T12:20Z'
      }
    }]
  });
}

models.flight.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  executeAt: DS.attr('date'),
  site: DS.belongsTo('site')
});

models.site.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  flights: DS.hasMany('flight')
});

router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('sites', { path: '/site', resetNamespace: true }, function() {
    this.route('site', { path: '/:site_id' });
  });
});

export default Router;

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
    this.transitionTo('sites');
  }
});

routes.sites.js

import Ember from 'ember';

export default Ember.Route.extend({
  setupController(controller, model) {
    controller.set('sites', model);
  },
  model() {
    return this.get('store').peekAll('site');
  }
});

routes.sites.site.js

import Ember from 'ember';

export default Ember.Route.extend({
  setupController(controller, model) {
    controller.set('site', model);
  },
  model(params) {
    return this.get('store').find('site', params.site_id);
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.t-link {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

templates.application.hbs

<h1>Sites and Flights</h1>
{{outlet}}
<br>
<br>

templates.components.flight-list.hbs

{{yield this}}

templates.components.site-list.hbs

{{yield this}}

templates.sites.hbs

<h4>Sorted Site List:</h4>

{{#site-list sites=sites as |siteList|}}
  <ul>
    {{#each siteList.sortedSites as |site|}}
      <li>
        {{#link-to 'sites.site' site}}
          {{site.name}}
        {{/link-to}}
      </li>
	  {{/each}}
  </ul>
{{/site-list}}

{{outlet}}

templates.sites.site.hbs

<hr>

<h4>Site Details:</h4>
Site Name: {{site.name}} <br>

{{#flight-list flights=site.flights as |flightList|}}
  Flight List (<span class="{{if flightList.isDesc 't-link'}}" {{action "asc" target=flightList}}>Asc</span>,
    <span class="{{if flightList.isAsc 't-link'}}" {{action "desc" target=flightList}}>Desc</span>):
  <ul>
    {{#each flightList.sortedFlights as |flight|}}
      <li>{{flight.name}} ({{d flight.executeAt}})</li>
    {{/each}}
  </ul>
{{/flight-list}}

twiddle.json

{
  "version": "0.4.14",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}