Connection Rater Interview

components.connection-rater\.js

import Component from '@glimmer/component';

export default class extends Component {
  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;
    
    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
      if (e.keyCode === downKey) {
        // Move active down 1 (no up from first row or down from last row)
        let active = this.findActive(connections);
        console.log("findActive returned " + active);
        if (active !== null && active != connections.length - 1) {
          connections[active].active = false;
          connections[active + 1].active = true;
        }
      } else if (e.keyCode === upKey) {
        // Move active up 1
        let active = this.findActive(connections);
        if (active !== null && active != 0) {
          connections[active].active = false;
          connections[active - 1].active = true;
        }
      } else if (e.keyCode === yKey) {
        // Highlight the Yes for the currently active connection
        let active = this.findActive(connections);
        if (active !== null) {
          connections[active].rating = 1;
        }
      } else if (e.keyCode === nKey) {
        // Highlight the No for the currently active connection
        let active = this.findActive(connections);
        if (active !== null) {
          connections[active].rating = 0;
        }
      } else {
        // Do nothing
      }
      
      // 3) Use y/n keys to add the"rating-choice" class to Yes/No for the currently selected connection
    })
  }
  
    findActive = (connections) => {
      let found = null;
      connections.forEach((c, i) => {
        if (c.active) {
          found = i;
        }
      });
      return found;
    }
}

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')
  ]);  
}

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

  @tracked name
  @tracked active = false
  @tracked rating = null

  get ratingIsYes() {
    return this.rating == 1;
  }
  
  get ratingIsNo() {
    return this.rating == 0;
  }
  
}

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>
<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>
    <div class="rating-cell {{if connection.ratingIsYes "rating-choice"}}">Yes</div>
    <div class="rating-cell {{if connection.ratingIsNo "rating-choice"}}">No</div>
  </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"
  }
}