From cd986efd0cf9414605c607711ba076cbb8dcb5a1 Mon Sep 17 00:00:00 2001
From: Edouard DUPIN <yui.heero@gmail.com>
Date: Thu, 22 Oct 2020 01:15:59 +0200
Subject: [PATCH] [DEV] continue integrations

---
 .../upload-progress/upload-progress.html      | 27 ++++++--
 .../upload-progress/upload-progress.ts        | 66 ++++++++++++++++++-
 front/src/app/scene/upload/upload.html        | 28 +++++---
 front/src/app/scene/upload/upload.ts          | 44 +++++--------
 front/src/app/service/http-wrapper.ts         | 31 ++++++---
 front/src/app/service/video.ts                | 44 +++++++++++--
 front/src/environments/environment.prod.ts    |  1 +
 7 files changed, 181 insertions(+), 60 deletions(-)

diff --git a/front/src/app/component/upload-progress/upload-progress.html b/front/src/app/component/upload-progress/upload-progress.html
index 937db09..742091c 100644
--- a/front/src/app/component/upload-progress/upload-progress.html
+++ b/front/src/app/component/upload-progress/upload-progress.html
@@ -2,17 +2,30 @@
 	<popin id="popin-upload-progress"
 	       popSize="medium"
 	       popTitle="Upload Media File"
-	       closeTitle="Abort"
+	       [closeTitle]="closeButtonTitle"
+	       [otherTitle]="otherButtonTitle"
+	       [validateTitle]="validateButtonTitle"
 	       (callback)="eventPopUp($event[0])">
 		<p class="expand">
-			<label class="unselectable">{{mediaTitle}}</label>
+			<label class="unselectable"><b>{{mediaTitle}}</b></label>
 		</p>
-		<div class="progress-back">
+		<div *ngIf="progress != 100" class="progress-back">
  				<div class="progress-bar" style="width:{{progress}}%">&nbsp;&nbsp;&nbsp;{{progress}}%</div>
 		</div>
-		<p>
-			<label class="unselectable">upload:&nbsp;{{mediaUploaded}} Bytes</label><br/>
-			<label class="unselectable">size:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{mediaSize}} Bytes</label>
-		</p>
+		<div *ngIf="progress != 100" >
+			<label class="unselectable">upload:&nbsp;{{uploadDisplay}}</label><br/>
+			<label class="unselectable">size:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{sizeDisplay}}</label>
+		</div>
+		<div *ngIf="progress == 100 && error == null && result == null" >
+			<label class="unselectable">Upload done ... waiting server answer</label>
+		</div>
+		<div *ngIf="error != null" >
+			<label class="unselectable"><b>Get an error From the server:</b></label><br/>
+			<label class="unselectable">{{error}}</label>
+		</div>
+		<div *ngIf="result != null" >
+			<label class="unselectable"><b>Upload finished:</b></label><br/>
+			<label class="unselectable">{{result}}</label>
+		</div>
 	</popin>
 </div>
