client/src/app/search/search-filters.component.ts

   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<number>[] = []
  22   videoLicences: VideoConstant<number>[] = []
  23   videoLanguages: VideoConstant<string>[] = []
  24
  25   publishedDateRanges: { id: string, label: string }[] = []
  26   sorts: { id: string, label: string }[] = []
  27   durationRanges: { id: string, label: string }[] = []
  28
  29   publishedDateRange: string
  30   durationRange: string
  31
  32   constructor (
  33     private i18n: I18n,
  34     private route: ActivatedRoute,
  35     private metaService: MetaService,
  36     private redirectService: RedirectService,
  37     private notificationsService: NotificationsService,
  38     private searchService: SearchService,
  39     private serverService: ServerService
  40   ) {
  41     this.publishedDateRanges = [
  42       {
  43         id: 'today',
  44         label: this.i18n('Today')
  45       },
  46       {
  47         id: 'last_7days',
  48         label: this.i18n('Last 7 days')
  49       },
  50       {
  51         id: 'last_30days',
  52         label: this.i18n('Last 30 days')
  53       },
  54       {
  55         id: 'last_365days',
  56         label: this.i18n('Last 365 days')
  57       }
  58     ]
  59
  60     this.durationRanges = [
  61       {
  62         id: 'short',
  63         label: this.i18n('Short (< 4 min)')
  64       },
  65       {
  66         id: 'long',
  67         label: this.i18n('Long (> 10 min)')
  68       },
  69       {
  70         id: 'medium',
  71         label: this.i18n('Medium (4-10 min)')
  72       }
  73     ]
  74
  75     this.sorts = [
  76       {
  77         id: '-match',
  78         label: this.i18n('Relevance')
  79       },
  80       {
  81         id: '-publishedAt',
  82         label: this.i18n('Publish date')
  83       },
  84       {
  85         id: '-views',
  86         label: this.i18n('Views')
  87       }
  88     ]
  89   }
  90
  91   ngOnInit () {
  92     this.videoCategories = this.serverService.getVideoCategories()
  93     this.videoLicences = this.serverService.getVideoLicences()
  94     this.videoLanguages = this.serverService.getVideoLanguages()
  95
  96     this.loadFromDurationRange()
  97     this.loadFromPublishedRange()
  98   }
  99
 100   formUpdated () {
 101     this.updateModelFromDurationRange()
 102     this.updateModelFromPublishedRange()
 103
 104     this.filtered.emit(this.advancedSearch)
 105   }
 106
 107   private loadFromDurationRange () {
 108     if (this.advancedSearch.durationMin || this.advancedSearch.durationMax) {
 109       const fourMinutes = 60 * 4
 110       const tenMinutes = 60 * 10
 111
 112       if (this.advancedSearch.durationMin === fourMinutes && this.advancedSearch.durationMax === tenMinutes) {
 113         this.durationRange = 'medium'
 114       } else if (this.advancedSearch.durationMax === fourMinutes) {
 115         this.durationRange = 'short'
 116       } else if (this.advancedSearch.durationMin === tenMinutes) {
 117         this.durationRange = 'long'
 118       }
 119     }
 120   }
 121
 122   private loadFromPublishedRange () {
 123     if (this.advancedSearch.startDate) {
 124       const date = new Date(this.advancedSearch.startDate)
 125       const now = new Date()
 126
 127       const diff = Math.abs(date.getTime() - now.getTime())
 128
 129       const dayMS = 1000 * 3600 * 24
 130       const numberOfDays = diff / dayMS
 131
 132       if (numberOfDays >= 365) this.publishedDateRange = 'last_365days'
 133       else if (numberOfDays >= 30) this.publishedDateRange = 'last_30days'
 134       else if (numberOfDays >= 7) this.publishedDateRange = 'last_7days'
 135       else if (numberOfDays >= 0) this.publishedDateRange = 'today'
 136     }
 137   }
 138
 139   private updateModelFromDurationRange () {
 140     if (!this.durationRange) return
 141
 142     const fourMinutes = 60 * 4
 143     const tenMinutes = 60 * 10
 144
 145     switch (this.durationRange) {
 146       case 'short':
 147         this.advancedSearch.durationMin = undefined
 148         this.advancedSearch.durationMax = fourMinutes
 149         break
 150
 151       case 'medium':
 152         this.advancedSearch.durationMin = fourMinutes
 153         this.advancedSearch.durationMax = tenMinutes
 154         break
 155
 156       case 'long':
 157         this.advancedSearch.durationMin = tenMinutes
 158         this.advancedSearch.durationMax = undefined
 159         break
 160     }
 161   }
 162
 163   private updateModelFromPublishedRange () {
 164     if (!this.publishedDateRange) return
 165
 166     // today
 167     const date = new Date()
 168     date.setHours(0, 0, 0, 0)
 169
 170     switch (this.publishedDateRange) {
 171       case 'last_7days':
 172         date.setDate(date.getDate() - 7)
 173         break
 174
 175       case 'last_30days':
 176         date.setDate(date.getDate() - 30)
 177         break
 178
 179       case 'last_365days':
 180         date.setDate(date.getDate() - 365)
 181         break
 182     }
 183
 184     this.advancedSearch.startDate = date.toISOString()
 185   }
 186 }