Connection Rater Erich

components.connection-rater\.js

import Component from '@glimmer/component';

export default class extends Component {
  activeIndex = 0;
  constructor(owner, args) {
    super(owner, args); // what is owner?
    // connections is provided here and is the same as @connections in the hbs file
    const connections = args.connections
    connections[this.activeIndex].active = true;
    
    const downKey = 40;
    const upKey = 38;
    const aKey = 65;
    
    Ember.$(document).on('keydown', (e) => {
      console.log(e.keyCode)
      if (e.keyCode === downKey) {
        connections[this.activeIndex].active = false;
        this.activeIndex++;
        connections[this.activeIndex].active = true;
      }
      if (e.keyCode === aKey) {
        connections[this.activeIndex].bRating = false;
        connections[this.activeIndex].cRating = false;
        connections[this.activeIndex].dRating = false;
        connections[this.activeIndex].aRating = true;
      }
    })
  }
}

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 Item('Amy'), new Item('Bob'), new Item('Carrie'), new Item('Dan')]);  
}
class Item {
  constructor(name) {
    this.name = name
  }

  @tracked name
  @tracked active = false
  @tracked aRating = false
  @tracked bRating = false
  @tracked cRating = false
  @tracked dRating = false
}

templates.application\.hbs

<style>
	body {
		font-family: arial;
  }
  
  .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.aRating 'rating-choice'}}">A</div>
    <div class="rating-cell {{if connection.bRating 'rating-choice'}}">B</div>
    <div class="rating-cell {{if connection.cRating 'rating-choice'}}">C</div>
    <div class="rating-cell {{if connection.dRating 'rating-choice'}}">D</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"
  }
}