\ No newline at end of file
diff --git a/front/src/app/component/upload-progress/upload-progress.ts b/front/src/app/component/upload-progress/upload-progress.ts
index e3ca9a6..8c84614 100644
--- a/front/src/app/component/upload-progress/upload-progress.ts
+++ b/front/src/app/component/upload-progress/upload-progress.ts
@@ -24,6 +24,13 @@ export class PopInUploadProgress implements OnInit {
 	@Input() mediaTitle: string = "";
 	@Input() mediaUploaded: number = 0;
 	@Input() mediaSize: number = 999999999999;
+	@Input() result: string = null;
+	@Input() error: string = null;
+	private closeButtonTitle: string = "Abort";
+	private otherButtonTitle: string = null;
+	private validateButtonTitle: string = null;
+	private uploadDisplay: string = "";
+	private sizeDisplay: string = "";
 	private progress: number = 0;
 	constructor(private router: Router,
 	            private popInService: PopInService) {
@@ -42,9 +49,64 @@ export class PopInUploadProgress implements OnInit {
 	updateNeedSend():void {
 		
 	}
+
+	limit3(count:number):string {
+		if (count>=1000) {
+			return "" + count;
+		}
+		if (count>=100) {
+			return " " + count;
+		}
+		if (count>=10) {
+			return "  " + count;
+		}
+		return "   " + count;
+	}
+	convertInHuman(countIn:number):string {
+		let count = countIn;
+		let tera = Math.trunc(count/(1024*1024*1024*1024));
+		count = count - tera*1024*1024*1024*1024;
+		let giga = Math.trunc(count/(1024*1024*1024));
+		count = count - giga*1024*1024*1024;
+		let mega = Math.trunc(count/(1024*1024));
+		count = count - mega*1024*1024;
+		let kilo = Math.trunc(count/1024);
+		count = count - kilo*1024;
+		let out = ""
+		if (out.length != 0 || tera != 0) {
+			out += " " + this.limit3(tera) + "T";
+		}
+		if (out.length != 0 || giga != 0) {
+			out += " " + this.limit3(giga) + "G";
+		}
+		if (out.length != 0 || mega != 0) {
+			out += " " + this.limit3(mega)+ "M";
+		}
+		if (out.length != 0 || kilo != 0) {
+			out += " " + this.limit3(kilo) + "k";
+		}
+		if (out.length != 0 || count != 0) {
+			out += " " + this.limit3(count) + "B";
+		}
+		return out;
+	}
+	
 	ngOnChanges(changes: SimpleChanges) {
 		this.progress = Math.trunc(this.mediaUploaded*100/this.mediaSize)
-		console.log("ooooooooooo " + this.progress);
-		console.log("ooooooooooo " + changes);
+		this.uploadDisplay = this.convertInHuman(this.mediaUploaded);
+		this.sizeDisplay = this.convertInHuman(this.mediaSize);
+		if ( this.error == null && this.result == null) {
+			this.closeButtonTitle = "Abort";
+			this.otherButtonTitle = null;
+			this.validateButtonTitle = null;
+		} else if (this.result == null) {
+			this.closeButtonTitle = null;
+			this.otherButtonTitle = "Close";
+			this.validateButtonTitle = null;
+		} else {
+			this.closeButtonTitle = null;
+			this.otherButtonTitle = null;
+			this.validateButtonTitle = "Ok";
+		}
 	}
 }
\ No newline at end of file
diff --git a/front/src/app/scene/upload/upload.html b/front/src/app/scene/upload/upload.html
index 71ba187..a7a538e 100644
--- a/front/src/app/scene/upload/upload.html
+++ b/front/src/app/scene/upload/upload.html
@@ -1,8 +1,9 @@
-<div class="main-reduce">
+<div class="generic-page">
+	<div class="title">
+		Upload Media
+	</div>
+	<div class="clear"><br/></div>
 	<div class="fill-all">
-		<div class="title">
-			&gt;&gt;&gt; Upload Media  &lt;&lt;&lt;
-		</div>
 		<div class="request_raw">
 			<div class="label">
 				format:
@@ -21,13 +22,20 @@
 				<input type="file"
 				       (change)="onChangeFile($event.target)"
 					   placeholder="Select a media file"
-					    accept=".mkv,.webm"/>{{upload_file_value}}
+					   accept=".mkv,.webm"
+					   width="90%" />
 			</div>
 		</div>
-		<div class="clear"></div>
-		<div class="title">
-			Parsed data:
+		<div class="request_raw2" *ngIf="mediaFile != null">
+			{{mediaFile.name}}
 		</div>
+		<div class="clear"></div>
+	</div>
+	<div *ngIf="mediaFile != null" class="title">
+		Meta-data:
+	</div>
+	<div class="clear"><br/></div>
+	<div *ngIf="mediaFile != null" class="fill-all">
 		<div class="request_raw">
 			<div class="label">
 				*Type:
@@ -135,7 +143,9 @@
 </div>
 <upload-progress [mediaTitle]="uploadLabelMediaTitle"
 	[mediaUploaded]="uploadMediaSendSize"
-	[mediaSize]="uploadMediaSize"></upload-progress>
+	[mediaSize]="uploadMediaSize"
+	[result]="uploadResult"
+	[error]="uploadError"></upload-progress>
 <!--
 TODO: add a pop-in with:
   - upload done
diff --git a/front/src/app/scene/upload/upload.ts b/front/src/app/scene/upload/upload.ts
index 7d6a1c1..08c1c95 100644
--- a/front/src/app/scene/upload/upload.ts
+++ b/front/src/app/scene/upload/upload.ts
@@ -58,6 +58,8 @@ export class UploadScene implements OnInit {
 	uploadLabelMediaTitle: string = "";
 	uploadMediaSendSize: number = 0;
 	uploadMediaSize: number = 0;
+	uploadResult: string = null;
+	uploadError: string = null;
 	
 
 	listType: ElementList[] = [
@@ -156,7 +158,7 @@ export class UploadScene implements OnInit {
 			.then(function (response3) {
 				for (let iii = 0; iii < response3.length; iii++) {
 					self.listGroup.push({ value: response3[iii].id, label: response3[iii].name });
-					console.log("Get serie: " + response3[iii].id + ", label:" + response3[iii].name)
+					//console.log("Get serie: " + response3[iii].id + ", label:" + response3[iii].name)
 				}
 			}).catch(function (response3) {
 				console.log("get response3 : " + JSON.stringify(response3, null, 2));
@@ -375,22 +377,6 @@ export class UploadScene implements OnInit {
 		}
 		let self = this;
 
-	    const formData = new FormData();
-	    formData.append('file_name', _file.name);
-	    formData.append('universe', this.parse_universe);
-	    formData.append('serie', this.parse_serie);
-	    if (this.parse_saison != null) {
-	    	formData.append('saison', this.parse_saison.toString());
-	    }
-	    if (this.parse_episode != null) {
-	    	formData.append('episode', this.parse_episode.toString());
-	    }
-	    formData.append('title', this.parse_title);
-
-	    if (this.type_id != null) {
-	    	formData.append('type_id', this.type_id.toString());
-	    }
-	    formData.append('file', _file);
 		/*
 		this.parse_serie = "";
 		this.parse_saison = null;
@@ -401,6 +387,8 @@ export class UploadScene implements OnInit {
 		this.uploadMediaSendSize = 0;
     	this.uploadMediaSize = 0;
 		this.uploadLabelMediaTitle = "";
+		this.uploadResult = null;
+		this.uploadError = null;
 		// add univers
 		if (this.parse_universe != null) {
 			this.uploadLabelMediaTitle += this.parse_universe;
@@ -433,26 +421,26 @@ export class UploadScene implements OnInit {
 		this.uploadLabelMediaTitle += this.parse_title;
 		// display the upload pop-in
 		this.popInService.open("popin-upload-progress");
-		this.dataService.uploadFile(formData, function(count, total) {
-	    	console.log("upload : " + count*100/total);
+		this.videoService.uploadFile(_file,
+				this.parse_universe,
+				this.parse_serie,
+				this.parse_saison,
+				this.parse_episode,
+				this.parse_title,
+				this.type_id,
+				function(count, total) {
+	    	//console.log("upload : " + count*100/total);
 	    	self.uploadMediaSendSize = count;
 	    	self.uploadMediaSize = total;
 	    	
 	    })
 		.then(function (response) {
 			console.log("get response of video : " + JSON.stringify(response, null, 2));
-			let id_of_image = response.id;
-			/*
-				.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...");
-				});
-			*/
+			self.uploadResult = "Media creation done";
 		}).catch(function (response) {
 			//self.error = "Can not get the data";
 			console.log("Can not add the data in the system...");
+			self.uploadError = "Error in the upload of the data..." + JSON.stringify(response, null, 2);
 		});
 	}
 	removeCover (_id) {
diff --git a/front/src/app/service/http-wrapper.ts b/front/src/app/service/http-wrapper.ts
index 31a3912..e77e969 100644
--- a/front/src/app/service/http-wrapper.ts
+++ b/front/src/app/service/http-wrapper.ts
@@ -101,20 +101,33 @@ export class HttpWrapperService {
 					if (self.displayReturn == true) {
 						console.log("!! data " + JSON.stringify(res, null, 2));
 					}
-			        if (res.type === HttpEventType.UploadProgress) {
-			            console.log("post : " + res.loaded + " / " +  res.total);
+			        if (res.type === HttpEventType.Sent) {
+			        	/* res.type == 0 */
+			        	console.log("post : Sent");
+			        } else if (res.type === HttpEventType.UploadProgress) {
+			        	/* res.type == 1 */
+			            //console.log("post : " + res.loaded + " / " +  res.total);
 			            _progress(res.loaded, res.total);
-			            return;
-			        }
-					if (res) {
-						if (res.httpCode) {
+			        } else if (res.type === HttpEventType.ResponseHeader) {
+			        	/* res.type == 2 */
+			        	console.log("post : get header");
+			        } else if (res.type === HttpEventType.DownloadProgress) {
+			        	/* res.type == 3 */
+			        	console.log("post : get DownloadProgress " + res.loaded);
+			        } else if (res.type === HttpEventType.Response) {
+			        	/* res.type == 4 */
+			        	console.log("post : get response");
+			        	if (res.httpCode) {
 							resolve({status:res.httpCode, data:res});
 						} else {
 							resolve({status:200, data:res});
 						}
-					} else {
-						resolve({status:200, data:""});
-					}
+			        } else if (res.type === HttpEventType.User) {
+			        	/* res.type == 5 */
+			        	console.log("post : get User");
+			        } else {
+			        	console.log("post : get unknown ... " + res.type);
+			        }
 				},
 				error => {
 					if (self.displayReturn == true) {
diff --git a/front/src/app/service/video.ts b/front/src/app/service/video.ts
index f09d497..d29b5f1 100644
--- a/front/src/app/service/video.ts
+++ b/front/src/app/service/video.ts
@@ -32,21 +32,55 @@ export class VideoService {
 					reject(response);
 				});
 		});
-	};
+	}
 	
 	put(_id:number, _data:any):any {
 		let ret = this.http.put_specific(this.serviceName, _id, _data);
 		return this.bdd.setAfterPut(this.serviceName, _id, ret);
-	};
+	}
 	delete(_id:number):any {
 		let ret = this.http.delete_specific(this.serviceName, _id);
 		return this.bdd.delete(this.serviceName, _id, ret);
-	};
+	}
 	addCover(_id:number, _coverId:number):any {
 		return this.http.post_specific(this.serviceName, _id, {"data_id":_coverId}, "add_cover");
-	};
+	}
 	getCoverUrl(_coverId:number):any {
 		return this.http.createRESTCall("data/" + _coverId);
-	};
+	}
+	
+	uploadFile(_file:File,
+			   _universe:string,
+			   _serie:string,
+			   _saison:number,
+			   _episode:number,
+			   _title:string,
+			   _type_id:number,
+			   _progress:any = null) {
+	    const formData = new FormData();
+	    formData.append('file_name', _file.name);
+	    formData.append('universe', _universe);
+	    formData.append('serie', _serie);
+	    if (_saison != null) {
+	    	formData.append('saison', _saison.toString());
+	    } else {
+	    	formData.append('saison', null);
+	    }
+	    
+	    if (_episode != null) {
+	    	formData.append('episode', _episode.toString());
+	    } else {
+	    	formData.append('episode', null);
+	    }
+	    formData.append('title', _title);
+
+	    if (_type_id != null) {
+	    	formData.append('type_id', _type_id.toString());
+	    } else {
+    		formData.append('type_id', null);
+	    }
+	    formData.append('file', _file);
+		return this.http.uploadMultipart(this.serviceName + "/upload/", formData, _progress);
+	}
 }
 
diff --git a/front/src/environments/environment.prod.ts b/front/src/environments/environment.prod.ts
index 05c0e2d..8c39ab6 100644
--- a/front/src/environments/environment.prod.ts
+++ b/front/src/environments/environment.prod.ts
@@ -7,6 +7,7 @@ export const environment = {
 	production: true,
 	// URL of development API
 	apiUrl: 'http://192.168.1.156/karideo/api',
+	apiOAuthUrl: 'http://192.168.1.156/oauth/api',
 	frontBaseUrl: 'karideo',
 	apiMode: "QUERRY",
 	//apiMode: "REWRITE",