Green

by Julian

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>
  <script type="text/x-handlebars" data-template-name="overview-tab-view">
    <div class="summary">
      Total active contracts: {{totalContracts}}<br/>
      Average hourly rate: {{money averageRate}} ({{averageRate}})<br/>
      Total daily bill rate: {{money dailyBillRate}} ({{dailyBillRate}})<br/>
      Total weekly bill rate: {{money weeklyBillRate}}<br/>
      Total weekly bill rate: {{ weeklyBillRate}}<br/>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="contracts-tab-view">
    {{#if warning}}
      <div class="warning">{{warning}}</div>
    {{else}}
      <table>
        <thead>
          <tr>
            <th>Account</th>
            <th>Project</th>
            <th>Employee</th>
            <th>Rate</th>
          </tr>
        </thead>
        <tbody>
        {{#each filteredContent}}
          {{view App.ContractListView contentBinding="this"}}
        {{/each}}
        </tbody>
      </table>
    {{/if}}
  </script>

  <script type="text/x-handlebars" data-template-name="contract-list-view">
    {{#with content}}
     
    
          <td width="27%">
            {{accountName}}
            <div class="miniBlock">
              <span>Bill-To Customer:</span><em>{{customerName}}</em><br/>
              <span>Cost Center:</span><em>{{costCenter}}</em><br/>
            </div>
          </td>
          <td width="27%">
            {{orderReference}}
            <div class="miniBlock">
              <span>Site:</span><em>{{siteName}}</em><br/>
              <span>Process:</span><em>{{processName}}</em><br/>
              <span>Order Reference:</span><em>{{processName}}</em><br/>
            </div>
          </td>
          <td width="27%">
            {{employeeName}}
            <div class="miniBlock">
              <span>Manager:</span><em>{{managerName}}</em><br/>
            </div>
          </td>
          <td width="19%">
       ...

JavaScript

App = Ember.Application.create({});


Handlebars.registerHelper("money", function(path) {
    debugger;
    var value = Ember.getPath(this, path);
    console.log("money", this, path, this.get(path), value);
    return parseFloat(value).toFixed(2);
});


var acct = {
    ID: 256718,
    name: "Acme"
};

$(function() {


    /// MODELS
    App.ContractModel = Ember.Object.extend({});


    /// CONTROLLERS
    App.appController = Ember.Object.create({
        account: null,
        proprietor: null,
        manager: null
    });


    // contracts collection
    // load new content when proprietor changes
    App.contractsController = Ember.ArrayController.create({
        content: [],

        filteredContent: function() {
            console.log("computing filtered content");
            var obj = App.appController;

            var acct = obj.get("account");
            var acctID = acct ? acct.ID : 0;

            var mgr = obj.get("manager");
            var mgrID = mgr ? mgr.ID : 0;

            var arr = this.get('content').filter(function(item, index, self) {
                if (acctID && (item.get("accountID") !== acctID)) return false;
                if (mgrID && (item.get("managerID") !== mgrID)) return false;
                return true;
            });
            return arr;
        }.property("content", "App.appController.account", "App.appController.manager").cacheable(),

        totalContracts: function() {
            return this.get("filteredContent").length;
        }.property("filteredContent"),

        totalRate: function() {
            var arr = this.get("filteredContent");
            var sumRate = 0;
            arr.forEach(function(el) {
                //console.log(el, el.get("hourlyRate"));
                sumRate = sumRate + parseFloat(el.get("hourlyRate"));
            });
            //console.log(sumRate);
            return sumRate;
        }.property("filteredContent").cacheable(),

        averageRate: function() {
          ...