Checkin

components.check-in-detail.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

models.check-in.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
   title : attr(),
   todo: attr(),
   done: attr(),
   problems : attr()
});
 

router.js

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

const Router = Ember.Router.extend({
  location: 'none', 
});

Router.map(function() {
   this.route('check-ins',function(){
   		this.route('detail',{ path:"/:id" });
   }); 
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({ 
    redirect: function() {
        // this redirects / to /dashboard
        this.transitionTo('check-ins');
    }
});

routes.check-in.js

import Ember from 'ember';

export default Ember.Route.extend({
  model : function(){
  	return {id: 1 , title:"title"}
  }
});

routes.check-ins.js

import Ember from 'ember';

export default Ember.Route.extend({
    
  model: function(){
    return Ember.A([{id:1, title:"poniedzialek"},{id:2, title:"wtorek"}]);
  },
  actions:{
  	addcheckin:function(){ 
      this.get('controller.model').pushObject({title:"new"});
    }
  }
});

styles.app.css

body { 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
} 
    
.c1 {
	  display:inline-block;
    width: 33.3%;
    height:300px;
  float:left;
}
.c2 {
	  display:inline-block;
    width: 65%;
    height:300px;
  float:left;
}
 

#wrapper{
   
}

  div{
     margin:0;
    padding:0;
    border:0;
}

templates.application.hbs

<h1>Scrum check in</h1>
{{outlet}} 
{{#link-to 'check-ins'  }} ch{{/link-to}}

templates.check-in.hbs

<h5>Check-in</h5>
{{outlet}}

templates.check-ins.hbs

<div class=" w r apper">
	<div class='c1'>
  <h3>List </h3>
  <ul>
  	{{#each model as |entry|}} 
  	   <li>{{entry.title}} </li>
  	{{/each}}
	 </ul>
	</div>
	<div class="c2"> 
    <h3>Detail</h3>
    {{outlet}}
    {{check-in-detail}} 
	</div>
</div>

	<button{{action 'addcheckin'}}>Add</button>

templates.components.check-in-detail.hbs

{{yield}}
component

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}