add: title component

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 7fd2219433d5f628df9e5c73e151e685abad9146..4406b65d56f5ae18dccd87c57a4c17ee17ccf84d 100644 (file)
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,49 +1,3 @@
-@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: 80%;
-       margin: 0.5em 0;
-}
-
-h1, h2 {
-       font-family: 'Tangerine', serif;
-       text-align: center;
-}
-
-h1 {
-       font-size: 2.5em;
-       margin: 1em 0;
-}
-
-h2 {
-       font-size: 2em;
-}
-
-@media only screen and (min-width: 46.875em) {
-       h1, h2 {
-               text-align: left;
-       }
-}
-
 @media only screen and (min-width: 60.625em) {
        .foodcardeditor {
                max-width: 60em;

diff --git a/src/app/app.component.html b/src/app/app.component.html
index fe4fc0edc91998274f3b255951cd98afc0c2ce6f..171b9552ac7de9251d4113acb8df6396df4ca32c 100644 (file)
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -13,35 +13,13 @@
        [hidden]="downloadJsonHref === ''"
        download="speisekarte.json">Download</a>
 
-<button class="button main"
+<button class="button"
        type="button"
-       id="buttonTitle"
-       (click)="changeFormTitleVisible()">Titel hinzufügen</button>
-
-<form #formTitle="ngForm" *ngIf="formTitleVisible" class="form">
-       <label>Titel</label>
-       <input [(ngModel)]="title.Title" name="title" type="text" />
-       <button class="button"
-               type="button"
-               id="addTitle"
-               [disabled]="edit || disableByInsertMode()"
-               (click)="addTitle()">Hinzufügen</button>
-       <button class="button"
-               type="button"
-               [disabled]="edit || !disableByInsertMode()"
-               (click)="insertMainSectionAfter()">Einfügen</button>
-       <button class="button"
-               type="button"
-               id="saveTitle"
-               [disabled]="!edit || disableByInsertMode()"
-               (click)="saveTitle()">Speichern</button>
-</form>
+       id="addTitle"
+       (click)="addTitle()">Titel Hinzufügen</button>
 
 <div *ngFor="let title of foodcard.Titles; let i = index">
-       <h1>{{title.Title}}</h1>
-       <button class="button"
-               type="button"
-               (click)="editTitle(title)">Bearbeiten</button>
+       <app-title [title]="title"></app-title>
        <button class="button"
                type="button"
                (click)="insertMainSection(i)">Einfügen Hauptteil</button>
@@ -51,17 +29,7 @@
        <button class="button"
                type="button"
                id="buttonSubtitle"
-               [disabled]="disableSubtitleButton()"
                (click)="addNewSubtitle(i)">Untertitel hinzufügen</button>
-       <div *ngFor="let subtitle of title.Subtitles; let i = index">
-               <app-subtitle [subtitle]="subtitle"></app-subtitle>
-               <button class="button"
-                       type="button"
-                       (click)="insertSubSection(title, i)">Einfügen Unterteil</button>
-               <button class="button"
-                       type="button"
-                       (click)="removeSubSection(title, i)">Lösche Unterteil</button>
-       </div>
 </div>
 
 </div>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e59c2882c70c290ba0a35a3b5a337471b9cc8f8f..481e5eddf136e19aa92f3aff558bf7858412e56c 100644 (file)
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -13,12 +13,8 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
 export class AppComponent
 {
-       private insertIndicies: Array<number> = [ -1, -1, -1 ];
-
        public foodcard: IFoodCard = { Titles: [] };
-       public title: ITitle = { Title: "", Subtitles: [] };
        public formTitleVisible: boolean = false;
-       public edit: boolean = false;
        public downloadJsonHref: SafeUrl = "";
 
        constructor(private sanitizer: DomSanitizer) {}
@@ -35,24 +31,6 @@ export class AppComponent
                        { Subtitle: "", Foods: [] });
        }
 
-       public disableSubtitleButton(): boolean
-       {
-               if (this.foodcard.Titles.length < 1)
-                       return true;
-
-               return false;
-       }
-
-       public disableByInsertMode(): boolean
-       {
-               for (let i = 0; i < this.insertIndicies.length; i++) {
-                       if (this.insertIndicies[i] > -1)
-                               return true;
-               }
-
-               return false;
-       }
-
        public exportJson(): void
        {
                let json = JSON.stringify(this.foodcard);
@@ -72,53 +50,18 @@ export class AppComponent
 
        public addTitle(): void
        {
-               this.foodcard.Titles.push(this.title);
-               this.title = { Title: "", Subtitles: [] }
-               this.formTitleVisible = false;
-       }
-
-       public saveTitle(): void
-       {
-               this.title = { Title: "", Subtitles: [] }
-               this.formTitleVisible = false;
-               this.edit = false;
-       }
-
-       public editTitle(title: ITitle): void
-       {
-               this.formTitleVisible = true;
-               this.title = title;
-               this.edit = true;
-       }
-
-       public insertMainSectionAfter(): void
-       {
-               this.foodcard.Titles.splice(this.insertIndicies[0] + 1, 0,
-                       this.title);
-               this.title = { Title: "", Subtitles: [] };
-               this.insertIndicies = [ -1, -1, -1 ];
+               this.foodcard.Titles.push({ Title: "", Subtitles: [] });
                this.formTitleVisible = false;
        }
 
        public insertMainSection(index: number): void
        {
-               this.insertIndicies = [ index, -1, -1 ];
-               this.formTitleVisible = true;
+               this.foodcard.Titles.splice(index + 1, 0,
+                       { Title: "", Subtitles: [] });
        }
 
        public removeMainSection(index: number): void
        {
                this.foodcard.Titles.splice(index, 1);
        }
-
-       public insertSubSection(title: ITitle, index: number): void
-       {
-               title.Subtitles.splice(index + 1, 0,
-                       { Subtitle: "", Foods: [] });
-       }
-
-       public removeSubSection(title: ITitle, index: number)
-       {
-               title.Subtitles.splice(index, 1);
-       }
 }

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3a6aca1afc4981007d2b23d9a9cc44fdf741db4d..989ba5be0e7a31290ed2311e7a5efcfa63902c5a 100644 (file)
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,12 +6,14 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { FoodComponent } from './food/food.component';
 import { SubtitleComponent } from './subtitle/subtitle.component';
+import { TitleComponent } from './title/title.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     FoodComponent,
-    SubtitleComponent
+    SubtitleComponent,
+    TitleComponent
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/title/title.component.css b/src/app/title/title.component.css
new file mode 100644 (file)
index 0000000..29aad93
--- /dev/null
+++ b/src/app/title/title.component.css
@@ -0,0 +1,38 @@
+@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: 80%;
+       margin: 0.5em 0;
+}
+
+h1 {
+       font-family: 'Tangerine', serif;
+       text-align: center;
+       font-size: 2.5em;
+       margin: 1em 0;
+}
+
+@media only screen and (min-width: 46.875em) {
+       h1 {
+               text-align: left;
+       }
+}

