add: foodcard component

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 171b9552ac7de9251d4113acb8df6396df4ca32c..fcf353f691b0380f83f3418d7f22c8b0420e4832 100644 (file)
--- 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 481e5eddf136e19aa92f3aff558bf7858412e56c..2e1c266ae8f6782940f8ce761e9330357b386c83 100644 (file)
--- 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 989ba5be0e7a31290ed2311e7a5efcfa63902c5a..1ed8a8b83eedef339f5aeb2ae55db908ef4ae375 100644 (file)
--- 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 (file)
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 (file)
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 (file)
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 (file)
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: [] });
+       }
+}