import { Component } from '@angular/core' ; import { NavController , NavParams } from 'ionic-angular' ; import { AuthService } from './../../providers/auth.service' ; import { User } from './../../models/user.model' ; import { UserService } from './../../providers/user.service' ; import * as firebase from 'firebase/app' ; @ Component ( { selector : 'page-user-profile' , templateUrl : 'user-profile.html' , } ) export class UserProfilePage { currentUser : User ; canEdit : boolean = false ; uploadProgress : number ; private filePhoto : File ; constructor ( public authService , public navCtrl , public navParams , public userService ) { } ionViewCanEnter ( ) { return this . authService . authenticated ; } ionViewDidLoad ( ) { this . userService . mapObjectKey < User > ( this . userService . currentUser ) . subscribe ( ( user ) => { this . currentUser = user ; } ) ; } onSubmit ( event ) { event . preventDefault ( ) ; if ( this . filePhoto ) { let uploadTask = this . userService . uploadPhoto ( this . filePhoto , this . currentUser . $key ) ; uploadTask . on ( 'state_changed' , ( snapshot ) => { this . uploadProgress = Math . round ( ( snapshot . bytesTransferred / snapshot . totalBytes ) * 100 ) ; } , ( error ) => { } ) ; uploadTask . then ( ( UploadTaskSnapshot ) => { this . editUser ( uploadTask . snapshot . downloadURL ) ; } ) ; } else { this . editUser ( ) ; } } onPhoto ( event ) { this . filePhoto = event . target . files [ 0 ] ; } private editUser ( photoUrl ? ) { this . userService . edit ( { name : this . currentUser . name , username : this . currentUser . username , photo : photoUrl || this . currentUser . photo || '' } ) . then ( ( ) => { this . canEdit = false ; this . filePhoto = undefined ; this . uploadProgress = 0 ; } ) ; } }