src/app/yourtrip/yourtrip.component.ts
| selector | app-yourtrip |
| styleUrls | ./yourtrip.component.scss |
| templateUrl | ./yourtrip.component.html |
Properties |
Methods |
Inputs |
constructor(route: ActivatedRoute, db: DbConnectionService)
|
|||||||||
|
Defined in src/app/yourtrip/yourtrip.component.ts:21
|
|||||||||
|
Parameters :
|
| accommodation | |
Type : Object
|
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:19
|
|
| mainActivity | |
Type : Object
|
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:18
|
|
| addDays | |||||||||
addDays(date, days: number)
|
|||||||||
|
Defined in src/app/yourtrip/yourtrip.component.ts:105
|
|||||||||
|
Parameters :
Returns :
any
|
| fetchTripArrivalDeparture |
fetchTripArrivalDeparture()
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:46
|
|
Returns :
void
|
| fetchTripPrice |
fetchTripPrice()
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:59
|
|
Returns :
void
|
| fetchYourTrip |
fetchYourTrip()
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:52
|
|
Returns :
void
|
| getPeriod | ||||
getPeriod(activity)
|
||||
|
Defined in src/app/yourtrip/yourtrip.component.ts:93
|
||||
|
Parameters :
Returns :
string
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:29
|
|
Returns :
void
|
| stringToSimpleDate | ||||||
stringToSimpleDate(datestring: string)
|
||||||
|
Defined in src/app/yourtrip/yourtrip.component.ts:89
|
||||||
|
Parameters :
Returns :
string
|
| toSimpleDate | ||||||
toSimpleDate(date: Date)
|
||||||
|
Defined in src/app/yourtrip/yourtrip.component.ts:85
|
||||||
|
Parameters :
Returns :
string
|
| activities |
Type : Object[]
|
Default value : []
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:13
|
| activityId |
Type : number
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:17
|
| priceInfoMessage |
Type : string
|
Default value : "The price includes transport, guide and other stuff"
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:21
|
| trip |
Type : Object
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:16
|
| tripId |
Type : number
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:12
|
| tripPrice |
Type : Number
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:14
|
| tripPriceWithoutMainActivity |
Type : Number
|
|
Defined in src/app/yourtrip/yourtrip.component.ts:15
|
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DbConnectionService } from '../db-connection.service';
@Component({
selector: 'app-yourtrip',
templateUrl: './yourtrip.component.html',
styleUrls: ['./yourtrip.component.scss']
})
export class YourtripComponent implements OnInit {
tripId: number;
activities: Object[] = [];
tripPrice: Number;
tripPriceWithoutMainActivity: Number;
trip: Object;
activityId: number;
@Input() mainActivity: Object;
@Input() accommodation: Object;
priceInfoMessage: string = "The price includes transport, guide and other stuff"
constructor(
private route: ActivatedRoute,
private db: DbConnectionService
) { }
ngOnInit(): void {
this.route.params.subscribe(r => {
// error handling
if (!r["tripId"] || isNaN(Number(r["tripId"])))
return alert("Invalid TripID");
this.tripId = Number(r["tripId"]);
if (r["activityId"]) {
this.activityId = Number(r["activityId"]);
}
this.fetchTripArrivalDeparture();
this.fetchYourTrip();
this.fetchTripPrice();
})
}
fetchTripArrivalDeparture() {
this.db.executeQuery(`SELECT * FROM TripArrivalAndDepartureView WHERE tripID=${this.tripId}`).then(r => {
this.trip = r["data"][0];
// console.log(this.trip)
})
}
fetchYourTrip() {
this.db.executeQuery(`SELECT * FROM YourTripRightView WHERE tripID=${this.tripId}`).then(r => {
this.activities = r["data"];
// console.log(this.activities)
})
}
fetchTripPrice() {
this.db.executeQuery(`SELECT totalPrice FROM TripPriceView WHERE tripID=${this.tripId}`).then(r => {
//need to include the active activity
this.tripPrice = r["data"][0]["totalPrice"];
})
if (!isNaN(this.activityId) && !this.accommodation) {
this.db.executeQuery(`SELECT sum(totalPrice) as totalPrice FROM TotalPriceView WHERE tripID=${this.tripId} and activityID <> ${this.activityId} GROUP BY tripID`).then(r => {
let d = r["data"]
// BUG? Query has no matches
if (d.length === 0)
return
//need to include the active activity
if (d[0]["totalPrice"]) {
this.tripPriceWithoutMainActivity = d[0]["totalPrice"];
}
else {
this.tripPriceWithoutMainActivity = 0
}
})
}
}
// type "DD/MM"
toSimpleDate(date: Date): string {
return `${date.getDate()}/${date.getMonth() + 1}`
}
stringToSimpleDate(datestring: string): string {
return this.toSimpleDate(new Date(datestring));
}
// type "DD/MM - DD/MM"
getPeriod(activity) {
let startDate = new Date(activity["startDate"]);
let endDate = new Date(startDate);
endDate.setDate(startDate.getDate() + activity["nights"]);
if (activity["nights"] === 0) {
return `${this.toSimpleDate(startDate)}`
}
else {
return `${this.toSimpleDate(startDate)} - ${this.toSimpleDate(endDate)}`
};
}
addDays(date, days: number) {
let result = new Date(date);
result.setDate(result.getDate() + days);
return result;
}
}
<div *ngIf="trip">
<h3>Your Trip</h3>
<hr />
<div class="m-2">
<b *ngIf="tripPrice && trip">Trip Price</b>
<span class="fa-stack" [ngbPopover]="priceInfoMessage" triggers="mouseenter:mouseleave" popoverClass="myclass">
<i class="fa fa-circle fa-stack-1x icon-background2"></i>
<i class="fa fa-info fa-stack-1x"></i>
</span>: {{ ((!activityId || accommodation)? this.tripPrice : this.tripPriceWithoutMainActivity +
trip["arrivalPrice"] + trip["departurePrice"] + mainActivity["price"]) | currency:'EUR' : 'symbol' :
'1.0-0'}} <br>
<!-- <b> Travelers: </b> {{trip.persons}} <br> -->
</div>
<div class="day-part">
<div class="card">
<div *ngIf="trip" class="card-body">
<h5 class="card-title">Arrival At {{ trip["arrivalPlace"] }}</h5>
<b>Date:</b> {{ stringToSimpleDate(trip["startDate"]) }} <br>
<b>Price:</b> {{ trip["arrivalPrice"] | currency:'EUR' : 'symbol' : '1.0-0'}}
<br>
</div>
</div>
</div>
<div class="day-part" *ngFor="let activity of activities">
<div class="card" *ngIf="!activityId || (activityId && activity.activityID !== activityId) || accommodation">
<div class="card-body">
<h5 class="card-title"> {{ activity["activity"] }}</h5>
<div class="d-flex justify-content-left">
<div class="content">
<b>Date:</b> {{ getPeriod(activity) }} <br>
<!-- <b>Persons:</b> {{ activity["persons"] }} <br> -->
<b>Day Activities:</b> {{ activity["dayActivities"] }} <br>
<b>Price:</b> {{ activity["price"] | currency:'EUR' : 'symbol' : '1.0-0'}} <br>
</div>
</div>
</div>
</div>
</div>
<div class="day-part">
<div class="card" *ngIf="activityId && !accommodation && mainActivity">
<div class="card-body">
<h5 class="card-title"> {{ mainActivity["mainActivityType"] }}</h5>
<div class="d-flex justify-content-left">
<div class="content">
<b>Date:</b> {{ getPeriod(mainActivity)}} <br>
<!-- <b>Persons:</b> {{ mainActivity["persons"] }} <br> -->
<!-- <b>Day Activities:</b> {{ mainActivity["dayActivities"] }} <br> -->
<b>Price:</b> {{ mainActivity["price"] | currency:'EUR' : 'symbol' : '1.0-0'}} <br>
</div>
</div>
</div>
</div>
</div>
<div class="day-part">
<div class="card" *ngIf="trip">
<div class="card-body">
<h5 class="card-title">Departure From {{
trip["departurePlace"] }}</h5>
<b>Date:</b> {{ stringToSimpleDate(trip["endDate"]) }} <br>
<b>Price:</b> {{ trip["departurePrice"] | currency:'EUR' : 'symbol' : '1.0-0'}} <br>
</div>
</div>
</div>
</div>
./yourtrip.component.scss
@import 'variables';
@import 'footer';
@import 'header';
@import 'custom-checkbox';
@import 'custom-card';
@import 'info-circle';
.day-part {
width: 100%;
padding: 0px 5px;
margin-bottom: 5px;
.card {
width: 100%;
}
.images {
max-width: 400px;
}
.content {
margin-left: 15px;
}
}
.day-by-day-table {
margin: 0px 5px;
}
.card {
background-color: $secondary-background-color;
}