Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Reeseman/946da9f09083ed6f19ee5985bb5d2ac9 to your computer and use it in GitHub Desktop.
Save Reeseman/946da9f09083ed6f19ee5985bb5d2ac9 to your computer and use it in GitHub Desktop.
Connection Rater Interview
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
connections[0].active = true
let connectionsIndex = 0
const downKey = 40;
const upKey = 38;
const yKey = 89;
const nKey = 78;
Ember.$(document).on('keydown', (e) => {
console.log(e.keyCode)
const keyCode = e.keyCode
if (keyCode == downKey) {
if (connectionsIndex == this.args.connections.length - 1) {
return;
}
connections[connectionsIndex].active = false
connectionsIndex += 1
connections[connectionsIndex].active = true
} else if (keyCode == upKey) {
if (connectionsIndex == 0) {
return;
}
connections[connectionsIndex].active = false
connectionsIndex -= 1
connections[connectionsIndex].active = true
} else if (keyCode == yKey) {
// find active connection
connections[connectionsIndex].known = true
connections[connectionsIndex].unknown = false
} else if (keyCode == nKey) {
connections[connectionsIndex].known = false
connections[connectionsIndex].unknown = true
}
// 3) Use y/n keys to add the"rating-choice" class to Yes/No for the currently selected connection
})
}
}
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 known = false
@tracked unknown = false
}
<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}} />
{{#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.known "rating-choice"}}">Yes</div>
<div class="rating-cell {{if connection.unknown "rating-choice"}}">No</div>
</div>
{{/each}}
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment