src/app/pages/photographer-page/photographer-page.component.ts
Photographer page component
| selector | app-photographer-page |
| styleUrls | photographer-page.component.scss |
| templateUrl | ./photographer-page.component.html |
Properties |
|
Methods |
constructor(router: ActivatedRoute, afs: FirebaseFirestoreService)
|
||||||||||||
|
Constructor
Parameters :
|
| createPrintPicturePriceList |
createPrintPicturePriceList()
|
|
create array to save print-picture pricelist
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Unload component
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Initialize component
Returns :
void
|
| dashboardAdmin |
dashboardAdmin:
|
Type : TemplateRef<any>
|
Decorators : ViewChild
|
|
Standard photographer |
| Public events |
events:
|
Type : Event[]
|
|
Events |
| Private log |
log:
|
Default value : Log.create('PhotographerPageComponent')
|
|
Logger |
| Public photographer |
photographer:
|
Type : PhotographerProfile
|
|
Photographer |
| Private photographerUrl |
photographerUrl:
|
Type : string
|
|
Photograpehr url |
| Public priceList |
priceList:
|
Type : PriceList
|
|
Printing house object |
| Public printPicturePriceList |
printPicturePriceList:
|
Type : PrintingHouseArticle[]
|
|
define certain price list for simplicity |
| Private sub |
sub:
|
Type : any
|
|
Router sub |
import {
Component,
OnDestroy,
OnInit,
TemplateRef,
ViewChild
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Log } from 'ng2-logger';
import { Event } from '../../classes/event';
import { PriceList } from '../../classes/price-list';
import { PRINTTYPE } from '../../enums/print-type';
import { PhotographerProfile } from '../../interfaces/photographer-profile';
import { PrintingHouseArticle } from '../../interfaces/printing-house-article';
import { FirebaseFirestoreService } from '../../services/firebase/firestore/firebase-firestore.service';
/**
* Photographer page component
* @author Daniel Sogl, Tim Kriesler
*/
@Component({
selector: 'app-photographer-page',
templateUrl: './photographer-page.component.html',
styleUrls: ['./photographer-page.component.scss']
})
export class PhotographerPageComponent implements OnInit, OnDestroy {
/** Logger */
private log = Log.create('PhotographerPageComponent');
/** Router sub */
private sub: any;
/** Photograpehr url */
private photographerUrl: string;
/** Photographer */
public photographer: PhotographerProfile;
/** Events */
public events: Event[];
/** Printing house object */
public priceList: PriceList;
/** define certain price list for simplicity */
public printPicturePriceList: PrintingHouseArticle[];
/** Standard photographer */
@ViewChild('standard') dashboardAdmin: TemplateRef<any>;
/**
* Constructor
* @param {ActivatedRoute} router Activated Route
* @param {FirebaseFirestoreService} afs Firebase Firestore Service
*/
constructor(
private router: ActivatedRoute,
private afs: FirebaseFirestoreService
) {}
/**
* Initialize component
*/
ngOnInit() {
this.log.color = 'orange';
this.log.d('Component initialized');
this.sub = this.router.params.subscribe(params => {
this.photographerUrl = params['photographerUrl'];
this.log.d('Photographer Url', this.photographerUrl);
if (this.photographerUrl) {
this.afs
.getPhotographerByUrl(this.photographerUrl)
.valueChanges()
.subscribe(photographer => {
if (photographer) {
this.photographer = photographer[0];
this.log.info('Photographer:', this.photographer);
this.afs
.getPhotographerEvents(this.photographer.uid)
.valueChanges()
.subscribe(events => {
this.events = events;
this.log.info('Events:', this.events);
});
this.afs
.getPriceList(this.photographer.uid)
.valueChanges()
.subscribe(priceList => {
this.priceList = priceList;
this.log.d('Loaded priceList', this.priceList);
this.createPrintPicturePriceList();
});
}
});
}
});
}
/**
* create array to save print-picture pricelist
*/
createPrintPicturePriceList() {
for (let i = 0; i < this.priceList.printingHouseItems.length; i++) {
if (this.priceList.printingHouseItems[i].name === PRINTTYPE.PICTURE) {
this.printPicturePriceList = this.priceList.printingHouseItems[
i
].articles;
}
}
}
/**
* Unload component
*/
ngOnDestroy() {
this.sub.unsubscribe();
}
}
<div *ngIf="photographer && photographer.premium; else standard">
<div class="row mt-5 pt-5">
<div class="author-box">
<h1 class="h1-responsive text-center">{{ 'LABELS.ABOUT' | translate }} {{photographer?.name}}</h1>
<hr class="mt-5 mr-5 ml-5">
<!--site-navbar-->
<div id="navbar" class="row justify-content-md-center">
<div class="col-md-auto">
<a mdbPageScroll id="navelement" href="#description" [pageScrollDuration]="300">{{ 'NAV.DESCRIPTION' | translate }}</a>
</div>
<div class="col-md-auto">
<a mdbPageScroll id="navelement" href="#events" [pageScrollDuration]="300">{{ 'NAV.EVENTS' | translate }}</a>
</div>
<div class="col-md-auto">
<a mdbPageScroll id="navelement" href="#prices" [pageScrollDuration]="300">{{ 'NAV.PRICES' | translate }}</a>
</div>
<div class="col-md-auto">
<a mdbPageScroll id="navelement" href="#testimonials" [pageScrollDuration]="300">{{ 'NAV.TESTIMONIAL' | translate }}</a>
</div>
</div>
<!--END site-navbar-->
<hr id="description" class="mb-5 mr-5 ml-5">
<!--photographer-description box (picture, infotext, address)-->
<div class="row">
<div class="col-12 col-sm-3">
<img src="{{photographer?.photoUrl}}" alt="Bild nicht verfügbar" class="img-fluid rounded-circle z-depth-2">
</div>
<div id="authorData" class=" col-12 col-sm-9">
<p>{{photographer?.about}}</p>
<p id="address">
<b>{{photographer?.address?.street}} {{photographer?.address?.streetnumber}}
<br/> {{photographer?.address?.zip}} {{photographer?.address?.city}}</b>
</p>
</div>
</div>
<!--END photographer-description box-->
<hr class="m-5">
<!--social network links-->
<div id="centered" class="personal-sm">
<a *ngIf="photographer.website" class="email-ic" href="{{photographer.website}}">
<i class="fa fa-home fa-2x"> </i>
</a>
<a *ngIf="photographer.facebook" class="fb-ic" href="{{photographer.facebook}}">
<i class="fa fa-facebook fa-2x"> </i>
</a>
<a *ngIf="photographer.instagram" class="ins-ic" href="{{photographer.instagram}}">
<i class="fa fa-instagram fa-2x"> </i>
</a>
<a *ngIf="photographer.twitter" class="tw-ic" href="{{photographer.twitter}}">
<i class="fa fa-twitter fa-2x"> </i>
</a>
<a *ngIf="photographer.tumbler" class="vk-ic" href="{{photographer.tumbler}}">
<i class="fa fa-tumblr fa-2x"> </i>
</a>
<a *ngIf="photographer.email" class="email-ic" href="mailto:{{photographer.email}}">
<i class="fa fa-envelope-o fa-2x"> </i>
</a>
</div>
<!--END social network links-->
<hr id="events" class="m-5">
<!--photographer events-->
<div id=" rowdesign " class="row">
<div *ngFor="let event of events" id="rowdesign " class="col-12 col-md-4 ">
<div class="card card-cascade wider ">
<div class="view gradient-card-header indigo-gradient ">
<h2 class="h2-responsive mb-2 ">
<!-- <i *ngIf="!event?.public" class="fa fa-lock"></i> -->{{event.name}}</h2>
<p>
<i class="fa fa-calendar "></i> {{event.date}}</p>
</div>
<div class="card-body text-center ">
<p class="card-text mr-2 ml-2 ">{{event.description}}</p>
<a [routerLink]="[ '/event', event.id] " class="pink-text mt-1 d-flex flex-row-reverse ">
<h5 class="waves-effect p-2 " mdbRippleRadius>Bilder ansehen
<i class="fa fa-chevron-right "></i>
</h5>
</a>
</div>
</div>
</div>
</div>
<!--END photographer events-->
<hr id="prices" class="m-5">
<!--photographer prices-->
<div class="container">
<h2 class="text-center">{{ 'LABELS.PRICES' | translate }}</h2>
<br>
<div class="row">
<!-- Prices for Download -->
<div class="col-6 text-center">
<p class="tab-hdg">{{ 'LABELS.DOWNLOAD' | translate }}</p>
<table class="table table-responsive-sm">
<tbody *ngIf="priceList">
<tr *ngFor="let downloadItem of priceList.downloadItems">
<td>{{downloadItem.name}}</td>
<td>{{ downloadItem.price | number:'0.2-2' }}€</td>
</tr>
</tbody>
</table>
</div>
<!--col-download-->
<!-- Prices for Pics -->
<div class="col-6 text-center">
<p class="tab-hdg">{{ 'LABELS.PRINT' | translate }}</p>
<table class="table table-responsive-sm">
<tbody *ngIf="printPicturePriceList">
<tr *ngFor="let printItem of printPicturePriceList">
<td>{{ printItem.name }}</td>
<td>{{ printItem.price | number:'0.2-2' }}€</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--row-->
</div>
<!--container-->
<!--END photographer prices-->
<!-- photographer testimonials -->
<hr id="testimonials" class="mb-5 mr-5 ml-5">
<div class="container">
<div class="col-12">
<h2 class="text-center">{{ 'LABELS.CUSTOMER_RATING' | translate }}</h2>
<br>
</div>
<div class="row">
<div class="col-2">
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
</div>
<!--review1-end-->
<!-- <div class="avatar">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg" class="rounded-circle z-depth-1 img-fluid" alt="">
</div> -->
</div>
<!--col1-->
<div class="col-9">
<h4 class="mb-3">Lena A.</h4>
<p>Unsere Hochzeit wurde durch Leon Fink unvergesslich! Er hat großartige Bilder von uns und unseren Gästen gemacht
und war pünktlich an unserem großen Tag da.
</p>
</div>
<!--col2-->
</div>
<!--row-->
<hr>
<div class="row">
<div class="col-2">
<div class="orange-text">
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
<i class="fa fa-star"> </i>
</div>
<!--review1-end-->
</div>
<!--col1-->
<div class="col-9">
<h4 class="mb-3">Nadja B.</h4>
<p>Die Bilder die Leon Fink von unserer Familienfeier gemacht hat werden für immer im Gedächtnis bleiben und auch
seine freundliche und sehr höfliche Art werde ich auf jeden Fall nicht vergessen! Ich werde ihn nächstes Mal
wieder buchen!
</p>
</div>
<!--col2-->
</div>
<!--row-->
<hr>
<div class="row">
<div class="col-2">
<div class="orange-text">
<i class="fa fa-star responsive"> </i>
<i class="fa fa-star responsive"> </i>
<i class="fa fa-star responsive"> </i>
<i class="fa fa-star responsive"> </i>
<i class="fa fa-star responsive"> </i>
</div>
<!--review1-end-->
</div>
<!--col1-->
<div class="col-9">
<h4 class="mb-3">Martin N.</h4>
<p>Überragende Bilder zu einem top Preis-Leistungsverhältnis! Wir haben Leon bereits für mehrere Veranstaltungen
gebucht und waren jedes Mal sehr zufrieden.
</p>
</div>
<!--col2-->
</div>
<!--row-->
</div>
<!--container-->
<!--Customer-Rating-->
<hr id="customerRating" class="white mb-5 mr-5 ml-5">
<hr class="white">
<div class="container">
<br>
<h5 class="rating text-center">Bewerten Sie hier Ihren Fotografen:</h5>
<br>
<br>
<div class="row justify-content-start">
<div class="col-2">
<label>{{'LABELS.RATING'|translate}}</label>
<!-- <star-rating-comp [starType]="'svg'" [rating]="2.63"></star-rating-comp> -->
</div>
<div class="col-9">
<div class="form-check form-check-inline">
<input name="group1" class="form-check-input " type="radio" value="" id="rate1">
<label class="form-check-label" for="rate1">
<div class="orange-text">
<i class="fa fa-star write"> </i>
<i class="fa fa-star write"> </i>
<i class="fa fa-star write"> </i>
<i class="fa fa-star write"> </i>
<i class="fa fa-star write"> </i>
</div>
<!--review1-end-->
</label>
</div>
<!--form-check-->
<div class="form-check form-check-inline">
<input name="group1" class="form-check-input" type="radio" value="" id="rate2">
<label class="form-check-label" for="rate2">
<div class="orange-text">
<i class="fa fa-star write"> </i>
<i class="fa fa-star write"> </i>
<i class="fa fa-star write"> </i>
<i class="fa fa-star write"> </i>
</div>
<!--review1-end-->
</label>
</div>
<!--form-check-->
<div class="form-check form-check-inline">
<input name="group1" class="form-check-input" type="radio" value="" id="rate3">
<label class="form-check-label" for="rate3">
<div class="orange-text">
<i class="fa fa-star write"> </i>
<i class="fa fa-star write"> </i>
<i class="fa fa-star write"> </i>
</div>
<!--review1-end-->
</label>
</div>
<!--form-check-->
<div class="form-check form-check-inline">
<input name="group1" class="form-check-input" type="radio" value="" id="rate4">
<label class="form-check-label" for="rate4">
<div class="orange-text">
<i class="fa fa-star write"> </i>
<i class="fa fa-star write"> </i>
</div>
<!--review1-end-->
</label>
</div>
<!--form-check-->
<div class="form-check form-check-inline">
<input name="group1" class="form-check-input" type="radio" value="" id="rate5">
<label class="form-check-label" for="rate5">
<div class="orange-text">
<i class="fa fa-star write"> </i>
</div>
<!--review1-end-->
</label>
</div>
<!--form-check-->
</div>
<!--col-->
</div>
<!--row-->
<br>
<div class="row justify-content-start">
<div class="col-2">
<label for="inputRating">{{'LABELS.COMMENT'|translate}}</label>
</div>
<div class="col-9">
<form>
<div class="form-group">
<textarea class="form-control" id="inputRating" rows="10" placeholder="Schreiben Sie hier Ihre Bewertung"></textarea>
</div>
<small id="giveOk" class="form-text text-muted">Ich bin einverstanden, dass mein Name und mein Kommentar auf dieser Seite erscheint.</small>
</form>
</div>
<!--col-->
</div>
<!--row-->
<div class="row justify-content-end">
<div class="col-3 offset-1">
<!-- <div class="row justify-content-end" style="margin-left:10px"> -->
<button id="submitRating" class="btn pink">{{'BUTTONS.SUBMIT'|translate}}
<i class="fa fa-paper-plane-o ml-1"></i>
</button>
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--container-->
</div>
</div>
</div>
<!-- Standad-Account -->
<ng-template #standard>
<div class="row mt-5 pt-5">
<div class="author-box">
<h1 class="h1-responsive text-center">{{ 'LABELS.ABOUT' | translate }} {{photographer?.name}}</h1>
<hr class="mt-5 mr-5 ml-5">
<!--photographer events-->
<div id=" rowdesign " class="row">
<div *ngIf="!events?.length" class="col-12">
<br>
<p class="alternativeText">{{ 'TEXTS.NO_EVENTS_FOUND' | translate }}</p>
</div>
<div *ngFor="let event of events" id="rowdesign " class="col-12 col-md-4">
<div class="card card-cascade wider ">
<div class="view gradient-card-header peach-gradient ">
<h2 class="h2-responsive mb-2 ">
<i *ngIf="!event?.public" class="fa fa-lock"></i> {{event.name}}</h2>
<p>
<i class="fa fa-calendar "></i> {{event.date}}</p>
</div>
<div class="card-body text-center ">
<p class="card-text mr-2 ml-2 ">{{event.description}}</p>
<a [routerLink]="[ '/event', event.id] " class="pink-text mt-1 d-flex flex-row-reverse ">
<h5 class="waves-effect p-2 " mdbRippleRadius>Bilder ansehen
<i class="fa fa-chevron-right "></i>
</h5>
</a>
</div>
</div>
</div>
</div>
<!--END photographer events-->
<hr id="prices" class="m-5">
<!--photographer prices-->
<div class="container">
<h2 class="text-center">{{ 'LABELS.PRICES' | translate }}</h2>
<br>
<div class="row">
<!-- Prices for Download -->
<div class="col-6 text-center">
<p class="tab-hdg">{{ 'LABELS.DOWNLOAD' | translate }}</p>
<table class="table table-responsive-sm">
<tbody *ngIf="priceList">
<tr *ngFor="let downloadItem of priceList.downloadItems">
<td>{{downloadItem.name}}</td>
<td>{{ downloadItem.price | number:'0.2-2' }}€</td>
</tr>
</tbody>
</table>
</div>
<!--col-download-->
<!-- Prices for Pics -->
<div class="col-6 text-center">
<p class="tab-hdg">{{ 'LABELS.PRINT' | translate }}</p>
<table class="table table-responsive-sm">
<tbody *ngIf="printPicturePriceList">
<tr *ngFor="let printItem of printPicturePriceList">
<td>{{ printItem.name }}</td>
<td>{{ printItem.price | number:'0.2-2' }}€</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--row-->
</div>
<!--container-->
<!--END photographer prices-->
</div>
</div>
</ng-template>