diff --git a/src/app/title/title.component.html b/src/app/title/title.component.html
new file mode 100644 (file)
index 0000000..4d25ee8
--- /dev/null
+++ b/src/app/title/title.component.html
@@ -0,0 +1,23 @@
+<div class="title">
+       <h1>{{title.Title}}</h1>
+       <button class="button"
+               type="button"
+               (click)="editTitle()">Bearbeiten</button>
+       <form #formTitle="ngForm" *ngIf="formTitleVisible" class="form">
+               <label>Titel</label>
+               <input [(ngModel)]="title.Title" name="title" type="text" />
+               <button class="button"
+                       type="button"
+                       id="saveTitle"
+                       (click)="saveTitle()">Speichern</button>
+       </form>
+       <div *ngFor="let subtitle of title.Subtitles; let i = index">
+               <app-subtitle [subtitle]="subtitle"></app-subtitle>
+               <button class="button"
+                       type="button"
+                       (click)="insertSubSection(i)">Einfügen Unterteil</button>
+               <button class="button"
+                       type="button"
+                       (click)="removeSubSection(i)">Lösche Unterteil</button>
+       </div>
+</div>

diff --git a/src/app/title/title.component.spec.ts b/src/app/title/title.component.spec.ts
new file mode 100644 (file)
index 0000000..79e4f28
--- /dev/null
+++ b/src/app/title/title.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TitleComponent } from './title.component';
+
+describe('TitleComponent', () => {
+  let component: TitleComponent;
+  let fixture: ComponentFixture<TitleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TitleComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TitleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diff --git a/src/app/title/title.component.ts b/src/app/title/title.component.ts
new file mode 100644 (file)
index 0000000..1b1b20b
--- /dev/null
+++ b/src/app/title/title.component.ts
@@ -0,0 +1,43 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ITitle } from '../ititle';
+
+@Component({
+       selector: 'app-title',
+       templateUrl: './title.component.html',
+       styleUrls: ['./title.component.css']
+})
+
+export class TitleComponent implements OnInit
+{
+       @Input() title: ITitle = { Title: "", Subtitles: [] };
+       public formTitleVisible: boolean = false;
+
+       constructor() {}
+
+       ngOnInit(): void
+       {
+               if (this.title.Title === "")
+                       this.formTitleVisible = true;
+       }
+
+       public editTitle(): void
+       {
+               this.formTitleVisible = true;
+       }
+
+       public saveTitle(): void
+       {
+               this.formTitleVisible = false;
+       }
+
+       public insertSubSection(index: number): void
+       {
+               this.title.Subtitles.splice(index + 1, 0,
+                       { Subtitle: "", Foods: [] });
+       }
+
+       public removeSubSection(index: number)
+       {
+               this.title.Subtitles.splice(index, 1);
+       }
+}