From: Bastian Dehn <hhaalo@arcor.de>
Date: Thu, 9 Jun 2022 17:34:33 +0000 (+0200)
Subject: add: subtitle component
X-Git-Tag: v1.0^2~18^2
X-Git-Url: https://gitweb.hhaalo.de/?a=commitdiff_plain;h=659ebb1ea7ba3dcc5f4cc66ace4dab73da73df0a;p=speisekarten-editor.git

add: subtitle component
---

diff --git a/src/app/app.component.html b/src/app/app.component.html
index a9b192d..fe4fc0e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -37,20 +37,6 @@
 		(click)="saveTitle()">Speichern</button>
 </form>
 
-<form #formSubtitle="ngForm" *ngIf="formSubtitleVisible" class="form">
-	<label>Untertitel</label>
-	<input [(ngModel)]="subtitle.Subtitle" name="subtitle" type="text" />
-	<button class="button"
-		type="button"
-		[disabled]="edit || !disableByInsertMode()"
-		(click)="insertSubSectionAfter()">Einfügen</button>
-	<button class="button"
-		type="button"
-		id="saveSubtitle"
-		[disabled]="!edit || disableByInsertMode()"
-		(click)="saveSubtitle()">Speichern</button>
-</form>
-
 <div *ngFor="let title of foodcard.Titles; let i = index">
 	<h1>{{title.Title}}</h1>
 	<button class="button"
@@ -68,30 +54,13 @@
 		[disabled]="disableSubtitleButton()"
 		(click)="addNewSubtitle(i)">Untertitel hinzufügen</button>
 	<div *ngFor="let subtitle of title.Subtitles; let i = index">
-		<h2>{{subtitle.Subtitle}}</h2>
-		<button class="button"
-			type="button"
-			(click)="editSubtitle(subtitle)">Bearbeiten</button>
+		<app-subtitle [subtitle]="subtitle"></app-subtitle>
 		<button class="button"
 			type="button"
-			(click)="insertSubSection(title, subtitle)">Einfügen Unterteil</button>
+			(click)="insertSubSection(title, i)">Einfügen Unterteil</button>
 		<button class="button"
 			type="button"
 			(click)="removeSubSection(title, i)">Lösche Unterteil</button>
-		<button class="button"
-			type="button"
-			id="buttonFood"
-			[disabled]="disableFoodButton()"
-			(click)="insertNewFood(subtitle, i)">Speise hinzufügen</button>
-		<div *ngFor="let food of subtitle.Foods; let i = index">
-			<app-food [food]="food"></app-food>
-			<button class="button"
-				type="button"
-				(click)="insertNewFood(subtitle, i)">Einfügen</button>
-			<button class="button"
-				type="button"
-				(click)="removeFood(subtitle, i)">Löschen</button>
-		</div>
 	</div>
 </div>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 02c5921..0361665 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -35,8 +35,8 @@ export class AppComponent
 	public addNewSubtitle(index: number): void
 	{
 		let title = this.foodcard.Titles[index];
-		this.insertIndicies = [ index, title.Subtitles.length - 1, -1 ];
-		this.formSubtitleVisible = !this.formSubtitleVisible;
+		title.Subtitles.splice(index, 0,
+			{ Subtitle: "", Foods: [] });
 	}
 
 	public disableFoodButton(): boolean
@@ -145,13 +145,10 @@ export class AppComponent
 		this.formSubtitleVisible = false;
 	}
 
-	public insertSubSection(title: ITitle, subtitle: ISubtitle): void
+	public insertSubSection(title: ITitle, index: number): void
 	{
-		let titleIndex = this.foodcard.Titles.indexOf(title);
-		let subtitleIndex = title.Subtitles.indexOf(subtitle);
-
-		this.insertIndicies = [ titleIndex, subtitleIndex, -1 ];
-		this.formSubtitleVisible = true;
+		title.Subtitles.splice(index + 1, 0,
+			{ Subtitle: "", Foods: [] });
 	}
 
 	public removeSubSection(title: ITitle, index: number)
@@ -159,21 +156,6 @@ export class AppComponent
 		title.Subtitles.splice(index, 1);
 	}
 
