File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Accessors
|
|
|
Methods
|
fetchDayByDayView
|
fetchDayByDayView()
|
|
|
|
|
|
fetchTripInfo
|
fetchTripInfo()
|
|
|
|
|
|
fetchTripPrice
|
fetchTripPrice()
|
|
|
|
|
|
fetchTripSummary
|
fetchTripSummary()
|
|
|
|
|
|
getPeriod
|
getPeriod(activity)
|
|
|
Parameters :
| Name |
Optional |
| activity |
No
|
|
|
getSummaryPeriod
|
getSummaryPeriod(startDate: string, endDate: string)
|
|
|
|
|
|
stringToSimpleDate
|
stringToSimpleDate(datestring: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| datestring |
string
|
No
|
|
|
toSimpleDate
|
toSimpleDate(date: Date)
|
|
|
Parameters :
| Name |
Type |
Optional |
| date |
Date
|
No
|
|
|
activities
|
Type : Object[]
|
|
|
|
mobile
|
Type : boolean
|
Default value : false
|
|
|
|
tripSummery
|
Type : Object[]
|
Default value : []
|
|
|
Accessors
|
generateEmail
|
getgenerateEmail()
|
|
|
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DbConnectionService } from '../db-connection.service';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import $ from 'jquery';
@Component({
selector: 'app-tripsummary',
templateUrl: './tripsummary.component.html',
styleUrls: ['./tripsummary.component.scss']
})
export class TripsummaryComponent implements OnInit {
tripId: number;
trip: Object;
activities: Object[];
tripPrice: Object;
tripSummery: Object[] = [];
mobile: boolean = false;
// workspaceService: any;
// pages: any;
getLink() {
return `www.createyourtrip.afriguideme.com/trip/${this.tripId}/summary`
}
get generateEmail() {
// email details
let emailAddress = "info@responsibletravelafrica.com";
let subject = `New RTA Trip ${this.tripId}`;
let body = `Dear Team of Responsible Travel Africa,\r\n\r\nI would like to be contacted about my trip with tripID: ${this.tripId} \r\n Edit your trip via this link: ${this.getLink()} \r\n\r\nKind Regards,`
return `mailto:${emailAddress}?SUBJECT=${encodeURI(subject)}&BODY=${encodeURI(body)}`
}
constructor(
private route: ActivatedRoute,
private db: DbConnectionService
) { }
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.fetchTripInfo();
this.fetchTripSummary();
this.fetchTripPrice();
this.fetchDayByDayView();
})
}
fetchTripInfo() {
this.db.executeQuery(`SELECT * FROM Trip WHERE tripID=${this.tripId}`).then(r => {
this.trip = r["data"][0];
})
}
fetchTripSummary() {
this.db.executeQuery(`SELECT * FROM TripSummeryView 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];
})
}
fetchDayByDayView() {
this.db.executeQuery(`SELECT * from DayByDayFinalView WHERE tripID=${this.tripId}`).then(r => {
this.tripSummery = r["data"];
})
}
// type "DD/MM - DD/MM"
getPeriod(activity) {
let startDate = new Date(activity["startDate"]);
let endDate = new Date(startDate);
endDate.setDate(startDate.getDate() + activity["nights"]);
return `${this.toSimpleDate(startDate)} - ${this.toSimpleDate(endDate)}`;
}
// 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 Month - DD Month YYYY"
getSummaryPeriod(startDate: string, endDate: string) {
let d1 = new Date(startDate);
let d2 = new Date(endDate);
let d1_args = d1.toString().split(" ").splice(1, 3)
let d2_args = d2.toString().split(" ").splice(1, 3)
return `${d1_args[1]} ${d1_args[0]} ${d1_args[2] !== d2_args[2] ? `${d1_args[2]} ` : ''}- ${d2_args[1]} ${d2_args[0]} ${d2_args[2]}`
}
// downloadPDF(): void {
// let DATA: any = document.getElementById('tripSummary');
// html2canvas(DATA).then((canvas) => {
// let fileWidth = 208;
// let fileHeight = (canvas.height * fileWidth) / canvas.width;
// const FILEURI = canvas.toDataURL('image/png');
// let PDF = new jsPDF('p', 'mm', 'a4');
// let position = 0;
// PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);
// PDF.save(`RTA-trip-${this.trip["startDate"]}.pdf`);
// });
// }
getPDF(): void {
var HTML_Width = $(".itinerary-summary").width();
var HTML_Height = $(".itinerary-summary").height();
console.log(HTML_Width)
var top_left_margin = 15;
var PDF_Width = HTML_Width + (top_left_margin * 2);
var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;
html2canvas($(".itinerary-summary")[0], { allowTaint: true }).then(function (canvas) {
canvas.getContext('2d');
//console.log(canvas.height + " " + canvas.width);
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage([PDF_Width, PDF_Height], 'p');
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height * i) + (top_left_margin * 4), canvas_image_width, canvas_image_height);
}
//pdf.save('RTA-trip-${this.trip["startDate"]}.pdf');
pdf.save(`RTA-summery-trip*${new Date().toLocaleDateString()}.pdf`)
});
};
// onConfirm() {
// this.pages = document.getElementById('tripSummary');
// this.workspaceService.exportAllToPDF(this.pages);
// console.log(this.pages)
// }
// exportAllToPDF(pages: HTMLElement) {
// const doc = new jsPDF({
// unit: 'px',
// format: true ? [595, 842] : [842, 1191]
// });
// doc.html(pages, {
// callback: (doc: jsPDF) => {
// doc.deletePage(doc.getNumberOfPages());
// doc.save('pdf-export');
// }
// });
// }
}
<div class="header d-flex justify-content-between">
<h2>Send Request</h2>
<app-wizard [selectedStep]="5" [tripID] = this.tripId></app-wizard>
<!-- <button *ngIf="mobile" class="btn btn-sm btn-edit" [routerLink]="['/trip', tripId, 'itinerary']">
<i class="bi bi-pencil"></i>
<span class="pl-2">Edit Your Trip</span>
</button> -->
</div>
<div class="custom-card middle-container">
<div class="itinerary-summary" *ngIf="trip">
<div class="d-flex justify-content-between">
<h3 *ngIf="!mobile" class="pl-2">Summary: {{ getSummaryPeriod(trip["startDate"], trip["endDate"]) }}</h3>
<button *ngIf="!mobile" class="btn btn-sm btn-edit" [routerLink]="['/trip', tripId, 'itinerary']">
<i class="bi bi-pencil"></i>
<span class="pl-2">Edit Itinerary</span> <!-- <span>Edit Your Trip: <u>{{getLink()}}</u></span> -->
</button>
</div>
<hr class="mt-0" />
<div class="m-2">
<b *ngIf="tripPrice">Total Estimated Trip Price: </b> {{tripPrice["totalPrice"]| currency:'EUR' : 'symbol' :
'1.0-0'}} <br>
<b> Travelers: </b> {{trip.persons}} <br>
</div>
<div class="day-part">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ stringToSimpleDate(trip["startDate"]) }}: Arrival At {{ trip["arrivalPlace"] }}
</h5>
</div>
</div>
</div>
<div class="day-part" *ngFor="let activity of activities">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ getPeriod(activity) }}: {{ activity["Activity"] }} ({{ activity["nights"] }}
Night{{ activity["nights"] === 1 ? '' : 's' }})</h5>
<div class="d-flex justify-content-left">
<div *ngIf="!mobile" class="images">
<img class="card-img"
[src]="activity.mainActivityPicture ? activity.mainActivityPicture : 'https://via.placeholder.com/140x100'">
<img class="card-img" *ngIf="activity.accomodationPicture"
[src]="activity.accomodationPicture ? activity.accomodationPicture
: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Search_Icon.svg/1024px-Search_Icon.svg.png'">
</div>
<div class="content">
<p class="card-text">{{activity["description"]}}</p>
<b>Persons:</b> {{ activity["persons"] }} <br>
<b>Day Activities:</b> {{ activity["dayActivities"] }} <br>
<b>Accommodation:</b> {{ activity["accomodation"]}} <br>
<span *ngIf="activity['transport']">
<b>Transport:</b> {{ activity["transport"] }} <br>
</span>
<b>Price:</b> {{ activity["price"] | currency:'EUR' : 'symbol' : '1.0-0'}} <br>
<b *ngIf="activity.comment">Comment:</b> {{activity.comment}} <br>
</div>
</div>
</div>
</div>
</div>
<div class="day-part">
<div class="card" *ngIf="trip">
<div class="card-body">
<h5 class="card-title">{{ stringToSimpleDate(trip["endDate"]) }}: Departure From {{
trip["departurePlace"] }}</h5>
</div>
</div>
</div>
<h3 class="pl-2 mt-4">Your Trip: Day by day</h3>
<hr />
<div class="day-by-day-table">
<table class="table">
<thead>
<tr>
<th *ngIf="!mobile" scope="col">Day</th>
<th scope="col">Date</th>
<th scope="col">Activity</th>
<th scope="col">Day Activity</th>
<th *ngIf="!mobile" scope="col">Accommodation*</th>
<th *ngIf="!mobile" scope="col">Transport</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let x of tripSummery">
<th *ngIf="!mobile" scope="row">{{x.day}}</th>
<td>{{x.date}}</td>
<td>{{x.activity}}</td>
<td>{{x.dayActivity}}</td>
<td *ngIf="!mobile"> {{x.accomodation}}</td>
<td *ngIf="!mobile">{{x.transport}}</td>
</tr>
</tbody>
</table>
*or similar
</div>
</div>
</div>
<div class="footer d-flex justify-content-between">
<button type="button" class="btn btn-back" [routerLink]="['/trip', tripId, 'itinerary']"><i class="bi bi-pencil"></i> Edit</button>
<button *ngIf="!mobile" type="button" class="btn btn-back" (click)="getPDF()"> <i class="bi bi-save"></i> PDF</button>
<a role="button" class="btn btn-next" [href]="generateEmail" target="_blank" rel="noopener noreferrer"> <i class="bi bi-envelope"></i> {{ !mobile?
'Enquire Now' : 'Enquire'}}</a>
</div>
@import 'variables';
@import 'footer';
@import 'header';
@import 'custom-card';
@import 'custom-table';
.card-img {
width: 100%;
width: 400px;
margin-bottom: 5px;
// border: 2px solid $primary-button-color;
border-radius: 5px;
}
.btn-edit {
height: 35px;
}
.itinerary-summary {
overflow-y: auto;
&::-webkit-scrollbar {
border-radius: 3px;
width: 10px;
}
/* Track */
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background: $secondary-button-color;
}
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: $primary-button-color;
}
.day-part {
width: 100%;
padding: 0px 5px;
margin-bottom: 5px;
.card {
width: 100%;
background-color: $secondary-background-color;
}
.images {
max-width: 400px;
}
.content {
margin-left: 15px;
}
}
.day-by-day-table {
margin: 0px 5px;
}
}
.custom-card {
height: calc(100vh
/*header*/
- $header-height
/*footer*/
- $footer-height
/*middle-container margins*/);
}
Legend
Html element with directive