diff --git a/frontend/src/app/components/multi-tag-select/multi-tag-select.component.html b/frontend/src/app/components/multi-tag-select/multi-tag-select.component.html index 5e80dde..fe219ed 100644 --- a/frontend/src/app/components/multi-tag-select/multi-tag-select.component.html +++ b/frontend/src/app/components/multi-tag-select/multi-tag-select.component.html @@ -1,5 +1,5 @@ {{tag}} + selected>{{tag|translate}} diff --git a/frontend/src/app/components/region/region.component.html b/frontend/src/app/components/region/region.component.html index 810a17b..7107986 100644 --- a/frontend/src/app/components/region/region.component.html +++ b/frontend/src/app/components/region/region.component.html @@ -1,6 +1,6 @@
Picture of {{region.name}} + src="https://travopti.de/api/v1/regions/{{region.region_id}}/image"> +
\ No newline at end of file diff --git a/frontend/src/app/components/result/result.component.html b/frontend/src/app/components/result/result.component.html index 131007b..fc34186 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}}) @@ -17,6 +17,7 @@
+
Estimated values for your choosen travel dates
@@ -27,7 +28,7 @@
- {{score.value != undefined ? (score.value|number:'1.2-2') : 'N/A'}} + {{score.value != undefined ? (score.value|number:PROPERTY_VIS_DEF[score.type].decimals) : 'N/A'}}
@@ -44,4 +45,4 @@
-
+ \ 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 274b8f9..4f1e544 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,32 +41,43 @@ } } - > .result-details { + >.result-details { display: flex; flex-direction: column; - > .total-accommodation { + >.total-accommodation { margin: 0.5rem 0; display: flex; flex-direction: row; align-items: center; font-weight: bold; - > mat-icon { + >mat-icon { margin-right: 0.5rem; margin-left: 3px; } } - > .searched-params { + >.searched-params { margin: 0.5rem 0 } .undefined { color: #8f8f8f; } + + .result-desc { + text-transform: uppercase; + font-size: small; + margin-right: 0.25rem; + margin-bottom: 0.5rem; + overflow-y: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } } @@ -84,7 +95,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/search-input/search-input.component.html b/frontend/src/app/components/search-input/search-input.component.html index 34810a1..60cbc8b 100644 --- a/frontend/src/app/components/search-input/search-input.component.html +++ b/frontend/src/app/components/search-input/search-input.component.html @@ -10,7 +10,7 @@ - When is your trip? + When do you want to travel?
Start @@ -24,7 +24,7 @@ - Which climate would you prefer? + Which climate makes you feel comfortable?
{{key|translate}}:
@@ -89,14 +89,16 @@
- Climate - + Climate + Choose your sweetspot +
- Fincancial + Fincancial + Choose your sweetspot
diff --git a/frontend/src/app/components/search-input/search-input.component.scss b/frontend/src/app/components/search-input/search-input.component.scss index 80dec6a..d2a3198 100644 --- a/frontend/src/app/components/search-input/search-input.component.scss +++ b/frontend/src/app/components/search-input/search-input.component.scss @@ -83,3 +83,10 @@ } } +.desc { + font-size: smaller; +} + +.small-bottom-margin { + margin-bottom: 4px !important; +} diff --git a/frontend/src/app/components/share-button/share-button.component.ts b/frontend/src/app/components/share-button/share-button.component.ts index a148cd2..c44a78a 100644 --- a/frontend/src/app/components/share-button/share-button.component.ts +++ b/frontend/src/app/components/share-button/share-button.component.ts @@ -1,7 +1,7 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {Region} from '../../interfaces/region.interface'; -import {ShareDialogComponent} from '../../dialogs/share-dialog/share-dialog.component'; -import {MatDialog} from '@angular/material'; +import { Component, Input, OnInit } from '@angular/core'; +import { Region } from '../../interfaces/region.interface'; +import { ShareDialogComponent } from '../../dialogs/share-dialog/share-dialog.component'; +import { MatDialog } from '@angular/material'; @Component({ selector: 'app-share-button', diff --git a/frontend/src/app/containers/region-details/region-details.component.html b/frontend/src/app/containers/region-details/region-details.component.html index c8f1a69..dbe9e89 100644 --- a/frontend/src/app/containers/region-details/region-details.component.html +++ b/frontend/src/app/containers/region-details/region-details.component.html @@ -1,6 +1,6 @@
Picture of {{region.name}} + src="https://travopti.de/api/v1/regions/{{region.region_id}}/image">
{{region.country}} @@ -8,7 +8,7 @@
+ rel="noopener" target="_blank"> flight_takeoff @@ -16,7 +16,7 @@

{{region.description.substr(0, DESC_CUT_POINT)}} ...more + class="more-btn"> ...more {{region.description.substr(DESC_CUT_POINT)}}

@@ -27,40 +27,27 @@ - + - + - + - + @@ -76,4 +63,4 @@
-
+
\ No newline at end of file diff --git a/frontend/src/app/containers/search/search.component.ts b/frontend/src/app/containers/search/search.component.ts index 470a2cf..342f246 100644 --- a/frontend/src/app/containers/search/search.component.ts +++ b/frontend/src/app/containers/search/search.component.ts @@ -53,8 +53,8 @@ export class SearchComponent implements OnInit { this.sortOptions = [ {name: 'Relevance', property: 'score', descending: true}, - {name: 'Name', property: 'name'}, - {name: 'Accommodation', property: 'accommodation_costs'} + {name: 'Region', property: 'name'}, + {name: 'Accommodation price', property: 'accommodation_costs'} ]; if (this.results.length > 0) { diff --git a/frontend/src/app/services/data.service.ts b/frontend/src/app/services/data.service.ts index 7208192..c8bd98f 100644 --- a/frontend/src/app/services/data.service.ts +++ b/frontend/src/app/services/data.service.ts @@ -1,9 +1,9 @@ -import {Injectable} from '@angular/core'; -import {HttpClient, HttpParams} from '@angular/common/http'; -import {Preset} from '../interfaces/preset.interface'; -import {Result} from '../interfaces/result.interface'; -import {Region} from '../interfaces/region.interface'; -import {Place} from '../interfaces/places.interface'; +import { Injectable } from '@angular/core'; +import { HttpClient, HttpParams } from '@angular/common/http'; +import { Preset } from '../interfaces/preset.interface'; +import { Result } from '../interfaces/result.interface'; +import { Region } from '../interfaces/region.interface'; +import { Place } from '../interfaces/places.interface'; /** * The data service handles all API interactions. @@ -27,7 +27,7 @@ export class DataService { public searchRegions(query: string): Promise { const params = new HttpParams().set('q', query); - return this.http.get(this.API_URL + '/search', {params}).toPromise(); + return this.http.get(this.API_URL + '/search', { params }).toPromise(); } /** @@ -46,7 +46,7 @@ export class DataService { if (max) { params = params.set('randomize', max.toString(10)); } - const regions = await this.http.get(this.API_URL + '/regions', {params}).toPromise(); + const regions = await this.http.get(this.API_URL + '/regions', { params }).toPromise(); regions.forEach(region => this.regionCache.set(region.region_id, region)); @@ -90,60 +90,144 @@ export class DataService { export const REGION_PARAM_VIS: RegionParamVisLookup = { temperature_mean: { icon: 'wb_sunny', - unit: '°C' + unit: '°C', + decimals: '1.0-0' }, temperature_mean_min: { icon: 'wb_sunny', - unit: '°C' + unit: '°C', + decimals: '1.0-0' }, temperature_mean_max: { icon: 'wb_sunny', - unit: '°C' + unit: '°C', + decimals: '1.0-0' }, precipitation: { icon: 'opacity', - unit: 'mm' + unit: 'mm', + decimals: '1.0-0' }, humidity: { icon: 'grain', - unit: '%' + unit: '%', + decimals: '1.0-0' }, sun_hours: { icon: 'flare', - unit: 'h' + unit: 'h', + decimals: '1.0-0' }, rain_days: { icon: 'date_range', - unit: '' + unit: '', + decimals: '1.0-0' }, food_costs: { icon: 'local_dining', - unit: '€/day' + unit: '€/day', + decimals: '1.0-0' }, alcohol_costs: { icon: 'local_bar', - unit: '€/day' + unit: '€/day', + decimals: '1.2-2' }, water_costs: { icon: 'local_cafe', - unit: '€/day' + unit: '€/day', + decimals: '1.2-2' }, local_transportation_costs: { icon: 'commute', - unit: '€/day' + unit: '€/day', + decimals: '1.2-2' }, entertainment_costs: { icon: 'local_activity', - unit: '€/day' + unit: '€/day', + decimals: '1.2-2' }, accommodation_costs: { icon: 'hotel', - unit: '€/day' + unit: '€/day', + decimals: '1.2-2' }, average_per_day_costs: { icon: 'euro', - unit: '€/day' - } + unit: '€/day', + decimals: '1.2-2' + }, + avg_price_relative: { + icon: 'hotel', + unit: '%', + decimals: '1.1-1' + }, + beach: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + history: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + nature: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + art: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + culture: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + mountains: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + architecture: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + rainforest: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + nightlife: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + desert: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + food: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + shopping: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, + volcanoes: { + icon: 'stars', + unit: '%', + decimals: '1.0-0' + }, }; export interface RegionParamVisLookup { @@ -153,4 +237,5 @@ export interface RegionParamVisLookup { export interface RegionParamVis { icon: string; unit: string; + decimals: string; } diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json index 758586e..569dc1d 100644 --- a/frontend/src/assets/i18n/en.json +++ b/frontend/src/assets/i18n/en.json @@ -1,33 +1,48 @@ { - "temperature_mean_max": "Max Temperature Average", + "temperature_mean_max": "Day temperature", "temperature": "Temperature", - "rain_days": "Rainy days", - "sun_hours": "Sunny hours", + "rain_days": "Rain days", + "sun_hours": "Sunshine", "precipitation": "Precipitation", "humidity": "Humidity", "alcohol_costs": "Alcohol", "food_costs": "Food", "water_costs": "Water", - "cheap_alcohol": "Cheap alcohol", + "cheap_alcohol": "cheap alcohol", "local_transportation_costs": "Public transport", "average_per_day_costs": "Total costs", "entertainment_costs": "Entertainment", - "accommodation_costs": "Accommodation", - "cheap_food": "Cheap food", - "cheap_water": "Cheap water", - "cheap_transportations": "Cheap public transport", - "cheap_entertainment": "Cheap entertainment", - "cheap_accommodation": "Cheap accommodation", - "off_season": "Off-season", + "accommodation_costs": "Accommodation price", + "avg_price_relative": "Price tendency", + "cheap_food": "cheap food", + "cheap_water": "cheap water", + "cheap_transportations": "cheap public transport", + "cheap_entertainment": "cheap entertainment", + "cheap_accommodation": "cheap accommodation", + "off_season": "low season", "warm": "warm", "chilly": "cold", "mild:": "mild", "cold": "freezing", - "sunny": "sunny", - "dark": "dark", - "almost_no_rain": "almost none", - "little_rain": "little", - "floodlike_rain": "flooding", + "sunny": "all day long", + "dark": "the sun scares me", + "normal": "better not so much", + "almost_no_rain": "no rain", + "little_rain": "a little is good", + "floodlike_rain": "i like it pouring", "few_raindays": "few", - "many_raindays": "many" + "many_raindays": "many", + "art": "Art", + "beach": "Beach", + "history": "History", + "nature": "Nature", + "culture": "Culture", + "mountains": "Mountains", + "architecture": "Architecture", + "rainforest": "Rainforest", + "desert": "Desert", + "food": "Food", + "shopping": "Shopping", + "volcanoes": "Volcanoes", + "nightlife": "Nightlife" }