Days of the week component

ExecutionWindowDayPickerController.html

<div class="btn-group">
  <label class="btn btn-default" ng-model="dayPicker.dayModel.sunday" uib-btn-checkbox>Sun</label>
  <label class="btn btn-default" ng-model="dayPicker.dayModel.monday" uib-btn-checkbox>Mon</label>
  <label class="btn btn-default" ng-model="dayPicker.dayModel.tuesday" uib-btn-checkbox>Tue</label>
  <label class="btn btn-default" ng-model="dayPicker.dayModel.wednesday" uib-btn-checkbox>Wed</label>
  <label class="btn btn-default" ng-model="dayPicker.dayModel.thursday" uib-btn-checkbox>Thu</label>
  <label class="btn btn-default" ng-model="dayPicker.dayModel.friday" uib-btn-checkbox>Fri</label>
  <label class="btn btn-default" ng-model="dayPicker.dayModel.saturday" uib-btn-checkbox>Sat</label>
</div>
<div class="button-controls">
  <span class="btn btn-link" ng-click="dayPicker.all()">All</span>
  <span class="btn btn-link" ng-click="dayPicker.none()">None</span>
  <span class="btn btn-link" ng-click="dayPicker.weekdays()">Weekdays</span>
  <span class="btn btn-link" ng-click="dayPicker.weekend()">Weekend</span>
</div>
<div>
  <pre>{{ dayPicker.dayModel | json }}</pre>
</div>

ExecutionWindowDayPickerController.js

class ExecutionWindowDayPickerController {

  $onInit() {
    const days = new Set(this.days);
    this.dayModel = {
      sunday: days.has(0),
      monday: days.has(1),
      tuesday: days.has(2),
      wednesday: days.has(3),
      thursday: days.has(4),
      friday: days.has(5),
      saturday: days.has(6)
    };
  }

  all() {
    this.dayModel.sunday = this.dayModel.saturday = this.dayModel.monday =
      this.dayModel.tuesday = this.dayModel.wednesday =
        this.dayModel.thursday = this.dayModel.friday = true;
  }

  none() {
    this.dayModel.sunday = this.dayModel.saturday = this.dayModel.monday =
      this.dayModel.tuesday = this.dayModel.wednesday =
        this.dayModel.thursday = this.dayModel.friday = false;
  }

  weekdays() {
    this.dayModel.sunday = this.dayModel.saturday = false;
    this.dayModel.monday = this.dayModel.tuesday = this.dayModel.wednesday =
      this.dayModel.thursday = this.dayModel.friday = true;
  }

  weekend() {
    this.dayModel.sunday = this.dayModel.saturday = true;
    this.dayModel.monday = this.dayModel.tuesday = this.dayModel.wednesday =
      this.dayModel.thursday = this.dayModel.friday = false;
  }

  updateModel() {
    const days = Object.keys(this.dayModel);
    const updated = [];
    days.forEach((day, index) => {
      if (this.dayModel[day]) {
        updated.push(index + 1);
      }
    });
    this.days = updated;
  }
}

export const EXECUTION_WINDOW_DAY_PICKER_COMPONENT = {
  bindings: {
    days: '='
  },
  controller: ExecutionWindowDayPickerController,
  controllerAs: 'dayPicker',
  templateUrl: require('./ExecutionWindowDayPickerComponent.html')
};