angular/tv-site
angular/tv-site
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

delete

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/main-view/main-view.component.html
View File

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

10
src/app/components/main-view/main-view.component.ts
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 {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'; import {ShowFormComponent} from '../show-form/show-form.component';
@Component({ @Component({
@ -15,10 +13,4 @@ import {ShowFormComponent} from '../show-form/show-form.component';
styleUrl: './main-view.component.css' styleUrl: './main-view.component.css'
}) })
export class MainViewComponent { export class MainViewComponent {
private dataService: ShowService = inject(ShowService);
public shows: Show[] = [];
constructor() {
this.shows = this.dataService.getShows();
}
} }

3
src/app/components/show-form/show-form.component.ts
View File

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

24
src/app/components/show-list/show-list.component.html
View File

@ -1,6 +1,22 @@
@for (show of shows; track show.id) { <table class="table table-striped table-hover">
<thead>
<tr> <tr>
<td>{{ show.id }}</td> <th>Id</th>
<td>{{ show.title }}</td> <th>Serientitel</th>
</tr> </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>

15
src/app/components/show-list/show-list.component.ts
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 {Show} from '../../model/show';
import {ShowService} from '../../services/show.service';
@Component({ @Component({
selector: 'app-show-list', selector: 'app-show-list',
@ -9,5 +10,15 @@ import {Show} from '../../model/show';
styleUrl: './show-list.component.css' styleUrl: './show-list.component.css'
}) })
export class ShowListComponent { 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);
}
} }

1
src/index.html
View File

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

11
tailwind.config.js
View File

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