From 10d2fcf3b35866e8ef8c88a5b22ce476153188eb Mon Sep 17 00:00:00 2001
From: Christian Greif <greifch67520@th-nuernberg.de>
Date: Thu, 11 Jun 2020 21:58:21 +0200
Subject: [PATCH] =?UTF-8?q?V0.1e=20=C3=9Cberarbeitung=20des=20Layouts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/app.component.html | 117 +++++++++++++++++++++++--------------
 src/app/app.component.ts   |   7 ++-
 src/styles.css             |  10 ++--
 3 files changed, 82 insertions(+), 52 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3e16455..01bb299 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,60 +1,89 @@
 <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 class="form">
-<form novalidate (ngSubmit)="saveTask(form.value)" #form="ngForm">
-  <div class="form-group">
-    <label for="title">Titel*</label>
-    <input type="text" class="form-control" name="title" id="title" #title ngModel required/>
+      <div>
+        <input type="text" class="form-control" name="title" id="title" #title ngModel required/>
+      </div>
 
-    <label for="image">Bild-URL*</label>
-    <input type="text" class="form-control" name="title" id="image" #image ngModel required/>
+    </div>
 
-    <label>Kategorie*</label>
-    <input type="text" class="form-control"  id="kategorie" #kategorie ngModel required/>
+    <div class="form-group">
+      <div><label for="image">Bild-URL* </label></div>
 
-    <label for="menge">Menge*</label>
-    <input type="text" class="form-control" name="title" id="menge" #menge ngModel required/>
+      <div>
+        <input type="text" class="form-control" name="title" id="image" #image ngModel required/>
+      </div>
+    </div>
 
-    <label for="kommentar">Kommentar: </label>
-    <textarea id="kommentar" #kommentar cols="20" rows="3" #text>
+    <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>
-  <button (click)="createBlogEntry(title.value, image.value, kategorie.value,menge.value, kommentar.value)">
-    Eintrag anlegen
-  </button>
-  <button (click)="deleteAllEntries()">
-    Alle Einträge löschen
-  </button>
-  <button (click)="deleteLastEntry()">
-    Letzten Eintrag Löschen
-  </button>
+    </div>
 
-</form>
-  <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 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>
-          <!-- Submit Button -->
-          <button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button>
-        </form><!-- Form ends -->
-      </div>
+        </div>
+        <!-- Submit Button -->
+        <button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button>
+      </form><!-- Form ends -->
     </div>
   </div>
 </div>
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3582ff3..2ceb8b5 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -32,7 +32,7 @@ export class AppComponent {
  }
 
   createBlogEntry(title: string, image: string, kategorie: string, menge: string, kommentar: string, ) {
-    if (title && image && kommentar && kategorie) {
+    //if (title && image && kommentar && kategorie) {
       const entry = new BlogEntry();
       entry.title = title;
       entry.image = image;
@@ -40,7 +40,7 @@ export class AppComponent {
       entry.menge = menge;
       entry.kommentar = kommentar;
       this.entries.push(entry);
-    }
+    //}
   }
   deleteAllEntries() {
     console.log(this.entries.length);
@@ -56,7 +56,8 @@ export class AppComponent {
         this.entries.splice(index-1, 1);
       }
     }
-  // Kategorie mit Drop Down Menu wählen
+
+    // Kategorie mit Drop Down Menu wählen
   changeKategorie(e) {
     console.log(e.value);
     this.kategorieName.setValue(e.target.value, {
diff --git a/src/styles.css b/src/styles.css
index 5479761..d8e07c4 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5,7 +5,7 @@ body {
 
 .form {
   background-color: #eee;
-  width: 580px; /* Breite des Formulars */
+  width: 500px; /* Breite des Formulars */
   padding: 20px;
   border: 1px solid #8c8c8c;
   position: absolute;
@@ -23,7 +23,7 @@ label {
 
 input,
 textarea {
-  width: 550px;
+  width: 500px;
   border: 1px solid #8c8c8c;
   margin-bottom: 1em;
 }
@@ -37,14 +37,14 @@ span.title {
 }
 
 .blog-entry {
-  width: 600px;
+  width: 500px;
   display: flex;
   padding-bottom: 30px;
 }
 
 button {
-  float: right;
-  padding-right: 20px;
+  float: left;
+  padding-right: 10px;
 }
 
 .blog-image {