import { Component , OnInit , OnDestroy , AfterViewInit , ViewChild , ElementRef , NgZone } from '@angular/core' ; import { RouterExtensions , PageRoute , registerElement } from '@nativescript/angular' ; import { isAndroid } from '@nativescript/core/platform' ; import { Subscription } from 'rxjs' ; import { switchMap } from 'rxjs/operators' ; import { Page } from '@nativescript/core/ui/page' ; import { Fab } from '@nstudio/nativescript-floatingactionbutton' ; import { PullToRefresh } from '@nstudio/nativescript-pulltorefresh' ; import { Toasty , ToastPosition , ToastDuration } from '@triniwiz/nativescript-toasty' ; import { BeancountFileService } from '../shared/beancount-file.service' ; import { BeancountFileContent } from '../shared/beancount-file-content' ; import { SideDrawerService } from '../shared/sidedrawer.service' ; import { ACTION_BAR_BUTTON_COLOR , AFTERVIEWINIT_DELAY } from '../shared/constants' ; import { setIconColor } from '../shared/misc' ; registerElement ( 'PullToRefresh' , ( ) => PullToRefresh ) ; registerElement ( 'Fab' , ( ) => Fab ) ; @ Component ( { selector : 'bc-plaintext' , templateUrl : './plaintext.component.html' , styleUrls : [ './plaintext.component.scss' ] , } ) export class PlainTextComponent implements OnInit , OnDestroy , AfterViewInit { fileTitle : string ; fileText : string ; private fileSubscription : Subscription ; @ ViewChild ( 'fileTextView' , { static : false } ) fileTextView : ElementRef ; private scrollOnLoad : string ; constructor ( private ngZone , private routerExtensions , private page , private pageRoute , private beancountFile , private sideDrawer ) { } private show ( content ) { if ( ! content ) { return ; } this . fileText = content . text ; this . fileTitle = content . getTitle ( ) ; } private fileSubscribe ( ) { this . fileSubscription = this . beancountFile . contentStream . subscribe ( ( content ) => { if ( this . fileText ) { const toast = new Toasty ( { text : 'File reloaded' , position : ToastPosition . BOTTOM , duration : ToastDuration . LONG , } ) ; toast . show ( ) ; } this . show ( content ) ; } ) ; } private fileUnsubscribe ( ) { this . fileSubscription . unsubscribe ( ) ; } ngOnInit ( ) { this . pageRoute . activatedRoute . pipe ( switchMap ( activatedRoute => activatedRoute . params ) ) . forEach ( ( params ) => { if ( 'scroll' in params ) { this . scrollOnLoad = params . scroll ; } } ) ; this . show ( this . beancountFile . content ) ; this . page . on ( 'navigatedTo' , ( ) => { this . fileSubscribe ( ) ; if ( this . fileText === undefined ) { this . ngZone . run ( ( ) => { this . beancountFile . load ( ) ; } ) ; } } ) ; this . page . on ( 'navigatingFrom' , ( ) => { this . fileUnsubscribe ( ) ; } ) ; } ngAfterViewInit ( ) { if ( this . scrollOnLoad === 'bottom' ) { delete this . scrollOnLoad ; setTimeout ( ( ) => { this . scrollToBottom ( ) ; } , AFTERVIEWINIT_DELAY ) ; } } onActionBarLoaded ( event ) { const actionBar = event . object ; if ( isAndroid ) { const overflowIcon = actionBar . nativeView . getOverflowIcon ( ) ; setIconColor ( overflowIcon , ACTION_BAR_BUTTON_COLOR ) ; } } reloadFile ( event ) { const pullRefresh = event . object as PullToRefresh ; setTimeout ( ( ) => { this . beancountFile . load ( true ) . then ( ( ) => { pullRefresh . refreshing = false ; } ) ; } , 0 ) ; } openDrawer ( ) { this . sideDrawer . open ( ) ; } addTransaction ( ) { this . routerExtensions . navigate ( [ '/add-transaction' ] ) ; } addAccount ( ) { this . routerExtensions . navigate ( [ '/add-account' ] ) ; } addCommodity ( ) { this . routerExtensions . navigate ( [ '/add-commodity' ] ) ; } addBalance ( ) { this . routerExtensions . navigate ( [ '/add-balance' ] ) ; } scrollToTop ( ) { const element = this . fileTextView . nativeElement ; element . scrollToVerticalOffset ( 0 ) ; } scrollToBottom ( ) { const element = this . fileTextView . nativeElement ; element . scrollToVerticalOffset ( element . scrollableHeight ) ; } ngOnDestroy ( ) { this . fileUnsubscribe ( ) ; } }