JSFiddle - React, Tailwind, and code Playground

by mavilein

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0-rc.4.js"></script>
<script src="http://builds.emberjs.com/ember-1.0.0-rc.6.js"></script>
<script src="https://raw.github.com/timrwood/moment/2.0.0/moment.js"></script>
<!-- Handlebars templates are here -->
<script type="text/x-handlebars" data-template-name="index">
    Index Route/Template
    {{#linkTo weekPresence}} TO WeekPresence {{/linkTo}}
    {{outlet}}
</script>

<!-- weekPresence.handlebars -->
<script type="text/x-handlebars" data-template-name="weekPresence">
<div class="container-fluid">
  <h2>Overview</h2>
  <div class="row-fluid">
    <div class="span4">
      <span>Week Number: {{Haps.Weeks.id}}</span>
      {{!view Haps.SelectView contentBinding="Haps.Weeks" valueBinding="Haps.week.id" selectionBinding="Haps.controller.selectedWeek"}}
      
    </div>
  </div>
  <div class="row-fluid">
    <div class="span8">
      {{render "week"}}
    </div>
  </div>
</div>
</script>
<!-- week.handlebars -->
<script type="text/x-handlebars" data-template-name="week">
<table class="table">
  {{week.number}}{{week.beginDate}}
  <tr>
    <th>User</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th></th>
  </tr>
  {{!#each user in controller.controllers.users}}
  <tr>
    <td>{{Haps.current_user.uid}}{{Haps.current_user.name}}</td>
    <td>{{input type=checkbox checked=model.monday class="toggle checkbox"}}</td>
    <td>{{input type=checkbox checked=model.tuesday class="toggle checkbox"}}</td>
    <td>{{input type=checkbox checked=model.wednesday class="toggle checkbox"}}</td>
    <td>{{input type=checkbox checked=model.thursday class="toggle checkbox"}}</td>
    <td>{{input type=checkbox checked=model.friday class="toggle checkbox"}}</td>
    <td><button class="btn-small" {{action 'save'}}>Save</button></td>
  </tr>
  {{!/each}}
</table>
</script>

JavaScript

//I hope this is easier to figure out, you are very welcome to make changes. I didnt know how to include ember and ember-data.

//Would be extremly nice if you would give this one a try.

//I want to be able to select a week and get the appropriate route for it, which displays a checkbox for every week day of all users. The current_user will be able to select which days to be present. The other users cn see what the others have chose but only alter their own selection.
var Haps = Ember.Application.create();

Haps.Router.map(function() {
  this.resource("weekPresence", function() {
    this.resource("week", { path: ':number' });
  });
});
 
Haps.WeekPresenceRoute = Ember.Route.extend({
  events: {
    goToSelected: function () {
     this.transitionTo ("week", { path: ':number' });
   }
  },
  setupController: function() {
      console.log(this.constructor + ":setupController");
    this.controllerFor('weeks').set('model', Haps.Week.find());
  }
});

//WeekRoute is missing, still :(

//Select View:
Haps.SelectView = Ember.Select.extend({
  //handle change of selected and trigger router:
  goToSelected: function () {
    this.get("controller").send("goToSelected");
  }
});
    

//Controllers
Haps.WeekPresenceController = Ember.ArrayController.extend({
    content : [],
  init: function () {
          
        //this is to create some weeks on the model - can be deleted, something is wrong with it
         for (var i = 1; i < 3; i += 7) {
          var beginDate = moment.utc().startOf('week').add('days', i);
         
          var week = Haps.Week.create({
            beginDate: moment().startOf('week').add('days', i),
            status: 'pending'
          });
          this.addObject(week);
        }
        console.log(beginDate);
        this._super();
    },
 //this I included to have access to the weeksController in the weekPresence template, not sure if it should rather be singular and an object controller 
  needs: ["weeks"],
  weeks: [],
  weeksBinding:...