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 @@

+ src="https://travopti.de/api/v1/regions/{{result.region_id}}/image">
-
-
-
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
+ - - -
+
0">
0" class="searched-params">
-
-
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 @@