diff options
Diffstat (limited to 'client/src/app/shared/date/date-toggle.component.ts')
-rw-r--r-- | client/src/app/shared/date/date-toggle.component.ts | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/client/src/app/shared/date/date-toggle.component.ts b/client/src/app/shared/date/date-toggle.component.ts new file mode 100644 index 000000000..fa48da8e8 --- /dev/null +++ b/client/src/app/shared/date/date-toggle.component.ts | |||
@@ -0,0 +1,47 @@ | |||
1 | import { Component, Input, OnInit, OnChanges } from '@angular/core' | ||
2 | import { DatePipe } from '@angular/common' | ||
3 | import { FromNowPipe } from '../angular/from-now.pipe' | ||
4 | |||
5 | @Component({ | ||
6 | selector: 'my-date-toggle', | ||
7 | templateUrl: './date-toggle.component.html', | ||
8 | styleUrls: [ './date-toggle.component.scss' ], | ||
9 | providers: [ DatePipe, FromNowPipe ] | ||
10 | }) | ||
11 | export class DateToggleComponent implements OnInit, OnChanges { | ||
12 | @Input() date: Date | ||
13 | @Input() toggled = false | ||
14 | |||
15 | dateRelative: string | ||
16 | dateAbsolute: string | ||
17 | |||
18 | constructor ( | ||
19 | private datePipe: DatePipe, | ||
20 | private fromNowPipe: FromNowPipe | ||
21 | ) { } | ||
22 | |||
23 | ngOnInit () { | ||
24 | this.updateDates() | ||
25 | } | ||
26 | |||
27 | ngOnChanges () { | ||
28 | this.updateDates() | ||
29 | } | ||
30 | |||
31 | toggle () { | ||
32 | this.toggled = !this.toggled | ||
33 | } | ||
34 | |||
35 | getTitle () { | ||
36 | return this.toggled ? this.dateRelative : this.dateAbsolute | ||
37 | } | ||
38 | |||
39 | getContent () { | ||
40 | return this.toggled ? this.dateAbsolute : this.dateRelative | ||
41 | } | ||
42 | |||
43 | private updateDates () { | ||
44 | this.dateRelative = this.fromNowPipe.transform(this.date) | ||
45 | this.dateAbsolute = this.datePipe.transform(this.date, 'long') | ||
46 | } | ||
47 | } | ||