This commit is contained in:
Phan Huy Tran 2024-11-20 10:20:42 +01:00
parent 953e9a6def
commit ed06f5d1ca
7 changed files with 38 additions and 28 deletions

View File

@ -2,7 +2,7 @@
<div class="row mt-3"><h1>TV-Serien</h1></div>
<div class="row mt-1">
<div class="col-md-7 mb-3">
<app-show-list [shows]="shows"></app-show-list>
<app-show-list></app-show-list>
</div>
<div class="col-md-5">
</div>

View File

@ -1,7 +1,5 @@
import {Component, inject} from '@angular/core';
import {Component} from '@angular/core';
import {ShowListComponent} from '../show-list/show-list.component';
import {Show} from '../../model/show';
import {ShowService} from '../../services/show.service';
import {ShowFormComponent} from '../show-form/show-form.component';
@Component({
@ -15,10 +13,4 @@ import {ShowFormComponent} from '../show-form/show-form.component';
styleUrl: './main-view.component.css'
})
export class MainViewComponent {
private dataService: ShowService = inject(ShowService);
public shows: Show[] = [];
constructor() {
this.shows = this.dataService.getShows();
}
}

View File

@ -15,9 +15,10 @@ import {FormsModule} from '@angular/forms';
export class ShowFormComponent {
showService: ShowService = inject(ShowService);
show: Show = new Show(null, null);
shows: Show[] = this.showService.getShows();
save() {
this.showService.getShows().push(this.show);
this.shows.push(this.show);
this.show = new Show(null, null);
}

View File

@ -1,6 +1,22 @@
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Id</th>
<th>Serientitel</th>
</tr>
</thead>
<tbody>
@for (show of shows; track show.id) {
<tr>
<td>{{ show.id }}</td>
<td>{{ show.title }}</td>
<td>
<button class="btn btn-secondary">Bearbeiten</button>
</td>
<td>
<button class="btn btn-danger" (click)="delete(show)">Löschen</button>
</td>
</tr>
}
</tbody>
</table>

View File

@ -1,5 +1,6 @@
import {Component, Input} from '@angular/core';
import {Component, inject, Input} from '@angular/core';
import {Show} from '../../model/show';
import {ShowService} from '../../services/show.service';
@Component({
selector: 'app-show-list',
@ -9,5 +10,15 @@ import {Show} from '../../model/show';
styleUrl: './show-list.component.css'
})
export class ShowListComponent {
@Input() shows: Show[] = [];
showService: ShowService = inject(ShowService);
shows: Show[] = this.showService.getShows();
updateShow(show: Show) {
this.shows = this.shows.filter(s => s !== show);
this.shows.push(show);
}
delete(show: Show) {
this.shows = this.shows.filter(s => s !== show);
}
}

View File

@ -6,6 +6,7 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href=https://fonts.googleapis.com/icon?family=Material+Icons rel="stylesheet">
</head>
<body>
<app-root></app-root>

View File

@ -1,11 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}