Score grid - without displayscore object

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Score Grid Twiddle',
  

});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
  	return {
      activityscores: [
        this.store.createRecord('activityscore', {
          activity: { 
            name: 'Activity 1', 
            multiplier: 1
          },
          scores: [
            this.store.createRecord('score', { points: 1 }),
            this.store.createRecord('score', { points: 2 }),
            this.store.createRecord('score', { points: 2 }),
            this.store.createRecord('score', { points: 3 })
          ]
        }),

        this.store.createRecord('activityscore', {
          activity: { 
            name: 'Activity 2', 
            multiplier: 2
          },
          scores: [
            this.store.createRecord('score', { points: 4 }),
            this.store.createRecord('score', { points: 3 }),
            this.store.createRecord('score', { points: 3 }),
            this.store.createRecord('score', { points: 7 })
          ]
        }),

        this.store.createRecord('activityscore', {
          activity: { 
            name: 'Activity 3', 
            multiplier: 1
          },
          scores: [
            this.store.createRecord('score', { points: 7 }),
            this.store.createRecord('score', { points: 5 }),
            this.store.createRecord('score', { points: 5 }),
            this.store.createRecord('score', { points: 4 })
          ]
        }),

     this.store.createRecord('activityscore', {
          activity: { 
            name: 'Activity 4', 
            multiplier: 1
          },
          scores: [
            this.store.createRecord('score', { points: 7 }),
            this.store.createRecord('score', { points: 5 }),
            this.store.createRecord('score', { points: 5 }),
            this.store.createRecord('score', { points: 4 })
          ]
        }),

     this.store.createRecord('activityscore', {
          activity: { 
            name: 'Activity 5', 
            multiplier: 1
          },
          scores: [
            this.store.createRecord('score', { points: 7 }),
            this.store.createRecord('score', { points: 5 }),
            this.store.createRecord('score', { points: 5 }),
            this.store.createRecord('score', { points: 4 })
          ]
        }),

      this.store.createRecord('activityscore', {
          activity: { 
            name: 'Activity 6', 
            multiplier: 1
          },
          scores: [
            this.store.createRecord('score', { points: 7 }),
            this.store.createRecord('score', { points: 5 }),
            this.store.createRecord('score', { points: 5 }),
            this.store.createRecord('score', { points: 4 })
          ]
        })

      ]
    };
  },
});

application.template.hbs

<h1>{{appName}}</h1>
<br>
{{model.testscore.points}}
<br>

{{score-grid activityscores=model.activityscores}}

<br>
<br>

displayScore.js

import Ember from 'ember';

export default Ember.ObjectProxy.extend({
  droppedHigh:false,
  droppedLow:false,
  isDropped: Ember.computed.or('droppedHigh','droppedLow')
});

judge-score.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'td',
  classNames: ["score"],

    classNameBindings: [
        "score.droppedLow:droppedLow",
        "score.droppedHigh:droppedHigh"
    ],

});

judge-score.template.hbs

{{input value=score.points id=(concat "score_" lineIndex "_" columnIndex)}}

models.activity.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  multiplier: DS.attr('number', {defaultValue: 1})
});

models.activityscore.js

import DS from 'ember-data';

export default DS.Model.extend({
  activity: DS.belongsTo('activity'),
  scores: DS.hasMany('score'),
  totalScore: DS.attr('number', {defaultValue:0})
});

models.score.js

import DS from 'ember-data';

export default DS.Model.extend({
  activityscore: DS.belongsTo('activityscore'),
  points: DS.attr('number', {defaultValue: 0}),
  
  droppedHigh:false,
  droppedLow:false,
  isDropped: Ember.computed.or('droppedHigh','droppedLow')
});

score-grid.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  totalScoreList: Ember.computed.mapBy('activityscores', 'totalScore'),
  totalActivitiesScore: Ember.computed.sum('totalScoreList')

});

score-grid.template.hbs

