import { Component , OnDestroy } from '@angular/core' ; import { Subscription } from 'rxjs' ; import { HsCompositionsCatalogueService } from './compositions-catalogue.service' ; import { HsCompositionsMapService } from './compositions-map.service' ; import { HsCompositionsOverwriteDialogComponent } from './dialogs/overwrite-dialog.component' ; import { HsCompositionsParserService } from './compositions-parser.service' ; import { HsCompositionsService } from './compositions.service' ; import { HsDialogContainerService } from '../layout/dialogs/dialog-container.service' ; import { HsLanguageService } from '../language/language.service' ; import { HsLaymanService } from './../save-map/layman.service' ; import { HsLayoutService } from '../layout/layout.service' ; import { HsPanelBaseComponent } from '../layout/panels/panel-base.component' ; import { HsSaveMapManagerService } from '../save-map/save-map-manager.service' ; import { HsSidebarService } from '../sidebar/sidebar.service' ; import { HsUtilsService } from '../utils/utils.service' ; @ Component ( { selector : 'hs-compositions' , templateUrl : './compositions.html' , } ) export class HsCompositionsComponent extends HsPanelBaseComponent implements OnDestroy { keywordsVisible = false ; themesVisible = false ; urlToAdd = '' ; addCompositionUrlVisible = false ; optionsButtonLabel = 'more' ; optionsMenuOpen = false ; selectedCompId : any ; loadFilteredCompositions : any ; notSavedCompositionLoadingSubscription : Subscription ; name = 'composition_browser' ; constructor ( public hsCompositionsService , public hsCompositionsParserService , public hsLayoutService , public hsUtilsService , public hsCompositionsMapService , public hsSaveMapManagerService , public hsDialogContainerService , public hsCompositionsCatalogueService , public hsLaymanService , hsSidebarService , hsLanguageService ) { super ( hsLayoutService ) ; hsSidebarService . buttons . push ( { panel : 'composition_browser' , module : 'hs.compositions' , order : 3 , fits : true , title : ( ) => hsLanguageService . getTranslation ( 'PANEL_HEADER.MAPCOMPOSITIONS' ) , description : ( ) => hsLanguageService . getTranslation ( 'SIDEBAR.descriptions.MAPCOMPOSITIONS' ) , icon : 'icon-map' , } ) ; this . loadFilteredCompositions = ( ) => hsCompositionsCatalogueService . loadFilteredCompositions ( ) ; this . notSavedCompositionLoadingSubscription = this . hsCompositionsService . notSavedCompositionLoading . subscribe ( ( url ) => { this . hsCompositionsService . compositionToLoad = { url , title : '' } ; this . loadUnsavedDialogBootstrap ( url , '' ) ; } ) ; } ngOnDestroy ( ) { this . notSavedCompositionLoadingSubscription . unsubscribe ( ) ; } param composition param state highlightComposition ( composition , state ) { composition . highlighted = state ; this . hsCompositionsMapService . highlightComposition ( composition , state ) ; } param url addCompositionUrl ( url ) { if ( this . hsCompositionsParserService . composition_edited == true ) { this . hsCompositionsService . notSavedCompositionLoading . next ( url ) ; } else { this . hsCompositionsService . loadComposition ( url , true ) . then ( ( _ ) => { this . addCompositionUrlVisible = false ; } ) ; } } handleFileSelect ( evt ) { const files = evt . target . files ; for ( const f of files ) { if ( ! f . type . match ( 'application/json' ) ) { continue ; } const reader = new FileReader ( ) ; reader . onload = async ( theFile ) => { const json = JSON . parse ( < string > reader . result ) ; await this . hsCompositionsParserService . loadCompositionObject ( json , true ) ; } ; reader . readAsText ( f ) ; } } param url param title loadUnsavedDialogBootstrap ( url , title ) { this . hsDialogContainerService . create ( HsCompositionsOverwriteDialogComponent , { composition_name_to_be_loaded : title , } ) ; } openOptionsMenu ( ) { this . optionsMenuOpen = ! this . optionsMenuOpen ; if ( this . optionsMenuOpen ) { this . optionsButtonLabel = 'less' ; this . keywordsVisible = false ; this . themesVisible = false ; } else { this . optionsButtonLabel = 'more' ; } } clearFilters ( ) { this . optionsMenuOpen = false ; this . themesVisible = false ; this . keywordsVisible = false ; this . selectedCompId = '' ; this . hsCompositionsCatalogueService . clearFilters ( ) ; } changeUrlButtonVisible ( ) { this . addCompositionUrlVisible = ! this . addCompositionUrlVisible ; } openSaveMapPanel ( ) { this . hsLayoutService . setMainPanel ( 'saveMap' ) ; } compositionClicked ( composition ) { if ( this . selectedCompId != this . hsCompositionsService . commonId ( composition ) ) { this . selectedCompId = this . hsCompositionsService . commonId ( composition ) ; } else { this . selectedCompId = '' ; } } reload ( ) { this . clearFilters ( ) ; this . loadFilteredCompositions ( ) ; } sortByValueChanged ( sortBy ) { this . hsCompositionsCatalogueService . data . sortBy = sortBy ; this . loadFilteredCompositions ( ) ; } }