(DEV] first form to edit the video settings

front/src/app/app-routing.module.ts

@@ -16,6 +16,7 @@ import { VideoDetailComponent } from './video-detail/video-detail.component';
 import { LoginComponent } from './login/login.component';
 import { SignUpComponent } from './sign-up/sign-up.component';
 import { SettingsComponent } from './settings/settings.component';
+import { VideoEditComponent } from './scene/video-edit/video-edit';
 //import { HelpComponent } from './help/help.component';
 
 
@@ -26,6 +27,7 @@ const routes: Routes = [
 	{ path: 'group/:id', component: GroupDetailComponent },
 	{ path: 'saison/:id', component: SaisonDetailComponent },
 	{ path: 'video/:id', component: VideoDetailComponent },
+	{ path: 'video-edit/:id', component: VideoEditComponent },
 	{ path: 'login', component: LoginComponent },
 	{ path: 'signup', component: SignUpComponent },
 	{ path: 'settings', component: SettingsComponent },

front/src/app/app.module.ts

@@ -9,6 +9,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { routing } from './app-routing.module';
 
@@ -32,6 +33,7 @@ import { VideoDetailComponent } from './video-detail/video-detail.component';
 import { SettingsComponent } from './settings/settings.component';
 import { ErrorViewerComponent } from './error-viewer/error-viewer.component';
 import { ErrorComponent } from './error/error.component';
+import { VideoEditComponent } from './scene/video-edit/video-edit';
 
 import { ArianeService } from './ariane.service';
 import { CookiesService } from './cookies.service';
@@ -68,14 +70,17 @@ import { AppComponent } from './app.component';
 		VideoDetailComponent,
 		SettingsComponent,
 		ErrorViewerComponent,
-		ErrorComponent
+		ErrorComponent,
+		VideoEditComponent
 		],
 	imports: [
 		BrowserModule,
 		RouterModule,
 		routing,
 		BrowserAnimationsModule,
-		HttpClientModule
+		HttpClientModule,
+		FormsModule,
+		ReactiveFormsModule
 		],
 	providers: [
 		HttpWrapperService,

front/src/app/ariane.service.ts

@@ -29,6 +29,9 @@ export class ArianeService {
 	public saison_name: string = null;
 	@Output() saison_change: EventEmitter<number> = new EventEmitter();
 	
+	public video_id: number = null;
+	@Output() video_change: EventEmitter<number> = new EventEmitter();
+	
 	constructor(
 	            private typeService: TypeService,
 	            private universService: UniversService,
@@ -50,6 +53,8 @@ export class ArianeService {
 		this.saison_id = null;
 		this.saison_name = null;
 		this.saison_change.emit(this.saison_id);
+		this.video_id = null;
+		this.video_change.emit(this.video_id);
 	}
 	
 	setType(id:number):void {
@@ -127,4 +132,12 @@ export class ArianeService {
 	getSaisonName():string {
 		return this.saison_name;
 	}
+	
+	setVideo(id:number):void {
+		this.video_id = id;
+		this.video_change.emit(this.video_id);
+	}
+	getVideoId():number {
+		return this.video_id;
+	}
 }

front/src/app/group-detail/group-detail.component.ts

@@ -62,6 +62,7 @@ export class GroupDetailComponent implements OnInit {
 	
 	onSelectVideo(_idSelected: number):void {
 		this.router.navigate(['video/' + _idSelected ]);
+		this.arianeService.setVideo(_idSelected);
 	}
 
 }

front/src/app/saison-detail/saison-detail.component.ts

@@ -48,6 +48,7 @@ export class SaisonDetailComponent implements OnInit {
 	
 	onSelectVideo(_idSelected: number):void {
 		this.router.navigate(['video/' + _idSelected ]);
+		this.arianeService.setVideo(_idSelected);
 	}
 
 }

front/src/app/scene/video-edit/video-edit.html

@@ -0,0 +1,42 @@
+<div class="main-reduce">
+	<div class="fill-all">
+		<form [formGroup]="videoForm" (ngSubmit)="submitChange(videoForm.form);">
+			<table>
+				<tr>
+					<td>
+						<label>Name:</label>
+					</td>
+					<td>
+						<input type="text"
+						      formControlName="name"
+						      id="name"
+						      class="form-control">
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<label>Description:</label>
+					</td>
+					<td>
+						<input type="text"
+						      formControlName="description"
+						      id="description"
+						      class="form-control">
+					</td>
+				</tr>
+				<tr>
+					<td>
+						<label>Episode (id):</label>
+					</td>
+					<td>
+						<input type="text"
+						      formControlName="episode"
+						      id="episode"
+						      class="form-control">
+					</td>
+				</tr>
+			</table>
+			<button class="btn btn-primary">Update</button>
+		</form>
+	</div>
+</div>

front/src/app/scene/video-edit/video-edit.less

@@ -0,0 +1,110 @@
+.fill-all{
+	//width:100%;
+	max-width:80%;
+	height:100%;
+	margin: 20px auto;
+	padding: 20px;
+	border:0;
+	background-color: rgba(200, 200, 200, 0.5);
+	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
+}
+
+table {
+    border-collapse: collapse;
+}
+table, th, td { 
+    border-radius: 9px;
+    padding: 10px;
+}
+.error {
+    color: rgba(248, 141, 18, 0.842);
+}
+.success {
+    color: green;
+}
+
+.title {
+	width: 90%;
+	margin: 0 auto;
+	font-size: 50px;
+	text-align: center;
+}
+
+.description {
+	width: 80%;
+	margin: 0 auto;
+}
+
+.episode {
+	width: 80%;
+	margin: 0 auto;
+}
+
+.generated_name {
+	width: 80%;
+	margin: 0 auto;
+}
+
+.video_div {
+	width: 80%;
+	margin: 0 auto;
+}
+
+.video_object {
+	width: 100%;
+	margin: 0 auto;
+}
+
+.item {
+	font-size: 20px;
+	height: 21%;
+	width: 23%;
+	margin: 1%;
+	padding: 0;
+	overflow: hidden;
+	//box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
+	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
+	line-height: normal;
+	border: none;
+	font-family: "Roboto","Helvetica","Arial",sans-serif;
+	font-weight: 500;
+	text-transform: uppercase;
+	letter-spacing: 0;
+	will-change: box-shadow;
+	outline: none;
+	cursor: pointer;
+	text-decoration: none;
+	text-align: center;
+	vertical-align: middle;
+	transition-duration: 0.4s;
+	float:left;
+	display:block;
+	
+	h1 {
+		font-size: 24px;
+	}
+	
+	&:hover {
+		background-color: #F00;
+	}
+	
+	.material-icons {
+		vertical-align: middle;
+	}
+	
+	.material-icons {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: ~"translate(-12px,-12px)";
+		line-height: 24px;
+		width: 24px;
+	}
+}
+
+.item-video {
+	&:hover {
+		background-color: #0F0;
+	}
+}
+

front/src/app/scene/video-edit/video-edit.ts

@@ -0,0 +1,109 @@
+/** @file
+ * @author Edouard DUPIN
+ * @copyright 2018, Edouard DUPIN, all right reserved
+ * @license PROPRIETARY (see license file)
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { Location } from '@angular/common';
+import { NgForm } from '@angular/forms';
+import { FormGroup, FormControl } from "@angular/forms";
+import { fadeInAnimation } from '../../_animations/index';
+import { HttpWrapperService } from '../../http-wrapper.service';
+
+import { VideoService } from '../../video.service';
+
+@Component({
+	selector: 'app-video-edit',
+	templateUrl: './video-edit.html',
+	styleUrls: ['./video-edit.less'],
+	animations: [fadeInAnimation],
+	host: { '[@fadeInAnimation]': '' }
+})
+/*
+export class Video {
+    name: string;
+    description: string;
+    episode: number;
+    constructor() {
+    }
+}
+*/
+// https://www.sitepoint.com/angular-forms/
+export class VideoEditComponent implements OnInit {
+	id_video:number = -1;
+	
+	error:string = ""
+	
+	name:string = ""
+	description:string = ""
+	episode:number = undefined
+	group_id:number = undefined
+	saison_id:number = undefined
+	data_id:number = -1
+	time:number = undefined
+	type_id:number = undefined
+	generated_name:string = ""
+	video_source:string = ""
+	
+	videoForm = new FormGroup({
+		name: new FormControl("kjhkjhk"),
+		description: new FormControl(),
+		episode: new FormControl()
+	})
+	//video = new Video();
+	
+	constructor(private route: ActivatedRoute,
+	            private router: Router,
+	            private locate: Location,
+	            private videoService: VideoService,
+	            private httpService: HttpWrapperService) {
+		
+	}
+	
+	ngOnInit() {
+		this.id_video = parseInt(this.route.snapshot.paramMap.get('id'));
+		let self = this;
+		this.videoService.get(this.id_video)
+			.then(function(response) {
+				console.log("get response of video : " + JSON.stringify(response, null, 2));
+				self.error = "";
+				self.videoForm.get("name").setValue(response.name);
+				self.videoForm.get("description").setValue(response.description);
+				self.videoForm.get("episode").setValue(response.episode);
+				
+				self.name = response.name;
+				self.description = response.description;
+				self.episode = response.episode;
+				self.group_id = response.group_id;
+				self.saison_id = response.saison_id;
+				self.data_id = response.data_id;
+				self.time = response.time;
+				self.generated_name = response.generated_name;
+				if (self.data_id != -1) {
+					self.video_source = self.httpService.createRESTCall("data/" + self.data_id);
+				} else {
+					self.video_source = "";
+				}
+				console.log("display source " + self.video_source);
+				//console.log("set transformed : " + JSON.stringify(self, null, 2));
+			}).catch(function(response) {
+				self.error = "Can not get the data";
+				self.name = "";
+				self.description = "";
+				self.episode = undefined;
+				self.group_id = undefined;
+				self.saison_id = undefined;
+				self.data_id = -1;
+				self.time = undefined;
+				self.generated_name = "";
+				self.video_source = "";
+			});
+	}
+	submitChange(videoForm:NgForm):void {
+		console.log("videoForm form display" + videoForm);
+		
+	}
+
+}

front/src/app/top-menu/top-menu.component.html

@@ -31,6 +31,12 @@
 		        (click)="onAvatar()">
 			<img class="avatar" src="{{avatar}}"/>
 		</button>
+		<button class="item"
+		        *ngIf="editable == true"
+		        style="float:right; height:56px;"
+		        (click)="onEdit()">
+			<i class="material-icons">create</i> Edit
+		</button>
 	</div>
 	<div class="fill-all" *ngIf="login != null &amp;&amp; displayUserMenu == true" (click)="onOutUserProperty()">
 	<!-- (click)="onOutUserProperty()" -->

front/src/app/top-menu/top-menu.component.ts

@@ -35,12 +35,21 @@ export class TopMenuComponent implements OnInit {
 	public ariane_saison_id: number = null;
 	public ariane_saison_name: string = null;
 	
+	public editable:boolean = false;
+	
 	constructor(private router: Router,
 	            private sessionService: SessionService,
 	            private arianeService: ArianeService) {
 		
 	}
 	
+	updateEditable() {
+		if (this.arianeService.getVideoId() != null) {
+			this.editable = true;
+		} else {
+			this.editable = false;
+		}
+	}
 	ngOnInit() {
 		this.sessionService.change.subscribe(isConnected => {
 			console.log("receive event from session ..." + isConnected);
@@ -59,18 +68,25 @@ export class TopMenuComponent implements OnInit {
 		this.arianeService.type_change.subscribe(type_id => {
 			this.ariane_type_id = type_id;
 			this.ariane_type_name = this.arianeService.getTypeName();
+			this.updateEditable();
 		});
 		this.arianeService.univers_change.subscribe(univers_id => {
 			this.ariane_univers_id = univers_id;
 			this.ariane_univers_name = this.arianeService.getUniversName();
+			this.updateEditable();
 		});
 		this.arianeService.group_change.subscribe(group_id => {
 			this.ariane_group_id = group_id;
 			this.ariane_group_name = this.arianeService.getGroupName();
+			this.updateEditable();
 		});
 		this.arianeService.saison_change.subscribe(saison_id => {
 			this.ariane_saison_id = saison_id;
 			this.ariane_saison_name = this.arianeService.getSaisonName();
+			this.updateEditable();
+		});
+		this.arianeService.video_change.subscribe(video_id => {
+			this.updateEditable();
 		});
 	}
 	onAvatar(): void {
@@ -78,6 +94,13 @@ export class TopMenuComponent implements OnInit {
 		this.displayUserMenu = !this.displayUserMenu;
 	}
 	
+	onEdit(): void {
+		console.log("onEdit()");
+		if (this.arianeService.getVideoId() != null) {
+			this.router.navigate(['video-edit/' + this.arianeService.getVideoId()]);
+		}
+	}
+	
 	onHome(): void {
 		console.log("onHome()");
 		this.router.navigate(['home']);

front/src/app/type-detail/type-detail.component.ts

@@ -69,6 +69,7 @@ export class TypeDetailComponent implements OnInit {
 	
 	onSelectVideo(_idSelected: number):void {
 		this.router.navigate(['video/' + _idSelected ]);
+		this.arianeService.setVideo(_idSelected);
 	}
 
 }