Add Blog Component to projectmanager

project-manager-reactive/src/app/app.component.html

@@ -28,6 +28,9 @@
           <li routerLinkActive="active">
             <a routerLink='/rxdemo' class="link">RxJS Demo</a>
           </li>
+          <li routerLinkActive="active">
+            <a routerLink='/blog' class="link">Blog</a>
+          </li>
           <!--
           <li routerLinkActive="active">
             <a routerLink='/tasks/new' class="link">Neue Aufgabe anlegen</a>
@@ -81,4 +84,4 @@
     <div id="right">
       <router-outlet name="right"></router-outlet>
     </div>
-</div>
+</div>

project-manager-reactive/src/app/app.routing.ts

@@ -4,8 +4,9 @@ import {DashboardComponent} from './dashboard/dashboard.component';
 import {SettingsComponent} from './settings/settings.component';
 import {AboutComponent} from './about/about.component';
 import {LoginComponent} from './login/index';
+import {BlogComponent} from  './blog/blog.component';
 import {NotFoundComponent} from './not-found/not-found.component';
-import {tasksRoutes, tasksRoutingComponents, tasksRoutingProviders} from './tasks/tasks.routing';
+import {tasksRoutes, tasksRoutingComponents, tasksRoutingProviders, blogComponents} from './tasks/tasks.routing';
 import {RxDemoComponent} from './rxdemo/rxdemo.component';
 import {LoginGuard} from './login/login.guard';
 
@@ -16,6 +17,8 @@ export const appRoutes: Routes = [
   },
   {path: 'about', component: AboutComponent, data: {title: 'Über uns'}},
   {path: 'rxdemo', component: RxDemoComponent, data: {title: 'RxJS Demo'}},
+  {path: 'blog', component: BlogComponent, data: {title: 'Blog'}},
+
   {path: 'login', component: LoginComponent},
 
   {path: 'tasks', canActivate: [LoginGuard], children: tasksRoutes},
@@ -30,7 +33,7 @@ export const appRoutes: Routes = [
 export const appRouting = RouterModule.forRoot(appRoutes);
 
 export const routingComponents = [DashboardComponent, SettingsComponent, AboutComponent, LoginComponent, NotFoundComponent,
-  RxDemoComponent,  ...tasksRoutingComponents];
+  RxDemoComponent, ...blogComponents,  ...tasksRoutingComponents];
 
 export const routingProviders = [LoginGuard,
-  ...tasksRoutingProviders];
+  ...tasksRoutingProviders];

project-manager-reactive/src/app/blog/blog-entry.component.html

@@ -0,0 +1,12 @@
+<div class="blog-entry">
+    <div class="blog-image">
+        <img [src]="entry.image" [alt]="entry.title"/>
+    </div>
+    <div class="blog-summary">
+        <span class="title">{{entry.title}}</span>
+        <p> {{entry.text}}</p>
+    </div>
+    <div class="blog-delete">
+        <button (click)="deleteBlogEntry(entry.id)">delete</button>
+    </div>
+</div>

project-manager-reactive/src/app/blog/blog-entry.component.ts

@@ -0,0 +1,17 @@
+import {Component, Input } from '@angular/core';
+import {BlogEntry} from './blog-entry';
+import {BlogComponent} from "./blog.component";
+
+@Component({
+  selector: 'blog-entry',
+  templateUrl: 'blog-entry.component.html'
+})
+export class BlogEntryComponent {
+  @Input() blogComponent: BlogComponent;
+  @Input() entry: BlogEntry;
+
+  deleteBlogEntry(id:number) {
+    this.blogComponent.deleteBlogEntry(id);
+  }
+
+}

project-manager-reactive/src/app/blog/blog-entry.ts

@@ -0,0 +1,6 @@
+export class BlogEntry {
+  id :number;
+  title: string;
+  text: string;
+  image: string;
+}

project-manager-reactive/src/app/blog/blog.component.css

