EventPicKing - Dokumentation
  1. Components
  2. HomePageComponent

File

src/app/pages/home-page/home-page.component.ts

Description

Home page component

Implements

OnInit

Example

Metadata

selector app-home-page
styleUrls home-page.component.scss
templateUrl ./home-page.component.html

Index

Properties
Methods

Constructor

constructor(afs: FirebaseFirestoreService)
Defined in src/app/pages/home-page/home-page.component.ts:22

Constructor

Parameters :
Name Type Optional Description
afs FirebaseFirestoreService

Methods

ngOnInit
ngOnInit()
Defined in src/app/pages/home-page/home-page.component.ts:32

Initialise component

Returns : void

Properties

Public images
images: Observable<[]>
Type : Observable<[]>
Defined in src/app/pages/home-page/home-page.component.ts:22

Upvoted images

Private log
log:
Default value : Log.create('HomePageComponent')
Defined in src/app/pages/home-page/home-page.component.ts:19

Logger 

import { Component, OnInit } from '@angular/core';
import { Log } from 'ng2-logger';
import { Observable } from 'rxjs/Observable';

import { EventPicture } from '../../interfaces/event-picture';
import { FirebaseFirestoreService } from '../../services/firebase/firestore/firebase-firestore.service';

/**
 * Home page component
 * @author Daniel Sogl, Anna Riesch
 */
@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit {
  /** Logger */
  private log = Log.create('HomePageComponent');

  /** Upvoted images */
  public images: Observable<EventPicture[]>;

  /**
   * Constructor
   */
  constructor(private afs: FirebaseFirestoreService) {}

  /**
   * Initialise component
   */
  ngOnInit() {
    this.log.color = 'orange';
    this.log.d('Component initialized');

    this.images = this.afs.getPopularImages().valueChanges();

    this.images.subscribe(images => {
      this.log.d('Popular images', images);
    });
  }
}

<div class="container-fluid card">
    <!-- Header-Section -->
    <div id="header" class="header">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-6  text-center">
                    <h1>EventPicKing </h1>
                    <br>
                    <h5>Willkommen bei ihrem Spezialisten für Event-Fotografie</h5>
                    <p>
                        Finden Sie einen Fotografen für ihr Event, kaufen Sie schnell und bequem ihre Bilder online oder registrieren Sie sich als
                        Fotograf, um für Events gebucht zu werden!
                    </p>
                    <p>
                        <button id="landing_signup" class="btn btn-outline-info btn-rounded waves-effec" routerLink="/signup">{{ 'BUTTONS.SINGUP_NOW' | translate }}</button>
                    </p>
                </div>
            </div>
            <!--row-end-->
        </div>
        <!--container-end-->
    </div>
    <!--Header-end-->

    <div id="description" class="description">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 text-center">
                    <h1>{{ 'NAV.DESCRIPTION' | translate }}</h1>
                    <div class="text" style="color: grey">
                        <p>Events anlegen, Bilder hochladen, teilen und verkaufen!</p>
                        <p>Verkaufen Sie Ihre Fotos schnell über unser Portal. Wir kümmern uns sowohl um Zahlungsabwicklung,
                            Produktion als auch Versand.</p>
                        <p>Sie schießen die Bilder - wir machen den Rest!</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--Description-end-->

    <!--Best Picture Section: Shows best rated pictures -->
    <div id="gallery" class="gallery">
        <div class="container">
            <h2>{{'TEXTS.LANDING_BESTPICTURES' | translate}}</h2>
            <p class="text-center">
                Professionelle Bilder von professionellen Fotografen. Finden auch Sie den perfekten Fotografen für Ihr Event!
            </p>
        </div>
        <!-- end-container -->
        <div class="container card">
            <div class="card-body gallery-frame">
                <div class="col-md-12">
                    <div class="row">
                        <hr>

                        <div class="gal">

                            <div class="subtitle" *ngFor="let image of (images | async)">
                                <img [defaultImage]="'https://www.scandichotels.de/Static/img/placeholders/image-placeholder_3x2.svg'" [lazyLoad]="image.thumbnail"
                                    [alt]="image.name" [routerLink]="['/event', image.event]">
                                <span>
                                    <i class="fa fa-heart" aria-hidden="true"> {{ image.ratings }}</i>
                                </span>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
            <!--end-card-body-->

        </div>
        <!--end-container-->

    </div>
    <!--end-gallery-->

    <!--Testimonial-Section-->
    <div id="testimonial" class="testimonial">
        <div class="container">
            <h2>{{'LABELS.TESTIMONIALS'|translate}}</h2>
            <p class="text-center">Egal ob Fotograf, Gast oder Organisator einer Veranstaltung - Wir unterstützen Sie und bieten große Zufriedenheit.
                Überzeugen Sie sich selbst!
            </p>
            <div class="row">
                <div class="col-md-4 mb-r">
                    <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>
                    <h4 class="mb-3">Stephan Naumann</h4>
                    <h6 class="mb-3 font-bold grey-text">{{'LABELS.PHOTOGRAPHER'|translate}}</h6>
                    <p>
                        <i class="fa fa-quote-left"></i>&nbsp;Super Website, um Kunden zu erreichen! Preis-Leistungsverhältnis von EventPicKing TOP.
                        Werde Zusammenarbeit gerne beibehalten.
                        <i class="fa fa-quote-right"></i>
                    </p>
                    <div class="orange-text" style="margin-top: 30px">
                        <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-o"> </i>
                    </div>
                    <!--review1-end-->
                </div>
                <!--col1-end-->

                <div class="col-md-4 mb-r">
                    <div class="avatar">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded-circle z-depth-1 img-fluid" alt="">
                    </div>
                    <h4 class="mb-3">Leonie Dürr</h4>
                    <h6 class="mb-3 font-bold grey-text">{{'LABELS.EVENT_ORGANISATOR'|translate}}</h6>
                    <p>
                        <i class="fa fa-quote-left"></i>&nbsp;Traumhaft schöne Bilder unserer Hochzeit, die uns ein Leben lang begleiten werden. Vielen
                        Dank für die professionelle Begleitung von unserem großen Tag. Fotografensuche ist benutzerfreundlich
                        und leicht zu bedienen. EventPicKing ist zu 100% empfehlenswert!
                        <i class="fa fa-quote-right"></i>
                    </p>
                    <div class="orange-text" style="margin-top: 30px">
                        <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>
                    <!--review2-end-->
                </div>
                <!--col2-end-->

                <div class="col-md-4 mb-r">
                    <div class="avatar">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle z-depth-1 img-fluid" alt="">
                    </div>
                    <h4 class="mb-3">Marianne Faust</h4>
                    <h6 class="mb-3 font-bold grey-text">{{'LABELS.EVENT_GUEST'|translate}}</h6>
                    <p>
                        <i class="fa fa-quote-left"></i>&nbsp;Schöne Bilder von der Hochzeit meiner Cousine in Darmstadt-Wixhausen. Fotos sind einfach
                        zu erwerben und gleich über eine (Wunsch-) Druckerei druckbar. Vor allem die PayPal-Zahlung ist für
                        mich ein Pluspunkt!
                        <i class="fa fa-quote-right"></i>
                    </p>
                    <div class="orange-text" style="margin-top: 30px">
                        <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-half-full"> </i>
                    </div>
                    <!--review3-end-->
                </div>
                <!--col3-end-->
            </div>
            <!--row-end-->
        </div>
        <!--container-end-->
    </div>
    <!--Testimonial-End-->
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""