add: subtitle component

diff --git a/src/app/app.component.html b/src/app/app.component.html
index a9b192dd517a0c5465c1fa68408641b648d54f44..fe4fc0edc91998274f3b255951cd98afc0c2ce6f 100644 (file)
--- 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 02c59215b1c990088d53615afb8ccdd1e3205447..0361665efa62145461eede31f3e0cbba2caabc0f 100644 (file)
--- 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 025ff3570ae9f81eb04dfa45bd4c1387ca3ac90f..3a6aca1afc4981007d2b23d9a9cc44fdf741db4d 100644 (file)
--- 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 (file)
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 (file)
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 (file)
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 (file)
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);
+       }
+}