@@ -0,0 +1,65 @@
+body {
+  font-family: Helvetica;
+  padding-left: 15px;
+}
+
+.form {
+  background-color: #eee;
+  width: 580px; /* Breite des Formulars */
+  padding: 20px;
+  border: 1px solid #8c8c8c;
+  position: absolute;
+  margin-bottom: 25px;
+}
+
+.control {
+  display: flex;
+}
+
+label {
+  width: 100px;
+  cursor: pointer;
+}
+
+input,
+textarea {
+  width: 550px;
+  border: 1px solid #8c8c8c;
+  margin-bottom: 1em;
+}
+
+span.title {
+  font-size: x-large;
+}
+
+.clear-fix {
+  clear: both;
+}
+
+.blog-entry {
+  width: 600px;
+  display: flex;
+  padding-bottom: 30px;
+}
+
+button {
+  float: right;
+  padding-right: 20px;
+}
+
+.blog-image {
+  width: 30%;
+}
+
+img {
+  max-width: 90%;
+  max-height: 100px;
+}
+
+.blog-summary {
+  width: 70%;
+}
+
+textarea {
+  height: 7em;
+}

project-manager-reactive/src/app/blog/blog.component.html

@@ -0,0 +1,25 @@
+<h1>Mein Angular-Blog</h1>
+<blog-entry *ngFor="let entry of entries" [entry]="entry" [blogComponent]="this"></blog-entry>
+<h2>Neuen Blog-Eintrag erstellen</h2>
+
+<div class="form">
+
+  <div class="control">
+    <label for="title">Titel:</label>
+    <input type="text" id="title" #title />
+  </div>
+  <div class="control">
+    <label for="title">Bild-URL:</label>
+    <input type="text" id="image" #image />
+  </div>
+  <div class="control">
+    <label for="text">Text:</label>
+    <textarea id="text" cols="20" rows="3" #text>
+    </textarea>
+  </div>
+  <div>
+    <button (click)="createBlogEntry(title.value, image.value, text.value)">
+      Blog-Eintrag anlegen
+    </button>
+  </div>
+</div>

project-manager-reactive/src/app/blog/blog.component.ts

@@ -0,0 +1,44 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, ActivatedRouteSnapshot, Router, RouterStateSnapshot} from '@angular/router';
+import {Title} from '@angular/platform-browser';
+import {initialEntries} from './initialEntries';
+import {BlogEntry} from './blog-entry';
+
+@Component({
+  selector: 'blog',
+  templateUrl: 'blog.component.html',
+  styleUrls: ['blog.component.css']
+})
+
+export class BlogComponent {
+
+  entries: BlogEntry[] = [];
+  id = 0;
+
+  constructor(r: ActivatedRoute, private router: Router, private titleService: Title) {
+    this.entries = [];
+    this.entries = initialEntries;
+    this.id = this.entries[this.entries.length-1].id;
+  }
+
+  createBlogEntry(title:string, image:string, text:string) {
+    this.id++;
+    console.log(this.id, title, image, text);
+    let entry = new BlogEntry();
+    entry.id = this.id;
+    entry.title = title;
+    entry.image = image;
+    entry.text = text;
+
+    this.entries.push(entry);
+  }
+
+  deleteBlogEntry(id:number) {
+    let entryIndex = this.entries.findIndex(entry => entry.id === id);
+    if (entryIndex > -1) {
+      this.entries.splice(entryIndex, 1);
+    }
+  }
+
+}
+

project-manager-reactive/src/app/blog/index.ts

@@ -0,0 +1 @@
+export * from './blog.component';

project-manager-reactive/src/app/tasks/tasks.routing.ts

@@ -5,6 +5,8 @@ import {EditTaskGuard} from './edit-task/edit-task.guard';
 import {TaskOverviewComponent} from './task-overview/task-overview.component';
 import {TasksComponent} from './tasks.component';
 import {LoginGuard} from '../login/login.guard';
+import {BlogComponent} from "../blog/blog.component";
+import {BlogEntryComponent} from "../blog/blog-entry.component";
 
 export const tasksRoutes: Routes = [{
   path: '', component: TasksComponent,
@@ -32,4 +34,5 @@ export const tasksRoutes: Routes = [{
   }];
 
 export const tasksRoutingComponents = [TasksComponent, TaskListComponent, EditTaskComponent, TaskOverviewComponent];
-export const tasksRoutingProviders = [EditTaskGuard];
+export const tasksRoutingProviders = [EditTaskGuard];
+export const blogComponents = [BlogComponent, BlogEntryComponent];