3 files changed, 128 insertions, 0 deletions

diff --git a/client/angular/app/app.component.html b/client/angular/app/app.component.html
new file mode 100644
index 000000000..590efa0d6
--- /dev/null
+++ b/client/angular/app/app.component.html
@@ -0,0 +1,37 @@
+<div class="container">
+
+  <div class="row">
+
+    <menu class="col-md-2">
+      <div id="panel_get_videos" class="panel_button">
+        <span class="glyphicon glyphicon-list"></span>
+        <a [routerLink]="['VideosList']">Get videos</a>
+      </div>
+
+      <div id="panel_upload_video" class="panel_button">
+        <span class="glyphicon glyphicon-cloud-upload"></span>
+        <a [routerLink]="['VideosAdd']">Upload a video</a>
+      </div>
+
+      <div id="panel_make_friends" class="panel_button">
+        <span class="glyphicon glyphicon-user"></span>
+        <a (click)='makeFriends()'>Make friends</a>
+      </div>
+
+      <div id="panel_quit_friends" class="panel_button">
+        <span class="glyphicon glyphicon-plane"></span>
+        <a (click)='quitFriends()'>Quit friends</a>
+      </div>
+    </menu>
+
+    <div class="col-md-9 router_outler_container">
+      <router-outlet></router-outlet>
+    </div>
+
+  </div>
+
+
+  <footer>
+    PeerTube, CopyLeft 2015-2016
+  </footer>
+</div>
diff --git a/client/angular/app/app.component.scss b/client/angular/app/app.component.scss
new file mode 100644
index 000000000..03ecba8f2
--- /dev/null
+++ b/client/angular/app/app.component.scss
@@ -0,0 +1,28 @@
+menu {
+  min-height: 300px;
+  height: 100%;
+  margin-right: 20px;
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+
+  .panel_button {
+    margin: 8px;
+    cursor: pointer;
+    transition: margin 0.2s;
+
+    &:hover {
+      margin-left: 15px;
+    }
+
+    a {
+      color: #333333;
+    }
+  }
+
+  .glyphicon {
+    margin: 5px;
+  }
+}
+
+footer {
+  margin-top: 30px;
+}
diff --git a/client/angular/app/app.component.ts b/client/angular/app/app.component.ts
new file mode 100644
index 000000000..3d41183f2
--- /dev/null
+++ b/client/angular/app/app.component.ts
@@ -0,0 +1,63 @@
+import { Component, ElementRef } from 'angular2/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } 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';
+import { VideosWatchComponent } from '../videos/components/watch/videos-watch.component';
+import { VideosService } from '../videos/services/videos.service';
+import { FriendsService } from '../friends/services/friends.service';
+
+@RouteConfig([
+  {
+    path: '/videos/list',
+    name: 'VideosList',
+    component: VideosListComponent,
+    useAsDefault: true
+  },
+  {
+    path: '/videos/watch/:id',
+    name: 'VideosWatch',
+    component: VideosWatchComponent
+  },
+  {
+    path: '/videos/add',
+    name: 'VideosAdd',
+    component: VideosAddComponent
+  }
+])
+
+@Component({
+    selector: 'my-app',
+    templateUrl: 'app/angular/app/app.component.html',
+    styleUrls: [ 'app/angular/app/app.component.css' ],
+    directives: [ ROUTER_DIRECTIVES ],
+    providers: [ ROUTER_PROVIDERS, HTTP_PROVIDERS, ElementRef, VideosService, FriendsService ]
+})
+
+export class AppComponent {
+  constructor(private _friendsService: FriendsService) {}
+
+  makeFriends() {
+    this._friendsService.makeFriends().subscribe(
+      status => {
+        if (status === 409) {
+          alert('Already made friends!');
+        }
+        else {
+          alert('Made friends!');
+        }
+      },
+      error => alert(error)
+    )
+  }
+
+  quitFriends() {
+    this._friendsService.quitFriends().subscribe(
+      status => {
+          alert('Quit friends!');
+      },
+      error => alert(error)
+    )
+  }
+}