forked from philorg/treetrail-frontend
116 lines
No EOL
3.6 KiB
HTML
116 lines
No EOL
3.6 KiB
HTML
<div class='container' *ngIf="plant">
|
|
<h1>{{ plant.english || plant.name }}</h1>
|
|
<div class="row row1">
|
|
<table>
|
|
<tr *ngIf="plant.english">
|
|
<th>English name</th>
|
|
<td [innerText]="plant.english"></td>
|
|
</tr>
|
|
<tr *ngIf="plant.name">
|
|
<th>Scientific name</th>
|
|
<td [innerText]="plant.name"></td>
|
|
</tr>
|
|
<tr *ngIf="plant.spiritual">
|
|
<th>Spiritual name</th>
|
|
<td [innerText]="plant.spiritual"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Description</th>
|
|
<td [innerText]="plant.description"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Family</th>
|
|
<td [innerText]="plant.family"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Type</th>
|
|
<td [innerText]="plant.type"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Woody</th>
|
|
<td [innerText]="plant.woody?'Yes':'No'"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Latex</th>
|
|
<td [innerText]="plant.latex"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Thorny</th>
|
|
<td [innerText]="plant.thorny"></td>
|
|
</tr>
|
|
</table>
|
|
<img class='image' [src]="imgUrl" class='img'>
|
|
</div>
|
|
<div class="row">
|
|
<div>
|
|
<div class="title">Leaf</div>
|
|
<table>
|
|
<tr>
|
|
<th>Type</th>
|
|
<td [innerText]="plant.leaf_type"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Arrangement</th>
|
|
<td [innerText]="plant.leaf_arrangement"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Aroma</th>
|
|
<td [innerText]="plant.leaf_aroma?'Yes':'No'"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Length</th>
|
|
<td>{{ plant.leaf_length | number }} cm</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Width</th>
|
|
<td>{{ plant.leaf_width | number }} cm</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<div class="title">Flower</div>
|
|
<table>
|
|
<tr>
|
|
<th>Color</th>
|
|
<td [innerText]="plant.flower_color"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Aroma</th>
|
|
<td [innerText]="plant.flower_aroma?'Yes':'No'"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Size</th>
|
|
<td>{{ plant.flower_size | number }} cm</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<div class="title">Fruit</div>
|
|
<table>
|
|
<tr>
|
|
<th>Color</th>
|
|
<td [innerText]="plant.fruit_color"></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Size</th>
|
|
<td>{{ plant.fruit_size | number }} cm</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Type</th>
|
|
<td [innerText]="plant.fruit_type"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<mat-divider></mat-divider>
|
|
<div class='trails' *ngIf="dataService.plant_trail[plant.id]">
|
|
<h3>Visible from these trails:</h3>
|
|
<div class="trails-container">
|
|
<app-trail-list-item
|
|
*ngFor="let trail of (dataService.plant_trail[plant.id]) | keyvalue"
|
|
[trail]="trail.value"
|
|
>
|
|
</app-trail-list-item>
|
|
</div>
|
|
</div>
|
|
</div> |