<table>
    <tr>
        <th></th>
        <th>Judge 1</th>
        <th>Judge 2</th>
        <th>Judge 3</th>
        <th>Judge 3</th>
        <th>Multiplier</th>
        <th>Total</th>
    </tr>

{{#each activityscores as |activityscore index|}}
  {{score-row activityscore=activityscore lineIndex=index}}
{{/each}}
    
    <tr>
        <td colSpan="6" style="text-align: right;">Total Actvities Score:</td>
        <td>{{totalActivitiesScore}}</td>
    </tr>
</table>
<p>
<input id="legendlow" class="legend low" value=""/>
<label for="legendlow">Indicates a dropped low score not counted toward total</label>
<br/>
<input id="legendhigh" class="legend high" value=""/>
<label for="legendhigh">Indicates a dropped high score not counted toward total</label>
</p>

score-row.component.js

import Ember from 'ember';
import DisplayScore from '../displayScore';

export default Ember.Component.extend({
    tagName: 'tr',
    activity: null,

    sortedScores: Ember.computed.sort('activityscore.scores.@each.points', function (score1, score2) {
        if (+score1.get('points') > +score2.get('points')) {
            return 1;
        } else if (+score1.get('points') < +score2.get('points')) {
            return -1;
        }
        return 0;
    }),

    displayScores: Ember.computed('activityscore.scores.@each.points', function () {

        let scores = this.get('activityscore.scores');
        if (Ember.isPresent(scores)) {
            var numLowToDrop = 1,
                numHighToDrop = 1;

          let returnArray = scores;
/**          
            let returnArray = scores.map(function (item, index, enumerable) {
                return DisplayScore.create({
                    content: item,
                    droppedLow: false,
                    droppedHigh: false

                });
            });
**/

            let arrayToSort = returnArray.map(function (item) {
                return item;
            });
            let sortedArray = arrayToSort.sort(function (score1, score2) {
                if (+score1.get('points') > +score2.get('points')) {
                    return 1;
                } else if (+score1.get('points') < +score2.get('points')) {
                    return -1;
                }
                return 0;
            });


            sortedArray.forEach(function (item, index, enumerable) {
                item.set('droppedLow', index < numLowToDrop);
                item.set('droppedHigh', index >= (enumerable.length - numHighToDrop));

            });

            return returnArray;
        } else {
            return Ember.A();
        }
    }),

    countedDisplayScores: Ember.computed.filterBy('displayScores', 'isDropped', false),

    countedDisplayScorePoints: Ember.computed.mapBy('countedDisplayScores', 'points'),

    calculatedTotal: Ember.computed('countedDisplayScorePoints', function () {
        let totalScore = 0;
        this.get('countedDisplayScorePoints').forEach(function (item) {
            totalScore += +item;
        });

        if (Ember.isPresent(this.get('activityscore.activity.multiplier'))) {
            totalScore *= +this.get('activityscore.activity.multiplier');
        }
        this.set('activityscore.totalScore', totalScore);
        return totalScore;
    })


});

score-row.template.hbs

<td>{{activityscore.activity.name}}</td>

{{#each displayScores as |score index|}}
    {{judge-score score=score lineIndex=lineIndex columnIndex=index}}
{{/each}}
    
<td>x{{activityscore.activity.multiplier}}</td>
<td>{{calculatedTotal}}</td>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

input {
  width: 50px;
  text-align: center;
  margin: 0 5px;
}

td {
  text-align: center;
  padding: 5px;
}

.score input, input.legend {
    border: none;
    border-bottom: 1px solid #333;
}
.droppedLow input, input.legend.low {
    color: #A2A2A2;
    font-style: italic;
    background-color: #ffdde4;
}
.droppedHigh input, input.legend.high {
    color: #A2A2A2;
    font-style: italic;
    background-color: #fff0d7;
}

twiddle.json

{
  "version": "0.4.17",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.2.0",
    "ember-data": "release",
    "ember-template-compiler": "2.2.0"
  }
}