ember assessment

controllers.application.js

import fetch from 'fetch';
import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Week 1 Ember Assesment'
});

controllers.breeds.js

import Ember from 'ember';
import { inject } from '@ember/service'

export default Ember.Controller.extend({
  selectedBreed: null,
  router: inject(),
  
  actions: {
   	 selectBreed(parentBreed, subBreed) {
       
       let concatBreeds = '';
       let breed;
       concatBreeds = `${parentBreed}-${subBreed}`;
       
       if(subBreed === '') {
       		breed = parentBreed;
       }
       else {
       		breed = concatBreeds;
       }
       
       this.set('selectedBreed', breed);
       console.log('selectedBreed: ', this.selectedBreed);
       
       this.get('router').transitionTo('gallery', {
         queryParams: {
           selectedBreed: breed
         }
       });
     }
  }
});

controllers.gallery.js

import Ember from 'ember';
import {computed} from '@ember/object';

export default Ember.Controller.extend({
  queryParams: ['selectedBreed'],
  
  images: null,
  currentIndex: 0,
  
  currentImage: computed('images.[]', 'currentIndex', function(){
    return this.get('images').objectAt(this.get('currentIndex'));
  }),
  
  isNextEnabled: computed('images.length', 'currentIndex', function() {
    return this.get('currentIndex') < this.get('images.length') - 1;
  }),
  
  isPreviousEnabled: computed('currentIndex', function() {
    return this.get('currentIndex') !== 0;
  }),
  
  actions: {
  	showNextImage() {
			this.incrementProperty('currentIndex');
    },
    
    showPrevImage() {
			this.decrementProperty('currentIndex');
    }
  }
});

router.js

import Ember from 'ember';

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

Router.map(function() {
  this.route('breeds', { path: 'breeds' });
  this.route('gallery', { path: 'gallery' });
  this.route('index', { path: '/' });
});

export default Router;

routes.breeds.js

import DS from 'ember-data';
import fetch from "fetch";
import Ember from "ember";

const listOfDogBreeds = 'https://dog.ceo/api/breeds/list/all';

export default Ember.Route.extend({
  model() {
    return fetch(listOfDogBreeds).then(function(response) {
      return response.json();
    });
	},
  
  setupController(controller, model) {
    this._super(controller, null);
    
    let breeds = []
        
		Object.keys(model.message).forEach( parentBreed => {
     	let breedEntry = {};
      breedEntry.title = parentBreed;
      breedEntry.subBreeds = [];
      
			model.message[parentBreed].forEach(subBreed => {
        breedEntry.subBreeds.push({
          title: subBreed
        });
      });
      
      breeds.push(breedEntry);
    });
    
    controller.set('breeds', breeds);
  }
});

routes.gallery.js

import fetch from 'fetch';
import Ember from 'ember';

export default Ember.Route.extend({

  model(params) {
    var url = `https://dog.ceo/api/breed/${params.selectedBreed}/images`;
    var dogName = params.selectedBreed;
  	return fetch(url).then(function(response) {
      return response.json();
    });
  },
  
  setupController(controller, model) {
  	this._super(controller, null);
    
    controller.set('images', model.message);
    controller.set('dog', model.dogName);
  }
});

routes.home.js

import Ember from 'ember';

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

templates.application.hbs

<div style="padding: 10px; background-color: #ececec; font-family: sans-serif; font-size: 14px;">
<h1>{{appName}}</h1>
<h3>Instructions</h3>
<ol>
<li>Create a route that will show a list of all the dog breeds as provided by this end point: <a href="https://dog.ceo/dog-api/documentation/"><code>https://dog.ceo/api/breeds/list/all</code></a></li>
<li>When the user clicks on a breed, transition them to a new route that will show images of the selected breed from this end point: <a href="https://dog.ceo/dog-api/documentation/breed"><code>https://dog.ceo/api/breed/[breed]/images</code></a></li>
<li>The images must be shown 1 image at a time and the user must be able to click next/previous to navigate through the list of images.</li>
<li>All data fetching must be done using <a href="https://github.com/ember-cli/ember-fetch">ember-fetch</a></li>
</ol>
<hr/>
<div style="padding: 20px; border: 1px solid; background-color: white; min-height: 400px">
{{#link-to 'index'}}<a href="">Home</a>{{/link-to}}
{{#link-to 'breeds'}}<a href="">Breeds</a>{{/link-to}}
<h1>{{homeTitle}}</h1>
{{outlet}}
</div>
</div>

templates.breeds.hbs

<h1>Dog Breeds</h1>

<ul>
	{{#each breeds as |breed|}}
	<li onclick={{action "selectBreed" breed.title ''}} style="cursor:pointer">{{breed.title}}</li>
  {{#if breed.subBreeds.length}}
  	<ul>
    	{{#each breed.subBreeds as |subBreed|}}
	  	<li onclick={{action "selectBreed" breed.title subBreed.title}} style="cursor:pointer">{{subBreed.title}}</li>
      {{/each}}
    </ul>
  {{/if}}
	{{/each}}
</ul>

templates.gallery.hbs

<h1>Dog selected:</h1>

<img src="{{currentImage}}" alt="dog image" height="100">

{{#if isPreviousEnabled}}<button onclick={{action 'showPrevImage' currentImage}}>Prev</button>{{/if}}
{{#if isNextEnabled}}<button onclick={{action 'showNextImage' currentImage}}>Next</button>{{/if}}

templates.index.hbs

<h1>Home</h1>

twiddle.json

{
  "version": "0.15.0",
  "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.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-data": "3.2.0",
    "ember-fetch": "5.0.1"
  }
}