-
-
Notifications
You must be signed in to change notification settings - Fork 26
/
home-view-model.ts
125 lines (112 loc) · 4.65 KB
/
home-view-model.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { Observable } from "tns-core-modules/data/observable";
import { DateTimePicker } from "nativescript-datetimepicker";
import { EventData } from "tns-core-modules/data/observable";
import { Button } from "tns-core-modules/ui/button";
import { ScrollView } from "tns-core-modules/ui/scroll-view";
export class HomeViewModel extends Observable {
private scrollView: ScrollView;
constructor() {
super();
this.set('dateText', "tap to select date");
this.set('timeText', "tap to select time");
this.set('dateTimeText', "tap to select date and time");
this.set('dateTime1', new Date());
this.set('dateTime2', new Date());
this.set('dateTime3', new Date());
this.expandCollapse(null);
}
onPickDateTap(args: EventData): void {
const dateToday = new Date();
const dateTomorrow = new Date(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate() + 1);
const dateNextWeek = new Date(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate() + 7);
DateTimePicker.pickDate({
context: (<Button>args.object)._context,
date: dateTomorrow,
minDate: dateTomorrow,
maxDate: dateNextWeek,
okButtonText: "OK",
cancelButtonText: "Cancel",
title: "choose date",
locale: "en_GB"
}).then((selectedDate: Date) => {
if (selectedDate) {
this.set('dateText', this.getFormattedDate(selectedDate));
}
});
}
onPickTimeTap(args: EventData): void {
const dateToday = new Date();
const dateTomorrow = new Date(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate() + 1);
dateTomorrow.setHours(8);
dateTomorrow.setMinutes(0);
DateTimePicker.pickTime({
context: (<Button>args.object)._context,
time: dateTomorrow,
okButtonText: "OK",
cancelButtonText: "Cancel",
title: "choose time",
locale: "en_GB",
is24Hours: true
}).then((selectedTime: Date) => {
if (selectedTime) {
this.set('timeText', this.getFormattedTime(selectedTime));
}
});
}
onPickDateTimeTap(args: EventData): void {
const dateToday = new Date();
DateTimePicker.pickDate({
context: (<Button>args.object)._context,
date: dateToday,
title: "choose date",
locale: "en_GB",
}).then((selectedDate: Date) => {
if (selectedDate) {
DateTimePicker.pickTime({
context: (<Button>args.object)._context,
time: selectedDate,
title: "choose time",
locale: "en_GB",
}).then((selectedDateTime: Date) => {
if (selectedDateTime) {
this.set('dateTimeText', this.getFormattedDate(selectedDateTime) + ' ' + this.getFormattedTime(selectedDateTime));
}
});
}
});
}
scrollViewLoaded(args: EventData): void {
this.scrollView = <ScrollView>args.object;
}
onHeaderTap(args: EventData): void {
const buttonId = (<Button>args.object).id;
const isCurrentlyExpanded = this.get(buttonId + "Visibility") === 'visible';
if (isCurrentlyExpanded) {
this.expandCollapse(null);
} else {
this.expandCollapse(buttonId);
}
this.scrollView.scrollToVerticalOffset(0, false);
}
expandCollapse(expandId: string): void {
this.set('dateOpacity', expandId === 'date' ? 0.7 : 1);
this.set('dateVisibility', expandId === 'date' ? 'visible' : 'collapse');
this.set('timeOpacity', expandId === 'time' ? 0.7 : 1);
this.set('timeVisibility', expandId === 'time' ? 'visible' : 'collapse');
this.set('dateTimeOpacity', expandId === 'dateTime' ? 0.7 : 1);
this.set('dateTimeVisibility', expandId === 'dateTime' ? 'visible' : 'collapse');
this.set('customOpacity', expandId === 'custom' ? 0.7 : 1);
this.set('customVisibility', expandId === 'custom' ? 'visible' : 'collapse');
}
getFormattedDate(date: Date): string {
const d = date.getDate();
const m = date.getMonth() + 1;
const y = date.getFullYear();
return (d < 10 ? '0' : '') + d + '.' + (m < 10 ? '0' : '') + m + '.' + y;
}
getFormattedTime(date: Date): string {
const h = date.getHours();
const m = date.getMinutes();
return (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m;
}
}