src/app/itinerary/itinerary.component.ts
| selector | app-itinerary |
| styleUrls | ./itinerary.component.scss |
| templateUrl | ./itinerary.component.html |
Properties |
Methods |
constructor(route: ActivatedRoute, db: DbConnectionService)
|
|||||||||
|
Defined in src/app/itinerary/itinerary.component.ts:17
|
|||||||||
|
Parameters :
|
| deleteActivity | ||||
deleteActivity(activityId)
|
||||
|
Defined in src/app/itinerary/itinerary.component.ts:71
|
||||
|
Parameters :
Returns :
void
|
| fetchItinerary |
fetchItinerary()
|
|
Defined in src/app/itinerary/itinerary.component.ts:58
|
|
Returns :
void
|
| fetchLastActivityEndDate |
fetchLastActivityEndDate()
|
|
Defined in src/app/itinerary/itinerary.component.ts:44
|
|
Returns :
void
|
| fetchTripArrivalDeparture |
fetchTripArrivalDeparture()
|
|
Defined in src/app/itinerary/itinerary.component.ts:51
|
|
Returns :
void
|
| fetchTripPrice |
fetchTripPrice()
|
|
Defined in src/app/itinerary/itinerary.component.ts:64
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/itinerary/itinerary.component.ts:25
|
|
Returns :
void
|
| stringToSimpleDate | ||||||
stringToSimpleDate(datestring: string)
|
||||||
|
Defined in src/app/itinerary/itinerary.component.ts:79
|
||||||
|
Parameters :
Returns :
string
|
| toSimpleDate | ||||||
toSimpleDate(date: Date)
|
||||||
|
Defined in src/app/itinerary/itinerary.component.ts:82
|
||||||
|
Parameters :
Returns :
string
|
| activities |
Type : Object[]
|
Default value : []
|
|
Defined in src/app/itinerary/itinerary.component.ts:14
|
| LastActivityEndDate |
Type : Object
|
|
Defined in src/app/itinerary/itinerary.component.ts:17
|
| mobile |
Type : boolean
|
Default value : false
|
|
Defined in src/app/itinerary/itinerary.component.ts:23
|
| trip |
Type : Object
|
|
Defined in src/app/itinerary/itinerary.component.ts:16
|
| tripId |
Type : number
|
|
Defined in src/app/itinerary/itinerary.component.ts:13
|
| tripPrice |
Type : Object
|
|
Defined in src/app/itinerary/itinerary.component.ts:15
|
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DbConnectionService } from '../db-connection.service';
@Component({
selector: 'app-itinerary',
templateUrl: './itinerary.component.html',
styleUrls: ['./itinerary.component.scss']
})
export class ItineraryComponent implements OnInit {
tripId: number;
activities:Object[] = [];
tripPrice: Object;
trip: Object;
LastActivityEndDate: Object;
constructor(
private route: ActivatedRoute,
private db: DbConnectionService
) {}
mobile: boolean = false;
ngOnInit(): void {
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
this.mobile = true
}
this.route.params.subscribe(r => {
// error handling
if (!r["tripId"] || isNaN(Number(r["tripId"])))
return alert("Invalid TripID");
this.tripId = Number(r["tripId"]);
this.fetchTripArrivalDeparture();
this.fetchItinerary();
this.fetchTripPrice();
this.fetchLastActivityEndDate();
})
}
fetchLastActivityEndDate(){
this.db.executeQuery(`SELECT * FROM LastActivityEndDateView WHERE tripID=${this.tripId}`).then(r => {
this.LastActivityEndDate = r["data"][0];
})
}
fetchTripArrivalDeparture(){
this.db.executeQuery(`SELECT * FROM TripArrivalAndDepartureView WHERE tripID=${this.tripId}`).then(r => {
this.trip = r["data"][0];
// console.log(this.trip)
})
}
fetchItinerary(){
this.db.executeQuery(`SELECT * FROM ItineraryEditView WHERE tripID=${this.tripId}`).then(r => {
this.activities = r["data"];
})
}
fetchTripPrice(){
this.db.executeQuery(`SELECT totalPrice FROM TripPriceView WHERE tripID=${this.tripId}`).then(r => {
this.tripPrice = r["data"][0];
})
}
deleteActivity(activityId){
// Delete All DayActivities linked to MainActivity and delete MainActivity
this.db.executeQuery(`DELETE FROM DayActivity WHERE activityID=${activityId}`).then(r => {
this.db.executeQuery(`DELETE FROM MainActivity WHERE activityID=${activityId}`).then(r2 => {
this.fetchItinerary();
})
})
}
stringToSimpleDate(datestring: string): string{
return this.toSimpleDate(new Date(datestring));
}
toSimpleDate(date: Date): string{
return `${date.getDate()}/${date.getMonth() + 1}`
}
}
<div class="header d-flex justify-content-between">
<h2>Itinerary</h2>
<app-wizard [selectedStep]="4" [tripID] = this.tripId></app-wizard>
</div>
<div class="middle-container mobile-container">
<div class="custom-card itinerary">
<table class="table">
<thead>
<tr>
<th scope="col">Activity</th>
<th scope="col">From</th>
<th *ngIf="!mobile" scope="col">Nights</th>
<th *ngIf="!mobile" scope="col">Day Activities</th>
<th *ngIf="!mobile" scope="col">Accommodation</th>
<th scope="col">Price</th>
<th scope="col" class="actions-col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngIf="trip">
<td>Arrival At {{ trip["arrivalPlace"]}}</td>
<td>{{ stringToSimpleDate(trip["startDate"]) }}</td>
<td *ngIf="!mobile" >{{trip["firstNight"]}}</td>
<td *ngIf="!mobile"></td>
<td *ngIf="!mobile">{{trip["firstAccomodation"]}}</td>
<td>{{trip["arrivalPrice"]| currency:'EUR' : 'symbol' : '1.0-0'}}</td>
<td class="actions-col">
<button class="btn btn-sm btn-edit" [routerLink]="['/', tripId]" [queryParams]="{edit: true}">
<i class="bi bi-pencil"></i>
<span *ngIf="!mobile" class="pl-2">Edit</span>
</button>
</td>
</tr>
<tr *ngFor="let x of activities">
<td scope="row">{{x['Activity']}}</td>
<td>{{stringToSimpleDate(x['from'])}}</td>
<td *ngIf="!mobile">{{x["nights"]}}</td>
<td *ngIf="!mobile">{{ (x["Day activities"].length<55)? x["Day activities"] : x["Day activities"].substring(0, 53) + '...' }}</td>
<td *ngIf="!mobile">{{x["accomodation"]}}</td>
<td>{{x["price"]| currency:'EUR' : 'symbol' : '1.0-0'}}</td>
<td class="actions-col">
<button class="btn btn-sm btn-delete mr-2" (click)="deleteActivity(x['activityID'])">
<i class="bi bi-trash"></i>
<span *ngIf="!mobile" class="pl-2">Delete</span>
</button>
<button class="btn btn-sm btn-edit" [routerLink]="['/trip', tripId, 'activity', x['activityID']]" [queryParams]="{edit: true}">
<i class="bi bi-pencil"></i>
<span *ngIf="!mobile" class="pl-2">Edit</span>
</button>
</td>
</tr>
<tr *ngIf="trip">
<td>departure at {{ trip["departurePlace"] }}</td>
<td>{{ stringToSimpleDate(trip["endDate"]) }}</td>
<td *ngIf="!mobile"></td>
<td *ngIf="!mobile"></td>
<td *ngIf="!mobile"></td>
<td>{{trip["departurePrice"]| currency:'EUR' : 'symbol' : '1.0-0'}}</td>
<td class="actions-col">
<button class="btn btn-sm btn-edit" [routerLink]="['/home', tripId]" [queryParams]="{edit: true}">
<i class="bi bi-pencil"></i>
<span *ngIf="!mobile" class="pl-2">Edit</span>
</button>
</td>
</tr>
</tbody>
</table>
<p style="color: red;" *ngIf="LastActivityEndDate && trip['endDate'] < LastActivityEndDate['endDate']">
*Error: The last activity ends on
{{stringToSimpleDate(LastActivityEndDate['endDate'])}}, and that's after the departure date ({{stringToSimpleDate(trip['endDate'])}})
</p>
<p *ngIf="tripPrice"><strong> Total Estimated Trip Price: </strong>{{tripPrice["totalPrice"]| currency:'EUR' : 'symbol' : '1.0-0'}}</p>
</div>
</div>
<div class="footer d-flex justify-content-between">
<button type="button" class="btn btn-back" [routerLink]="['/trip', tripId, 'activities']"><i class="bi bi-plus-square"></i> Add{{mobile? '': ' Activity'}}</button>
<button type="button" class="btn btn-next" [routerLink]="['/trip', tripId, 'summary']"><i class="bi bi-airplane"></i> Finish</button>
</div>
./itinerary.component.scss
@import 'variables';
@import 'footer';
@import 'header';
@import 'custom-card';
@import 'custom-table';
.itinerary {
width: 100%;
}
.table .actions-col {
min-width: 100px;
}
@media only screen and (max-width: 950px) {
.mobile-container {
padding-left: 10%;
padding-right: 10%;
}
}
@media only screen and (max-width: 600px) {
.mobile-container{
padding-left: 3%;
padding-right: 3%;
}
}