Skip to content

Instantly share code, notes, and snippets.

@workmanw
Last active October 14, 2017 06:21
Embed
What would you like to do?
Sites and Flights
<h1>Sites and Flights</h1>
{{outlet}}
<br>
<br>
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']);
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
sites: null,
sortedSites: Ember.computed.sort('sites', '_siteSort'),
_siteSort: ['name']
});
import Ember from 'ember';
export default Ember.Helper.helper(function ([d]) {
return d ? d.toGMTString() : '';
});
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'
}
}]
});
}
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
executeAt: DS.attr('date'),
site: DS.belongsTo('site')
});
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
flights: DS.hasMany('flight')
});
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;
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel() {
this.transitionTo('sites');
}
});
import Ember from 'ember';
export default Ember.Route.extend({
setupController(controller, model) {
controller.set('sites', model);
},
model() {
return this.get('store').peekAll('site');
}
});
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);
}
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.t-link {
color: blue;
text-decoration: underline;
cursor: pointer;
}
<h1>Sites and Flights</h1>
{{outlet}}
<br>
<br>
<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}}
<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}}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment