import { Component , OnInit } from '@angular/core' ; import { HttpClient , HttpHeaders } from '@angular/common/http' ; import { NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap' ; import { Title } from '@angular/platform-browser' ; @ Component ( { selector : 'app-add-new' , templateUrl : './add-new.component.html' , styleUrls : [ './add-new.component.scss' ] , providers : [ NgbRatingConfig ] } ) export class AddNewComponent implements OnInit { operatingSystems = [ 'Mac OS X' , 'Chrome OS' , 'Windows 10' , 'Windows 8.1' , 'Windows 7 Home' ] ; processors = [ 'Intel Core i7' , 'Intel Core i5' , 'Intel Core i3' , 'Intel Core 2' , 'AMD' ] ; brands = [ 'Apple' , 'Microsoft' , 'HP' , 'Dell' , 'Asus' , 'Acer' , 'Samsung' , 'Lenovo' , 'Toshiba' ] ; storageTypes = [ 'SSD' , 'Hard Disk' ] ; defaultOptions = { title : '' , image : '' , ram : null , storage : null , description : [ '' , '' , '' , '' ] , os : null , processor : null , storageType : null , brand : null , limit : false , price : null , rating : null } ; laptop = ( { ... this . defaultOptions } ) ; errorArr = [ ] ; errorText : string ; imageErr = false ; newLaptopId : string ; constructor ( private http , private ratingConfig , private titleService ) { ratingConfig . max = 5 ; ratingConfig . readonly = false ; } ngOnInit ( ) { this . titleService . setTitle ( 'Add new laptop' ) ; } trackByFn ( index , item ) { return index ; } clearAll ( ) { this . laptop = { ... this . defaultOptions } ; this . laptop . description = [ '' , '' , '' , '' ] ; this . errorArr = [ ] ; this . updateErrorText ( ) ; } addDescription ( ) { if ( this . laptop . description . length < 8 ) { this . laptop . description . push ( '' ) ; this . laptop . limit = false ; } else { this . laptop . limit = true ; } } removeDescription ( index ) { if ( this . laptop . description . length > 1 ) { this . laptop . limit = false ; this . laptop . description . splice ( index , 1 ) ; } } updateErrorText ( ) { this . errorText = this . errorArr . join ( ', ' ) ; } imageError ( ) { this . imageErr = true ; if ( ! this . errorArr . includes ( 'Image URL' ) ) { this . errorArr . push ( 'Image URL' ) ; this . updateErrorText ( ) ; } } imageLoad ( ) { this . imageErr = false ; const index = this . errorArr . indexOf ( 'Image URL' ) ; if ( index !== - 1 ) { this . errorArr . splice ( index , 1 ) ; } if ( this . errorArr . length === 0 ) { this . errorText = null ; } else { this . updateErrorText ( ) ; } } submit ( ) { if ( ! this . imageErr && this . laptop . image ) { const headers = new HttpHeaders ( { Accept : 'application/json' , 'Content-Type' : 'application/json' } ) ; const apiUrl = '/api/user/laptop' ; this . http . post ( apiUrl , { laptop : this . laptop } , { headers } ) . toPromise ( ) . then ( ( res ) => { this . newLaptopId = res . id ; this . clearAll ( ) ; window . scrollTo ( 0 , 0 ) ; } ) . catch ( err => { this . errorArr = err . errors ; this . updateErrorText ( ) ; window . scrollTo ( 0 , 0 ) ; } ) ; } else { this . errorArr . push ( 'Image URL' ) ; this . updateErrorText ( ) ; window . scrollTo ( 0 , 0 ) ; } } }