diff options
Diffstat (limited to 'client/src/app/search/search-filters.component.ts')
-rw-r--r-- | client/src/app/search/search-filters.component.ts | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/client/src/app/search/search-filters.component.ts b/client/src/app/search/search-filters.component.ts new file mode 100644 index 000000000..4219f99a9 --- /dev/null +++ b/client/src/app/search/search-filters.component.ts | |||
@@ -0,0 +1,170 @@ | |||
1 | import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' | ||
2 | import { ActivatedRoute } from '@angular/router' | ||
3 | import { RedirectService, ServerService } from '@app/core' | ||
4 | import { NotificationsService } from 'angular2-notifications' | ||
5 | import { SearchService } from '@app/search/search.service' | ||
6 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
7 | import { MetaService } from '@ngx-meta/core' | ||
8 | import { AdvancedSearch } from '@app/search/advanced-search.model' | ||
9 | import { VideoConstant } from '../../../../shared' | ||
10 | |||
11 | @Component({ | ||
12 | selector: 'my-search-filters', | ||
13 | styleUrls: [ './search-filters.component.scss' ], | ||
14 | templateUrl: './search-filters.component.html' | ||
15 | }) | ||
16 | export class SearchFiltersComponent implements OnInit { | ||
17 | @Input() advancedSearch: AdvancedSearch = new AdvancedSearch() | ||
18 | |||
19 | @Output() filtered = new EventEmitter<AdvancedSearch>() | ||
20 | |||
21 | videoCategories: VideoConstant<string>[] = [] | ||
22 | videoLicences: VideoConstant<string>[] = [] | ||
23 | videoLanguages: VideoConstant<string>[] = [] | ||
24 | |||
25 | publishedDateRanges: { id: string, label: string }[] = [] | ||
26 | durationRanges: { id: string, label: string }[] = [] | ||
27 | |||
28 | publishedDateRange: string | ||
29 | durationRange: string | ||
30 | |||
31 | constructor ( | ||
32 | private i18n: I18n, | ||
33 | private route: ActivatedRoute, | ||
34 | private metaService: MetaService, | ||
35 | private redirectService: RedirectService, | ||
36 | private notificationsService: NotificationsService, | ||
37 | private searchService: SearchService, | ||
38 | private serverService: ServerService | ||
39 | ) { | ||
40 | this.publishedDateRanges = [ | ||
41 | { | ||
42 | id: 'today', | ||
43 | label: this.i18n('Today') | ||
44 | }, | ||
45 | { | ||
46 | id: 'last_7days', | ||
47 | label: this.i18n('Last 7 days') | ||
48 | }, | ||
49 | { | ||
50 | id: 'last_30days', | ||
51 | label: this.i18n('Last 30 days') | ||
52 | }, | ||
53 | { | ||
54 | id: 'last_365days', | ||
55 | label: this.i18n('Last 365 days') | ||
56 | } | ||
57 | ] | ||
58 | |||
59 | this.durationRanges = [ | ||
60 | { | ||
61 | id: 'short', | ||
62 | label: this.i18n('Short (< 4 minutes)') | ||
63 | }, | ||
64 | { | ||
65 | id: 'long', | ||
66 | label: this.i18n('Long (> 10 minutes)') | ||
67 | }, | ||
68 | { | ||
69 | id: 'medium', | ||
70 | label: this.i18n('Medium (4-10 minutes)') | ||
71 | } | ||
72 | ] | ||
73 | } | ||
74 | |||
75 | ngOnInit () { | ||
76 | this.videoCategories = this.serverService.getVideoCategories() | ||
77 | this.videoLicences = this.serverService.getVideoLicences() | ||
78 | this.videoLanguages = this.serverService.getVideoLanguages() | ||
79 | |||
80 | this.loadFromDurationRange() | ||
81 | this.loadFromPublishedRange() | ||
82 | } | ||
83 | |||
84 | formUpdated () { | ||
85 | this.updateModelFromDurationRange() | ||
86 | this.updateModelFromPublishedRange() | ||
87 | |||
88 | this.filtered.emit(this.advancedSearch) | ||
89 | } | ||
90 | |||
91 | private loadFromDurationRange () { | ||
92 | if (this.advancedSearch.durationMin || this.advancedSearch.durationMax) { | ||
93 | const fourMinutes = 60 * 4 | ||
94 | const tenMinutes = 60 * 10 | ||
95 | |||
96 | if (this.advancedSearch.durationMin === fourMinutes && this.advancedSearch.durationMax === tenMinutes) { | ||
97 | this.durationRange = 'medium' | ||
98 | } else if (this.advancedSearch.durationMax === fourMinutes) { | ||
99 | this.durationRange = 'short' | ||
100 | } else if (this.advancedSearch.durationMin === tenMinutes) { | ||
101 | this.durationRange = 'long' | ||
102 | } | ||
103 | } | ||
104 | } | ||
105 | |||
106 | private loadFromPublishedRange () { | ||
107 | if (this.advancedSearch.startDate) { | ||
108 | const date = new Date(this.advancedSearch.startDate) | ||
109 | const now = new Date() | ||
110 | |||
111 | const diff = Math.abs(date.getTime() - now.getTime()) | ||
112 | |||
113 | const dayMS = 1000 * 3600 * 24 | ||
114 | const numberOfDays = diff / dayMS | ||
115 | |||
116 | if (numberOfDays >= 365) this.publishedDateRange = 'last_365days' | ||
117 | else if (numberOfDays >= 30) this.publishedDateRange = 'last_30days' | ||
118 | else if (numberOfDays >= 7) this.publishedDateRange = 'last_7days' | ||
119 | else if (numberOfDays >= 0) this.publishedDateRange = 'today' | ||
120 | } | ||
121 | } | ||
122 | |||
123 | private updateModelFromDurationRange () { | ||
124 | if (!this.durationRange) return | ||
125 | |||
126 | const fourMinutes = 60 * 4 | ||
127 | const tenMinutes = 60 * 10 | ||
128 | |||
129 | switch (this.durationRange) { | ||
130 | case 'short': | ||
131 | this.advancedSearch.durationMin = undefined | ||
132 | this.advancedSearch.durationMax = fourMinutes | ||
133 | break | ||
134 | |||
135 | case 'medium': | ||
136 | this.advancedSearch.durationMin = fourMinutes | ||
137 | this.advancedSearch.durationMax = tenMinutes | ||
138 | break | ||
139 | |||
140 | case 'long': | ||
141 | this.advancedSearch.durationMin = tenMinutes | ||
142 | this.advancedSearch.durationMax = undefined | ||
143 | break | ||
144 | } | ||
145 | } | ||
146 | |||
147 | private updateModelFromPublishedRange () { | ||
148 | if (!this.publishedDateRange) return | ||
149 | |||
150 | // today | ||
151 | const date = new Date() | ||
152 | date.setHours(0, 0, 0, 0) | ||
153 | |||
154 | switch (this.publishedDateRange) { | ||
155 | case 'last_7days': | ||
156 | date.setDate(date.getDate() - 7) | ||
157 | break | ||
158 | |||
159 | case 'last_30days': | ||
160 | date.setDate(date.getDate() - 30) | ||
161 | break | ||
162 | |||
163 | case 'last_365days': | ||
164 | date.setDate(date.getDate() - 365) | ||
165 | break | ||
166 | } | ||
167 | |||
168 | this.advancedSearch.startDate = date.toISOString() | ||
169 | } | ||
170 | } | ||