Add region props to region details

frontend/src/app/components/region/region.component.scss

@@ -13,6 +13,7 @@
   > .region-footer {
     display: flex;
     flex-direction: row;
+    align-items: center;
 
     > .region-title {
       flex: 1 1 auto;

frontend/src/app/components/result/result.component.scss

@@ -13,6 +13,7 @@
   > .result-footer {
     display: flex;
     flex-direction: row;
+    align-items: center;
 
     > .result-title {
       flex: 1 1 auto;

frontend/src/app/containers/region-details/region-details.component.html

@@ -5,12 +5,44 @@
       <span class="region-country">{{region.country}}</span>
       <span class="region-name">{{region.name}}</span>
     </div>
+    <button mat-icon-button>
+      <mat-icon>bookmark</mat-icon>
+    </button>
+    <button mat-icon-button>
+      <mat-icon>share</mat-icon>
+    </button>
   </div>
   <p *ngIf="region.description" class="region-decsription">
     <span>{{region.description.substr(0, DESC_CUT_POINT)}}</span>
-    <span (click)="isDescExtended=true" *ngIf="!isDescExtended" class="more-btn"> ...more</span>
+    <span (click)="isDescExtended=true" *ngIf="!isDescExtended && region.description.length > DESC_CUT_POINT"
+          class="more-btn"> ...more</span>
     <span *ngIf="isDescExtended">{{region.description.substr(DESC_CUT_POINT)}}</span>
   </p>
+  <div class="region-stats-group">
+    <div>
+      <table>
+        <tr *ngFor="let prop of SHOWN_PROPS">
+          <td>
+            <div class="cell">
+              <mat-icon>{{prop.icon}}</mat-icon>
+              <span>{{prop.property|translate}}:</span>
+            </div>
+          </td>
+          <td>
+            <div class="cell right">
+              <span>{{region[prop.property].toFixed(2)}}</span>
+            </div>
+          </td>
+          <td>
+            <div class="cell">
+              <span>{{prop.unit}}</span>
+            </div>
+          </td>
+        </tr>
+      </table>
+
+    </div>
+  </div>
   <div class="region-stats-group">
     <span class="group-title">Max Temperatures [°C]</span>
     <app-graph [monthlyData]="region.temperature_mean_max" class="graph"></app-graph>

frontend/src/app/containers/region-details/region-details.component.scss

@@ -14,9 +14,10 @@
 .region-details-header {
   display: flex;
   flex-direction: row;
+  align-items: center;
 
   > .region-title {
-    flex: 0 1 auto;
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     margin: 0.25rem 0;
@@ -58,6 +59,20 @@
   }
 }
 
+.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;

frontend/src/app/containers/region-details/region-details.component.ts

@@ -4,6 +4,12 @@ import {ActivatedRoute, ParamMap} from '@angular/router';
 import {DataService} from '../../services/data.service';
 import {switchMap} from 'rxjs/operators';
 
+interface VisualRegionPropDef {
+  property: string;
+  icon: string;
+  unit: string;
+}
+
 @Component({
   selector: 'app-region-details',
   templateUrl: './region-details.component.html',
@@ -13,6 +19,34 @@ 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',
+    }
+  ];
 
   /** Current region */
   region: Region;

frontend/src/app/interfaces/region.interface.ts

@@ -8,10 +8,16 @@ export interface Region {
   country: string;
   /** Short description of the region */
   description: string;
+  /** Temperature means per month */
+  temperature_mean: number[];
+  /** Min temperature means per month */
+  temperature_mean_min: number[];
   /** Max temperature means per month */
   temperature_mean_max: number[];
   /** Monthly precipitation */
   precipitation: number[];
+  /** Monthly humidity */
+  humidity: number[];
   /** Monthly sun hours */
   sun_hours: number[];
   /** Monthly rainy days */
@@ -30,4 +36,6 @@ export interface Region {
   accommodation_costs: number;
   /** Average costs per day */
   average_per_day_costs: number;
+  /** Monthly price derivation in percent */
+  avg_price_relative: number[];
 }

frontend/src/assets/i18n/en.json

@@ -5,9 +5,12 @@
   "sun_hours": "Sunny hours",
   "precipitation": "Precipitation",
   "humidity": "Humidity",
-  "alcohol_costs": "Alcohol coasts per day",
-  "food_costs": "Food costs per day",
+  "alcohol_costs": "Alcohol costs",
+  "food_costs": "Food costs",
   "cheap_alcohol": "Cheap alcohol",
+  "local_transportation_costs": "Public transport",
+  "average_per_day_costs": "Average total costs",
+  "entertainment_costs": "Entertainment costs",
   "cheap_food": "Cheap food",
   "cheap_water": "Cheap water",
   "cheap_transportations": "Cheap public transport",