scheduler

components.add-schedule.js

import Ember from 'ember';
import moment from 'moment';

export default Ember.Component.extend({

  init(){
    this._super(...arguments);
    console.log(`${this.get('day')}`);
    isActive: true;
  },

  day: Ember.computed('dayPassed', function(){
    return moment().day(`${this.get('dayPassed')}`).format('MM/DD/YYYY');
  }),

  actions: {
    toggleState(){
      this.toggleProperty('isActive');
    },
    submit() {
      const startDate = this.get('day') + ' ' + this.get('start');
      const endDate = this.get('day') + ' ' + this.get('end');
      const dayDate = moment(this.get('day')).day();
      const selectedDate = {
        day: this.get('dayPassed').toLowerCase(),
        start: moment(startDate).utc().format(),
        end: moment(endDate).utc().format()
      };
      this.get('onAdd')(selectedDate);
    }
  }
});

components.schedule-widget.js

import Ember from 'ember';

export default Ember.Component.extend({
  scheduleDates: Ember.inject.service(),

  actions: {
    remove(date) {
      this.get('scheduleDates').remove(date);
    },
    addDate(date){
      this.get('scheduleDates').add(date);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

services.schedule-dates.js

import Ember from 'ember';

export default Ember.Service.extend({
  dates: null,


  init() {
    this._super(...arguments);
    this.set('dates', []);
  },

  add(date) {
    this.get('dates').addObject(date);
  },

  remove(date) {
    this.get('dates').removeObject(date);
  },

  empty() {
    this.get('dates').clear();
  }
});

templates.application.hbs

<h3>Scheduler</h3>
{{outlet}}

templates.components.add-schedule.hbs

{{! when form is submitted, trigget action 'submit'}}
<form {{action "submit" on="submit"}}>

  {{! bind current value to the component's property 'text'}}

  {{#unless isActive}}
    <button type="button" name="button" {{action 'toggleState'}}>{{title}}</button>
  {{/unless}}

  {{#if isActive}}
    <input type="checkbox" checked=isActive {{action 'toggleState' on-change="{{ action 'remove' date}}"}}>
    {{pikaday-input value=day format="MM/DD/YYYY" type="hidden"}} <br>
    {{input type="time" value=start }}
    {{input type="time" value=end }} <button type="submit">OK</button>
  {{/if}}

</form>

templates.components.schedule-widget.hbs

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<table>
  <thead>
    <tr>
      <th>
        <span class="long">Monday</span>
      </th>
      <th>
        <span class="long">Tuesday</span>
      </th>
      <th>
        <span class="long">Wendsday</span>
      </th>
      <th>
        <span class="long">Thursday</span>
      </th>
      <th>
        <span class="long">Friday</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{add-schedule title="Morning" dayPassed="Monday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Morning" dayPassed="Tuesday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Morning" dayPassed="Wednesday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Morning" dayPassed="Thursday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Morning" dayPassed="Friday" onAdd=(action 'addDate')}}</td>
    </tr>
    <tr>
      <td>{{add-schedule title="Lunch" dayPassed="Monday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Lunch" dayPassed="Tuesday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Lunch" dayPassed="Wednesday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Lunch" dayPassed="Thursday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Lunch" dayPassed="Friday" onAdd=(action 'addDate')}}</td>
    </tr>
    <tr>
      <td>{{add-schedule title="Afternoon" dayPassed="Monday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Afternoon" dayPassed="Tuesday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Afternoon" dayPassed="Wednesday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Afternoon" dayPassed="Thursday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Afternoon" dayPassed="Friday" onAdd=(action 'addDate')}}</td>
    </tr>
    <tr>
      <td>{{add-schedule title="Evening" dayPassed="Monday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Evening" dayPassed="Tuesday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Evening" dayPassed="Wednesday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Evening" dayPassed="Thursday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Evening" dayPassed="Friday" onAdd=(action 'addDate')}}</td>
    </tr>
    <tr>
      <td>{{add-schedule title="Morning" dayPassed="Monday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Morning" dayPassed="Tuesday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Morning" dayPassed="Wednesday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Morning" dayPassed="Thursday" onAdd=(action 'addDate')}}</td>
      <td>{{add-schedule title="Morning" dayPassed="Friday" onAdd=(action 'addDate')}}</td>
    </tr>
  </tbody>
</table>



<ul>
  {{#each scheduleDates.dates as |date index|}}
    <li>
      {{index}}
      Day: {{date.day}}
      Start: {{date.start}}
      End: {{date.end}}
      <button {{action "remove" date}}>Remove</button>
    </li>
  {{/each}}
</ul>

templates.schedule.hbs

{{schedule-widget}}

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}