src/app/components/event-photographer/event-photographer.component.ts
Event photographer view component
| selector | app-event-photographer |
| styleUrls | event-photographer.component.scss |
| templateUrl | ./event-photographer.component.html |
Properties |
|
Methods |
Inputs |
constructor(afs: FirebaseFirestoreService, storage: FirebaseStorageService, formBuilder: FormBuilder, navigation: NavigationService)
|
||||||||||||||||||||
|
Constructor
Parameters :
|
event
|
Event
Type: |
images
|
Event images
Type: |
user
|
Firebase user
Type: |
| deleteEvent |
deleteEvent()
|
|
Delete the event
Returns :
void
|
| deleteFile | ||||||||
deleteFile(index: number)
|
||||||||
|
Delete file from the upload array
Parameters :
Returns :
void
|
| deleteImage | ||||||||
deleteImage(image: EventPicture)
|
||||||||
|
Delete an image
Parameters :
Returns :
void
|
| detectFiles | ||||||||
detectFiles(event: any)
|
||||||||
|
Add files to fileslist
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Initialize component
Returns :
void
|
| startUpload |
startUpload()
|
|
Start upload
Returns :
void
|
| updateEvent |
updateEvent()
|
|
Upadte event data in firestore
Returns :
void
|
| Public eventForm |
eventForm:
|
Type : FormGroup
|
|
Event form |
| Private log |
log:
|
Default value : Log.create('EventPhotographerComponent')
|
|
Logger |
| Public priceList |
priceList:
|
Type : PriceList
|
|
Event printing house |
| Public uploadFiles |
uploadFiles:
|
Type : Upload[]
|
Default value : []
|
|
Files for the upload |
| Public uploadStarted |
uploadStarted:
|
Type : boolean
|
|
Upload in progress |
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import * as _ from 'lodash';
import { Log } from 'ng2-logger';
import { Observable } from 'rxjs/Observable';
import { Event } from '../../classes/event';
import { PriceList } from '../../classes/price-list';
import { Upload } from '../../classes/upload-file';
import { User } from '../../classes/user';
import { EventPicture } from '../../interfaces/event-picture';
import { FirebaseFirestoreService } from '../../services/firebase/firestore/firebase-firestore.service';
import { FirebaseStorageService } from '../../services/firebase/storage/firebase-storage.service';
import { NavigationService } from '../../services/navigation/navigation.service';
/**
* Event photographer view component
* @author Daniel Sogl
*/
@Component({
selector: 'app-event-photographer',
templateUrl: './event-photographer.component.html',
styleUrls: ['./event-photographer.component.scss']
})
export class EventPhotographerComponent implements OnInit {
/** Logger */
private log = Log.create('EventPhotographerComponent');
/** Event form */
public eventForm: FormGroup;
/** Files for the upload */
public uploadFiles: Upload[] = [];
/** Upload in progress */
public uploadStarted: boolean;
/** Event */
@Input() public event: Event;
/** Event images */
@Input() public images: Observable<EventPicture[]>;
/** Firebase user */
@Input() public user: User;
/** Event printing house */
public priceList: PriceList;
/**
* Constructor
* @param {FirebaseFirestoreService} afs Firebase Firestore Service
* @param {FirebaseStorageService} storage Firebase Storage Service
* @param {FormBuilder} formBuilder Angular Form Builder
*/
constructor(
private afs: FirebaseFirestoreService,
private storage: FirebaseStorageService,
private formBuilder: FormBuilder,
private navigation: NavigationService
) {
this.eventForm = this.formBuilder.group({
date: ['', Validators.required],
description: [''],
id: ['', Validators.required],
location: ['', Validators.required],
name: ['', Validators.required],
password: [''],
photographerUid: ['', Validators.required],
public: [false, Validators.required],
ratings: [0, Validators.required],
deleted: [false, Validators.required]
});
}
/**
* Initialize component
*/
ngOnInit() {
this.log.color = 'orange';
this.log.d('Component initialized');
this.log.d('Event', this.event);
this.log.d('User', this.user);
if (this.event) {
// Set form data
this.eventForm.setValue(this.event);
// Load images
this.images = this.afs.getEventPictures(this.event.id).valueChanges();
this.images.subscribe(images => {
this.log.d('Images', images);
});
this.afs
.getPriceList(this.event.photographerUid)
.valueChanges()
.subscribe(priceList => {
if (priceList) {
this.priceList = priceList;
this.log.d('Loaded printing house', this.priceList);
}
});
}
}
/**
* Add files to fileslist
* @param {any} event
*/
detectFiles(event: any) {
const files = event.target.files;
const filesIndex = _.range(files.length);
_.each(filesIndex, idx => {
this.uploadFiles.push(new Upload(files[idx]));
});
}
/**
* Delete an image
* @param {EventPicture} image
*/
deleteImage(image: EventPicture) {
this.afs
.deleteEventImage(image.id)
.then(() => {
this.log.d('Deleted image', image);
})
.catch(err => {
this.log.er('Error deleting image', err);
});
}
/**
* Upadte event data in firestore
*/
updateEvent() {
this.event = this.eventForm.getRawValue();
this.afs
.updatePhotographerEvent(this.event)
.then(() => {
this.log.d('Updated event');
})
.catch(err => {
this.log.er('Error updating event', err);
});
}
/**
* Delete the event
*/
deleteEvent() {
this.afs
.deletePhotographerEvent(this.event.id)
.then(() => {
this.log.d('Deleted Event');
this.navigation.navigateTo('/dashboard');
})
.catch(err => {
this.log.er('Error deliting Event');
});
}
/**
* Delete file from the upload array
* @param {number} index File array index
*/
deleteFile(index: number) {
this.uploadFiles.splice(index, 1);
}
/**
* Start upload
*/
startUpload() {
this.uploadStarted = true;
const items = this.uploadFiles.length;
let count = 0;
for (let i = 0; i < this.uploadFiles.length; i++) {
const uploadTask = this.storage.pushUpload(
this.event.id,
this.uploadFiles[i]
);
uploadTask.snapshotChanges().subscribe(snapshot => {
this.uploadFiles[i].progress =
snapshot.bytesTransferred / snapshot.totalBytes * 100;
});
uploadTask.then().then(() => {
console.log('Image upload finsihed: ', i);
count++;
if (count === items) {
this.uploadStarted = false;
setTimeout(() => {
this.uploadFiles = [];
}, 2000);
}
});
}
}
}
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs indigo'" [contentClass]="'card'">
<mdb-tab heading="{{ 'TABS.IMAGES' | translate }}">
<div class="row">
<div class="col-12">
<br>
<div class="table-responsive text-left">
<table class="table">
<thead>
<tr>
<td>#</td>
<td>{{ 'TABLE.NAME' | translate }}</td>
<td>{{ 'TABLE.TYPE' | translate }}</td>
<td>{{ 'TABLE.FORMAT' | translate }}</td>
<td>{{ 'TABLE.SIZE' | translate }}</td>
<td>{{ 'TABLE.DELETE' | translate }}</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let image of (images | async); let i = index">
<td>{{ i + 1 }}</td>
<td>{{ image.name }}</td>
<td>{{ image.info.type }}</td>
<td>{{ image.info.width }}x{{ image.info.height }}</td>
<td>{{ (image.info.size) | bytes }}</td>
<td>
<a class="fa fa-trash-o" style="color: #e91e63" aria-hidden="true" (click)="deleteImage(image)"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</mdb-tab>
<mdb-tab heading="{{ 'TABS.UPLOAD' | translate }}">
<div class="row">
<div class="col-12">
<br>
<label>
<input type="file" (change)="detectFiles($event)" multiple>
</label>
<br>
<br>
<div class="row no-gutters justify-content-start" style="align-items: center">
<div class="col-4"></div>
<div class="col-4">
<button type="button" class="btn pink btn-lg btn-block waves-light" mdbRippleRadius (click)="startUpload()">{{ 'BUTTONS.START_UPLOAD' | translate }}</button>
</div>
<div class="col-4"></div>
</div>
<br>
<div class="table-responsive text-left">
<table class="table">
<thead>
<tr>
<td>#</td>
<td>{{ 'TABLE.NAME' | translate }}</td>
<td>{{ 'TABLE.TYPE' | translate }}</td>
<td>{{ 'TABLE.SIZE' | translate }}</td>
<td *ngIf="uploadStarted">{{ 'TABLE.PROGRESS' | translate }}</td>
<td *ngIf="!uploadStarted">{{ 'TABLE.DELETE' | translate }}</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let file of uploadFiles; let i = index">
<td>{{ i + 1 }}</td>
<td>{{ file.name }}</td>
<td>{{ file.file.type }}</td>
<td>{{ file.file.size | bytes }}</td>
<td *ngIf="uploadStarted">
<mdb-progressbar [value]="file.progress" min="0" max="100" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></mdb-progressbar>
</td>
<td *ngIf="!uploadStarted">
<a class="fa fa-trash-o" aria-hidden="true" (click)="deleteFile(i)"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</mdb-tab>
<mdb-tab heading="{{ 'TABS.EVENT_SETTINGS' | translate }}">
<div class="row">
<div class="col-12">
<br>
<form [formGroup]="eventForm">
<div class="md-form">
<input type="text" class="form-control" id="input_event_name" formControlName="name">
<label class="active">{{ 'LABELS.EVENT_NAME' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" id="input_event_location" formControlName="location">
<label class="active">{{ 'LABELS.EVENT_LOCATION' | translate }}</label>
</div>
<div class="md-form">
<mdb-date-picker name="mydate" id="input_event_date" [placeholder]="'Selected date'" formControlName="date"></mdb-date-picker>
</div>
<div class="md-form">
<textarea class="md-textarea" id="input_event_description" type="text" length="120" mdbCharCounter formControlName="description"></textarea>
<label class="active">{{ 'LABELS.EVENT_DESCRIPTION' | translate }}</label>
</div>
<div class="md-form">
<input type="password" class="form-control" id="input_event_password" formControlName="password">
<label class="active">{{ 'LABELS.EVENT_PASSWORD' | translate }}</label>
</div>
<div class="md-form">
<input class="text" id="event_url" type="text" length="120" mdbCharCounter formControlName="id" disabled>
<label class="active">{{ 'LABELS.EVENT_URL' | translate }}</label>
</div>
<div class="row no-gutters justify-content-start" style="align-items: center">
<div class="col-4"></div>
<div class="col-4">
<button type="submit" class="btn pink btn-lg btn-block waves-light" mdbRippleRadius (click)="updateEvent()">{{ 'BUTTONS.UPDATE_EVENT' | translate }}</button>
</div>
<div class="col-4"></div>
</div>
<br>
<div class="row no-gutters justify-content-start" style="align-items: center">
<div class="col-4"></div>
<div class="col-4">
<button type="button" class="btn btn-danger btn-lg btn-block waves-light" mdbRippleRadius (click)="deleteEvent()">{{ 'BUTTONS.DELETE_EVENT' | translate }}</button>
</div>
<div class="col-4"></div>
</div>
</form>
</div>
</div>
</mdb-tab>
</mdb-tabset>