pizza project

controllers.application.js

import Ember from 'ember';

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

helpers.incerement-index.js

import Ember from 'ember';

export function incerementIndex([index]/*, hash*/) {
	return index+1;
}

export default Ember.Helper.helper(incerementIndex);

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: "/"
});

Router.map(function() {
	this.route('page');
});

export default Router;

routes.orders.js

// import Route from '@ember/routing/route';
import Ember from 'ember';
import fetch from 'fetch';

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

routes.page.js

import Ember from 'ember';


export default Ember.Route.extend({
	model(){
	  var url = "//files.olo.com/pizzas.jsonp";
	  return Ember.$.getJSON(url);
	 }
  // setupController(controller, model) {
  //   super.setupController(controller, model);
  //   var sortedOrder = Object.entries(model.toppings).sort((a,b) => (b[1]-a[1]));
  //   controller.set('sortedOrder', sortedOrder.slice(0,20));
  // }
});

templates.application.hbs

{{outlet}}

templates.orders.hbs

google

templates.page.hbs

what is happening

tests.helpers.destroy-app.js

import { run } from '@ember/runloop';

export default function destroyApp(application) {
  run(application, 'destroy');
}

tests.helpers.start-app.js

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

const { run } = Ember;
const assign = Ember.assign || Ember.merge;

export default function startApp(attrs) {
  let application;

  let attributes = assign({rootElement: "#test-root"}, config.APP);
  attributes.autoboot = true;
  attributes = assign(attributes, attrs); // use defaults, but you can override;

  run(() => {
    application = Application.create(attributes);
    application.setupForTesting();
    application.injectTestHelpers();
  });

  return application;
}

tests.test-helper.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { start } from 'ember-qunit';
import { assign } from '@ember/polyfills';

let attributes = assign({ rootElement: '#main' }, config.APP);
setApplication(Application.create(attributes));

start();

twiddle.json

{
  "version": "0.15.1",
	"EmberENV": {
    "FEATURES": {},
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "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",
    "ember-fetch": "6.7.2"
  }
}

Framework:

- Ember Octane

- Bulma (Css)

Assumptions:

- Assumed that the given link to download JSON wouldnt be having any mixed content issue for it was an http Link. 

- Assumed that getting accurate result was important didnt spend that much time on CSS. 

Logic and Explanation

• Decided to not use ember data and create a global store for that might slow down the time spent in coverting objects to ember data objects and may not be necessary for the given problem

• Stored all available information as part of the model to give the scope to view more information if need be

• Used a simple orders route that gets loaded as the default and that fetches the data and process the values and stores the as objects.

• setup controller is where the logic for finding top orders lies. Ideally would like to move that to a component whose single functionality would be to find the top 20 results given such data that way we can use it in multiple places without having to worry about what data it is.