greifch67520/MDT5_Angular
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: greifch67520:10d2fcf3b35866e8ef8c88a5b22ce476153188eb
Branches Tags
greifch67520:master
...
compare: greifch67520:cc693d3c95ea262b9051fa02b660ada4f6885196
Branches Tags
greifch67520:master

2 Commits
10d2fcf3b3 ... cc693d3c95

Author SHA1 Message Date
Christian Greif
cc693d3c95 V0.1g Weitere Modulasierung der Components / Layouts 2020-06-11 23:00:52 +02:00
Christian Greif
ff7c00e08c V0.1f Layout Modularisierung mittels Components + Implementierung Basisfunktion Navbar 2020-06-11 22:51:39 +02:00
24 changed files with 373 additions and 164 deletions
Show Stats Expand all files Collapse all files

90
src/app/app.component.html
View File

@ -1,89 +1,5 @@
<h1>Einkaufszettel</h1>
<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
<h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
<div>
<form (ngSubmit)="saveTask(form.value)" #form="ngForm">
<div class="form-group">
<div><label for="title">Titel* </label></div>
<div>
<input type="text" class="form-control" name="title" id="title" #title ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="image">Bild-URL* </label></div>
<div>
<input type="text" class="form-control" name="title" id="image" #image ngModel required/>
</div>
</div>
<div class="form-group">
<div><label>Kategorie* </label></div>
<div>
<input type="text" class="form-control" id="kategorie" #kategorie ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="menge">Menge* </label></div>
<div>
<input type="text" class="form-control" name="title" id="menge" #menge ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="kommentar">Kommentar: </label></div>
<textarea id="kommentar" #kommentar cols="20" rows="3" #text>
</textarea>
</div>
<div class="form-group">
<button (click)="createBlogEntry(title.value, image.value, kategorie.value,menge.value, kommentar.value)">
Eintrag anlegen
</button>
</div>
<div>
<button (click)="deleteAllEntries()">
Alle Einträge löschen
</button>
</div>
<div>
<button (click)="deleteLastEntry()">
Letzten Eintrag Löschen
</button>
</div>
</form>
</div>
<div class="container">
<div class="row custom-wrapper">
<div class="col-md-12">
<!-- Form starts -->
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
<div class="group-gap">
<div class="d-block my-3">
<div class="mb-3">
<select class="custom-select" (change)="changeKategorie($event)" formControlName="kategorieName">
<option value="">Wählen sie eine Kategorie</option>
<option *ngFor="let kategorie of Kategorien" [ngValue]="kategorie">{{kategorie}}</option>
</select>
<!-- error block -->
<div class="invalid-feedback" *ngIf="isSubmitted && kategorieName.errors?.required">
<sup>*</sup>Bitte geben sie eine Kategorie ein!
</div>
</div>
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button>
</form><!-- Form ends -->
</div>
</div>
</div>
<app-header></app-header>
<app-blog-create></app-blog-create>
<app-footer></app-footer>

5
src/app/app.component.spec.ts
View File

@ -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);

75
src/app/app.component.ts
View File

@ -1,80 +1,15 @@
import {Component} from '@angular/core';
import {initialEntries} from './initialEntries';
import {BlogEntry} from './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 {
}
}

12
src/app/app.module.ts
View File

