shai-twiddle

controllers.application.js

import Ember from 'ember';
const Object = Ember.Object;
const computed = Ember.computed;
var counter = 1;


const genres = [
  Object.create({id: 1, label: 'learning'}),
  Object.create({id: 2, label: 'fiction'}),
  Object.create({id: 3, label: 'non-fiction'})
]


const books = [
  Object.create({title: 'Pragmatic Programmer', topSeller: false, genre: genres[0]}),
  Object.create({title: 'Clean Code',  topSeller: true, genre: genres[0]}),
  Object.create({title: 'Mythical Man Month',  topSeller: false, genre: genres[0]}),
	Object.create({title: 'Learn Python the Hard Way',  topSeller: true, genre: genres[0]}),
  
  Object.create({title: 'Animal Farm',  topSeller: true, genre: genres[1]}),
  Object.create({title: 'Brave New World',  topSeller: false, genre: genres[1]}),
  Object.create({title: 'Hunger Games',  topSeller: false, genre: genres[1]}),
	Object.create({title: 'Star Wars',  topSeller: false, genre: genres[1]}),
  
  Object.create({title: 'In Cold Blood',  topSeller: false, genre: genres[2]}),
  Object.create({title: 'Guns, Germs, and Steel',  topSeller: true, genre: genres[2]}),
  Object.create({title: 'A Brief History of Time',  topSeller: true, genre: genres[2]}),
  Object.create({title: '1867',  topSeller: false, genre: genres[2]})
]


function randomlyPopulateBooks() {
  var genre_index = Math.floor(Math.random() * 3);
	var top_seller = Math.random() > 0.5;
	const book = Object.create({title: 'New Book ' + counter, topSeller: top_seller, genre: genres[genre_index]})
  books.pushObject(book)
  counter = counter + 1;
  Ember.run.later(randomlyPopulateBooks, 6000)
  console.log('Books: ', books)
}


//-- You should only be editing code below this line -----------------------------------


export default Ember.Controller.extend({
  appName: 'Ember Twiddle',

  init() {
  	this._super(...arguments)
    Ember.run.later(function() {
    	randomlyPopulateBooks()
    }, 6000)
  },
  
  books: books
  
  /*
 
 	Fill in the computed properties:
 
 	learningBooks: ...
  nonFictionBooks: ...
  fictionBooks: ...
  
  topLearningBooks: ...
  topNonFictionBooks: ...
  topFictionBooks: ...
  
  */
 
})

styles.app.css

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

templates.application.hbs

<h1>Book Store</h1>

We have a total of {{books.length}} books!

<hr><br>

<h3>Learning</h3>
<ul>
{{#each learningBooks as |book|}}
	<li>{{book.title}}</li>
{{/each}}
</ul>

<br>

<h3>Non-Fiction</h3>
<ul>
{{#each nonFictionBooks as |book|}}
	<li>{{book.title}}</li>
{{/each}}
</ul>

<br>

<h3>Fiction</h3>	
<ul>
{{#each fictionBooks as |book|}}
	<li>{{book.title}}</li>
{{/each}}
</ul>

<br><br><br>

<h2>Top Books by Genre</h2>
<hr><br>

<h3>Top Learning Books</h3>
<ul>
{{#each topLearningBooks as |book|}}
	<li>{{book.title}}</li>
{{/each}}
</ul>

<br>

<h3>Top Non-Fiction Books</h3>
<ul>
{{#each topNonFictionBooks as |book|}}
	<li>{{book.title}}</li>
{{/each}}
</ul>

<br>


<h3>Top Fiction Books</h3>
<ul>
{{#each topFictionBooks as |book|}}
	<li>{{book.title}}</li>
{{/each}}
</ul>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}