Skip to content

Instantly share code, notes, and snippets.

@icfantv
Last active September 8, 2016 02:57
Show Gist options
  • Save icfantv/939a7a3127a63f744a4fc612f7325885 to your computer and use it in GitHub Desktop.
Save icfantv/939a7a3127a63f744a4fc612f7325885 to your computer and use it in GitHub Desktop.
Days of the week component
<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>
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')
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment