[DEV] basic cover interface

front/src/app/app.module.ts

@@ -43,6 +43,7 @@ import { HttpWrapperService } from './service/http-wrapper.service';
 import { UserService } from './service/user.service';
 import { UniversService } from './service/univers.service';
 import { GroupService } from './service/group.service';
+import { DataService } from './service/data.service';
 import { TypeService } from './service/type.service';
 import { SaisonService } from './service/saison.service';
 import { VideoService } from './service/video.service';
@@ -92,6 +93,7 @@ import { AppComponent } from './app.component';
 		CookiesService,
 		UserService,
 		TypeService,
+		DataService,
 		UniversService,
 		GroupService,
 		SaisonService,

front/src/app/component/element-group/element-group.component.html

@@ -1,7 +1,7 @@
 <div>
 	<div class="imgContainer">
-		<div *ngIf="imageSource">
+		<div *ngIf="cover">
-			<img src="{{imageSource}}" alt="type image" class="miniature"/>
+			<img src="{{cover}}"/>
 		</div>
 	</div>
 	<div class="title">

front/src/app/component/element-group/element-group.component.less

@@ -1,15 +1,15 @@
 
 .imgContainer {
 	text-align: center;
-	width: 100%;
+	width: 80%;
+	margin: 0 auto;
 	height: 180px;
+	img {
+		//width: 100%;
+		max-height: 180px;
+	}
 }
 
-img.miniature {
-	width: 80px;
-	height: 120px;
-	//border-radius: 50%;
-}
 
 .title {
 	height: 60px;

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

@@ -28,6 +28,9 @@ export class ElementGroupComponent implements OnInit {
 	description:string = "";
 	imageSource:string = null;
 	
+	cover:string = "";
+	covers:Array<string> = [];
+	
 	constructor(private router: Router,
 	            private groupService: GroupService) {
 		
@@ -40,9 +43,20 @@ export class ElementGroupComponent implements OnInit {
 			.then(function(response) {
 				self.error = "";
 				self.name = response.name
+				if (response.covers == undefined || response.covers == null || response.covers.length == 0) {
+					self.cover = null;
+					//self.covers = [];
+				} else {
+					self.cover = self.groupService.getCoverUrl(response.covers[0]);
+					for (let iii=0; iii<response.covers.length; iii++) {
+						self.covers.push(self.groupService.getCoverUrl(response.covers[iii]));
+					}
+				}
 			}).catch(function(response) {
 				self.error = "Can not get the data";
 				self.name = ""
+				self.cover = null;
+				self.covers = [];
 			});
 	}
 }

front/src/app/component/element-saison/element-saison.component.html

@@ -1,3 +1,9 @@
+
+<div class="imgContainer">
+	<div *ngIf="cover">
+		<img src="{{cover}}"/>
+	</div>
+</div>
 <div class="saison">
 	Saison {{numberSaison}}
 </div>

front/src/app/component/element-saison/element-saison.component.less

@@ -1,4 +1,15 @@
 
+.imgContainer {
+	text-align: center;
+	width: 80%;
+	margin: 0 auto;
+	height: 180px;
+	img {
+		//width: 100%;
+		max-height: 180px;
+	}
+}
+
 .saison {
 	height: 60px;
 	font-size: 24px;

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

@@ -24,6 +24,9 @@ export class ElementSaisonComponent implements OnInit {
 	
 	error:string = ""
 	numberSaison:number = -1
+	cover:string = "";
+	covers:Array<string> = [];
+	
 	constructor(private router: Router,
 	            private saisonService: SaisonService) {
 		
@@ -35,9 +38,20 @@ export class ElementSaisonComponent implements OnInit {
 			.then(function(response) {
 				self.error = "";
 				self.numberSaison = response.number
+				if (response.covers == undefined || response.covers == null || response.covers.length == 0) {
+					self.cover = null;
+					//self.covers = [];
+				} else {
+					self.cover = self.saisonService.getCoverUrl(response.covers[0]);
+					for (let iii=0; iii<response.covers.length; iii++) {
+						self.covers.push(self.saisonService.getCoverUrl(response.covers[iii]));
+					}
+				}
 			}).catch(function(response) {
 				self.error = "Can not get the data";
 				self.numberSaison = -1
+				self.cover = null;
+				self.covers = [];
 			});
 	}
 }

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

@@ -26,6 +26,10 @@ export class ElementTypeComponent implements OnInit {
 	name:string = ""
 	error:string = ""
 	description:string = ""
+	
+	cover:string = ""
+	covers:Array<string> = []
+	
 	constructor(private router: Router,
 	            private typeService: TypeService) {
 		
@@ -39,6 +43,15 @@ export class ElementTypeComponent implements OnInit {
 				self.error = "";
 				self.name = response.name
 				self.description = response.description
+				if (response.covers == undefined || response.covers == null || response.covers.length == 0) {
+					self.cover = null;
+					//self.covers = [];
+				} else {
+					self.cover = self.typeService.getCoverUrl(response.covers[0]);
+					for (let iii=0; iii<response.covers.length; iii++) {
+						self.covers.push(self.typeService.getCoverUrl(response.covers[iii]));
+					}
+				}
 				console.log("plouf : '" + self.name + "'");
 				switch (self.name) {
 					case "Documentary":
@@ -77,6 +90,8 @@ export class ElementTypeComponent implements OnInit {
 				self.name = "";
 				self.description = "";
 				self.imageSource = "";
+				self.cover = null;
+				self.covers = [];
 			});
 	}
 }

front/src/app/component/element-video/element-video.component.html

@@ -1,9 +1,12 @@
 <div>
 	<div class="imgContainer">
-		<div *ngIf="imageSource">
+		<div *ngIf="cover">
-			<img src="{{imageSource}}" alt="type image" class="miniature"/>
+			<img src="{{cover}}"/>
 		</div>
 	</div>
+	<div *ngIf="episode" class="description">
+		{{episode}}
+	</div>
 	<div class="title">
 		{{name}}
 	</div>

front/src/app/component/element-video/element-video.component.less

@@ -1,14 +1,13 @@
 
 .imgContainer {
 	text-align: center;
-	width: 100%;
+	width: 80%;
+	margin: 0 auto;
 	height: 180px;
-}
+	img {
-
+		//width: 100%;
-img.miniature {
+		max-height: 180px;
-	width: 80px;
+	}
-	height: 120px;
-	//border-radius: 50%;
 }
 
 .title {

front/src/app/component/element-video/element-video.component.ts

@@ -38,6 +38,10 @@ export class ElementVideoComponent implements OnInit {
 	video_source:string = "";
 	video_enable:boolean = false;
 	imageSource:string = null;
+	
+	cover:string = "";
+	covers:Array<string> = [];
+	
 	constructor(private router: Router,
 	            private videoService: VideoService,
 	            private httpService: HttpWrapperService) {
@@ -66,6 +70,15 @@ export class ElementVideoComponent implements OnInit {
 					self.video_source = "";
 					self.video_enable = false;
 				}
+				if (response.covers == undefined || response.covers == null || response.covers.length == 0) {
+					self.cover = null;
+					//self.covers = [];
+				} else {
+					self.cover = self.videoService.getCoverUrl(response.covers[0]);
+					for (let iii=0; iii<response.covers.length; iii++) {
+						self.covers.push(self.videoService.getCoverUrl(response.covers[iii]));
+					}
+				}
 				console.log("101010 " + self.video_enable + "  " + self.video_source);
 				//console.log("set transformed : " + JSON.stringify(self, null, 2));
 			}).catch(function(response) {
@@ -80,6 +93,8 @@ export class ElementVideoComponent implements OnInit {
 				self.generated_name = "";
 				self.video_source = "";
 				self.video_enable = false;
+				self.cover = null;
+				self.covers = [];
 			});
 	}
 }

front/src/app/scene/saison/saison.component.less

@@ -8,6 +8,7 @@
 }
 
 .item {
+	background-color: rgba(200, 200, 200, 0.5);
 	font-size: 20px;
 	height: 21%;
 	width: 23%;

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

@@ -95,8 +95,27 @@
 				{{data_id}}
 			</div>
 		</div>
+		<div class="request_raw">
+			<div class="label">
+				Covers:
+			</div>
+			<div class="input">
+				<div *ngFor="let element of covers_display" class="cover_div"><img src="{{element}}" class="cover"/></div>
+			</div>
+		</div>
 		<div class="send_value">
 			<button class="button fill-x color-button-validate color-shadow-black" (click)="sendValues()" type="submit"><i class="material-icons">save_alt</i> Save</button>
 		</div>
+		<div class="request_raw">
+			<div class="label">
+				Covers:
+			</div>
+			<div class="input">
+				<input type="file" 
+				       (change)="onChangeCover($event.target)"
+				       placeholder="Select a cover file"
+				       accept=".png,.jpg"/>{{upload_file_value}}
+			</div>
+		</div>
 	</div>
 </div>

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

@@ -33,6 +33,13 @@
 			font-size: 20px;
 		}
 	}
+	.cover_div {
+		//float: left;
+		display: block;
+	}
+	.cover {
+		max-width: 30%;
+	}
 }
 .send_value {
 	width: 300px;

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

@@ -11,12 +11,14 @@ import { NgForm } from '@angular/forms';
 import { FormGroup, FormControl } from "@angular/forms";
 import { fadeInAnimation } from '../../_animations/index';
 import { HttpWrapperService } from '../../service/http-wrapper.service';
+import { HttpEventType, HttpResponse} from '@angular/common/http';
 
 
 import { TypeService } from '../../service/type.service';
 import { UniversService } from '../../service/univers.service';
 import { GroupService } from '../../service/group.service';
 import { VideoService } from '../../service/video.service';
+import { DataService } from '../../service/data.service';
 
 export class ElementList {
 	value: number;
@@ -50,6 +52,12 @@ export class VideoEditComponent implements OnInit {
 	time:number = undefined
 	type_id:number = undefined
 	generated_name:string = ""
+	coverFile:File;
+	upload_file_value:string = ""
+	selectedFiles:FileList;
+	
+	covers_display:Array<string> = [];
+	
 	listType: ElementList[] = [
 		{value: undefined, label: '---'},
 	];
@@ -66,6 +74,7 @@ export class VideoEditComponent implements OnInit {
 	constructor(private route: ActivatedRoute,
 	            private router: Router,
 	            private locate: Location,
+	            private dataService: DataService,
 	            private typeService: TypeService,
 	            private universService: UniversService,
 	            private groupService: GroupService,
@@ -110,7 +119,14 @@ export class VideoEditComponent implements OnInit {
 				self.onChangeType(response.type_id);
 				self.onChangeGroup(response.group_id);
 				self.saison_id = response.saison_id;
-				//console.log("set transformed : " + JSON.stringify(self, null, 2));
+				if (response.covers !== undefined && response.covers !== null) {
+					for (let iii=0; iii<response.covers.length; iii++) {
+						self.covers_display.push(self.videoService.getCoverUrl(response.covers[iii]));
+					}
+				} else {
+					self.covers_display = []
+				}
+				console.log("covers_list : " + JSON.stringify(self.covers_display, null, 2));
 			}).catch(function(response) {
 				self.error = "Can not get the data";
 				self.name = "";
@@ -122,6 +138,7 @@ export class VideoEditComponent implements OnInit {
 				self.data_id = -1;
 				self.time = undefined;
 				self.generated_name = "";
+				self.covers_display = [];
 			});
 	}
 	
@@ -184,7 +201,6 @@ export class VideoEditComponent implements OnInit {
 	onEpisode(_value:any):void {
 		this.episode = _value;
 	}
-
 	
 	sendValues():void {
 		console.log("send new values....");
@@ -200,5 +216,54 @@ export class VideoEditComponent implements OnInit {
 		};
 		this.videoService.put(this.id_video, data);
 	}
+	
+	
+	
+	
+	// At the drag drop area
+	// (drop)="onDropFile($event)"
+	onDropFile(_event: DragEvent) {
+		_event.preventDefault();
+		this.uploadFile(_event.dataTransfer.files[0]);
+	}
+	
+	// At the drag drop area
+	// (dragover)="onDragOverFile($event)"
+	onDragOverFile(_event) {
+		_event.stopPropagation();
+		_event.preventDefault();
+	}
+	
+	// At the file input element
+	// (change)="selectFile($event)"
+	onChangeCover(_value:any):void {
+		this.selectedFiles = _value.files
+		this.coverFile = this.selectedFiles[0];
+		console.log("select file " + this.coverFile.name);
+		this.uploadFile(this.coverFile);
+	}
+	
+	uploadFile(_file:File) {
+		if (_file == undefined) {
+			console.log("No file selected!");
+			return;
+		}
+		let self = this;
+		this.dataService.sendFile(_file)
+			.then(function(response) {
+				console.log("get response of video : " + JSON.stringify(response, null, 2));
+				let id_of_image = response.id;
+				self.videoService.addCover(self.id_video, id_of_image)
+					.then(function(response) {
+						console.log("cover added");
+						self.covers_display.push(self.videoService.getCoverUrl(id_of_image));
+					}).catch(function(response) {
+						console.log("Can not cover in the cover_list...");
+					});
+			}).catch(function(response) {
+				//self.error = "Can not get the data";
+				console.log("Can not add the data in the system...");
+			});
+	}
 
 }

front/src/app/scene/video/video.component.html

@@ -3,6 +3,9 @@
 		<div class="title">
 			{{name}}
 		</div>
+		<div class="cover" *ngIf="cover != null" >
+			<img src="{{cover}}"/>
+		</div>
 		<div class="description">
 			{{description}}
 		</div>
@@ -13,10 +16,9 @@
 			generated_name <b>{{generated_name}}</b>
 		</div>
 		<div class="video_div">
-			<video class="video_object" src="{{video_source}}" controls>
+			<video class="video_object" src="{{video_source}}" controls preload="none">
 				<!--<p>Your browser des not suport HTML5 video player. download video: <a href="{{video_source}}>link here</a>.</p>-->
 			</video>
 		</div>
-		<app-upload-file ></app-upload-file>
 	</div>
 </div>

front/src/app/scene/video/video.component.less

@@ -31,6 +31,14 @@
 	margin: 0 auto;
 }
 
+.cover {
+	width: 30%;
+	margin: 0 auto;
+	img {
+		width: 100%;
+	}
+}
+
 .video_div {
 	width: 80%;
 	margin: 0 auto;

front/src/app/scene/video/video.component.ts

@@ -34,6 +34,8 @@ export class VideoComponent implements OnInit {
 	type_id:number = undefined
 	generated_name:string = ""
 	video_source:string = ""
+	cover:string = ""
+	covers:Array<string> = []
 	
 	constructor(private route: ActivatedRoute,
 	            private router: Router,
@@ -63,7 +65,15 @@ export class VideoComponent implements OnInit {
 				} else {
 					self.video_source = "";
 				}
-				console.log("display source " + self.video_source);
+				if (response.covers == undefined || response.covers == null || response.covers.length == 0) {
+					self.cover = null;
+				} else {
+					self.cover = self.videoService.getCoverUrl(response.covers[0]);
+					for (let iii=0; iii<response.covers.length; iii++) {
+						self.covers.push(self.videoService.getCoverUrl(response.covers[iii]));
+					}
+				}
+				//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";
@@ -76,6 +86,7 @@ export class VideoComponent implements OnInit {
 				self.time = undefined;
 				self.generated_name = "";
 				self.video_source = "";
+				self.cover = null;
 			});
 	}
 

front/src/app/service/data.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { HttpWrapperService } from 'app/service/http-wrapper.service';
+
+@Injectable()
+export class DataService {
+	// 0: Not hide password; 1 hide password;
+	private identificationVersion: number = 1;
+	
+	constructor(private http: HttpWrapperService) {
+		console.log("Start TypeService");
+	}
+	
+	getData():any {
+		return this.http.get_specific("data");
+	};
+	
+	get(_id:number):any {
+		return this.http.get_specific("data", _id);
+	};
+	
+	sendFile(_file:File) {
+		//return this.http.uploadFileMultipart("data", null, _file);
+		return this.http.uploadFileBase64("data", null, _file);
+	}
+}
+

front/src/app/service/group.service.ts

@@ -25,5 +25,9 @@ export class GroupService {
 	getSaison(_id:number, _select:Array<string> = []):any {
 		return this.http.get_specific("group", _id, "saison", _select);
 	};
+	
+	getCoverUrl(_coverId:number):any {
+		return this.http.createRESTCall("data/" + _coverId);
+	};
 }
 

front/src/app/service/http-wrapper.service.ts

@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
 
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams, HttpRequest, HttpEvent} from '@angular/common/http';
 import { catchError, map, tap } from 'rxjs/operators';
+import {Observable} from "rxjs";
 
 import { environment } from 'environments/environment';
 
@@ -138,6 +139,97 @@ export class HttpWrapperService {
 			});
 	}
 	
+	uploadFileMultipart(_base:string, _id:number, _file:File): any {
+		console.log("Upload file to " + _base);
+		
+		let url = _base;
+		if (_id != null) {
+			url += "/" + _id;
+		}
+		let formData = new FormData();
+		formData.append('upload', _file);
+		let headers = new Headers();
+		console.log("upload filename : " + _file.name);
+		let extention = _file.name.split('.').pop();
+		if (extention == "jpg") {
+			headers.append('Content-Type', "image/jpeg");
+		} else if (extention == "png") {
+			headers.append('Content-Type', "image/png");
+		} else {
+			return null;
+		}
+		headers.append('filename', _file.name);
+		
+		const httpOption = {
+			headers: headers,
+			reportProgress: true,
+		};
+		return new Promise((resolve, reject) => {
+			this.post(url, httpOption, formData)
+				.then(function(response: any) {
+					console.log("URL: " + url + "\nRespond(" + response.status + "): " + JSON.stringify(response.data, null, 2));
+					if (response.status == 200) {
+						resolve(response.data);
+						return;
+					}
+					reject("An error occured");
+				}, function(response: any) {
+					if (typeof response.data === 'undefined') {
+						reject("return ERROR undefined");
+					} else {
+						reject("return ERROR " + JSON.stringify(response.data, null, 2));
+					}
+				});
+		});
+	}
+	uploadFileBase64(_base:string, _id:number, _file:File): any {
+		console.log("Upload file to " + _base);
+		
+		let url = _base;
+		if (_id != null) {
+			url += "/" + _id;
+		}
+		let self = this;
+		let reader = new FileReader();
+		reader.readAsArrayBuffer(_file);
+		return new Promise((resolve, reject) => {
+			reader.onload = () => {
+				let headers = {};//new Headers();
+				console.log("upload filename : " + _file.name);
+				let extention = _file.name.split('.').pop();
+				if (extention == "jpg") {
+					//headers.append('Content-Type', "image/jpeg");
+					headers['Content-Type'] = "image/jpeg";
+					headers['mime-type'] = "image/jpeg";
+				} else if (extention == "png") {
+					//headers.append('Content-Type', "image/png");
+					headers['Content-Type'] = "image/png";
+					headers['mime-type'] = "image/png";
+				} else {
+					return null;
+				}
+				//headers.append('filename', _file.name);
+				headers['filename'] = _file.name;
+				
+				self.post(url, headers, reader.result)
+					.then(function(response: any) {
+						console.log("URL: " + url + "\nRespond(" + response.status + "): " + JSON.stringify(response.data, null, 2));
+						if (response.status == 200) {
+							resolve(response.data);
+							return;
+						}
+						reject("An error occured");
+					}, function(response: any) {
+						if (typeof response.data === 'undefined') {
+							reject("return ERROR undefined");
+						} else {
+							reject("return ERROR ...");// + JSON.stringify(response, null, 2));
+						}
+					});
+			};
+		});
+	}
+	
 	// Complex wrapper to simplify interaction:
 	get_specific(_base:string, _id:number = null, _subElement:string = "", _select:Array<string> = []):any {
 		console.log("Get All data from " + _base);
@@ -216,4 +308,40 @@ export class HttpWrapperService {
 				});
 		});
 	};
