Fix model driven form routing; Add ChatComponent

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

@@ -88,4 +88,11 @@
   <div id="right">
     <router-outlet name="right"></router-outlet>
   </div>
+  <div id="footer">
+    <router-outlet name="bottom"></router-outlet>
+  </div>
+  <button type="button" class="btn btn-primary chat-button"
+          (click)="toggleChat()">
+    <span class="glyphicon glyphicon-comment"></span>
+  </button>
 </div>

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

@@ -65,6 +65,13 @@ export class AppComponent {
     return false;
   }
 
+  toggleChat() {
+    if (!this.router.url.includes('chat')) {
+      this.router.navigate([ {outlets: {'bottom': [ 'chat']}}]);
+    } else {
+      this.router.navigate([ {outlets: {'bottom': null}}]);
+    }
+  }
 
 }
 

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

@@ -11,6 +11,8 @@ import {RxDemoComponent} from './rxdemo/rxdemo.component';
 import {LoginGuard} from './login/login.guard';
 import {blogRoutingComponents} from "./blog/blog.routing";
 import {ModelDrivenFormComponent} from "./model-driven-form/model-driven-form.component";
+import {modelDrivenFormRoutingProviders} from "./model-driven-form/model-driven-form.routing";
+import {ChatComponent} from "./chat-component/chat.component";
 
 export const appRoutes: Routes = [
   {path: 'dashboard', component: DashboardComponent, data: {title: 'Startseite'}},
@@ -21,6 +23,8 @@ export const appRoutes: Routes = [
   {path: 'blog', component: BlogComponent, data: {title: 'Blog'}},
   {path: 'model-form', component: ModelDrivenFormComponent, data: {title: 'Model Driven Task Form'}},
 
+  {path: 'chat', component: ChatComponent, outlet: 'bottom'},
+
   {path: 'login', component: LoginComponent},
 
   {path: 'tasks', canActivate: [LoginGuard], children: tasksRoutes},
@@ -35,7 +39,7 @@ export const appRoutes: Routes = [
 export const appRouting = RouterModule.forRoot(appRoutes);
 
 export const routingComponents = [DashboardComponent, SettingsComponent, AboutComponent, LoginComponent, NotFoundComponent,
-  RxDemoComponent, ModelDrivenFormComponent, ...blogRoutingComponents, ...tasksRoutingComponents];
+  RxDemoComponent, ModelDrivenFormComponent, ChatComponent, ...blogRoutingComponents, ...tasksRoutingComponents];
 
-export const routingProviders = [LoginGuard,
+export const routingProviders = [LoginGuard, ...modelDrivenFormRoutingProviders,
   ...tasksRoutingProviders];

project-manager/src/app/chat-component/chat.component.css

@@ -0,0 +1,59 @@
+.chat
+{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.chat li
+{
+    margin-bottom: 10px;
+    padding-bottom: 5px;
+    border-bottom: 1px dotted #B3A9A9;
+}
+
+.chat li.left .chat-body
+{
+    margin-left: 60px;
+}
+
+.chat li.right .chat-body
+{
+    margin-right: 60px;
+}
+
+
+.chat li .chat-body p
+{
+    margin: 0;
+    color: #777777;
+}
+
+.panel .slidedown .glyphicon, .chat .glyphicon
+{
+    margin-right: 5px;
+}
+
+.panel-body
+{
+    overflow-y: scroll;
+    height: 250px;
+}
+
+::-webkit-scrollbar-track
+{
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar
+{
+    width: 12px;
+    background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb
+{
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #555;
+}

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

@@ -0,0 +1,83 @@
+  <div class="row">
+    <div class="col-xs-7"></div>
+    <div class="col-xs-4">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <span class="glyphicon glyphicon-comment"></span> Chat
+        </div>
+        <div class="panel-body">
+          <ul class="chat">
+            <!--
+            <li class="left clearfix"><span class="chat-img pull-left">
+                            <img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" class="img-circle">
+                        </span>
+              <div class="chat-body clearfix">
+                <div class="header">
+                  <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
+                  <span class="glyphicon glyphicon-time"></span>12 mins ago</small>
+                </div>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
+                  dolor, quis ullamcorper ligula sodales.
+                </p>
+              </div>
+            </li>
+            <li class="right clearfix"><span class="chat-img pull-right">
+                            <img src="http://placehold.it/50/FA6F57/fff&amp;text=ME" alt="User Avatar" class="img-circle">
+                        </span>
+              <div class="chat-body clearfix">
+                <div class="header">
+                  <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small>
+                  <strong class="pull-right primary-font">Bhaumik Patel</strong>
+                </div>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
+                  dolor, quis ullamcorper ligula sodales.
+                </p>
+              </div>
+            </li>
+            <li class="left clearfix"><span class="chat-img pull-left">
+                            <img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" class="img-circle">
+                        </span>
+              <div class="chat-body clearfix">
+                <div class="header">
+                  <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
+                  <span class="glyphicon glyphicon-time"></span>14 mins ago</small>
+                </div>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
+                  dolor, quis ullamcorper ligula sodales.
+                </p>
+              </div>
+            </li>
+            <li class="right clearfix"><span class="chat-img pull-right">
+                            <img src="http://placehold.it/50/FA6F57/fff&amp;text=ME" alt="User Avatar" class="img-circle">
+                        </span>
+              <div class="chat-body clearfix">
+                <div class="header">
+                  <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small>
+                  <strong class="pull-right primary-font">Bhaumik Patel</strong>
+                </div>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
+                  dolor, quis ullamcorper ligula sodales.
+                </p>
+              </div>
+            </li>
+            -->
+          </ul>
+        </div>
+        <div class="panel-footer">
+          <div class="input-group">
+            <input id="btn-input" type="text" class="form-control input-sm" placeholder="Geben Sie hier Ihre Nachricht ein...">
+            <span class="input-group-btn">
+                            <button class="btn btn-warning btn-sm" id="btn-chat">
+                                Absenden</button>
+                        </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-1"></div>
+
+  </div>

project-manager/src/app/chat-component/chat.component.ts

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

project-manager/src/app/chat-component/index.ts

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

project-manager/src/app/model-driven-form/model-driven-form.routing.ts

@@ -1,3 +1,3 @@
-import {ModelDrivenFormComponent} from "./model-driven-form.component";
+import {TaskServiceModelForm} from "../services/task-service/task-model-form.service";
 
-export const modelDrivenFormRoutingComponent = [ModelDrivenFormComponent];
+export const modelDrivenFormRoutingProviders = [TaskServiceModelForm];

project-manager/src/styles.css

@@ -47,3 +47,9 @@ form {
 #right {
   overflow: hidden
 }
+
+.chat-button {
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+}