Angular application :first draft

3 files changed, 84 insertions, 0 deletions

diff --git a/client/angular/videos/components/list/videos-list.component.html b/client/angular/videos/components/list/videos-list.component.html
new file mode 100644
index 000000000..7ecdacee4
--- /dev/null
+++ b/client/angular/videos/components/list/videos-list.component.html
@@ -0,0 +1,11 @@
+<div *ngFor="#video of videos" class="video">
+  <div>
+    <a [routerLink]="['VideosWatch', { id: video._id }]" class="video_name">{{ video.name }}</a>
+    <span class="video_pod_url">{{ video.podUrl }}</span>
+    <span *ngIf="video.namePath !== null" (click)="removeVideo(video._id)" class="video_remove glyphicon glyphicon-remove"></span>
+  </div>
+
+  <div class="video_description">
+    {{ video.description }}
+  </div>
+</div>
diff --git a/client/angular/videos/components/list/videos-list.component.scss b/client/angular/videos/components/list/videos-list.component.scss
new file mode 100644
index 000000000..82ddd80e5
--- /dev/null
+++ b/client/angular/videos/components/list/videos-list.component.scss
@@ -0,0 +1,34 @@
+.video {
+  margin-bottom: 10px;
+  transition: margin 0.5s ease;
+
+  &:hover {
+    margin-left: 5px;
+  }
+
+  a.video_name {
+    color: #333333;
+    margin-right: 5px;
+  }
+
+  .video_pod_url {
+    font-size: small;
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .video_description {
+    font-size: small;
+    font-style: italic;
+    margin-left: 7px;
+  }
+
+  .video_remove {
+    margin: 5px;
+    cursor: pointer;
+  }
+}
+
+.loading {
+  display: inline-block;
+  margin-top: 100px;
+}
diff --git a/client/angular/videos/components/list/videos-list.component.ts b/client/angular/videos/components/list/videos-list.component.ts
new file mode 100644
index 000000000..e5af87448
--- /dev/null
+++ b/client/angular/videos/components/list/videos-list.component.ts
@@ -0,0 +1,39 @@
+import {Component, OnInit} from 'angular2/core';
+import {ROUTER_DIRECTIVES} from 'angular2/router';
+
+import {VideosService} from '../../services/videos.service';
+import {Video} from '../../models/video';
+
+@Component({
+  selector: 'my-videos-list',
+  styleUrls: [ 'app/angular/videos/components/list/videos-list.component.css' ],
+  templateUrl: 'app/angular/videos/components/list/videos-list.component.html',
+  directives: [ ROUTER_DIRECTIVES ]
+})
+
+export class VideosListComponent implements OnInit {
+  videos: Video[];
+
+  constructor(
+    private _videosService: VideosService
+  ) { }
+
+  ngOnInit() {
+    this.getVideos();
+  }
+
+  getVideos() {
+    this._videosService.getVideos().subscribe(
+      videos => this.videos = videos,
+      error => alert(error)
+    );
+  }
+
+  removeVideo(id: string) {
+    this._videosService.removeVideo(id).subscribe(
+      status => this.getVideos(),
+      error => alert(error)
+    )
+  }
+
+}