From 1fb6f607a294c6727b67303780804814e9ec2cc1 Mon Sep 17 00:00:00 2001
From: Patrick Gebhardt <pjgebhardt@icloud.com>
Date: Tue, 23 Jun 2020 21:23:23 +0200
Subject: [PATCH] Add total accommodation costs to results

---
 frontend/src/app/app.module.ts                |  4 +-
 .../components/result/result.component.html   | 60 +++++++++++--------
 .../components/result/result.component.scss   | 43 ++++++++++---
 3 files changed, 71 insertions(+), 36 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index f4069d1..44e7c6b 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -25,6 +25,7 @@ import {
   MatBadgeModule,
   MatButtonToggleModule,
   MatCheckboxModule,
+  MatChipsModule,
   MatDialogModule,
   MatDividerModule,
   MatRadioModule,
@@ -95,7 +96,8 @@ import {ToggleSliderComponent} from './components/toggle-slider/toggle-slider.co
     MatStepperModule,
     MatRadioModule,
     MatSlideToggleModule,
-    MatSliderModule
+    MatSliderModule,
+    MatChipsModule
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/frontend/src/app/components/result/result.component.html b/frontend/src/app/components/result/result.component.html
index 422e9e9..84505d1 100644
--- a/frontend/src/app/components/result/result.component.html
+++ b/frontend/src/app/components/result/result.component.html
@@ -2,7 +2,7 @@
   <img alt="Picture of {{result.name}}" class="result-img"
        src="https://travopti.de/api/v1/regions/{{result.region_id}}/image">
   <div class="result-title">
-    <div class="result-name">
+    <div class="result-header">
       <span class="result-name">{{result.name}}<span *ngIf="debug"> ({{result.score}})</span></span>
       <span class="result-country">| {{result.country}}</span>
     </div>
@@ -10,30 +10,38 @@
     <app-share-button [region]="result"></app-share-button>
   </div>
   <div class="result-details">
-    <table>
-      <tr *ngFor="let score of result.scores" [ngClass]="{'undefined': score.value == undefined}">
-        <td>
-          <div class="cell space">
-            <mat-icon>{{PROPERTY_VIS_DEF[score.type] ? PROPERTY_VIS_DEF[score.type].icon : 'bar_chart'}}</mat-icon>
-            <span>{{score.type|translate}}:</span>
-          </div>
-        </td>
-        <td>
-          <div class="cell right">
-            <span>{{score.value != undefined ? (score.value|number:'1.2-2') : 'N/A'}}</span>
-          </div>
-        </td>
-        <td>
-          <div class="cell">
-            <span>{{PROPERTY_VIS_DEF[score.type] ? PROPERTY_VIS_DEF[score.type].unit : ''}}</span>
-          </div>
-        </td>
-        <td *ngIf="debug">
-          <div class="cell">
-            <span>({{score.score}})</span>
-          </div>
-        </td>
-      </tr>
-    </table>
+    <mat-divider *ngIf="result.total_accommodation_costs"></mat-divider>
+    <div *ngIf="result.total_accommodation_costs" class="total-accommodation">
+      <mat-icon>euro</mat-icon>
+      <span>{{result.total_accommodation_costs|number:'1.2-2'}}€</span>
+    </div>
+    <mat-divider *ngIf="result.scores.length > 0"></mat-divider>
+    <div class="searched-params">
+      <table>
+        <tr *ngFor="let score of result.scores" [ngClass]="{'undefined': score.value == undefined}">
+          <td>
+            <div class="cell space">
+              <mat-icon>{{PROPERTY_VIS_DEF[score.type] ? PROPERTY_VIS_DEF[score.type].icon : 'bar_chart'}}</mat-icon>
+              <span>{{score.type|translate}}:</span>
+            </div>
+          </td>
+          <td>
+            <div class="cell right">
+              <span>{{score.value != undefined ? (score.value|number:'1.2-2') : 'N/A'}}</span>
+            </div>
+          </td>
+          <td>
+            <div class="cell">
+              <span>{{PROPERTY_VIS_DEF[score.type] ? PROPERTY_VIS_DEF[score.type].unit : ''}}</span>
+            </div>
+          </td>
+          <td *ngIf="debug">
+            <div class="cell">
+              <span>({{score.score}})</span>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
   </div>
 </div>
diff --git a/frontend/src/app/components/result/result.component.scss b/frontend/src/app/components/result/result.component.scss
index 63695ea..274b8f9 100644
--- a/frontend/src/app/components/result/result.component.scss
+++ b/frontend/src/app/components/result/result.component.scss
@@ -15,30 +15,55 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.25rem;
 
-    > .result-name {
+    > .result-header {
       flex: 1 1 auto;
       display: flex;
       flex-direction: row;
       margin: 0.25rem 0;
-
-      > .result-country {
-        text-transform: uppercase;
-        font-size: small;
-        align-self: center;
-      }
+      align-items: center;
 
       > .result-name {
         font-weight: bold;
         font-size: larger;
-        align-self: center;
         margin-right: 0.25rem;
       }
+
+      > .result-country {
+        text-transform: uppercase;
+        font-size: small;
+        margin-right: 0.25rem;
+        overflow-y: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
     }
   }
 
   > .result-details {
+
+    display: flex;
+    flex-direction: column;
+
+    > .total-accommodation {
+      margin: 0.5rem 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-weight: bold;
+
+      > mat-icon {
+        margin-right: 0.5rem;
+        margin-left: 3px;
+      }
+
+    }
+
+    > .searched-params {
+      margin: 0.5rem 0
+    }
+
     .undefined {
       color: #8f8f8f;
     }