Connection Rater Interview

components.connection-rater\.js

import Component from '@glimmer/component';

export default class extends Component {
  downHandler(connections, currentIndex) {
    connections[currentIndex].active = false;
          if (currentIndex < connections.length - 1) {
            currentIndex += 1;
          }
           connections[currentIndex].active = true;
    return currentIndex;
  }
  
  upHandler(connections, currentIndex) {
    connections[currentIndex].active = false;
          if (currentIndex > 0) {
            currentIndex -= 1;
          }
         connections[currentIndex].active = true;
    return currentIndex;
  }
  constructor() {
    super(...arguments);
    // connections is provided here and is the same as @connections in the hbs file
    const connections = this.args.connections
    
    // 1) Apply the class "alert-info" to the first connection
    connections[0].active = true;
    var currentConnectionIndex = 0;
    
    const downKey = 40;
    const upKey = 38;
    const yKey = 89;
    const nKey = 78;
    
    Ember.$(document).on('keydown', (e) => {
      console.log(e.keyCode)
      // 2) Use up/down arrow keys to move the "alert-info" class between connections
			switch(e.keyCode) {
        case 40:
          currentConnectionIndex = this.downHandler(connections, currentConnectionIndex);
          break;
        case 38:
          currentConnectionIndex = this.upHandler(connections, currentConnectionIndex);
          break;
        case 89:
          connections[currentConnectionIndex].positiveRating = true;
          connections[currentConnectionIndex].negativeRating = null;
          break;
        case 78:
          connections[currentConnectionIndex].positiveRating = null;
          connections[currentConnectionIndex].negativeRating = true;
          break;
        default:
          console.log('other')
      }
      // 3) Use y/n keys to add the"rating-choice" class to Yes/No for the currently selected connection
    })
    
    
  }
  
  upDownHandler(key, connection, currentIndex){
	
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { A } from '@ember/array';

export default class ApplicationController extends Controller {
  appName = 'ICC Connection Rater';
  @tracked connections = A([
    new Connection('Amy'), 
    new Connection('Bob'), 
    new Connection('Carrie'), 
    new Connection('Dan')
  ]);
	// @tracked activeConnections;
	get activeConnections() {
    var positives = this.connections.filter((connection) => {
    	return connection.positiveRating == true; 
    });
     
    return positives.length;
    // return activeConnectionCount;
  }     
                                             
}

class Connection {
  constructor(name) {
    this.name = name
  }

  @tracked name
  @tracked active = false
	@tracked positiveRating
  @tracked negativeRating
}

templates.application\.hbs

<style>
	body {
		font-family: arial;
  }
  
  .rating-row {
  	margin-bottom: 10px;
  }
  
  .rating-cell {
  	display: inline;
  }
  
  .alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
  }
  
  .rating-choice {
  	background-color: green;
    color: white;
  }
}
</style>
<h1>Welcome to {{this.appName}}</h1>
<br>
<br>

Active Connection Count: {{this.activeConnections}}
<ConnectionRater @connections={{this.connections}} />

templates.components.connection-rater\.hbs

{{#each @connections as |connection|}}
  <div class="row rating-row alert {{if connection.active "alert-info"}}">
    <div class="col-md-8">
      {{connection.name}}
    </div>
    
		{{#if connection.positiveRating}}
        <div class="rating-cell rating-choice">Yes</div>
    {{else}}
        	<div class="rating-cell">Yes</div>
    {{/if}}
    {{#if connection.negativeRating}}
    	<div class="rating-cell rating-choice">No</div>
    {{else}}
      <div class="rating-cell">No</div>
    {{/if}}
    
  </div>
{{/each}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.16.5"
  }
}