-	public saveSubtitle(): void
-	{
-		this.subtitle = { Subtitle: "", Foods: [] };
-		this.formSubtitleVisible = false;
-		this.edit = false;
-	}
-
-	public editSubtitle(subtitle: ISubtitle): void
-	{
-		this.formSubtitleVisible = true;
-		this.subtitle = subtitle;
-		this.edit = true;
-
-	}
-
 	public insertNewFood(subtitle: ISubtitle, index: number): void
 	{
 		subtitle.Foods.splice(index + 1, 0,
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 025ff35..3a6aca1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,11 +5,13 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { FoodComponent } from './food/food.component';
+import { SubtitleComponent } from './subtitle/subtitle.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    FoodComponent
+    FoodComponent,
+    SubtitleComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/subtitle/subtitle.component.css b/src/app/subtitle/subtitle.component.css
new file mode 100644
index 0000000..a037ba1
--- /dev/null
+++ b/src/app/subtitle/subtitle.component.css
@@ -0,0 +1,37 @@
+@import url('https://fonts.googleapis.com/css?family=Tangerine');
+@font-face {
+	font-family: 'Tangerine';
+}
+
+.button {
+	display: inline-block;
+	margin: 0.5em 0;
+}
+
+.form {
+	display: block;
+	margin: 1em 0;
+}
+
+.form label {
+	display: block;
+	margin: 0.5em 0;
+}
+
+.form input {
+	display: block;
+	width: 100%;
+	margin: 0.5em 0;
+}
+
+h2 {
+	font-family: 'Tangerine', serif;
+	text-align: center;
+	font-size: 2em;
+}
+
+@media only screen and (min-width: 46.875em) {
+	h2 {
+		text-align: left;
+	}
+}
diff --git a/src/app/subtitle/subtitle.component.html b/src/app/subtitle/subtitle.component.html
new file mode 100644
index 0000000..2866586
--- /dev/null
+++ b/src/app/subtitle/subtitle.component.html
@@ -0,0 +1,29 @@
+<div class="subtitle">
+	<h2>{{subtitle.Subtitle}}</h2>
+	<button class="button"
+		type="button"
+		(click)="editSubtitle()">Bearbeiten</button>
+	<button class="button"
+		type="button"
+		id="buttonFood"
+		(click)="addNewFood()">Speise hinzufügen</button>
+
+	<form #formSubtitle="ngForm" *ngIf="formSubtitleVisible" class="form">
+		<label>Untertitel</label>
+		<input [(ngModel)]="subtitle.Subtitle" name="subtitle" type="text" />
+		<button class="button"
+			type="button"
+			id="saveSubtitle"
+			(click)="saveSubtitle()">Speichern</button>
+	</form>
+
+	<div *ngFor="let food of subtitle.Foods; let i = index">
+		<app-food [food]="food"></app-food>
+		<button class="button"
+			type="button"
+			(click)="insertNewFood(i)">Einfügen</button>
+		<button class="button"
+			type="button"
+			(click)="removeFood(i)">Löschen</button>
+	</div>
+</div>
diff --git a/src/app/subtitle/subtitle.component.spec.ts b/src/app/subtitle/subtitle.component.spec.ts
new file mode 100644
index 0000000..68841bf
--- /dev/null
+++ b/src/app/subtitle/subtitle.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubtitleComponent } from './subtitle.component';
+
+describe('SubtitleComponent', () => {
+  let component: SubtitleComponent;
+  let fixture: ComponentFixture<SubtitleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SubtitleComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubtitleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/subtitle/subtitle.component.ts b/src/app/subtitle/subtitle.component.ts
new file mode 100644
index 0000000..2f20645
--- /dev/null
+++ b/src/app/subtitle/subtitle.component.ts
@@ -0,0 +1,49 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ISubtitle } from '../isubtitle';
+
+@Component({
+	selector: 'app-subtitle',
+	templateUrl: './subtitle.component.html',
+	styleUrls: ['./subtitle.component.css']
+})
+
+export class SubtitleComponent implements OnInit
+{
+	@Input() subtitle: ISubtitle = { Subtitle: "", Foods: [] };
+	public formSubtitleVisible: boolean = false;
+
+	constructor() {}
+
+	public ngOnInit(): void
+	{
+		if (this.subtitle.Subtitle === "")
+			this.formSubtitleVisible = true;
+	}
+
+	public editSubtitle(): void
+	{
+		this.formSubtitleVisible = true;
+	}
+
+	public saveSubtitle(): void
+	{
+		this.formSubtitleVisible = false;
+	}
+
+	public addNewFood(): void
+	{
+		this.subtitle.Foods.splice(this.subtitle.Foods.length, 0,
+			{ Food: "", sideDish: "", price: "" });
+	}
+
+	public insertNewFood(index: number): void
+	{
+		this.subtitle.Foods.splice(index + 1, 0,
+			{ Food: "", sideDish: "", price: "" });
+	}
+
+	public removeFood(index: number): void
+	{
+		this.subtitle.Foods.splice(index, 1);
+	}
+}