diff --git a/frontend/src/app/components/result/result.component.html b/frontend/src/app/components/result/result.component.html index bcdb24d..f1bd218 100644 --- a/frontend/src/app/components/result/result.component.html +++ b/frontend/src/app/components/result/result.component.html @@ -1,6 +1,6 @@
Picture of {{result.name}} + src="https://travopti.de/api/v1/regions/{{result.region_id}}/image">
{{result.name}} ({{result.score}}) @@ -10,14 +10,27 @@
- -
- euro - {{result.total_accommodation_costs|number:'1.2-2'}}€ + +
+
+ euro + {{totalCosts|number:'1.0-0'}}€ +
+
+ hotel + {{totalAccommodation|number:'1.0-0'}}€ +
+
+ people + {{totalLifeStyle|number:'1.0-0'}}€ +
+
+ commute + - - - +
-
@@ -45,6 +58,6 @@
-
Estimated values for your chosen travel dates
+
Estimated values for {{duration}} {{duration > 1 ? 'days' : 'day'}}
-
\ No newline at end of file +
diff --git a/frontend/src/app/components/result/result.component.scss b/frontend/src/app/components/result/result.component.scss index a866674..38a5c3a 100644 --- a/frontend/src/app/components/result/result.component.scss +++ b/frontend/src/app/components/result/result.component.scss @@ -4,33 +4,33 @@ flex-direction: column; cursor: pointer; - >.result-img { + > .result-img { flex: 0 0 auto; width: 100%; height: 15rem; object-fit: cover; } - >.result-title { + > .result-title { display: flex; flex-direction: row; align-items: center; margin-bottom: 0.25rem; - >.result-header { + > .result-header { flex: 1 1 auto; display: flex; flex-direction: row; margin: 0.25rem 0; align-items: center; - >.result-name { + > .result-name { font-weight: bold; font-size: larger; margin-right: 0.25rem; } - >.result-country { + > .result-country { text-transform: uppercase; font-size: small; margin-right: 0.25rem; @@ -41,26 +41,29 @@ } } - >.result-details { + > .result-details { display: flex; flex-direction: column; - >.total-accommodation { - margin: 0.5rem 0; + > .total-price-container { display: flex; flex-direction: row; - align-items: center; - font-weight: bold; + margin: 0.5rem 0; - >mat-icon { - margin-right: 0.5rem; - margin-left: 3px; + > div { + display: flex; + flex-direction: row; + align-items: center; + margin-right: 1rem; + + > mat-icon { + margin-right: 0.25rem; + } } - } - >.searched-params { + > .searched-params { margin: 0.5rem 0 } @@ -96,7 +99,7 @@ margin-right: 1rem; } - >mat-icon { + > mat-icon { margin-right: 0.5rem; } -} \ No newline at end of file +} diff --git a/frontend/src/app/components/result/result.component.ts b/frontend/src/app/components/result/result.component.ts index 8f70ce8..66334ae 100644 --- a/frontend/src/app/components/result/result.component.ts +++ b/frontend/src/app/components/result/result.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core'; import {Result} from '../../interfaces/result.interface'; import {REGION_PARAM_VIS} from '../../services/data.service'; @@ -7,14 +7,23 @@ import {REGION_PARAM_VIS} from '../../services/data.service'; templateUrl: './result.component.html', styleUrls: ['./result.component.scss'] }) -export class ResultComponent implements OnInit { +export class ResultComponent implements OnInit, OnChanges { @Input() result: Result; + /** Date difference in days */ + @Input() + duration: number; + @Input() debug = false; + totalCosts: number; + totalAccommodation: number; + totalLifeStyle: number; + totalTravel: number; + /** Contains the visual definitions */ readonly PROPERTY_VIS_DEF = REGION_PARAM_VIS; @@ -24,4 +33,25 @@ export class ResultComponent implements OnInit { ngOnInit() { } + ngOnChanges(changes: SimpleChanges): void { + if (changes.result || changes.duration) { + this.calculateTotalPrices(); + } + } + + onTravelCostRequest(event: MouseEvent) { + event.stopPropagation(); + window.open(`https://www.google.com/flights?q=flight+to+${encodeURI(this.result.name)}`, '_blank'); + } + + private calculateTotalPrices() { + // Guard: undefined values + if (!this.result || !this.duration) { + return; + } + + this.totalCosts = Math.round(this.result.average_per_day_costs * this.duration); + this.totalAccommodation = Math.round(this.result.accommodation_costs * this.duration); + this.totalLifeStyle = this.totalCosts - this.totalAccommodation; + } } diff --git a/frontend/src/app/containers/search/search.component.html b/frontend/src/app/containers/search/search.component.html index b8079b7..ed7a829 100644 --- a/frontend/src/app/containers/search/search.component.html +++ b/frontend/src/app/containers/search/search.component.html @@ -21,7 +21,7 @@
+ [duration]="duration" [result]="result">
diff --git a/frontend/src/app/containers/search/search.component.ts b/frontend/src/app/containers/search/search.component.ts index 5676a16..27d1481 100644 --- a/frontend/src/app/containers/search/search.component.ts +++ b/frontend/src/app/containers/search/search.component.ts @@ -2,6 +2,8 @@ import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Result} from '../../interfaces/result.interface'; import {SearchService} from '../../services/search.service'; +import {base64ToObj} from '../../utils/base64conversion'; +import {Query} from '../../interfaces/search-request.interface'; interface SortOption { name: string; @@ -28,6 +30,8 @@ export class SearchComponent implements OnInit { sortDes = true; /** Available sort options */ sortOptions: SortOption[] = []; + /** The difference between from and to in days */ + duration: number; debug = false; @@ -54,7 +58,7 @@ export class SearchComponent implements OnInit { this.sortOptions = [ {name: 'Relevance', property: 'score', descending: true}, {name: 'Region name', property: 'name'}, - {name: 'Accommodation price', property: 'accommodation_costs'} + {name: 'Price', property: 'average_per_day_costs'} ]; if (this.results.length > 0) { @@ -65,6 +69,10 @@ export class SearchComponent implements OnInit { }); } + // Calculate duration + const {from, to} = base64ToObj(this.queryString) as Query; + const difference: number = (new Date(to)).getTime() - (new Date(from)).getTime(); + this.duration = Math.round(difference / 1000 / 60 / 60 / 24); }); }