tvolkmann/travopti
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add total accommodation costs to results

Browse Source
This commit is contained in:
Patrick Gebhardt 2020-06-23 21:23:23 +02:00
parent 5dfb31e91c
commit 1fb6f607a2
3 changed files with 71 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/app.module.ts
View File

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

60
frontend/src/app/components/result/result.component.html
View File

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

43
frontend/src/app/components/result/result.component.scss
View File

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