src/app/components/dashboard-photographer/dashboard-photographer.component.ts
Photographer dashboard component
| selector | app-dashboard-photographer |
| styleUrls | dashboard-photographer.component.scss |
| templateUrl | ./dashboard-photographer.component.html |
Properties |
|
Methods |
constructor(auth: FirebaseAuthService, afs: FirebaseFirestoreService, router: Router, formBuilder: FormBuilder, geolocation: GeolocationService)
|
||||||||||||||||||||||||
|
Constructor
Parameters :
|
| checkDefaultPrintingHouse |
checkDefaultPrintingHouse()
|
|
Returns :
boolean
|
| createNewEvent |
createNewEvent()
|
|
Create new event
Returns :
void
|
| createPrintingHouse |
createPrintingHouse()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Initialize component
Returns :
void
|
| openTransaction | ||||||||
openTransaction(transaction: Transaction)
|
||||||||
|
Parameters :
Returns :
void
|
| saveEvent |
saveEvent()
|
|
Save event
Returns :
void
|
| trackByIndex |
trackByIndex(index: number, obj: any)
|
|
Track ngFor loop
Returns :
any
|
| updatePriceList |
updatePriceList()
|
|
Update price list
Returns :
void
|
| updatePrintingHouse |
updatePrintingHouse()
|
|
Update printing house data
Returns :
void
|
| updateProfile |
updateProfile()
|
|
Update user data
Returns :
void
|
| Public accountDataForm |
accountDataForm:
|
Type : FormGroup
|
|
Account data form |
| Public billingAddressForm |
billingAddressForm:
|
Type : FormGroup
|
|
Billing Address Form |
| Public canCreateEvent |
canCreateEvent:
|
Type : boolean
|
|
Can create a new event |
| Public defaultPrintingHouse |
defaultPrintingHouse:
|
Type : PrintingHouse
|
|
Default printing house |
| Public eventEdit |
eventEdit:
|
Type : Event
|
|
Edited event |
| Public eventLimitModal |
eventLimitModal:
|
Type : ModalDirective
|
Decorators : ViewChild
|
|
Event limit modal |
| Public events |
events:
|
Type : Observable<[]>
|
|
Photographer events |
| Private log |
log:
|
Default value : Log.create('DashboardPhotographerComponent')
|
|
Logger |
| Public newEventForm |
newEventForm:
|
Type : FormGroup
|
|
New event form |
| Public newEventModal |
newEventModal:
|
Type : ModalDirective
|
Decorators : ViewChild
|
|
Create new event modal |
| Public notValidatedModal |
notValidatedModal:
|
Type : ModalDirective
|
Decorators : ViewChild
|
|
User not validated Modal |
| Public ownPrintingHouse |
ownPrintingHouse:
|
Type : PrintingHouse
|
|
Own printing house |
| Public photographerProfile |
photographerProfile:
|
Type : PhotographerProfile
|
Default value : {
about: '',
email: '',
facebook: '',
instagram: '',
name: '',
phone: '',
tumbler: '',
twitter: '',
uid: '',
website: '',
profileUrl: '',
premium: false,
location: {
lat: 0,
lng: 0
}
}
|
|
Photographer profile |
| Public photographerProfileDoc |
photographerProfileDoc:
|
Type : AngularFirestoreDocument<PhotographerProfile>
|
|
Photographer profile document |
| Public priceList |
priceList:
|
Type : PriceList
|
|
Download price list |
| Public printingHouseContactForm |
printingHouseContactForm:
|
Type : FormGroup
|
|
Printing house contact data form |
| Public publicProfileForm |
publicProfileForm:
|
Type : FormGroup
|
|
Public profile data form |
| totalPictureSales |
totalPictureSales:
|
Default value : 0
|
|
Total Picture Sales |
| totalSales |
totalSales:
|
Default value : 0
|
|
totalSales |
| Public transaction |
transaction:
|
Type : Transaction
|
|
Transaction for modal |
| Public transactionModal |
transactionModal:
|
Type : ModalDirective
|
Decorators : ViewChild
|
|
Transaction modal |
| Public transactions |
transactions:
|
Type : Observable<[]>
|
|
Transactions |
| Public user |
user:
|
Type : User
|
|
Firebase user |
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AngularFirestoreDocument } from 'angularfire2/firestore';
import { ModalDirective } from 'ng-mdb-pro/free/modals/modal.directive';
import { Log } from 'ng2-logger';
import { Observable } from 'rxjs/Observable';
import { Event } from '../../classes/event';
import { PriceList } from '../../classes/price-list';
import { User } from '../../classes/user';
import { PhotographerProfile } from '../../interfaces/photographer-profile';
import { PrintingHouse } from '../../interfaces/printing-house';
import { Transaction } from '../../interfaces/transaction';
import { FirebaseAuthService } from '../../services/auth/firebase-auth/firebase-auth.service';
import { FirebaseFirestoreService } from '../../services/firebase/firestore/firebase-firestore.service';
import { GeolocationService } from '../../services/geolocation/geolocation.service';
/**
* Photographer dashboard component
* @author Daniel Sogl
*/
@Component({
selector: 'app-dashboard-photographer',
templateUrl: './dashboard-photographer.component.html',
styleUrls: ['./dashboard-photographer.component.scss']
})
export class DashboardPhotographerComponent implements OnInit {
/** Logger */
private log = Log.create('DashboardPhotographerComponent');
/** Firebase user */
public user: User;
/** Can create a new event */
public canCreateEvent: boolean;
/** New event form */
public newEventForm: FormGroup;
/** Account data form */
public accountDataForm: FormGroup;
/** Billing Address Form */
public billingAddressForm: FormGroup;
/** Public profile data form */
public publicProfileForm: FormGroup;
/** Printing house contact data form */
public printingHouseContactForm: FormGroup;
/** Default printing house */
public defaultPrintingHouse: PrintingHouse;
/** Own printing house */
public ownPrintingHouse: PrintingHouse;
/** Download price list */
public priceList: PriceList;
/** Edited event */
public eventEdit: Event;
/** Transactions */
public transactions: Observable<Transaction[]>;
/** Transaction for modal */
public transaction: Transaction;
/** totalSales */
totalSales = 0;
/** Total Picture Sales */
totalPictureSales = 0;
/** Photographer events */
public events: Observable<Event[]>;
/** Photographer profile document */
public photographerProfileDoc: AngularFirestoreDocument<PhotographerProfile>;
/** Photographer profile */
public photographerProfile: PhotographerProfile = {
about: '',
email: '',
facebook: '',
instagram: '',
name: '',
phone: '',
tumbler: '',
twitter: '',
uid: '',
website: '',
profileUrl: '',
premium: false,
location: {
lat: 0,
lng: 0
}
};
/** Create new event modal */
@ViewChild('newEventModal') public newEventModal: ModalDirective;
/** User not validated Modal */
@ViewChild('notValidatedModal') public notValidatedModal: ModalDirective;
/** Event limit modal */
@ViewChild('eventLimitModal') public eventLimitModal: ModalDirective;
/** Transaction modal */
@ViewChild('transactionModal') public transactionModal: ModalDirective;
/**
* Constructor
* @param {FirebaseAuthService} auth Firebase Auth Service
* @param {FirebaseFirestoreService} afs Firebase Firestore Service
* @param {Router} router Router
* @param {FormBuilder} formBuilder FormBuilder
* @param {GeolocationService} geolocation Geolocation Service
*/
constructor(
private auth: FirebaseAuthService,
private afs: FirebaseFirestoreService,
private router: Router,
private formBuilder: FormBuilder,
private geolocation: GeolocationService
) {
this.newEventForm = this.formBuilder.group({
name: ['', Validators.required],
location: ['', Validators.required],
date: ['', Validators.required]
});
this.accountDataForm = this.formBuilder.group({
name: ['', Validators.required],
lastname: ['', Validators.required],
email: ['', Validators.email]
});
this.billingAddressForm = this.formBuilder.group({
city: ['', Validators.required],
company: [''],
email: ['', Validators.email],
name: [''],
lastname: [''],
phone: ['', Validators.required],
street: ['', Validators.required],
streetnumber: ['', Validators.required],
zip: ['', Validators.required]
});
this.publicProfileForm = this.formBuilder.group({
about: [''],
email: ['', Validators.required],
facebook: [''],
instagram: [''],
name: ['', Validators.required],
phone: [''],
tumbler: [''],
twitter: [''],
uid: [''],
website: [''],
photoUrl: [''],
photographerUrl: [''],
premium: [false],
location: this.formBuilder.group({
lat: [0],
lng: [0]
}),
address: this.formBuilder.group({
city: [''],
company: [''],
email: [''],
name: [''],
lastname: [''],
phone: [''],
street: [''],
streetnumber: [''],
zip: ['']
})
});
}
/**
* Initialize component
*/
ngOnInit() {
this.log.color = 'orange';
this.log.d('Component initialized');
this.auth.user.subscribe(user => {
if (user) {
this.user = user;
this.photographerProfile.premium = user.subscription.premium;
this.photographerProfile.profileUrl = user.photographerUrl;
this.log.d('Loaded user', user);
this.accountDataForm.setValue({
name: this.user.name,
lastname: this.user.lastname,
email: this.user.email
});
this.billingAddressForm.setValue(this.user.billingAdress);
if (!user.isValidated && user.roles.photographer) {
this.notValidatedModal.show();
}
if (this.user.eventsLeft > 0) {
this.canCreateEvent = true;
} else {
this.canCreateEvent = false;
}
}
});
if (this.auth.getCurrentFirebaseUser()) {
this.photographerProfileDoc = this.afs.getPhotographerProfile(
this.auth.getCurrentFirebaseUser().uid
);
this.photographerProfileDoc.valueChanges().subscribe(profile => {
if (profile) {
this.photographerProfile = profile;
this.log.d('Photographer Profile', profile);
if (!this.photographerProfile.address) {
this.photographerProfile.address = this.user.billingAdress;
}
this.photographerProfile.photoUrl = this.auth.getCurrentFirebaseUser().photoURL;
this.publicProfileForm.patchValue(this.photographerProfile);
}
});
this.events = this.afs
.getPhotographerEvents(this.auth.getCurrentFirebaseUser().uid)
.valueChanges();
this.events.subscribe(events => {
this.log.d('Events', events);
});
this.transactions = this.afs
.getTransactionsByPhotographer(this.auth.getCurrentFirebaseUser().uid)
.valueChanges();
this.transactions.subscribe((transactions: Transaction[]) => {
this.log.d('Transactions', transactions);
transactions.forEach(transaction => {
this.totalSales += transaction.amount.details.subtotal * 0.9;
this.totalPictureSales += transaction.item_list.items.length;
});
});
this.afs
.getDefautlPrintingHouse()
.valueChanges()
.subscribe(printingHouse => {
if (printingHouse[0]) {
this.defaultPrintingHouse = printingHouse[0];
this.log.d('Default printing house', this.defaultPrintingHouse);
}
this.afs
.getPriceList(this.auth.getCurrentFirebaseUser().uid)
.valueChanges()
.subscribe(priceList => {
if (priceList) {
this.priceList = priceList;
this.log.d('Pricing list', this.priceList);
} else {
this.priceList = new PriceList(
this.auth.getCurrentFirebaseUser().uid
);
if (this.defaultPrintingHouse) {
this.priceList.printingHouseItems = this.defaultPrintingHouse.printingHouseItems;
}
this.afs
.createPriceList(
this.priceList,
this.auth.getCurrentFirebaseUser().uid
)
.then(() => {
this.log.d('Created pricing list');
})
.catch(err => {
this.log.d('Error creating pricing list', err);
});
}
});
});
this.afs
.getPrintingHouseByUser(this.auth.getCurrentFirebaseUser().uid)
.valueChanges()
.subscribe(printingHouse => {
if (printingHouse[0]) {
this.ownPrintingHouse = printingHouse[0];
this.log.d('Own printing house', this.ownPrintingHouse);
}
});
}
}
/**
* Track ngFor loop
* @param {number} index Index
* @param {any} obj Object
* @returns {any}
*/
trackByIndex(index: number, obj: any): any {
return index;
}
openTransaction(transaction: Transaction) {
this.transaction = transaction;
this.transactionModal.show();
}
/**
* Create new event
*/
createNewEvent() {
if (!this.user.isValidated) {
this.notValidatedModal.show();
} else if (this.canCreateEvent) {
this.newEventModal.show();
} else {
this.eventLimitModal.show();
this.log.d('User can not create another event without upgrading');
}
}
/**
* Save event
*/
saveEvent() {
if (this.newEventForm.valid) {
const uid = this.afs.getId();
const event = new Event({
date: this.newEventForm.value.date,
id: uid,
location: this.newEventForm.value.location,
name: this.newEventForm.value.name,
photographerUid: this.user.uid
});
this.afs
.createEvent(event)
.then(() => {
this.log.d('Added new event to firestore');
this.newEventModal.hide();
this.newEventForm.reset();
this.newEventForm.markAsUntouched();
})
.catch(err => {
this.newEventModal.hide();
this.newEventForm.reset();
this.newEventForm.markAsUntouched();
this.log.er('Could not save event to firestore', err);
});
} else {
this.log.er('Form is invalid');
}
}
/**
* Update user data
*/
updateProfile() {
if (
(this.billingAddressForm.valid && !this.billingAddressForm.untouched) ||
(this.accountDataForm.valid && !this.accountDataForm.untouched)
) {
if (this.billingAddressForm.valid && !this.billingAddressForm.untouched) {
this.user.billingAdress = this.billingAddressForm.getRawValue();
}
if (this.accountDataForm.valid && !this.accountDataForm.untouched) {
this.user.name = this.accountDataForm.value.name;
this.user.lastname = this.accountDataForm.value.lastname;
this.user.email = this.accountDataForm.value.email;
}
this.log.d('Update user data', this.user);
this.afs
.updateUserData(this.user)
.then(() => {
this.log.d('Updated user');
this.accountDataForm.markAsUntouched();
this.billingAddressForm.markAsUntouched();
})
.catch(err => {
this.log.er('Could not update user data', err);
});
} else {
this.log.er('Account data and public profile data form untouched');
}
if (this.publicProfileForm.valid && !this.publicProfileForm.untouched) {
this.photographerProfile = this.publicProfileForm.getRawValue();
this.photographerProfile.address = this.billingAddressForm.getRawValue();
this.photographerProfile.uid = this.user.uid;
this.photographerProfile.profileUrl = this.user.photographerUrl;
this.log.d('Update public profile data', this.photographerProfile);
this.geolocation
.getCoordinatesFromAdress(this.photographerProfile.address)
.then((result: any) => {
if (result.results[0].geometry.location) {
this.photographerProfile.location =
result.results[0].geometry.location;
}
this.photographerProfileDoc
.set(this.photographerProfile)
.then(() => {
this.log.d('Updated photographer page data');
this.publicProfileForm.markAsUntouched();
})
.catch(err => {
this.log.er('Could not update photographer page data', err);
});
})
.catch(err => {
this.log.er('Error loading adress', err);
});
} else {
this.log.er('No public profile data changed');
}
}
/**
* Update price list
*/
updatePriceList() {
this.afs
.updatePriceList(this.priceList, this.auth.getCurrentFirebaseUser().uid)
.then(() => {
this.log.d('Updated price list');
})
.catch(err => {
this.log.er('Error updateing price list', err);
});
}
/**
* Update printing house data
*/
updatePrintingHouse() {
this.afs
.updatePrintingHouse(this.ownPrintingHouse)
.then(() => {
this.log.d('updated own printing house');
})
.catch(err => {
this.log.er('Error updating own printing house', err);
});
}
createPrintingHouse() {
const printingHouse: PrintingHouse = {
address: {
city: '',
email: '',
name: '',
phone: '',
street: '',
streetnumber: '',
zip: ''
},
paymentInformation: {
accountOwner: '',
bic: '',
iban: ''
},
isDefault: false,
uid: this.auth.getCurrentFirebaseUser().uid,
id: this.afs.getId()
};
this.afs
.createPrintingHouse(printingHouse)
.then(() => {
this.log.d('Created own printing house');
})
.catch(err => {
this.log.er('Error creating own printing house', err);
});
}
checkDefaultPrintingHouse(): boolean {
if (!this.ownPrintingHouse && this.defaultPrintingHouse) {
return true;
} else {
return false;
}
}
}
<mdb-tabset [buttonClass]="'nav-tabs indigo'" [contentClass]="'card'">
<mdb-tab heading="{{ 'TABS.EVENTS' | translate }}">
<div class="row">
<div class="col-12">
<br>
<div class="card-columns">
<app-dashboard-event-card *ngFor="let event of events | async" [event]="event"></app-dashboard-event-card>
</div>
</div>
</div>
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large pink waves-light" mdbRippleRadius (click)="createNewEvent()">
<i class="fa fa-plus"></i>
</a>
</div>
</mdb-tab>
<mdb-tab heading="{{ 'TABS.SALES' | translate }}">
<div class="row">
<div class="col-12">
<br>
<h1>Gesamtumsatz:
<span class="light-green-text">{{ totalSales | number:'0.2-2' }} €</span>
</h1>
<h1>Verkaufte Bilder:
<span class="light-green-text">{{ totalPictureSales }}</span>
</h1>
<hr>
<table class="table text-left">
<thead class="thead-default">
<tr>
<td>#</td>
<td>Rechnungsnummer</td>
<td>Bestelldatum</td>
<td>Umsatz</td>
<td>Gewinn</td>
<td>Bestellstatus</td>
<td>Bestellung anzeigen</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let transaction of (transactions | async); let i = index">
<td>{{ i + 1 }}</td>
<td>{{ transaction.invoice_number }}</td>
<td>{{ transaction.date | date }}</td>
<td>{{ transaction.amount.total | number:'0.2-2' }} €</td>
<td>
<strong>{{ (transaction.amount.details.subtotal * 0.9) | number:'0.2-2' }} €</strong>
</td>
<td>{{ transaction.status | uppercase }}</td>
<td>
<a (click)="openTransaction(transaction)" *ngIf="transaction.status === 'available'">
<i class="fa fa-eye fa-lg" aria-hidden="true"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</mdb-tab>
<mdb-tab heading="{{ 'TABS.SUBSCRIPTION' | translate }}">
<div class="row">
<div class="col-12">
<br>
<!--Section: Pricing v.1-->
<section class="section pb-3">
<!--Section heading-->
<h1>Unsere Abonnements</h1>
<br>
<br>
<div class="row">
<div class="col-lg-4 col-md-12 mb-r">
<div class="card pricing-card">
<!--Price-->
<div class="price header indigo indigo-gradient">
<h1>25</h1>
<div class="version indigo-gradient">
<h5>Basic</h5>
</div>
</div>
<!--/.Price-->
<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p>
<i class="fa fa-check"></i>15 Events pro Monat</p>
</li>
<li>
<p>
<i class="fa fa-check"></i>Kein Speicherlimit</p>
</li>
<li>
<p>
<i class="fa fa-check"></i>10% Provision</p>
</li>
</ul>
<button class="btn pink waves-light" mdbRippleRadius>Abo abschließen</button>
</div>
<!--/.Features-->
</div>
</div>
<div class="col-lg-4 col-md-6 mb-r">
<div class="card pricing-card">
<!--Price-->
<div class="price header indigo indigo-gradient-2">
<h1>35</h1>
<div class="version indigo-gradient-2">
<h5>Smart</h5>
</div>
</div>
<!--/.Price-->
<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p>
<i class="fa fa-check"></i>25 Events pro Monat</p>
</li>
<li>
<p>
<i class="fa fa-check"></i>Kein Speicherlimit</p>
</li>
<li>
<p>
<i class="fa fa-check"></i>10% Provision</p>
</li>
</ul>
<button class="btn pink waves-light" mdbRippleRadius>Abo abschließen</button>
</div>
<!--/.Features-->
</div>
</div>
<div class="col-lg-4 col-md-6 mb-r">
<div class="card pricing-card">
<!--Price-->
<div class="price header indigo indigo-gradient">
<h1>50</h1>
<div class="version indigo-gradient">
<h5>Professional</h5>
</div>
</div>
<!--/.Price-->
<!--Features-->
<div class="card-body striped">
<ul>
<li>
<p>
<i class="fa fa-check"></i>50 Events pro Monat</p>
</li>
<li>
<p>
<i class="fa fa-check"></i>Kein Speicherlimit</p>
</li>
<li>
<p>
<i class="fa fa-check"></i>10% Provision</p>
</li>
</ul>
<button class="btn pink waves-light" mdbRippleRadius>Abo abschließen</button>
</div>
<!--/.Features-->
</div>
</div>
</div>
</section>
</div>
</div>
</mdb-tab>
<mdb-tab heading="{{ 'TABS.PRICING_MODEL' | translate }}">
<div class="row">
<div class="col-12 text-left">
<br>
<mdb-tabset [buttonClass]="'nav-tabs indigo'" [contentClass]="''">
<mdb-tab heading="<i class='fa fa-download'></i> Downloads">
<div class="row">
<div class="col-12">
<br>
<table class="table text-left" *ngIf="priceList">
<thead class="thead-default">
<tr>
<th scope="row">Artikel</th>
<th>Minimaler Preis</th>
<th>Ihr Preis</th>
<th>Ihre Provision (abzüglich -10%)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let article of priceList.downloadItems; let i = index; trackBy:trackByIndex">
<td>{{ article.name}}</td>
<td>{{ article.minPrice | number: '0.2-2' }} €</td>
<td>
<input type="number" class="form-control input-sm" [min]="article.minPrice" [(ngModel)]="priceList.downloadItems[i].price">
</td>
<td>{{ article.price * 0.90 | number: '0.2-2' }} €</td>
</tr>
</tbody>
</table>
</div>
</div>
</mdb-tab>
<mdb-tab heading="<i class='fa fa-print'></i> Druckerei">
<div class="row">
<div class="col-12">
<br>
<mdb-squeezebox [multiple]="false" aria-multiselectable="true">
<div *ngIf="priceList && !ownPrintingHouse">
<mdb-item *ngFor="let item of priceList.printingHouseItems; let i = index;">
<mdb-item-head> {{ item.name }} </mdb-item-head>
<mdb-item-body>
<table class="table text-left">
<thead class="thead-default">
<tr>
<th scope="row">Artikel</th>
<th>Format</th>
<th>Minimaler Preis</th>
<th>Ihr Preis</th>
<th>Ihre Provision (abzüglich -10%)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let article of item.articles; let j = index; trackBy:trackByIndex">
<td>{{ article.name}}</td>
<td>{{ article.width}}x{{ article.heigh}}</td>
<td>{{ article.minPrice | number: '0.2-2' }} €</td>
<td>
<input type="number" class="form-control input-sm" [min]="article.minPrice" [(ngModel)]="priceList.printingHouseItems[i].articles[j].price">
</td>
<td>{{ article.price * 0.90 | number: '0.2-2' }} €</td>
</tr>
</tbody>
</table>
</mdb-item-body>
</mdb-item>
</div>
<div *ngIf="priceList && ownPrintingHouse">
<mdb-item *ngFor="let item of priceList.printingHouseItems; let i = index;">
<mdb-item-head> {{ item.name }} </mdb-item-head>
<mdb-item-body>
<table class="table text-left">
<thead class="thead-default">
<tr>
<th scope="row">Artikel</th>
<th>Format</th>
<th>Ihr Preis</th>
<th>Ihre Provision (abzüglich -10%)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let article of item.articles; let j = index; trackBy:trackByIndex">
<td>{{ article.name}}</td>
<td>{{ article.width}}x{{ article.heigh}}</td>
<td>
<input type="number" class="form-control input-sm" [(ngModel)]="priceList.printingHouseItems[i].articles[j].price">
</td>
<td>{{ article.price * 0.90 | number: '0.2-2' }} €</td>
</tr>
</tbody>
</table>
</mdb-item-body>
</mdb-item>
</div>
</mdb-squeezebox>
</div>
</div>
</mdb-tab>
</mdb-tabset>
<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-lg btn-block waves-light pink" mdbRippleRadius (click)="updatePriceList()">Änderungen speichern</button>
</div>
<div class="col-4"></div>
</div>
</div>
</div>
</mdb-tab>
<mdb-tab heading="{{ 'TABS.PRINTING_HOUSES' | translate }}">
<div class="row">
<div class="col-12">
<br>
<div *ngIf="checkDefaultPrintingHouse()">
<h1>Standard Druckerei</h1>
<div class="text-left">
<mdb-squeezebox [multiple]="false" aria-multiselectable="true">
<mdb-item>
<mdb-item-head>Adresse</mdb-item-head>
<mdb-item-body>
<form>
<fieldset disabled>
<br>
<div class="md-form">
<input type="text" class="form-control" name="name" [(ngModel)]="defaultPrintingHouse.address.name">
<label class="active">{{ 'INPUTS.NAME' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" name="email" [(ngModel)]="defaultPrintingHouse.address.email">
<label class="active">{{ 'INPUTS.EMAIL' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" name="phone" [(ngModel)]="defaultPrintingHouse.address.phone">
<label class="active">{{ 'INPUTS.PHONE' | translate }}</label>
</div>
<div class="row">
<div class="col-md-9">
<div class="md-form">
<input type="text" class="form-control" name="street" [(ngModel)]="defaultPrintingHouse.address.street">
<label class="active">{{ 'INPUTS.STREET' | translate }}</label>
</div>
</div>
<div class="col-md-3">
<div class="md-form">
<input type="text" class="form-control" name="streetNumber" [(ngModel)]="defaultPrintingHouse.address.streetnumber">
<label class="active">{{ 'INPUTS.STREET_NUMBER' | translate }}</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="md-form">
<input type="text" class="form-control" name="zip" [(ngModel)]="defaultPrintingHouse.address.zip">
<label class="active">{{ 'INPUTS.ZIP' | translate }}</label>
</div>
</div>
<div class="col-md-9">
<div class="md-form">
<input type="text" class="form-control" name="city" [(ngModel)]="defaultPrintingHouse.address.city">
<label class="active">{{ 'INPUTS.CITY' | translate }}</label>
</div>
</div>
</div>
</fieldset>
</form>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head>Preisliste</mdb-item-head>
<mdb-item-body>
<p>Sie können die Standardpreise unter dem Tab "Preismodelle" ändern.</p>
<div *ngIf="priceList">
<div *ngFor="let item of priceList.printingHouseItems">
<h1>{{ item.name }}</h1>
<table class="table text-left">
<thead class="thead-default">
<tr>
<th scope="row">Artikel</th>
<th>Format</th>
<th>Minimaler Preis</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let article of item.articles">
<td>{{ article.name}}</td>
<td>{{ article.width}}x{{ article.heigh}}</td>
<td>{{ article.minPrice | number: '0.2-2' }} €</td>
</tr>
</tbody>
</table>
</div>
</div>
</mdb-item-body>
</mdb-item>
</mdb-squeezebox>
</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-lg btn-block waves-light pink" mdbRippleRadius (click)="createPrintingHouse()">Eigene Druckerei speichern</button>
</div>
<div class="col-4"></div>
</div>
</div>
<div *ngIf="ownPrintingHouse">
<h1>Eigene Druckerei</h1>
<mdb-squeezebox [multiple]="false" aria-multiselectable="true" class="text-left">
<mdb-item>
<mdb-item-head>Adresse</mdb-item-head>
<mdb-item-body>
<form>
<fieldset>
<br>
<div class="md-form">
<input type="text" class="form-control" name="name" [(ngModel)]="ownPrintingHouse.address.name">
<label class="active">{{ 'INPUTS.NAME' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" name="email" [(ngModel)]="ownPrintingHouse.address.email">
<label class="active">{{ 'INPUTS.EMAIL' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" name="phone" [(ngModel)]="ownPrintingHouse.address.phone">
<label class="active">{{ 'INPUTS.PHONE' | translate }}</label>
</div>
<div class="row">
<div class="col-md-9">
<div class="md-form">
<input type="text" class="form-control" name="street" [(ngModel)]="ownPrintingHouse.address.street">
<label class="active">{{ 'INPUTS.STREET' | translate }}</label>
</div>
</div>
<div class="col-md-3">
<div class="md-form">
<input type="text" class="form-control" name="streetNumber" [(ngModel)]="ownPrintingHouse.address.streetnumber">
<label class="active">{{ 'INPUTS.STREET_NUMBER' | translate }}</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="md-form">
<input type="text" class="form-control" name="zip" [(ngModel)]="ownPrintingHouse.address.zip">
<label class="active">{{ 'INPUTS.ZIP' | translate }}</label>
</div>
</div>
<div class="col-md-9">
<div class="md-form">
<input type="text" class="form-control" name="city" [(ngModel)]="ownPrintingHouse.address.city">
<label class="active">{{ 'INPUTS.CITY' | translate }}</label>
</div>
</div>
</div>
</fieldset>
</form>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head>Rechnungsdaten</mdb-item-head>
<mdb-item-body>
<br>
<form>
<div class="md-form">
<input type="text" class="form-control" name="accountOwner" [(ngModel)]="ownPrintingHouse.paymentInformation.accountOwner">
<label class="active">{{ 'INPUTS.ACCOUNT_OWNER' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" name="iban" [(ngModel)]="ownPrintingHouse.paymentInformation.iban">
<label class="active">{{ 'INPUTS.IBAN' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" name="bic" [(ngModel)]="ownPrintingHouse.paymentInformation.bic">
<label class="active">{{ 'INPUTS.BIC' | translate }}</label>
</div>
</form>
</mdb-item-body>
</mdb-item>
<mdb-item class="text-left">
<mdb-item-head>Preisliste</mdb-item-head>
<mdb-item-body>
<p>Sie können die Standardpreise unter dem Tab "Preismodelle" ändern.</p>
<div *ngIf="priceList">
<div *ngFor="let item of priceList.printingHouseItems">
<h1>{{ item.name }}</h1>
<table class="table text-left">
<thead class="thead-default">
<tr>
<th scope="row">Artikel</th>
<th>Format</th>
<th>Ihr Preis</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let article of item.articles">
<td>{{ article.name}}</td>
<td>{{ article.width}}x{{ article.heigh}}</td>
<td>{{ article.minPrice | number: '0.2-2' }} €</td>
</tr>
</tbody>
</table>
</div>
</div>
</mdb-item-body>
</mdb-item>
</mdb-squeezebox>
<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-lg btn-block waves-light pink" mdbRippleRadius (click)="updatePrintingHouse()">Eigene Druckerei speichern</button>
</div>
<div class="col-4"></div>
</div>
</div>
</div>
</div>
</mdb-tab>
<mdb-tab heading="{{ 'TABS.PROFILE' | translate }}">
<div class="row">
<div class="col-12">
<br>
<mdb-squeezebox [multiple]="false" aria-multiselectable="true" class="text-left">
<mdb-item>
<mdb-item-head>{{ 'LABELS.ACCOUNT_DATA' | translate }}</mdb-item-head>
<mdb-item-body>
<br>
<form [formGroup]="accountDataForm">
<div class="md-form">
<input type="text" class="form-control" formControlName="name">
<label class="active">{{ 'INPUTS.NAME' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="lastname">
<label class="active">{{ 'INPUTS.LASTNAME' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="email">
<label class="active">{{ 'INPUTS.CONTACT_EMAIL' | translate }}</label>
</div>
</form>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head>{{ 'LABELS.BILLING_INFORMATION' | translate }}</mdb-item-head>
<mdb-item-body>
<br>
<form [formGroup]="billingAddressForm">
<div class="md-form">
<input type="text" class="form-control" formControlName="company">
<label class="active">{{ 'INPUTS.COMPANY' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="name">
<label class="active">{{ 'INPUTS.NAME' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="lastname">
<label class="active">{{ 'INPUTS.LASTNAME' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="phone">
<label class="active">{{ 'INPUTS.PHONE' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="email">
<label class="active">{{ 'INPUTS.CONTACT_EMAIL' | translate }}</label>
</div>
<div class="row">
<div class="col-md-9">
<div class="md-form">
<input type="text" class="form-control" formControlName="street">
<label class="active">{{ 'INPUTS.STREET' | translate }}</label>
</div>
</div>
<div class="col-md-3">
<div class="md-form">
<input type="text" class="form-control" formControlName="streetnumber">
<label class="active">{{ 'INPUTS.STREET_NUMBER' | translate }}</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="md-form">
<input type="text" class="form-control" formControlName="zip">
<label class="active">{{ 'INPUTS.ZIP' | translate }}</label>
</div>
</div>
<div class="col-md-9">
<div class="md-form">
<input type="text" class="form-control" formControlName="city">
<label class="active">{{ 'INPUTS.CITY' | translate }}</label>
</div>
</div>
</div>
</form>
</mdb-item-body>
</mdb-item>
<mdb-item>
<mdb-item-head>{{ 'LABELS.PUBLIC_PROFILE' | translate }}</mdb-item-head>
<mdb-item-body>
<br>
<form [formGroup]="publicProfileForm">
<div class="md-form">
<input type="text" class="form-control" formControlName="name">
<label class="active">{{ 'INPUTS.DISPLAY_NAME' | translate }}</label>
</div>
<div class="md-form">
<textarea class="md-textarea" type="text" length="120" mdbCharCounter formControlName="about"></textarea>
<label class="active">{{ 'INPUTS.ABOUT_YOU' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="facebook">
<label class="active">{{ 'INPUTS.FACEBOOK_PROFILE' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="instagram">
<label class="active">{{ 'INPUTS.INSTAGRAM_PROFILE' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="tumbler">
<label class="active">{{ 'INPUTS.TUMBLER_PROFILE' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="twitter">
<label class="active">{{ 'INPUTS.TWITTER_PROFILE' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="website">
<label class="active">{{ 'INPUTS.WBESITE' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="phone">
<label class="active">{{ 'INPUTS.PHONE' | translate }}</label>
</div>
<div class="md-form">
<input type="text" class="form-control" formControlName="email">
<label class="active">{{ 'INPUTS.CONTACT_EMAIL' | translate }}</label>
</div>
</form>
</mdb-item-body>
</mdb-item>
</mdb-squeezebox>
<br>
<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 btn-lg btn-block waves-light pink" mdbRippleRadius (click)="updateProfile()">{{ 'BUTTONS.UPDATE_PROFILE' | translate }}</button>
</div>
<div class="col-4"></div>
</div>
</div>
</div>
</mdb-tab>
</mdb-tabset>
<div mdbModal #newEventModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
[config]="{backdrop: true, ignoreBackdropClick: true}">
<div class="modal-dialog cascading-modal" role="document">
<div class="modal-content">
<div class="modal-header indigo white-text">
<h4 class="title">
<i class="fa fa-calendar"></i>{{ 'LABELS.CREATE_NEW_EVENT' | translate }}</h4>
<button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close" (click)="newEventModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mb-0">
<form [formGroup]="newEventForm" (ngSubmit)="saveEvent()">
<div class="md-form">
<input mdbActive type="text" class="form-control" id="input_newevent_name" formControlName="name">
<label>{{ 'LABELS.EVENT_NAME' | translate }}</label>
</div>
<div class="md-form">
<input mdbActive type="text" class="form-control" id="input_newevent_location" formControlName="location">
<label>{{ 'LABELS.EVENT_LOCATION' | translate }}</label>
</div>
<div class="md-form">
<input mdbActive type="text" class="form-control" id="input_newevent_date" formControlName="date">
<label>{{ 'LABELS.EVENT_DATE' | translate }}</label>
</div>
<div class="text-center mt-1-half">
<button type="submit" class="btn pink mb-2 waves-light" mdbRippleRadius>{{ 'LABELS.CREATE' | translate }}
<i class="fa fa-plus ml-1"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div mdbModal #notValidatedModal="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-danger" role="document">
<div class="modal-content">
<div class="modal-header">
<p class="heading lead">Ihr Profil ist nicht validiert!</p>
</div>
<div class="modal-body">
<div class="text-center">
<i class="fa fa-exclamation-triangle fa-4x mb-3 animated rotateIn"></i>
<p>Bitte validieren Sie Ihren Account, indem Sie uns Ihre Handelsregistereintragung an
<a href="mailto:validate@eventpicking.de">validate@eventpicking.de</a> senden.
<br> Nachdem wir Ihren Account validiert haben können Sie Events anlegen und Bilder daraus verkaufen.</p>
</div>
</div>
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary-modal waves-light" mdbRippleRadius (click)="notValidatedModal.hide()">Got it!
</a>
</div>
</div>
</div>
</div>
<div mdbModal #eventLimitModal="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-danger" role="document">
<div class="modal-content">
<div class="modal-header">
<p class="heading lead">Limit der monatlichen Events erreicht!</p>
</div>
<div class="modal-body">
<div class="text-center">
<i class="fa fa-exclamation-triangle fa-4x mb-3 animated rotateIn"></i>
<p>Sie haben Ihr monatliches Limit an Events erreicht! Bitte schließen Sie ein höherwertiges Abonnement ab, um neue
Events anzulegen. Alternativ können Sie andere Events löschen.</p>
</div>
</div>
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-primary-modal waves-light" mdbRippleRadius (click)="eventLimitModal.hide()">Got it!
</a>
</div>
</div>
</div>
</div>
<div mdbModal #transactionModal="mdb-modal" class="modal fade" id="transactionModal" tabindex="-1" role="dialog" aria-labelledby="transactionModal"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" *ngIf="transaction">
<div class="modal-header indigo">
<h4 class="modal-title w-100 text-white" id="myModalLabel">Order: {{ transaction.invoice_number }}</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="transactionModal.hide()">
<span aria-hidden="true" class="text-white">×</span>
</button>
</div>
<div class="modal-body">
<mdb-tabset #staticTabs [buttonClass]="'nav-tabs indigo'" [contentClass]="''">
<mdb-tab heading="<i class='fa fa-credit-card'></i> Rechnung">
<div class="row">
<div class="col-12">
<br>
</div>
</div>
</mdb-tab>
</mdb-tabset>
</div>
</div>
</div>
</div>