@ -1,14 +1,22 @@
import { BlogEntryComponent } from './blog-entry.component';
import { BlogEntryComponent } from './components/blog-entry/blog-entry.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
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: [
AppComponent,
BlogEntryComponent
BlogEntryComponent,
NavbarComponent,
HeaderComponent,
FooterComponent,
BlogCreateComponent
],
imports: [
BrowserModule,

0
src/app/components/blog-create/blog-create.component.css Normal file
View File

87
src/app/components/blog-create/blog-create.component.html Normal file
View File

@ -0,0 +1,87 @@
<h1>Einkaufszettel1</h1>
<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
<h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
<div>
<form (ngSubmit)="saveTask(form.value)" #form="ngForm">
<div class="form-group">
<div><label for="title">Titel* </label></div>
<div>
<input type="text" class="form-control" name="title" id="title" #title ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="image">Bild-URL* </label></div>
<div>
<input type="text" class="form-control" name="title" id="image" #image ngModel required/>
</div>
</div>
<div class="form-group">
<div><label>Kategorie* </label></div>
<div>
<input type="text" class="form-control" id="kategorie" #kategorie ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="menge">Menge* </label></div>
<div>
<input type="text" class="form-control" name="title" id="menge" #menge ngModel required/>
</div>
</div>
<div class="form-group">
<div><label for="kommentar">Kommentar: </label></div>
<textarea id="kommentar" #kommentar cols="20" rows="3" #text>
</textarea>
</div>
<div class="form-group">
<button (click)="createBlogEntry(title.value, image.value, kategorie.value,menge.value, kommentar.value)">
Eintrag anlegen
</button>
</div>
<div>
<button (click)="deleteAllEntries()">
Alle Einträge löschen
</button>
</div>
<div>
<button (click)="deleteLastEntry()">
Letzten Eintrag Löschen
</button>
</div>
</form>
</div>
<div class="container">
<div class="row custom-wrapper">
<div class="col-md-12">
<!-- Form starts -->
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
<div class="group-gap">
<div class="d-block my-3">
<div class="mb-3">
<select class="custom-select" (change)="changeKategorie($event)" formControlName="kategorieName">
<option value="">Wählen sie eine Kategorie</option>
<option *ngFor="let kategorie of Kategorien" [ngValue]="kategorie">{{kategorie}}</option>
</select>
<!-- error block -->
<div class="invalid-feedback" *ngIf="isSubmitted && kategorieName.errors?.required">
<sup>*</sup>Bitte geben sie eine Kategorie ein!
</div>
</div>
</div>
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button>
</form><!-- Form ends -->
</div>
</div>
</div>

25
src/app/components/blog-create/blog-create.component.spec.ts Normal file
View File

@ -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<BlogCreateComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ BlogCreateComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(BlogCreateComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

83
src/app/components/blog-create/blog-create.component.ts Normal file
View File

@ -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 {
}
}

0
src/app/blog-entry.component.html → src/app/components/blog-entry/blog-entry.component.html
View File

0
src/app/blog-entry.component.ts → src/app/components/blog-entry/blog-entry.component.ts
View File

0
src/app/blog-entry.ts → src/app/components/blog-entry/blog-entry.ts
View File

0
src/app/initialEntries.ts → src/app/components/blog-entry/initialEntries.ts
View File

0
src/app/components/footer/footer.component.css Normal file
View File

10
src/app/components/footer/footer.component.html Normal file
View File

@ -0,0 +1,10 @@
<!-- footer -->
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
Made by Christian Greif - greifch67520@th-nuernberg.de - <a href="https://www.th-nuernberg.de/">Technische Hochschule Nürnberg</a>
</p>
</div>
</div>
</footer>

25
src/app/components/footer/footer.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
describe('FooterComponent', () => {
let component: FooterComponent;
let fixture: ComponentFixture<FooterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FooterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FooterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/components/footer/footer.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

0
src/app/components/header/header.component.css Normal file
View File

5
src/app/components/header/header.component.html Normal file
View File

@ -0,0 +1,5 @@
<!-- header -->
<header>
<img src="https://ranking.zeit.de/che/images/logos/Hochschule_400.jpg">
<app-navbar></app-navbar>
</header>

25
src/app/components/header/header.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HeaderComponent } from './header.component';
describe('HeaderComponent', () => {
let component: HeaderComponent;
let fixture: ComponentFixture<HeaderComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HeaderComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

11
src/app/components/header/header.component.ts Normal file
View File

@ -0,0 +1,11 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor() {}
ngOnInit() {}
}

0
src/app/navbar/navbar.component.css Normal file
View File

23
src/app/navbar/navbar.component.html Normal file
View File

@ -0,0 +1,23 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
Menü
</a>
<button class="navbar-toggler" type="button"
(click)="toggleNavbar()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
[ngClass]="{ 'show': navbarOpen }">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Einkaufszettel 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Einkaufszettel 2</a>
</li>
</ul>
</div>
</nav>

25
src/app/navbar/navbar.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NavbarComponent } from './navbar.component';
describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavbarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

21
src/app/navbar/navbar.component.ts Normal file
View File

@ -0,0 +1,21 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
navbarOpen = false;
constructor() {
}
toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
ngOnInit(): void {
this.navbarOpen = !this.navbarOpen;
}
}