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, MatBadgeModule,
MatButtonToggleModule, MatButtonToggleModule,
MatCheckboxModule, MatCheckboxModule,
MatChipsModule,
MatDialogModule, MatDialogModule,
MatDividerModule, MatDividerModule,
MatRadioModule, MatRadioModule,
@ -95,7 +96,8 @@ import {ToggleSliderComponent} from './components/toggle-slider/toggle-slider.co
MatStepperModule, MatStepperModule,
MatRadioModule, MatRadioModule,
MatSlideToggleModule, MatSlideToggleModule,
MatSliderModule MatSliderModule,
MatChipsModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent], 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" <img alt="Picture of {{result.name}}" class="result-img"
src="https://travopti.de/api/v1/regions/{{result.region_id}}/image"> src="https://travopti.de/api/v1/regions/{{result.region_id}}/image">
<div class="result-title"> <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-name">{{result.name}}<span *ngIf="debug"> ({{result.score}})</span></span>
<span class="result-country">| {{result.country}}</span> <span class="result-country">| {{result.country}}</span>
</div> </div>
@ -10,30 +10,38 @@
<app-share-button [region]="result"></app-share-button> <app-share-button [region]="result"></app-share-button>
</div> </div>
<div class="result-details"> <div class="result-details">
<table> <mat-divider *ngIf="result.total_accommodation_costs"></mat-divider>
<tr *ngFor="let score of result.scores" [ngClass]="{'undefined': score.value == undefined}"> <div *ngIf="result.total_accommodation_costs" class="total-accommodation">
<td> <mat-icon>euro</mat-icon>
<div class="cell space"> <span>{{result.total_accommodation_costs|number:'1.2-2'}}€</span>
<mat-icon>{{PROPERTY_VIS_DEF[score.type] ? PROPERTY_VIS_DEF[score.type].icon : 'bar_chart'}}</mat-icon> </div>
<span>{{score.type|translate}}:</span> <mat-divider *ngIf="result.scores.length > 0"></mat-divider>
</div> <div class="searched-params">
</td> <table>
<td> <tr *ngFor="let score of result.scores" [ngClass]="{'undefined': score.value == undefined}">
<div class="cell right"> <td>
<span>{{score.value != undefined ? (score.value|number:'1.2-2') : 'N/A'}}</span> <div class="cell space">
</div> <mat-icon>{{PROPERTY_VIS_DEF[score.type] ? PROPERTY_VIS_DEF[score.type].icon : 'bar_chart'}}</mat-icon>
</td> <span>{{score.type|translate}}:</span>
<td> </div>
<div class="cell"> </td>
<span>{{PROPERTY_VIS_DEF[score.type] ? PROPERTY_VIS_DEF[score.type].unit : ''}}</span> <td>
</div> <div class="cell right">
</td> <span>{{score.value != undefined ? (score.value|number:'1.2-2') : 'N/A'}}</span>
<td *ngIf="debug"> </div>
<div class="cell"> </td>
<span>({{score.score}})</span> <td>
</div> <div class="cell">
</td> <span>{{PROPERTY_VIS_DEF[score.type] ? PROPERTY_VIS_DEF[score.type].unit : ''}}</span>
</tr> </div>
</table> </td>
<td *ngIf="debug">
<div class="cell">
<span>({{score.score}})</span>
</div>
</td>
</tr>
</table>
</div>
</div> </div>
</div> </div>

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

@ -15,30 +15,55 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-bottom: 0.5rem; margin-bottom: 0.25rem;
> .result-name { > .result-header {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 0.25rem 0; margin: 0.25rem 0;
align-items: center;
> .result-country {
text-transform: uppercase;
font-size: small;
align-self: center;
}
> .result-name { > .result-name {
font-weight: bold; font-weight: bold;
font-size: larger; font-size: larger;
align-self: center;
margin-right: 0.25rem; 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 { > .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 { .undefined {
color: #8f8f8f; color: #8f8f8f;
} }