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<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 }