From afb4234ce4a1eecd6f054f0c82c5c3e961eea580 Mon Sep 17 00:00:00 2001 From: Patrick Gebhardt Date: Fri, 19 Jun 2020 13:25:32 +0200 Subject: [PATCH] Add details to search results --- frontend/src/app/app.module.ts | 4 +- .../region-stats/region-stats.component.html | 20 +++++ .../region-stats/region-stats.component.scss | 18 ++++ .../region-stats.component.spec.ts | 25 ++++++ .../region-stats/region-stats.component.ts | 27 ++++++ .../components/region/region.component.scss | 2 +- .../components/result/result.component.html | 26 +++++- .../components/result/result.component.scss | 29 ++++++- .../app/components/result/result.component.ts | 4 + .../region-details.component.html | 28 +----- .../region-details.component.scss | 15 ---- .../region-details.component.ts | 40 ++------- .../containers/search/search.component.scss | 2 +- .../interfaces/search-request.interface.ts | 45 ++++++---- frontend/src/app/services/data.service.ts | 87 +++++++++++++++++-- frontend/src/assets/i18n/en.json | 4 +- 16 files changed, 271 insertions(+), 105 deletions(-) create mode 100644 frontend/src/app/components/region-stats/region-stats.component.html create mode 100644 frontend/src/app/components/region-stats/region-stats.component.scss create mode 100644 frontend/src/app/components/region-stats/region-stats.component.spec.ts create mode 100644 frontend/src/app/components/region-stats/region-stats.component.ts diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index a8c805a..51aedd2 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -27,6 +27,7 @@ import {RegionComponent} from './components/region/region.component'; import {ResultComponent} from './components/result/result.component'; import {RegionDetailsComponent} from './containers/region-details/region-details.component'; import {GraphComponent} from './components/graph/graph.component'; +import {RegionStatsComponent} from './components/region-stats/region-stats.component'; @NgModule({ @@ -39,7 +40,8 @@ import {GraphComponent} from './components/graph/graph.component'; RegionComponent, ResultComponent, RegionDetailsComponent, - GraphComponent + GraphComponent, + RegionStatsComponent ], imports: [ BrowserModule, diff --git a/frontend/src/app/components/region-stats/region-stats.component.html b/frontend/src/app/components/region-stats/region-stats.component.html new file mode 100644 index 0000000..5d8c930 --- /dev/null +++ b/frontend/src/app/components/region-stats/region-stats.component.html @@ -0,0 +1,20 @@ + + + + + + +
+
+ {{PROPERTY_VIS_DEF[prop].icon}} + {{prop|translate}}: +
+ 		+
+ {{region[prop] ? (region[prop]|number:'1.2-2') : 'N/A'}} +
+ 		+
+ {{PROPERTY_VIS_DEF[prop].unit}} +
+
diff --git a/frontend/src/app/components/region-stats/region-stats.component.scss b/frontend/src/app/components/region-stats/region-stats.component.scss new file mode 100644 index 0000000..39c5ad3 --- /dev/null +++ b/frontend/src/app/components/region-stats/region-stats.component.scss @@ -0,0 +1,18 @@ +.cell { + display: flex; + flex-direction: row; + align-items: center; + align-self: center; + + &.right { + justify-content: flex-end; + } + + &.space { + margin-right: 1rem; + } + + > mat-icon { + margin-right: 0.5rem; + } +} diff --git a/frontend/src/app/components/region-stats/region-stats.component.spec.ts b/frontend/src/app/components/region-stats/region-stats.component.spec.ts new file mode 100644 index 0000000..0a3a53c --- /dev/null +++ b/frontend/src/app/components/region-stats/region-stats.component.spec.ts @@ -0,0 +1,25 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {RegionStatsComponent} from './region-stats.component'; + +describe('RegionStatsComponent', () => { + let component: RegionStatsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [RegionStatsComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RegionStatsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/region-stats/region-stats.component.ts b/frontend/src/app/components/region-stats/region-stats.component.ts new file mode 100644 index 0000000..3a3bf39 --- /dev/null +++ b/frontend/src/app/components/region-stats/region-stats.component.ts @@ -0,0 +1,27 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {Region} from '../../interfaces/region.interface'; +import {SearchParameter} from '../../interfaces/search-request.interface'; +import {REGION_PARAM_VIS} from '../../services/data.service'; + +@Component({ + selector: 'app-region-stats', + templateUrl: './region-stats.component.html', + styleUrls: ['./region-stats.component.scss'] +}) +export class RegionStatsComponent implements OnInit { + + @Input() + region: Region; + @Input() + shownKeys: SearchParameter[]; + + /** Contains the visual definitions */ + readonly PROPERTY_VIS_DEF = REGION_PARAM_VIS; + + constructor() { + } + + ngOnInit() { + } + +} diff --git a/frontend/src/app/components/region/region.component.scss b/frontend/src/app/components/region/region.component.scss index 903a8aa..b50177d 100644 --- a/frontend/src/app/components/region/region.component.scss +++ b/frontend/src/app/components/region/region.component.scss @@ -29,7 +29,7 @@ > .region-name { font-weight: bold; - font-size: large; + font-size: larger; align-self: center; margin-right: 0.25rem; } diff --git a/frontend/src/app/components/result/result.component.html b/frontend/src/app/components/result/result.component.html index 2a967e7..a6b3698 100644 --- a/frontend/src/app/components/result/result.component.html +++ b/frontend/src/app/components/result/result.component.html @@ -1,7 +1,7 @@
-
-
+
+
{{result.name}} | {{result.country}}
@@ -12,4 +12,26 @@ share
+
+ + + + + + +
+
+ {{PROPERTY_VIS_DEF[score.type].icon}} + {{score.type|translate}}: +
+ 		+
+ {{score.value ? (score.value|number:'1.2-2') : 'N/A'}} +
+ 		+
+ {{PROPERTY_VIS_DEF[score.type].unit}} +
+
+
diff --git a/frontend/src/app/components/result/result.component.scss b/frontend/src/app/components/result/result.component.scss index 3501428..6dc8228 100644 --- a/frontend/src/app/components/result/result.component.scss +++ b/frontend/src/app/components/result/result.component.scss @@ -10,12 +10,13 @@ object-fit: cover; } - > .result-footer { + > .result-title { display: flex; flex-direction: row; align-items: center; + margin-bottom: 0.5rem; - > .result-title { + > .result-name { flex: 1 1 auto; display: flex; flex-direction: row; @@ -29,12 +30,32 @@ > .result-name { font-weight: bold; - font-size: large; + font-size: larger; align-self: center; margin-right: 0.25rem; } } + } - + > .result-details { + } +} + +.cell { + display: flex; + flex-direction: row; + align-items: center; + align-self: center; + + &.right { + justify-content: flex-end; + } + + &.space { + margin-right: 1rem; + } + + > mat-icon { + margin-right: 0.5rem; } } diff --git a/frontend/src/app/components/result/result.component.ts b/frontend/src/app/components/result/result.component.ts index c4c5adf..ce4e21c 100644 --- a/frontend/src/app/components/result/result.component.ts +++ b/frontend/src/app/components/result/result.component.ts @@ -1,5 +1,6 @@ import {Component, Input, OnInit} from '@angular/core'; import {Result} from '../../interfaces/result.interface'; +import {REGION_PARAM_VIS} from '../../services/data.service'; @Component({ selector: 'app-result', @@ -11,6 +12,9 @@ export class ResultComponent implements OnInit { @Input() result: Result; + /** Contains the visual definitions */ + readonly PROPERTY_VIS_DEF = REGION_PARAM_VIS; + constructor() { } 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 ddf41e6..bf447e5 100644 --- a/frontend/src/app/containers/region-details/region-details.component.html +++ b/frontend/src/app/containers/region-details/region-details.component.html @@ -19,35 +19,13 @@ {{region.description.substr(DESC_CUT_POINT)}}

-
- - - - - - -
-
- {{prop.icon}} - {{prop.property|translate}}: -
- 		-
- {{region[prop.property].toFixed(2)}} -
- 		-
- {{prop.unit}} -
-
- -
+
-
+
Max Temperatures [°C]
-
+
Precipitation [mm]
diff --git a/frontend/src/app/containers/region-details/region-details.component.scss b/frontend/src/app/containers/region-details/region-details.component.scss index 698da7c..40f20f3 100644 --- a/frontend/src/app/containers/region-details/region-details.component.scss +++ b/frontend/src/app/containers/region-details/region-details.component.scss @@ -59,21 +59,6 @@ } } -.cell { - display: flex; - flex-direction: row; - align-items: center; - align-self: center; - - &.right { - justify-content: flex-end; - } - - > mat-icon { - margin-right: 0.5rem; - } -} - .spinner { flex: 1 1 auto; display: flex; diff --git a/frontend/src/app/containers/region-details/region-details.component.ts b/frontend/src/app/containers/region-details/region-details.component.ts index 1a8191d..f2efee5 100644 --- a/frontend/src/app/containers/region-details/region-details.component.ts +++ b/frontend/src/app/containers/region-details/region-details.component.ts @@ -3,12 +3,8 @@ import {Region} from '../../interfaces/region.interface'; import {ActivatedRoute, ParamMap} from '@angular/router'; import {DataService} from '../../services/data.service'; import {switchMap} from 'rxjs/operators'; +import {SearchParameter} from '../../interfaces/search-request.interface'; -interface VisualRegionPropDef { - property: string; - icon: string; - unit: string; -} @Component({ selector: 'app-region-details', @@ -20,32 +16,14 @@ export class RegionDetailsComponent implements OnInit { /** Cut descriptions after x chars */ readonly DESC_CUT_POINT = 300; /** Region property to show in view */ - readonly SHOWN_PROPS: VisualRegionPropDef[] = [ - { - property: 'average_per_day_costs', - icon: 'euro', - unit: '€/day', - }, - { - property: 'food_costs', - icon: 'local_dining', - unit: '€/day', - }, - { - property: 'alcohol_costs', - icon: 'local_bar', - unit: '€/day', - }, - { - property: 'local_transportation_costs', - icon: 'commute', - unit: '€/day', - }, - { - property: 'entertainment_costs', - icon: 'local_activity', - unit: '€/day', - } + readonly SHOWN_PROPS: SearchParameter[] = [ + SearchParameter.AVERAGE_PER_DAY_COSTS, + SearchParameter.ACCOMMODATION_COSTS, + SearchParameter.FOOD_COSTS, + SearchParameter.WATER_COSTS, + SearchParameter.ALCOHOL_COSTS, + SearchParameter.LOCAL_TRANSPORTATION_COSTS, + SearchParameter.ENTERTAINMENT_COSTS, ]; /** Current region */ diff --git a/frontend/src/app/containers/search/search.component.scss b/frontend/src/app/containers/search/search.component.scss index 4791b8f..86a7e39 100644 --- a/frontend/src/app/containers/search/search.component.scss +++ b/frontend/src/app/containers/search/search.component.scss @@ -13,7 +13,7 @@ flex-direction: column; > app-result { - margin-bottom: 2rem; + margin-bottom: 3rem; } } diff --git a/frontend/src/app/interfaces/search-request.interface.ts b/frontend/src/app/interfaces/search-request.interface.ts index 598f1f3..e96f3c1 100644 --- a/frontend/src/app/interfaces/search-request.interface.ts +++ b/frontend/src/app/interfaces/search-request.interface.ts @@ -1,25 +1,32 @@ -export enum SearchParam { - FROM = 'from', - TO = 'to', - TEMPERATURE = 'temperature', - PRECIPITATION = 'precipitation', - RAINDAYS = 'raindays', - HUMIDITY = 'humidity', - SUNHOURS = 'sunhours', - ALCOHOL = 'alcohol', - FOOD = 'food' -} - export interface Query { from: number; to: number; - price?: number[]; - exclude_region_ids?: number[]; - temperature?: number[]; + temperature_mean_max?: number[]; precipitation?: number[]; - raindays?: number[]; + rain_days?: number[]; humidity?: number[]; - sunhours?: number[]; - alcohol?: number[]; - food?: number[]; + sun_hours?: number[]; + alcohol_costs?: number[]; + food_costs?: number[]; + local_transportation_costs: number[]; + entertainment_costs: number[]; + accommodation_costs: number[]; + average_per_day_costs: number[]; +} + +export enum SearchParameter { + TEMP_MEAN = 'temperature_mean', + TEMP_MEAN_MIN = 'temperature_mean_min', + TEMP_MEAN_MAX = 'temperature_mean_max', + PRECIPITATION = 'precipitation', + HUMIDITY = 'humidity', + SUN_HOURS = 'sun_hours', + RAIN_DAYS = 'rain_days', + FOOD_COSTS = 'food_costs', + ALCOHOL_COSTS = 'alcohol_costs', + WATER_COSTS = 'water_costs', + LOCAL_TRANSPORTATION_COSTS = 'local_transportation_costs', + ENTERTAINMENT_COSTS = 'entertainment_costs', + ACCOMMODATION_COSTS = 'accommodation_costs', + AVERAGE_PER_DAY_COSTS = 'average_per_day_costs' } diff --git a/frontend/src/app/services/data.service.ts b/frontend/src/app/services/data.service.ts index 1b68ba7..50eb4b3 100644 --- a/frontend/src/app/services/data.service.ts +++ b/frontend/src/app/services/data.service.ts @@ -17,29 +17,106 @@ export class DataService { public searchRegions(query: string): Promise { const params = new HttpParams().set('q', query); - console.log(params); - return this.http.get(this.API_URL + '/search', {params}).toPromise(); // return new Promise(resolve => { - // resolve(MOCK_RESULT); + // setTimeout(() => { + // resolve(MOCK_RESULT); + // }, 100); // }); } public getAllPresets(): Promise { return this.http.get(this.API_URL + '/search/presets').toPromise(); // return new Promise(resolve => { - // resolve(MOCK_PRESETS); + // setTimeout(() => { + // resolve(MOCK_PRESETS); + // }, 100); // }); } public getAllRegions(): Promise { return this.http.get(this.API_URL + '/regions').toPromise(); // return new Promise(resolve => { - // resolve(MOCK_REGIONS); + // setTimeout(() => { + // resolve(MOCK_REGIONS); + // }, 100); // }); } public getRegion(id: number): Promise { return this.http.get(`${this.API_URL}/regions/${id}`).toPromise(); + // return new Promise(resolve => { + // setTimeout(() => { + // resolve(MOCK_REGIONS.find(region => region.region_id === id)); + // }, 100); + // }); } } + +export const REGION_PARAM_VIS: RegionParamVisLookup = { + temperature_mean: { + icon: 'wb_sunny', + unit: '°C' + }, + temperature_mean_min: { + icon: 'wb_sunny', + unit: '°C' + }, + temperature_mean_max: { + icon: 'wb_sunny', + unit: '°C' + }, + precipitation: { + icon: 'opacity', + unit: 'mm' + }, + humidity: { + icon: 'grain', + unit: '%' + }, + sun_hours: { + icon: 'flare', + unit: 'h' + }, + rain_days: { + icon: 'date_range', + unit: '' + }, + food_costs: { + icon: 'local_dining', + unit: '€/day' + }, + alcohol_costs: { + icon: 'local_bar', + unit: '€/day' + }, + water_costs: { + icon: 'local_cafe', + unit: '€/day' + }, + local_transportation_costs: { + icon: 'commute', + unit: '€/day' + }, + entertainment_costs: { + icon: 'local_activity', + unit: '€/day' + }, + accommodation_costs: { + icon: 'hotel', + unit: '€/day' + }, + average_per_day_costs: { + icon: 'euro', + unit: '€/day' + } +}; + +export interface RegionParamVisLookup { + [key: string]: RegionParamVis; +} + +export interface RegionParamVis { + icon: string; + unit: string; +} diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json index 2efa42e..0b96832 100644 --- a/frontend/src/assets/i18n/en.json +++ b/frontend/src/assets/i18n/en.json @@ -1,5 +1,5 @@ { - "temperature_mean_max": "Temperature Average", + "temperature_mean_max": "Max Temperature Average", "temperature": "Temperature", "rain_days": "Rainy days", "sun_hours": "Sunny hours", @@ -7,10 +7,12 @@ "humidity": "Humidity", "alcohol_costs": "Alcohol costs", "food_costs": "Food costs", + "water_costs": "Water costs", "cheap_alcohol": "Cheap alcohol", "local_transportation_costs": "Public transport", "average_per_day_costs": "Average total costs", "entertainment_costs": "Entertainment costs", + "accommodation_costs": "Accommodation costs", "cheap_food": "Cheap food", "cheap_water": "Cheap water", "cheap_transportations": "Cheap public transport",