book-picker
Version:
<p align="center"> <img width="409" height="331" src="https://raw.githubusercontent.com/ymxk/book-picker/master/book-picker.gif"> </p>
742 lines (730 loc) • 23.2 kB
JavaScript
import { Component, Input, Output, EventEmitter, Pipe, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MomentModule } from 'ngx-moment';
import moment from 'moment';
import jspath from 'jspath';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BookPickerComponent = /** @class */ (function () {
function BookPickerComponent() {
this.name = 'Book Picker';
this.bookeds = new Array();
this.hours = new Array();
this.selected = new EventEmitter();
this.onerror = new EventEmitter();
}
/**
* @param {?} value
* @return {?}
*/
BookPickerComponent.prototype.onSelectedDate = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.selectedDate = value.clone();
this.timeRange = null;
};
/**
* @param {?} value
* @return {?}
*/
BookPickerComponent.prototype.onSelectedTime = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.timeRange = value;
this.selected.emit(value);
};
/**
* @return {?}
*/
BookPickerComponent.prototype.onErrorTime = /**
* @return {?}
*/
function () {
this.onerror.emit();
};
BookPickerComponent.decorators = [
{ type: Component, args: [{
selector: 'book-picker',
template: "<app-date-picker (selected)=\"onSelectedDate($event)\"></app-date-picker>\n<app-time-picker [nowTime]=\"selectedDate\" [bookeds]=\"bookeds\" [hours]=\"hours\" (selected)=\"onSelectedTime($event)\" (onerror)=\"onErrorTime()\"></app-time-picker>\n<app-book-info [timeRange]=\"timeRange\"></app-book-info>",
styles: ["p{font-family:Lato}"]
}] }
];
BookPickerComponent.propDecorators = {
bookeds: [{ type: Input }],
hours: [{ type: Input }],
selected: [{ type: Output }],
onerror: [{ type: Output }]
};
return BookPickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var HoursOfDay = /** @class */ (function () {
function HoursOfDay(start, end) {
this.start = start;
this.end = end;
}
return HoursOfDay;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
var TimeClass = {
BOOKED: 'time-booked', DISABLE: 'time-disable', SELECTED: 'time-selected', NORMAL: '',
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TimePickerComponent = /** @class */ (function () {
function TimePickerComponent() {
this.timeCells = [];
this.nowTime = moment();
this.bookeds = new Array();
this.hours = new Array();
this.selected = new EventEmitter();
this.onerror = new EventEmitter();
}
/**
* @return {?}
*/
TimePickerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.initBooksOrHours();
this.getHoursForDays();
};
/**
* @return {?}
*/
TimePickerComponent.prototype.initBooksOrHours = /**
* @return {?}
*/
function () {
if (!this.bookeds) {
this.bookeds = new Array();
}
if (!this.hours) {
this.hours = new Array();
}
};
/**
* @return {?}
*/
TimePickerComponent.prototype.onClear = /**
* @return {?}
*/
function () {
this.start = null;
this.end = null;
};
/**
* @return {?}
*/
TimePickerComponent.prototype.emitSelected = /**
* @return {?}
*/
function () {
this.selected.emit({ start: this.start, end: this.addHalfHour(this.end) });
};
/**
* @param {?} v
* @return {?}
*/
TimePickerComponent.prototype.addHalfHour = /**
* @param {?} v
* @return {?}
*/
function (v) {
return v ? v.clone().add(30, 'm') : null;
};
/**
* @return {?}
*/
TimePickerComponent.prototype.emitError = /**
* @return {?}
*/
function () {
this.onerror.emit();
};
/**
* @param {?} value
* @return {?}
*/
TimePickerComponent.prototype.onSelected = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this.start && this.end && this.start.isSame(value, 'm') && this.end.isSame(value, 'm')) {
this.onClear();
this.emitSelected();
return false;
}
if (this.start && this.end && this.start.isSame(value, 'm')) {
this.start = this.end;
this.emitSelected();
return false;
}
if (this.start && this.end && this.end.isSame(value, 'm')) {
this.end = this.start;
this.emitSelected();
return false;
}
if (!this.start && !this.end) {
/** @type {?} */
var x = this.includesDisable(value.clone(), value.clone());
if (x) {
this.emitError();
return false;
}
this.start = value;
this.end = value;
this.emitSelected();
return false;
}
if (value.isBefore(this.start)) {
/** @type {?} */
var x = this.includesDisable(value.clone(), this.start.clone());
if (x) {
this.emitError();
return false;
}
this.end = this.start;
this.start = value;
}
if (value.isAfter(this.start)) {
/** @type {?} */
var x = this.includesDisable(this.start.clone(), value.clone());
if (x) {
this.emitError();
return false;
}
this.end = value;
}
this.emitSelected();
};
/**
* @param {?} start
* @param {?} end
* @return {?}
*/
TimePickerComponent.prototype.includesDisable = /**
* @param {?} start
* @param {?} end
* @return {?}
*/
function (start, end) {
var _this = this;
/** @type {?} */
var range = [];
for (var item = start; item.isBefore(end) || item.isSame(end); item.add(30, 'm')) {
range.push(item.clone());
}
return range.filter((/**
* @param {?} e
* @return {?}
*/
function (e) { return _this.includesBooked(e) || _this.includesCloses(e); })).length > 0;
};
/**
* @param {?} v
* @return {?}
*/
TimePickerComponent.prototype.includesBooked = /**
* @param {?} v
* @return {?}
*/
function (v) {
var _this = this;
return this.bookeds.filter((/**
* @param {?} e
* @return {?}
*/
function (e) { return _this.isBetweenDate(v, e.start, e.end); })).length > 0;
};
/**
* @param {?} v
* @return {?}
*/
TimePickerComponent.prototype.includesCloses = /**
* @param {?} v
* @return {?}
*/
function (v) {
var _this = this;
/** @type {?} */
var ph = this.getOpenHoursOnDated();
if (ph && ph.length == 0) {
return true;
}
return ph.filter((/**
* @param {?} e
* @return {?}
*/
function (e) { return _this.isBetweenNotEnd(v, e.opens, e.closes); })).length == 0;
};
/**
* @param {?} v
* @param {?} s
* @param {?} e
* @return {?}
*/
TimePickerComponent.prototype.isBetweenNotEnd = /**
* @param {?} v
* @param {?} s
* @param {?} e
* @return {?}
*/
function (v, s, e) {
/** @type {?} */
var vs = this.setHourMinuteIgnorDate(v);
/** @type {?} */
var ss = this.setHourMinuteIgnorDate(s);
/** @type {?} */
var es = this.setHourMinuteIgnorDate(e);
return (vs.isBetween(ss, es, 'm') || vs.isSame(ss, 'm')) ? true : false;
};
/**
* @param {?} v
* @param {?} s
* @param {?} e
* @return {?}
*/
TimePickerComponent.prototype.isBetweenDate = /**
* @param {?} v
* @param {?} s
* @param {?} e
* @return {?}
*/
function (v, s, e) {
return v.isBetween(s, e) || v.isSame(s) || v.isSame(e);
};
/**
* @param {?} v
* @param {?} s
* @param {?} e
* @return {?}
*/
TimePickerComponent.prototype.isBetweenM = /**
* @param {?} v
* @param {?} s
* @param {?} e
* @return {?}
*/
function (v, s, e) {
return v.isBetween(s, e, 'm') || v.isSame(s, 'm') || v.isSame(e, 'm');
};
/**
* @param {?} value
* @return {?}
*/
TimePickerComponent.prototype.getClassBy = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (this.includesBooked(value)) {
return TimeClass.BOOKED;
}
if (this.includesCloses(value)) {
return TimeClass.DISABLE;
}
if (this.isBetweenM(value, this.start, this.end)) {
return TimeClass.SELECTED;
}
return TimeClass.NORMAL;
};
/**
* @param {?} v
* @return {?}
*/
TimePickerComponent.prototype.isSameDay = /**
* @param {?} v
* @return {?}
*/
function (v) {
return moment().isSame(v, 'month') && moment().isSame(v, 'day');
};
/**
* @return {?}
*/
TimePickerComponent.prototype.getDefaultOpenHours = /**
* @return {?}
*/
function () {
return new HoursOfDay(this.nowTime.clone().startOf('day'), this.nowTime.clone().endOf('day'));
};
/**
* @return {?}
*/
TimePickerComponent.prototype.nextHalfHourInNow = /**
* @return {?}
*/
function () {
/** @type {?} */
var y = parseFloat(this.nowTime.clone().format('mm')) % 30;
return this.addHalfHour(this.nowTime.clone().subtract(y, 'm'));
};
/**
* @param {?} oh
* @return {?}
*/
TimePickerComponent.prototype.replaceStartByNow = /**
* @param {?} oh
* @return {?}
*/
function (oh) {
/** @type {?} */
var start = this.setHourMinuteIgnorDate(oh.start);
if (this.isSameDay(start)) {
return new HoursOfDay(this.nextHalfHourInNow(), oh.end);
}
return oh;
};
/**
* @return {?}
*/
TimePickerComponent.prototype.getHoursForDays = /**
* @return {?}
*/
function () {
/** @type {?} */
var oh = this.getOpenHoursOnDated();
if (oh && oh.length > 0) {
this.createHours(this.toHoursOfDayFrom(oh));
}
else {
this.createHours(this.getDefaultOpenHours());
}
};
/**
* @param {?} v
* @return {?}
*/
TimePickerComponent.prototype.setHourMinuteIgnorDate = /**
* @param {?} v
* @return {?}
*/
function (v) {
return this.nowTime.clone().hour(v.hour()).minute(v.minute());
};
/**
* @param {?} oh
* @return {?}
*/
TimePickerComponent.prototype.createHours = /**
* @param {?} oh
* @return {?}
*/
function (oh) {
/** @type {?} */
var t = this.replaceStartByNow(oh);
/** @type {?} */
var start = t.start.clone();
/** @type {?} */
var end = t.end.clone();
this.timeCells = [];
for (var item = start; item.isBefore(end); item.add(30, 'm')) {
this.timeCells.push(item.clone());
}
};
/**
* @return {?}
*/
TimePickerComponent.prototype.getOpenHoursOnDated = /**
* @return {?}
*/
function () {
var _this = this;
return this.hours.filter((/**
* @param {?} e
* @return {?}
*/
function (e) {
return e.weeks.includes(_this.nowTime.day());
}));
};
/**
* @param {?} ts
* @return {?}
*/
TimePickerComponent.prototype.toHoursOfDayFrom = /**
* @param {?} ts
* @return {?}
*/
function (ts) {
/** @type {?} */
var opens = jspath.apply(".opens", ts);
/** @type {?} */
var closes = jspath.apply(".closes", ts);
return new HoursOfDay(this.setHourMinuteIgnorDate(moment.min(opens)), this.setHourMinuteIgnorDate(moment.max(closes)));
};
/**
* @param {?} changes
* @return {?}
*/
TimePickerComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
for (var propName in changes) {
/** @type {?} */
var changedProp = changes[propName];
if (changedProp.isFirstChange()) {
this.nowTime = moment();
}
else {
this.onClear();
this.nowTime = changedProp.currentValue;
this.getHoursForDays();
}
}
};
TimePickerComponent.decorators = [
{ type: Component, args: [{
selector: 'app-time-picker',
template: "<section class=\"card\">\n\n\t<div *ngFor=\"let c of timeCells\" [ngClass]=\"getClassBy(c)\">\n\t\t<div (click)=\"onSelected(c)\">{{c | amDateFormat: 'HH:mm'}}</div>\n\t</div>\n</section>",
styles: ["@charset \"UTF-8\";.card{display:-webkit-flex;display:flex;min-width:100%;min-height:54px;overflow-x:auto;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}.card>div{min-width:55px;height:54px;background-color:#fff;text-align:center;border-left:1px solid #e9e9e9}.card>div>div:first-child{font-size:13px;font-family:PingFangSC-Regular;font-weight:400;color:#242424;line-height:54px}.card>div:last-child{border-right:1px solid #e9e9e9}.card::-webkit-scrollbar{display:none}.time-disable div{background:#fbfbfb;color:#c4c4c4!important;line-height:14px!important;padding:20px 0 0 2px}.time-disable ::after{content:\"\\a\u672A\u8425\u4E1A\";white-space:pre-wrap;font-size:10px;color:#c4c4c4}.time-selected div{background:#e5f2ff!important;color:#007aff!important;border-left:0!important}.time-booked div{background:#fbfbfb;color:#c4c4c4!important;line-height:14px!important;padding:20px 0 0 2px}.time-booked ::after{content:\"\\a\u5DF2\u9884\u8BA2\";white-space:pre-wrap;font-size:10px;color:#c4c4c4}"]
}] }
];
/** @nocollapse */
TimePickerComponent.ctorParameters = function () { return []; };
TimePickerComponent.propDecorators = {
nowTime: [{ type: Input }],
bookeds: [{ type: Input }],
hours: [{ type: Input }],
selected: [{ type: Output }],
onerror: [{ type: Output }]
};
return TimePickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DatePickerComponent = /** @class */ (function () {
function DatePickerComponent() {
this.days = [];
this.selectedDate = moment();
this.endDayForMonth = moment().add(15, 'd');
this.selected = new EventEmitter();
}
/**
* @return {?}
*/
DatePickerComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.getDaysForMonth();
};
/**
* @param {?} value
* @return {?}
*/
DatePickerComponent.prototype.onSelected = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.selectedDate = value;
this.selected.emit(value);
};
/**
* @param {?} value
* @return {?}
*/
DatePickerComponent.prototype.isSameDay = /**
* @param {?} value
* @return {?}
*/
function (value) {
return this.selectedDate.isSame(value, 'day') ? 'date-selected' : '';
};
/**
* @return {?}
*/
DatePickerComponent.prototype.getDaysForMonth = /**
* @return {?}
*/
function () {
for (var item = moment(); item.isBefore(this.endDayForMonth); item.add(1, 'd')) {
this.days.push(item.clone());
}
};
DatePickerComponent.decorators = [
{ type: Component, args: [{
selector: 'app-date-picker',
template: "<div class=\"date-title\">{{selectedDate | amDateFormat: 'YYYY'}}</div>\n<section class=\"card\">\n\t<div class=\"card--content\" *ngFor=\"let day of days\" [ngClass]=\"isSameDay(day)\" (click)=\"onSelected(day)\">\n\t\t<div>{{day | weekdays}}</div>\n\t\t<div>{{day | amDateFormat: 'M/D'}}</div>\n\t</div>\n</section>",
styles: [".card{display:-webkit-flex;display:flex;min-width:100%;min-height:86px;overflow-x:auto}.card::-webkit-scrollbar{display:none}.card--content{min-width:55px;height:86px;background-color:#fff;text-align:center}.card--content div:first-child{height:18px;font-size:13px;font-family:PingFangSC-Regular;font-weight:400;color:#999;line-height:18px;margin:19px 0 10px}.card--content div:last-child{height:21px;line-height:21px;font-size:15px;font-family:PingFangSC-Medium;font-weight:500;color:#242424}.date-title{width:100%;height:46px;line-height:46px;background:#f8f8f8;font-size:17px;font-family:PingFangSC-Medium;font-weight:1000;color:#242424;text-align:center}.date-selected div{color:#007aff!important}"]
}] }
];
/** @nocollapse */
DatePickerComponent.ctorParameters = function () { return []; };
DatePickerComponent.propDecorators = {
selected: [{ type: Output }]
};
return DatePickerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BookInfoComponent = /** @class */ (function () {
function BookInfoComponent() {
}
/**
* @return {?}
*/
BookInfoComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
BookInfoComponent.decorators = [
{ type: Component, args: [{
selector: 'app-book-info',
template: "<div class=\"book-info\" *ngIf=\"timeRange && timeRange.start && timeRange.end\">\n\t<label>\u5171\u8BA1 {{timeRange | booktime}} \u5C0F\u65F6</label>\n <div><i class=\"iconfont icon-clock\"></i> {{timeRange | timetable}} </div>\n</div>",
styles: [".book-info{padding:17px 20px}.book-info label{width:90px;background:#f8f8f8;border-radius:2px;font-size:13px;font-family:PingFangSC-Regular;font-weight:400;color:#999;line-height:23px;display:inline-block;text-align:center}.book-info div:last-child{height:24px;line-height:24px;font-size:15px;font-family:PingFangSC-Regular;font-weight:400;color:#242424;margin-top:10px}"]
}] }
];
/** @nocollapse */
BookInfoComponent.ctorParameters = function () { return []; };
BookInfoComponent.propDecorators = {
timeRange: [{ type: Input }]
};
return BookInfoComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var WeekdaysPipe = /** @class */ (function () {
function WeekdaysPipe() {
this.now = moment();
this.weekdays = [
"日", "一", "二", "三", "四", "五", "六"
];
}
/**
* @param {?} value
* @return {?}
*/
WeekdaysPipe.prototype.transform = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (!value) {
return '';
}
return this.now.isSame(value, 'day') ? '今日' : this.weekdays[value.day()];
};
WeekdaysPipe.decorators = [
{ type: Pipe, args: [{
name: 'weekdays'
},] }
];
return WeekdaysPipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TimetablePipe = /** @class */ (function () {
function TimetablePipe() {
}
/**
* @param {?} value
* @return {?}
*/
TimetablePipe.prototype.transform = /**
* @param {?} value
* @return {?}
*/
function (value) {
return (value && value.end && value.start) ? this.formatTime(value) : this.defaultFormatTime();
};
/**
* @param {?} value
* @return {?}
*/
TimetablePipe.prototype.formatTime = /**
* @param {?} value
* @return {?}
*/
function (value) {
return value.start.clone().format('M月D日 HH:mm') + "\uFF5E" + value.end.clone().format('HH:mm');
};
/**
* @return {?}
*/
TimetablePipe.prototype.defaultFormatTime = /**
* @return {?}
*/
function () {
return moment().format('M月D日 HH:mm') + "\uFF5E" + moment().format('HH:mm');
};
TimetablePipe.decorators = [
{ type: Pipe, args: [{
name: 'timetable'
},] }
];
return TimetablePipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BooktimePipe = /** @class */ (function () {
function BooktimePipe() {
}
/**
* @param {?} value
* @return {?}
*/
BooktimePipe.prototype.transform = /**
* @param {?} value
* @return {?}
*/
function (value) {
return (value && value.end && value.start) ? "" + moment.duration(value.end.diff(value.start)).asHours() : '0';
};
BooktimePipe.decorators = [
{ type: Pipe, args: [{
name: 'booktime'
},] }
];
return BooktimePipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BookPickerModule = /** @class */ (function () {
function BookPickerModule() {
}
BookPickerModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, MomentModule],
declarations: [TimePickerComponent, DatePickerComponent, BookInfoComponent, WeekdaysPipe, TimetablePipe, BooktimePipe, BookPickerComponent],
exports: [BookPickerComponent]
},] }
];
return BookPickerModule;
}());
export { BookPickerComponent, BookPickerModule, TimePickerComponent as ɵa, DatePickerComponent as ɵb, BookInfoComponent as ɵc, WeekdaysPipe as ɵd, TimetablePipe as ɵe, BooktimePipe as ɵf };
//# sourceMappingURL=book-picker.js.map