Merge pull request #2 from Sybit-Education/feat/bilder

Bilder hinzugefügt
Sybit-Education · Jul 30, 2024 · 7529843 · 7529843
2 parents 85d8f96 + 2356f76
commit 7529843
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,2 +1,4 @@
-<app-footer></app-footer>
-
+<div class="sytivities">
+    <router-outlet></router-outlet>
+    <app-footer></app-footer>
+</div>
diff --git a/src/app/components/detail/detail.component.html b/src/app/components/detail/detail.component.html
@@ -0,0 +1,4 @@
+{{activity?.name}}
+@if (activity?.media) {
+    <img [src]="activity?.media.file?.[0].url" alt="{{activity?.name}} Bild">
+}
diff --git a/src/app/components/detail/detail.component.ts b/src/app/components/detail/detail.component.ts
@@ -1,17 +1,34 @@
-import {Component} from '@angular/core';
-import {AsyncPipe} from "@angular/common";
-import {RouterLink} from "@angular/router";
+import {Component, OnInit} from '@angular/core';
+import {AirtableService} from "../../services/airtable.service";
+import {AsyncPipe, NgStyle} from "@angular/common";
+import {Activity} from "../../types/activity.interface";
+import {ActivatedRoute, RouterLink} from "@angular/router";
 
 @Component({
   selector: 'app-detail',
   standalone: true,
   imports: [
     AsyncPipe,
-    RouterLink
+    RouterLink,
+    NgStyle
   ],
   templateUrl: './detail.component.html',
   styleUrl: './detail.component.scss'
 })
-export class DetailComponent {
+export class DetailComponent implements OnInit {
+  activity: Activity | null = null;
 
+  constructor(
+    private route: ActivatedRoute,
+    private activityService: AirtableService
+  ) {}
+
+  ngOnInit(): void {
+    const osmId = this.route.snapshot.paramMap.get('osm_id');
+    if (osmId) {
+      this.activityService.getActivitiesByOsmId(osmId).subscribe((activities) => {
+        this.activity = activities[0];
+      });
+    }
+  }
 }
diff --git a/src/index.html b/src/index.html
@@ -1,8 +1,11 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <title></title>
-
+  <meta charset="utf-8">
+  <title>Sytivities</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
 </head>
 <body>
   <app-root></app-root>