src/app/pages/event-search-page/event-search-page.component.ts
Event search page component
| selector | app-event-search-page |
| styleUrls | event-search-page.component.scss |
| templateUrl | ./event-search-page.component.html |
Properties |
|
Methods |
constructor(afs: FirebaseFirestoreService)
|
||||||||
|
Constructor
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Initialize component
Returns :
void
|
| onKey | ||||||||
onKey(event: any)
|
||||||||
|
Input key listeners
Parameters :
Returns :
void
|
| Public events |
events:
|
Type : Event[]
|
Default value : []
|
| id |
id:
|
Type : TemplateRef<any>
|
Decorators : ViewChild
|
|
TemplateRef download |
| Private log |
log:
|
Default value : Log.create('EventSearchPageComponent')
|
|
Logger |
| name |
name:
|
Type : TemplateRef<any>
|
Decorators : ViewChild
|
|
TemplateRef print |
| Public radioModel |
radioModel:
|
Default value : 'left'
|
|
define which register is preselected |
| Public searchedEvents |
searchedEvents:
|
Type : Event[]
|
Default value : []
|
| Public templateType |
templateType:
|
Type : TemplateRef<any>
|
|
Template ref |
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { Log } from 'ng2-logger';
import { Event } from '../../classes/event';
import { FirebaseFirestoreService } from '../../services/firebase/firestore/firebase-firestore.service';
/**
* Event search page component
* @author Daniel Sogl
*/
@Component({
selector: 'app-event-search-page',
templateUrl: './event-search-page.component.html',
styleUrls: ['./event-search-page.component.scss']
})
export class EventSearchPageComponent implements OnInit {
/** Logger */
private log = Log.create('EventSearchPageComponent');
public events: Event[] = [];
public searchedEvents: Event[] = [];
/** define which register is preselected */
public radioModel = 'left';
/** TemplateRef download */
@ViewChild('id') id: TemplateRef<any>;
/** TemplateRef print */
@ViewChild('name') name: TemplateRef<any>;
/** Template ref */
public templateType: TemplateRef<any>;
/**
* Constructor
* @param {FirebaseFirestoreService} afs Firebase Firestore Service
*/
constructor(private afs: FirebaseFirestoreService) {}
/**
* Initialize component
*/
ngOnInit() {
this.log.color = 'orange';
this.log.d('Component initialized');
this.templateType = this.id;
this.afs
.getAllEvents()
.valueChanges()
.subscribe(events => {
if (events) {
this.events = events;
this.log.info('Events: ', this.events);
}
});
}
/** Input key listeners */
onKey(event: any) {
// clear searchedEvents
this.searchedEvents.splice(0);
// if input value = '' all events would be shown
if (event.target.value !== '') {
for (let i = 0; i < this.events.length; i++) {
// differentiate id and name
if (this.radioModel === 'left') {
if (this.events[i].id.startsWith(event.target.value)) {
if (!this.searchedEvents.includes(this.events[i])) {
this.searchedEvents.push(this.events[i]);
}
}
}
if (this.radioModel === 'right') {
if (this.events[i].name.startsWith(event.target.value)) {
if (!this.searchedEvents.includes(this.events[i])) {
this.searchedEvents.push(this.events[i]);
}
}
}
}
}
}
}
<div>
<div class="row mt-5 pt-5 justify-content-md-center">
<div class="col col-lg-6">
<div class="btn-group">
<label class="btn btn-primary waves-light" [(ngModel)]="radioModel" mdbRadio="left" mdbRippleRadius (click)="this.templateType = this.id">
<span>{{ 'TEXTS.SEARCH_BY_ID' | translate}}</span>
</label>
<label class="btn btn-primary waves-light" [(ngModel)]="radioModel" mdbRadio="right" mdbRippleRadius (click)="this.templateType = this.name">
<span>{{ 'TEXTS.SEARCH_BY_NAME' | translate}}</span>
</label>
</div>
</div>
</div>
<ng-container *ngTemplateOutlet="templateType"></ng-container>
<ng-template #id>
<div class="row justify-content-md-center input-row">
<div class="col col-lg-6">
<br>
<br>
<div class="md-form">
<input mdbActive type="text" class="form-control" (keyup)="onKey($event)">
<label class="active">{{ 'TEXTS.SEARCH_EVENT_BY_ID' | translate }}</label>
</div>
<p *ngIf="searchedEvents.length === 0" class="info">{{ 'TEXTS.NO_EVENTS_FOUND' | translate }}</p>
</div>
</div>
<div *ngIf="searchedEvents">
<div class="row">
<div *ngFor="let event of searchedEvents" class="col-12 col-md-4" style="margin-bottom: 30px">
<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>Gehe zu Event
<i class="fa fa-chevron-right"></i>
</h5>
</a>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<ng-template #name>
<div class="row justify-content-md-center input-row">
<div class="col col-lg-6">
<br>
<br>
<div class="md-form">
<input mdbActive type="text" class="form-control" (keyup)="onKey($event)">
<label class="active">{{ 'TEXTS.SEARCH_EVENT_BY_NAME' | translate }}</label>
</div>
<p *ngIf="searchedEvents.length === 0" class="info">{{ 'TEXTS.NO_EVENTS_FOUND' | translate }}</p>
</div>
</div>
<div *ngIf="searchedEvents">
<div class="row">
<div *ngFor="let event of searchedEvents" class="col-12 col-md-4" style="margin-bottom: 30px">
<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>Gehe zu Event
<i class="fa fa-chevron-right"></i>
</h5>
</a>
</div>
</div>
</div>
</div>
</div>
</ng-template>
</div>