+	// Complex wrapper to simplify interaction:
+	post_specific(_base:string, _id:number, _data:any, _subElement:string = ""):any {
+		console.log("put data to " + _base);
+		const httpOption = { 'Content-Type': 'application/json' };
+		let url = _base;
+		if (_id != null) {
+			url += "/" + _id;
+		}
+		if (_subElement != "") {
+			url += "/" + _subElement;
+		}
+		console.log("call PUT: " + url);
+		console.log("    data: " + JSON.stringify(_data, null, 2));
+		
+		return new Promise((resolve, reject) => {
+			this.post(url, httpOption, _data)
+				.then(function(response: any) {
+					console.log("URL: " + url + "\nRespond(" + response.status + "): " + JSON.stringify(response.data, null, 2));
+					if (response.status == 200) {
+						resolve(response.data);
+						return;
+					}
+					if (response.status == 201) {
+						resolve(response.data);
+						return;
+					}
+					reject("An error occured");
+				}, function(response: any) {
+					if (typeof response.data === 'undefined') {
+						reject("return ERROR undefined");
+					} else {
+						reject("return ERROR " + JSON.stringify(response.data, null, 2));
+					}
+				});
+		});
+	};
 }

front/src/app/service/saison.service.ts

@@ -18,5 +18,8 @@ export class SaisonService {
 		return this.http.get_specific("saison", _id, "video");
 	};
 	
+	getCoverUrl(_coverId:number):any {
+		return this.http.createRESTCall("data/" + _coverId);
+	};
 }
 

front/src/app/service/type.service.ts

@@ -41,5 +41,8 @@ export class TypeService {
 		return this.http.get_specific("type", _id, "univers", _select);
 	};
 	
+	getCoverUrl(_coverId:number):any {
+		return this.http.createRESTCall("data/" + _coverId);
+	};
 }
 

front/src/app/service/video.service.ts

@@ -13,8 +13,15 @@ export class VideoService {
 	get(_id:number):any {
 		return this.http.get_specific("video", _id);
 	};
+	
 	put(_id:number, _data:any):any {
 		return this.http.put_specific("video", _id, _data);
 	};
+	addCover(_id:number, _coverId:number):any {
+		return this.http.post_specific("video", _id, {"data_id":_coverId}, "add_cover");
+	};
+	getCoverUrl(_coverId:number):any {
+		return this.http.createRESTCall("data/" + _coverId);
+	};
 }