From 4a667a78fe5f2cd5801b79b3f3b4e9a52b759342 Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Thu, 9 Jun 2022 20:25:35 +0200
Subject: [PATCH] add: foodcard component

---
 src/app/app.component.html                  | 41 ++++++---------------
 src/app/app.component.ts                    | 23 ------------
 src/app/app.module.ts                       |  4 +-
 src/app/foodcard/foodcard.component.css     |  6 +++
 src/app/foodcard/foodcard.component.html    | 15 ++++++++
 src/app/foodcard/foodcard.component.spec.ts | 25 +++++++++++++
 src/app/foodcard/foodcard.component.ts      | 33 +++++++++++++++++
 7 files changed, 94 insertions(+), 53 deletions(-)
 create mode 100644 src/app/foodcard/foodcard.component.css
 create mode 100644 src/app/foodcard/foodcard.component.html
 create mode 100644 src/app/foodcard/foodcard.component.spec.ts
 create mode 100644 src/app/foodcard/foodcard.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 171b955..fcf353f 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,35 +1,18 @@
 <div class=foodcardeditor>
-
-<input type="file"
-	name="fileupload"
-	(change)="fileEvent($event)" />
-
-<button class="button"
-	type="button"
-	id="exportJson"
-	(click)="exportJson()">Export</button>
-<a [href]="downloadJsonHref"
-	id="exportLink"
-	[hidden]="downloadJsonHref === ''"
-	download="speisekarte.json">Download</a>
-
-<button class="button"
-	type="button"
-	id="addTitle"
-	(click)="addTitle()">Titel Hinzufügen</button>
-
-<div *ngFor="let title of foodcard.Titles; let i = index">
-	<app-title [title]="title"></app-title>
+	<input type="file"
+		name="fileupload"
+		(change)="fileEvent($event)" />
 	<button class="button"
 		type="button"
-		(click)="insertMainSection(i)">Einfügen Hauptteil</button>
+		id="exportJson"
+		(click)="exportJson()">Export</button>
+	<a [href]="downloadJsonHref"
+		id="exportLink"
+		[hidden]="downloadJsonHref === ''"
+		download="speisekarte.json">Download</a>
 	<button class="button"
 		type="button"
-		(click)="removeMainSection(i)">Lösche Hauptteil</button>
-	<button class="button"
-		type="button"
-		id="buttonSubtitle"
-		(click)="addNewSubtitle(i)">Untertitel hinzufügen</button>
-</div>
-
+		id="addTitle"
+		(click)="addTitle()">Titel Hinzufügen</button>
+	<app-foodcard [foodcard]="foodcard"></app-foodcard>
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 481e5ed..2e1c266 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -14,23 +14,10 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 export class AppComponent
 {
 	public foodcard: IFoodCard = { Titles: [] };
-	public formTitleVisible: boolean = false;
 	public downloadJsonHref: SafeUrl = "";
 
 	constructor(private sanitizer: DomSanitizer) {}
 
-	public changeFormTitleVisible(): void
-	{
-		this.formTitleVisible = !this.formTitleVisible;
-	}
-
-	public addNewSubtitle(index: number): void
-	{
-		let title = this.foodcard.Titles[index];
-		title.Subtitles.splice(index, 0,
-			{ Subtitle: "", Foods: [] });
-	}
-
 	public exportJson(): void
 	{
 		let json = JSON.stringify(this.foodcard);
@@ -51,17 +38,7 @@ export class AppComponent
 	public addTitle(): void
 	{
 		this.foodcard.Titles.push({ Title: "", Subtitles: [] });
-		this.formTitleVisible = false;
 	}
 
-	public insertMainSection(index: number): void
-	{
-		this.foodcard.Titles.splice(index + 1, 0,
-			{ Title: "", Subtitles: [] });
-	}
 
-	public removeMainSection(index: number): void
-	{
-		this.foodcard.Titles.splice(index, 1);
-	}
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 989ba5b..1ed8a8b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,13 +7,15 @@ import { AppComponent } from './app.component';
 import { FoodComponent } from './food/food.component';
 import { SubtitleComponent } from './subtitle/subtitle.component';
 import { TitleComponent } from './title/title.component';
+import { FoodcardComponent } from './foodcard/foodcard.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     FoodComponent,
     SubtitleComponent,
-    TitleComponent
+    TitleComponent,
+    FoodcardComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/foodcard/foodcard.component.css b/src/app/foodcard/foodcard.component.css
new file mode 100644
index 0000000..d1a2bc4
--- /dev/null
+++ b/src/app/foodcard/foodcard.component.css
@@ -0,0 +1,6 @@
+@media only screen and (min-width: 60.625em) {
+	.foodcard {
+		max-width: 60em;
+		margin: 0 auto;
+	}
+}
diff --git a/src/app/foodcard/foodcard.component.html b/src/app/foodcard/foodcard.component.html
new file mode 100644
index 0000000..d54d841
--- /dev/null
+++ b/src/app/foodcard/foodcard.component.html
@@ -0,0 +1,15 @@
+<div class="foodcard">
+	<div *ngFor="let title of foodcard.Titles; let i = index">
+		<app-title [title]="title"></app-title>
+		<button class="button"
+			type="button"
+			(click)="insertMainSection(i)">Einfügen Hauptteil</button>
+		<button class="button"
+			type="button"
+			(click)="removeMainSection(i)">Lösche Hauptteil</button>
+		<button class="button"
+			type="button"
+			id="buttonSubtitle"
+			(click)="addNewSubtitle(i)">Untertitel hinzufügen</button>
+	</div>
+</div>
diff --git a/src/app/foodcard/foodcard.component.spec.ts b/src/app/foodcard/foodcard.component.spec.ts
new file mode 100644
index 0000000..b883349
--- /dev/null
+++ b/src/app/foodcard/foodcard.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FoodcardComponent } from './foodcard.component';
+
+describe('FoodcardComponent', () => {
+  let component: FoodcardComponent;
+  let fixture: ComponentFixture<FoodcardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FoodcardComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FoodcardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/foodcard/foodcard.component.ts b/src/app/foodcard/foodcard.component.ts
new file mode 100644
index 0000000..fffd03e
--- /dev/null
+++ b/src/app/foodcard/foodcard.component.ts
@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { IFoodCard } from '../ifood-card';
+
+@Component({
+	selector: 'app-foodcard',
+	templateUrl: './foodcard.component.html',
+	styleUrls: ['./foodcard.component.css']
+})
+
+export class FoodcardComponent
+{
+	@Input() foodcard: IFoodCard = { Titles: [] };
+
+	constructor() {}
+
+	public insertMainSection(index: number): void
+	{
+		this.foodcard.Titles.splice(index + 1, 0,
+			{ Title: "", Subtitles: [] });
+	}
+
+	public removeMainSection(index: number): void
+	{
+		this.foodcard.Titles.splice(index, 1);
+	}
+
+	public addNewSubtitle(index: number): void
+	{
+		let title = this.foodcard.Titles[index];
+		title.Subtitles.splice(index, 0,
+			{ Subtitle: "", Foods: [] });
+	}
+}
-- 
2.39.5