From 8511d7f641947100c45de106be1c242a6d1cc6da Mon Sep 17 00:00:00 2001 From: Bastian Dehn Date: Thu, 9 Jun 2022 20:09:24 +0200 Subject: [PATCH] add: title component --- src/app/app.component.css | 46 ------------------- src/app/app.component.html | 40 ++--------------- src/app/app.component.ts | 63 ++------------------------- src/app/app.module.ts | 4 +- src/app/title/title.component.css | 38 ++++++++++++++++ src/app/title/title.component.html | 23 ++++++++++ src/app/title/title.component.spec.ts | 25 +++++++++++ src/app/title/title.component.ts | 43 ++++++++++++++++++ 8 files changed, 139 insertions(+), 143 deletions(-) create mode 100644 src/app/title/title.component.css create mode 100644 src/app/title/title.component.html create mode 100644 src/app/title/title.component.spec.ts create mode 100644 src/app/title/title.component.ts diff --git a/src/app/app.component.css b/src/app/app.component.css index 7fd2219..4406b65 100644 --- 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 fe4fc0e..171b955 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -13,35 +13,13 @@ [hidden]="downloadJsonHref === ''" download="speisekarte.json">Download - - -
- - - - - -
+ id="addTitle" + (click)="addTitle()">Titel Hinzufügen
-

{{title.Title}}

- + @@ -51,17 +29,7 @@ -
- - - -
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e59c288..481e5ed 100644 --- 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 = [ -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 3a6aca1..989ba5b 100644 --- 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 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 index 0000000..4d25ee8 --- /dev/null +++ b/src/app/title/title.component.html @@ -0,0 +1,23 @@ +
+

{{title.Title}}

+ +
+ + + +
+
+ + + +
+
diff --git a/src/app/title/title.component.spec.ts b/src/app/title/title.component.spec.ts new file mode 100644 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; + + 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 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); + } +} -- 2.39.5