phil/treetrail-frontend
1
0
Fork 0
forked from philorg/treetrail-frontend
Code Pull requests Activity

first commit

Browse source
This commit is contained in:
phil 2024-10-19 11:53:15 +02:00
commit 62506c830a
1207 changed files with 40706 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

116
src/app/plant-detail/plant-detail.component.html Normal file
View file

@ -0,0 +1,116 @@
<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>

83
src/app/plant-detail/plant-detail.component.scss Normal file
View file

@ -0,0 +1,83 @@
.container {
margin: .5em;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
margin-bottom: initial;
}
.mat-mdc-card-content {
display: flex;
flex-direction: column;
}
.mat-mdc-card-title {
margin: auto;
height: 2em;
flex: 0 0 0;
}
.mat-mdc-card-title > button {
float: left;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row1 th {
width: 7.5em;
}
.row > * {
margin: 5px;
flex-grow: 1;
}
.row table {
flex: 1 1 0;
border-spacing: 0;
width: 100%;
border-right: 1px solid grey;
border-top: 1px solid grey;
}
.row th, .row .title {
background: rgb(75 200 100 / 100%);
text-align: left;
color: #fff;
font-weight: 100;
padding: 2px 5px;
}
th {
width: 0;
}
th, td {
border-bottom: 1px solid grey;
}
.row img {
border-right: 0;
flex-grow: 0;
}
.row .title {
font-weight: bold;
text-align: center;
}
.img {
height: fit-content;
}
.trails-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0.5em;
}

54
src/app/plant-detail/plant-detail.component.ts Normal file
View file

@ -0,0 +1,54 @@
import { Component, OnInit } from '@angular/core'
import { Router, ActivatedRoute, ParamMap } from '@angular/router'
import { Observable } from 'rxjs'
import { map, switchMap } from 'rxjs/operators'
import { Plant } from '../models'
import { DataService } from '../data.service'
@Component({
selector: 'app-plant-detail',
templateUrl: './plant-detail.component.html',
styleUrls: ['./plant-detail.component.scss']
})
export class PlantDetailComponent implements OnInit {
constructor(
private route: ActivatedRoute,
public router: Router,
public dataService: DataService
) { }
include = new Set([
'description', 'habit', 'landscape', 'uses', 'planting', 'propagation',
'type', 'element', 'hindi', 'tamil', 'woody', 'latex',
'leaf_style', 'leaf_type', 'leaf_arrangement', 'leaf_aroma', 'leaf_length', 'leaf_width',
'flower_color', 'flower_aroma', 'flower_size',
'fruit_color', 'fruit_size', 'fruit_type',
'thorny'])
plant: Plant
ngOnInit(): void {
this.route.paramMap.pipe(
switchMap((params: ParamMap) =>
this.dataService.all.pipe(
map(
all => this.plant = all.plants[params.get('pekid')]
)
)
)
)
.subscribe()
}
get imgUrl() {
//return 'https://plantekey.com/slir/?p=1&w=300&i=/admin/images/plants/' + this.plant.img
return '/attachment/plantekey/thumb/' + this.plant.img
}
/*
get details(): any[] {
return Object.entries(this.plant).filter(e => this.include.has(e[0]))
}
*/
}