diff --git a/src/app/app.component.html b/src/app/app.component.html index df7ac95..820b997 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,90 +1,5 @@ + + -

Einkaufszettel1

- -

Neuen Einkaufszettel Eintrag anlegen:

-
-
-
-
- -
- -
- -
- -
-
- -
- -
-
- -
-
-
- -
-
- -
-
-
- -
-
- -
-
- -
- -
- -
- -
- -
-
- -
- -
-
- -
-
-
- -
-
-
-
- - -
- *Bitte geben sie eine Kategorie ein! -
-
-
-
- - -
-
-
-
- + diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 118f625..fca7673 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -16,11 +16,6 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'Einkaufszettel'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('Einkaufszettel'); - }); it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 47d5563..b35cd4c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,80 +1,15 @@ -import {Component} from '@angular/core'; -import {initialEntries} from './components/blog-entry/initialEntries'; -import {BlogEntry} from './components/blog-entry/blog-entry'; -import {FormBuilder, Validators} from '@angular/forms'; +import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: 'app.component.html' }) -export class AppComponent { +export class AppComponent implements OnInit { - title = 'Einkaufszettel'; - entries: BlogEntry[] = []; - isSubmitted = false; - Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges']; - - constructor(public fb: FormBuilder) { - this.entries = []; - this.entries = initialEntries; - } - - // Getter method to access formcontrols - get kategorieName() { - return this.registrationForm.get('kategorieName'); - } - - /*########### Form ###########*/ - registrationForm = this.fb.group({ - kategorieName: ['', [Validators.required]] - }); - saveTask(value: any){ - console.log(value); - } - - createBlogEntry(title: string, image: string, kategorie: string, menge: string, kommentar: string, ) { - if (title && image && kommentar && kategorie) { - const entry = new BlogEntry(); - entry.title = title; - entry.image = image; - entry.kategorie = kategorie; - entry.menge = menge; - entry.kommentar = kommentar; - this.entries.push(entry); - } - } - deleteAllEntries() { - console.log(this.entries.length); - const index: number = this.entries.length; - if (index !== -1) { - this.entries = this.entries.splice(index, 1); - } - } - deleteLastEntry() { - console.log(this.entries.length); - const index: number = this.entries.length; - if (index !== -1) { - this.entries.splice(index-1, 1); - } - } - - // Kategorie mit Drop Down Menu wählen - changeKategorie(e) { - console.log(e.value); - this.kategorieName.setValue(e.target.value, { - onlySelf: true - }); - } - - /*########### Template Driven Form ###########*/ - onSubmit() { - this.isSubmitted = true; - if (!this.registrationForm.valid) { - return false; - } else { - alert(JSON.stringify(this.registrationForm.value)); - } + constructor(){ } + ngOnInit(): void { + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fe94ff2..a2762e9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,6 +7,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import { NavbarComponent } from './navbar/navbar.component'; import { HeaderComponent } from './components/header/header.component'; import { FooterComponent } from './components/footer/footer.component'; +import { BlogCreateComponent } from './components/blog-create/blog-create.component'; @NgModule({ declarations: [ @@ -14,7 +15,8 @@ import { FooterComponent } from './components/footer/footer.component'; BlogEntryComponent, NavbarComponent, HeaderComponent, - FooterComponent + FooterComponent, + BlogCreateComponent ], imports: [ BrowserModule, diff --git a/src/app/components/blog-create/blog-create.component.css b/src/app/components/blog-create/blog-create.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/blog-create/blog-create.component.html b/src/app/components/blog-create/blog-create.component.html new file mode 100644 index 0000000..5304cfa --- /dev/null +++ b/src/app/components/blog-create/blog-create.component.html @@ -0,0 +1,87 @@ +

Einkaufszettel1

+ +

Neuen Einkaufszettel Eintrag anlegen:

+
+
+
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+
+ +
+
+
+ +
+
+
+
+ + +
+ *Bitte geben sie eine Kategorie ein! +
+
+
+
+ + +
+
+
+
diff --git a/src/app/components/blog-create/blog-create.component.spec.ts b/src/app/components/blog-create/blog-create.component.spec.ts new file mode 100644 index 0000000..31974f3 --- /dev/null +++ b/src/app/components/blog-create/blog-create.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BlogCreateComponent } from './blog-create.component'; + +describe('BlogCreateComponent', () => { + let component: BlogCreateComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BlogCreateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BlogCreateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/blog-create/blog-create.component.ts b/src/app/components/blog-create/blog-create.component.ts new file mode 100644 index 0000000..bfffa5f --- /dev/null +++ b/src/app/components/blog-create/blog-create.component.ts @@ -0,0 +1,83 @@ +import { Component, OnInit } from '@angular/core'; +import {BlogEntry} from "../blog-entry/blog-entry"; +import {FormBuilder, Validators} from "@angular/forms"; +import {initialEntries} from "../blog-entry/initialEntries"; + +@Component({ + selector: 'app-blog-create', + templateUrl: './blog-create.component.html', + styleUrls: ['./blog-create.component.css'] +}) +export class BlogCreateComponent implements OnInit { + title = 'Einkaufszettel'; + entries: BlogEntry[] = []; + isSubmitted = false; + Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges']; + + constructor(public fb: FormBuilder) { + this.entries = []; + this.entries = initialEntries; + } + + // Getter method to access formcontrols + get kategorieName() { + return this.registrationForm.get('kategorieName'); + } + + /*########### Form ###########*/ + registrationForm = this.fb.group({ + kategorieName: ['', [Validators.required]] + }); + saveTask(value: any){ + console.log(value); + } + + createBlogEntry(title: string, image: string, kategorie: string, menge: string, kommentar: string, ) { + if (title && image && kommentar && kategorie) { + const entry = new BlogEntry(); + entry.title = title; + entry.image = image; + entry.kategorie = kategorie; + entry.menge = menge; + entry.kommentar = kommentar; + this.entries.push(entry); + } + } + deleteAllEntries() { + console.log(this.entries.length); + const index: number = this.entries.length; + if (index !== -1) { + this.entries = this.entries.splice(index, 1); + } + } + deleteLastEntry() { + console.log(this.entries.length); + const index: number = this.entries.length; + if (index !== -1) { + this.entries.splice(index-1, 1); + } + } + + // Kategorie mit Drop Down Menu wählen + changeKategorie(e) { + console.log(e.value); + this.kategorieName.setValue(e.target.value, { + onlySelf: true + }); + } + + /*########### Template Driven Form ###########*/ + onSubmit() { + this.isSubmitted = true; + if (!this.registrationForm.valid) { + return false; + } else { + alert(JSON.stringify(this.registrationForm.value)); + } + + } + + ngOnInit(): void { + } + +}