Angular 2 : draft 2

3 files changed, 32 insertions, 5 deletions

diff --git a/client/angular/app/app.component.html b/client/angular/app/app.component.html
index 590efa0d6..af41f8686 100644
--- a/client/angular/app/app.component.html
+++ b/client/angular/app/app.component.html
@@ -1,5 +1,19 @@
 <div class="container">
 
+  <header class="row">
+    <div class="col-md-2">
+      <h4>PeerTube</h4>
+    </div>
+
+    <div class="col-md-8">
+      <input
+        type="text" id="search_video" name="search_video" class="form-control" placeholder="Search a video..."
+        #search (keyup.enter)="doSearch(search.value)"
+      >
+    </div>
+  </header>
+
+
   <div class="row">
 
     <menu class="col-md-2">
diff --git a/client/angular/app/app.component.scss b/client/angular/app/app.component.scss
index 03ecba8f2..346460a31 100644
--- a/client/angular/app/app.component.scss
+++ b/client/angular/app/app.component.scss
@@ -1,3 +1,9 @@
+header div {
+  height: 50px;
+  line-height: 25px;
+  margin-bottom: 30px;
+}
+
 menu {
   min-height: 300px;
   height: 100%;
diff --git a/client/angular/app/app.component.ts b/client/angular/app/app.component.ts
index 3d41183f2..cb961a3c8 100644
--- a/client/angular/app/app.component.ts
+++ b/client/angular/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component, ElementRef } from 'angular2/core';
-import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
-import {HTTP_PROVIDERS} from 'angular2/http';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router } from 'angular2/router';
+import { HTTP_PROVIDERS } from 'angular2/http';
 
 import { VideosAddComponent } from '../videos/components/add/videos-add.component';
 import { VideosListComponent } from '../videos/components/list/videos-list.component';
@@ -36,15 +36,22 @@ import { FriendsService } from '../friends/services/friends.service';
 })
 
 export class AppComponent {
-  constructor(private _friendsService: FriendsService) {}
+  constructor(private _friendsService: FriendsService, private _router: Router) {}
+
+  doSearch(search: string) {
+    if (search !== '') {
+      this._router.navigate(['VideosList', { search: search }]);
+    } else {
+      this._router.navigate(['VideosList']);
+    }
+  }
 
   makeFriends() {
     this._friendsService.makeFriends().subscribe(
       status => {
         if (status === 409) {
           alert('Already made friends!');
-        }
-        else {
+        } else {
           alert('Made friends!');
         }
       },