Add schedule component without logic

Zwischenstand

src/app/app-module.ts

@@ -13,6 +13,10 @@ import { HeaderComponent } from './header/header.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { ScheduleComponent } from './schedule/schedule.component';
 import { MainComponent } from './main/main.component';
+import { MovieScheduleInfoComponent } from './movie-schedule-info/movie-schedule-info.component';
+import { MoviePosterComponent } from './movie-poster/movie-poster.component';
+import { MovieScheduleTimesComponent } from './movie-schedule-times/movie-schedule-times.component';
+import { MoviePerformanceComponent } from './movie-performance/movie-performance.component';
 
 @NgModule({
   declarations: [
@@ -23,7 +27,11 @@ import { MainComponent } from './main/main.component';
     HeaderComponent,
     NavbarComponent,
     ScheduleComponent,
-    MainComponent
+    MainComponent,
+    MovieScheduleInfoComponent,
+    MoviePosterComponent,
+    MovieScheduleTimesComponent,
+    MoviePerformanceComponent
   ],
   imports: [
     AppRoutingModule,

src/app/http.service.ts

@@ -6,7 +6,7 @@ import { Observable } from "rxjs";
 @Injectable({providedIn: 'root'})
 export class HttpService {
   private http = inject(HttpClient);
-  private baseUrl = '/api/';
+  private baseUrl = 'https://infinimotion.de/api/';
 
   /* GET /api/kinosaal */
   getAllKinosaal(): Observable<Kinosaal[]> {

src/app/layouts/main-layout/main-layout.component.css

@@ -15,7 +15,6 @@
 /* Content rechts */
 .content {
   flex: 1;
-  background-color: #004cff;
   overflow-y: auto;
   box-sizing: border-box;
   height: 100%;

src/app/layouts/main-layout/main-layout.component.html

@@ -4,6 +4,6 @@
   <app-navbar></app-navbar>
 
   <main class="content">
-    <router-outlet></router-outlet> <!-- Hier werden die Kinder-Routen geladen -->
+    <router-outlet></router-outlet>
   </main>
 </div>

src/app/movie-performance/movie-performance.component.html

@@ -0,0 +1,15 @@
+<a routerLink="/zielseite" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
+
+  <div class="bg-gradient-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5">
+    <p>Kino 1</p>
+  </div>
+
+  <h1 class="flex-1 flex items-center justify-center text-black font-bold text-3xl px-2 py-1">
+    15:30
+  </h1>
+
+  <div class="bg-green-600 w-full text-center text-white font-medium rounded-b-md py-0.5">
+    <p>Tickets</p>
+  </div>
+
+</a>

src/app/movie-performance/movie-performance.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-movie-performance',
+  standalone: false,
+  templateUrl: './movie-performance.component.html',
+  styleUrl: './movie-performance.component.css'
+})
+export class MoviePerformanceComponent {
+
+}

src/app/movie-poster/movie-poster.component.html

@@ -0,0 +1,3 @@
+<div class="w-64 mx-auto my-3">
+  <img src="assets/test-movie-poster.jpg" alt="Movie Poster" class="w-full h-auto shadow-md">
+</div>

src/app/movie-poster/movie-poster.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-movie-poster',
+  standalone: false,
+  templateUrl: './movie-poster.component.html',
+  styleUrl: './movie-poster.component.css'
+})
+export class MoviePosterComponent {
+
+}

src/app/movie-schedule-info/movie-schedule-info.component.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  margin: 100px 0;
+}

src/app/movie-schedule-info/movie-schedule-info.component.html

@@ -0,0 +1,13 @@
+<div class="w-3/4 mx-auto my-4 flex flex-col md:flex-row gap-4">
+  <app-movie-poster></app-movie-poster>
+  <div>
+    <div class="m-2 mb-5">
+      <h1 class="text-4xl font-bold mb-1">Movie Title</h1>
+      <p class="text-xl">
+        Long Movie description Long Movie description Long Movie description Long Movie description Long Movie description Long Movie descriptionLong Movie description Long Movie description Long Movie description
+      </p>
+    </div>
+    <app-movie-schedule-times></app-movie-schedule-times>
+  </div>
+</div>
+

src/app/movie-schedule-info/movie-schedule-info.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-movie-schedule-info',
+  standalone: false,
+  templateUrl: './movie-schedule-info.component.html',
+  styleUrl: './movie-schedule-info.component.css'
+})
+export class MovieScheduleInfoComponent {
+
+}

src/app/movie-schedule-times/movie-schedule-times.component.html

@@ -0,0 +1,5 @@
+<div class="flex flex-warp">
+  <app-movie-performance></app-movie-performance>
+  <app-movie-performance></app-movie-performance>
+  <app-movie-performance></app-movie-performance>
+</div>

src/app/movie-schedule-times/movie-schedule-times.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-movie-schedule-times',
+  standalone: false,
+  templateUrl: './movie-schedule-times.component.html',
+  styleUrl: './movie-schedule-times.component.css'
+})
+export class MovieScheduleTimesComponent {
+
+}

src/app/schedule/schedule.component.css

@@ -1,7 +1,3 @@
 :host {
-  display: block;
+  min-height: 100%;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  padding: 1rem;
-  border-radius: 8px;
 }

src/app/schedule/schedule.component.html

@@ -1 +1,4 @@
-<p>schedule works!</p>
+@for (i of [].constructor(10); track i) {
+  <app-movie-schedule-info></app-movie-schedule-info>
+}
+