[DEV] better UI & add confirm of the delete

front/src/app/app.module.ts

@@ -24,10 +24,12 @@ import { ElementTypeComponent } from './component/element-type/element-type';
 import { ElementSeriesComponent } from './component/element-series/element-series';
 import { ElementSeasonComponent } from './component/element-season/element-season';
 import { ElementVideoComponent } from './component/element-video/element-video';
-import { CreateTypeComponent } from './component/create-type/create-type';
-import { PopInUploadProgress } from './component/upload-progress/upload-progress';
 import { PopInComponent } from './component/popin/popin';
 
+import { CreateTypeComponent } from './popin/create-type/create-type';
+import { PopInUploadProgress } from './popin/upload-progress/upload-progress';
+import { PopInDeleteConfirm } from './popin/delete-confirm/delete-confirm';
+
 import { HelpScene } from './scene/help/help';
 import { LoginScene } from './scene/login/login';
 import { SignUpScene } from './scene/sign-up/sign-up';
@@ -92,6 +94,7 @@ import { AppComponent } from './app.component';
 		SeriesEditScene,
 		PopInComponent,
 		PopInUploadProgress,
+		PopInDeleteConfirm,
 		CreateTypeComponent,
 		UploadScene
 		],

front/src/app/popin/delete-confirm/delete-confirm.html

@@ -0,0 +1,16 @@
+<div>
+	<popin id="popin-delete-confirm"
+	       popSize="small"
+	       popTitle="Confirm Remove"
+	       [closeTitle]="closeButtonTitle"
+	       [validateTitle]="validateButtonTitle"
+	       closeTopRight="true"
+	       (callback)="eventPopUp($event[0])">
+		<div class="expand" *ngIf="imageUrl != null">
+			<img src="{{imageUrl}}" class="cover"/>
+		</div>
+		<p class="expand">
+			<label class="unselectable"><b>{{comment}}</b></label>
+		</p>
+	</popin>
+</div>

front/src/app/popin/delete-confirm/delete-confirm.less

@@ -0,0 +1,15 @@
+
+
+.expand {
+	width: 100%;
+	input {
+		width: 100%;
+	};
+	div {
+		width: 100%;
+	};
+	textarea {
+		width: 100%;
+	};
+	text-align:center;
+}

front/src/app/popin/delete-confirm/delete-confirm.ts

@@ -0,0 +1,52 @@
+/** @file
+ * @author Edouard DUPIN
+ * @copyright 2018, Edouard DUPIN, all right reserved
+ * @license PROPRIETARY (see license file)
+ */
+import { Injectable, Component, OnInit, Input, Output, SimpleChanges, EventEmitter} from '@angular/core';
+
+//import { AppRoutingModule } from "../app-routing.module";
+
+import { Router } from "@angular/router";
+import { ActivatedRoute, Params } from '@angular/router';
+import { TypeService } from '../../service/type';
+import { PopInService } from '../../service/popin';
+
+@Component({
+	selector: 'delete-confirm',
+	templateUrl: './delete-confirm.html',
+	styleUrls: ['./delete-confirm.less']
+})
+
+@Injectable()
+export class PopInDeleteConfirm implements OnInit {
+
+	@Input() comment: string = null;
+	@Input() imageUrl: string = null;
+	@Output() callback: EventEmitter<any> = new EventEmitter();
+	
+	public closeButtonTitle: string = "Cancel";
+	public validateButtonTitle: string = "Validate";
+	
+	constructor(private router: Router,
+	            private popInService: PopInService) {
+		
+	}
+	
+	OnDestroy() {
+		
+	}
+	
+	ngOnInit() {
+		
+	}
+	
+	eventPopUp(_event: string): void {
+		console.log("GET event: " + _event);
+		this.popInService.close("popin-delete-confirm");
+		if (_event == "validate") {
+			this.callback.emit(null);
+		}
+	}
+	
+}

front/src/app/popin/upload-progress/upload-progress.html

@@ -10,11 +10,11 @@
 			<label class="unselectable"><b>{{mediaTitle}}</b></label>
 		</p>
 		<div *ngIf="progress != 100" class="progress-back">
- 				<div class="progress-bar" style="width:{{progress}}%">&nbsp;&nbsp;&nbsp;{{progress}}%</div>
+ 			<div class="progress-bar" style="width:{{progress}}%">&nbsp;&nbsp;&nbsp;{{progress}}%</div>
 		</div>
 		<div *ngIf="progress != 100" >
-			<label class="unselectable">upload:&nbsp;{{uploadDisplay}}</label><br/>
-			<label class="unselectable">size:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{sizeDisplay}}</label>
+			<label class="unselectable">Upload:</label><label style="text-align: right;">{{uploadDisplay}}</label><br/>
+			<label class="unselectable">Size:</label><label style="text-align: right;">{{sizeDisplay}}</label>
 		</div>
 		<div *ngIf="progress == 100 && error == null && result == null" >
 			<label class="unselectable">Upload done ... waiting server answer</label>

front/src/app/popin/upload-progress/upload-progress.ts

@@ -109,4 +109,20 @@ export class PopInUploadProgress implements OnInit {
 			this.validateButtonTitle = "Ok";
 		}
 	}
-}
+}
+
+
+export class UploadProgress {
+	labelMediaTitle: string = "";
+	mediaSendSize: number = 0;
+	mediaSize: number = 99999999999999;
+	result: string = null;
+	error: string = null;
+	clear() {
+		this.labelMediaTitle = "";
+		this.mediaSendSize = 0;
+		this.mediaSize = 99999999999999;
+		this.result = null;
+		this.error = null;
+	}
+};

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

@@ -1,5 +1,8 @@
 <div class="main-reduce">
 	<div class="fill-all">
+		<div class="title">
+			Edit season
+		</div>
 		<div class="request_raw">
 			<div class="label">
 				Number:
@@ -23,20 +26,12 @@
 				       (input)="onDescription($event.target.value)"/>
 			</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:
+				Add cover:
 			</div>
 			<div class="input">
 				<input type="file" 
@@ -45,5 +40,30 @@
 				       accept=".png,.jpg,.jpeg,.webp"/>{{upload_file_value}}
 			</div>
 		</div>
+		<div class="request_raw">
+			<div class="label">
+				Actual Covers:
+			</div>
+			<div class="input">
+				<div *ngFor="let element of covers_display" class="cover_div">
+					<img src="{{element.url}}" class="cover"/>
+					<div class="cover_remove_div">
+						<button class="button color-button-cancel color-shadow-black" (click)="removeCover(element.id)" type="submit">
+							<i class="material-icons">delete</i> Remove Cover
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="clear"></div>
 	</div>
-</div>
+</div>
+<upload-progress [mediaTitle]="upload.labelMediaTitle"
+	[mediaUploaded]="upload.mediaSendSize"
+	[mediaSize]="upload.mediaSize"
+	[result]="upload.result"
+	[error]="upload.error"></upload-progress>
+<delete-confirm
+	[comment]="confirmDeleteComment"
+	[imageUrl]=confirmDeleteImageUrl
+    (callback)="deleteConfirmed()"></delete-confirm>

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

@@ -9,6 +9,14 @@
 	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
 }
 
+
+.title {
+	width: 90%;
+	margin: 0 auto;
+	font-size: 50px;
+	text-align: center;
+}
+
 .request_raw {
 	width: 90%;
 	margin: 0 auto;

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

@@ -14,6 +14,8 @@ import { fadeInAnimation } from '../../_animations/index';
 import { SeasonService } from '../../service/season';
 import { DataService } from '../../service/data';
 import { ArianeService } from '../../service/ariane';
+import { UploadProgress } from '../../popin/upload-progress/upload-progress';
+import { PopInService } from '../../service/popin';                
 
 export class ElementList {
 	value: number;
@@ -43,14 +45,33 @@ export class SeasonEditScene implements OnInit {
 	upload_file_value:string = ""
 	selectedFiles:FileList;
 	
-	covers_display:Array<string> = [];
+	covers_display:Array<any> = [];
+	// section tha define the upload value to display in the pop-in of upload 
+	public upload:UploadProgress = new UploadProgress();
+	// ---------------  confirm section  ------------------ 
+	public confirmDeleteComment:string = null;
+	public confirmDeleteImageUrl:string = null;
+	private deleteCoverId:number = null;
+	deleteConfirmed() {
+		if (this.deleteCoverId !== null) {
+			this.removeCoverAfterConfirm(this.deleteCoverId);
+			this.cleanConfirm();
+		}
+	}
+	cleanConfirm() {
+		this.confirmDeleteComment = null;
+		this.confirmDeleteImageUrl = null;
+		this.deleteCoverId = null;
+	}
+	
 	
 	constructor(private route: ActivatedRoute,
 	            private router: Router,
 	            private locate: Location,
 	            private dataService: DataService,
 	            private seasonService: SeasonService,
-	            private arianeService: ArianeService) {
+	            private arianeService: ArianeService,
+	            private popInService: PopInService) {
 		
 	}
 	
@@ -61,16 +82,9 @@ export class SeasonEditScene implements OnInit {
 		this.seasonService.get(this.id_season)
 			.then(function(response) {
 				console.log("get response of season : " + JSON.stringify(response, null, 2));
-				self.numberVal = response.number;
+				self.numberVal = response.name;
 				self.description = response.description;
-				if (response.covers !== undefined && response.covers !== null) {
-					for (let iii=0; iii<response.covers.length; iii++) {
-						self.covers_display.push(self.seasonService.getCoverUrl(response.covers[iii]));
-					}
-				} else {
-					self.covers_display = []
-				}
-				console.log("covers_list : " + JSON.stringify(self.covers_display, null, 2));
+				self.updateCoverList(response.covers);
 			}).catch(function(response) {
 				self.error = "Can not get the data";
 				self.numberVal = null;
@@ -78,7 +92,20 @@ export class SeasonEditScene implements OnInit {
 				self.covers_display = [];
 			});
 	}
-	
+
+	updateCoverList(_covers: any) {
+		this.covers_display = [];
+		if (_covers !== undefined && _covers !== null) {
+			for (let iii=0; iii<_covers.length; iii++) {
+				this.covers_display.push({
+					id:_covers[iii],
+					url:this.seasonService.getCoverThumbnailUrl(_covers[iii])
+					});
+			}
+		} else {
+			this.covers_display = []
+		}
+	}
 	onNumber(_value:any):void {
 		this.numberVal = _value;
 	}
@@ -90,9 +117,12 @@ export class SeasonEditScene implements OnInit {
 	sendValues():void {
 		console.log("send new values....");
 		let data = {
-			"number": this.numberVal,
+			"name": this.numberVal,
 			"description": this.description
 		};
+		if (this.description === undefined) {
+			data["description"] = null;
+		}
 		this.seasonService.put(this.id_season, data);
 	}
 	
@@ -100,7 +130,7 @@ export class SeasonEditScene implements OnInit {
 	// (drop)="onDropFile($event)"
 	onDropFile(_event: DragEvent) {
 		_event.preventDefault();
-		this.uploadFile(_event.dataTransfer.files[0]);
+		//this.uploadFile(_event.dataTransfer.files[0]);
 	}
 	
 	// At the drag drop area
@@ -109,36 +139,58 @@ export class SeasonEditScene implements OnInit {
 		_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);
+		this.uploadCover(this.coverFile);
 	}
 	
-	uploadFile(_file:File) {
+	uploadCover(_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 season : " + JSON.stringify(response, null, 2));
-				let id_of_image = response.id;
-				self.seasonService.addCover(self.id_season, id_of_image)
-					.then(function(response) {
-						console.log("cover added");
-						self.covers_display.push(self.seasonService.getCoverUrl(id_of_image));
-					}).catch(function(response) {
-						console.log("Can not cover in the cover_list...");
-					});
-			}).catch(function(response) {
+		// clean upload labels
+		this.upload.clear();
+		// display the upload pop-in
+		this.popInService.open("popin-upload-progress");
+		this.seasonService.uploadCover(_file, this.id_season, function(count, total) {
+		    	self.upload.mediaSendSize = count;
+		    	self.upload.mediaSize = total;
+		    })
+			.then(function (response:any) {
+				self.upload.result = "Cover added done";
+				// TODO: we retrive the whiole media ==> update data ...
+				self.updateCoverList(response.covers);
+			}).catch(function (response:any) {
 				//self.error = "Can not get the data";
-				console.log("Can not add the data in the system...");
+				console.log("Can not add the cover in the video...");
+			});
+	}
+
+	removeCover(_id:number) {
+		this.cleanConfirm();
+		this.confirmDeleteComment = "Delete the cover ID: " + _id; 
+		this.confirmDeleteImageUrl = this.seasonService.getCoverThumbnailUrl(_id);
+		this.deleteCoverId = _id;
+		this.popInService.open("popin-delete-confirm");
+	}
+	removeCoverAfterConfirm(_id:number) {
+		console.log("Request remove cover: " + _id);
+		let self = this;
+		this.seasonService.deleteCover(this.id_season, _id)
+			.then(function (response:any) {
+				self.upload.result = "Cover remove done";
+				// TODO: we retrive the whiole media ==> update data ...
+				self.updateCoverList(response.covers);
+			}).catch(function (response:any) {
+				//self.error = "Can not get the data";
+				console.log("Can not remove the cover of the video...");
 			});
 	}
 

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

@@ -1,5 +1,8 @@
 <div class="main-reduce">
 	<div class="fill-all">
+		<div class="title">
+			Edit series
+		</div>
 		<div class="request_raw">
 			<div class="label">
 				Name:
@@ -23,20 +26,12 @@
 				       (input)="onDescription($event.target.value)"/>
 			</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:
+				Add cover:
 			</div>
 			<div class="input">
 				<input type="file" 
@@ -45,5 +40,31 @@
 				       accept=".png,.jpg,.jpeg,.webp"/>{{upload_file_value}}
 			</div>
 		</div>
+		<div class="request_raw">
+			<div class="label">
+				Actual Covers:
+			</div>
+			<div class="input">
+				<div *ngFor="let element of covers_display" class="cover_div">
+					<img src="{{element.url}}" class="cover"/>
+					<div class="cover_remove_div">
+						<button class="button color-button-cancel color-shadow-black" (click)="removeCover(element.id)" type="submit">
+							<i class="material-icons">delete</i> Remove Cover
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="clear"></div>
 	</div>
-</div>
+</div>
+
+<upload-progress [mediaTitle]="upload.labelMediaTitle"
+	[mediaUploaded]="upload.mediaSendSize"
+	[mediaSize]="upload.mediaSize"
+	[result]="upload.result"
+	[error]="upload.error"></upload-progress>
+<delete-confirm
+	[comment]="confirmDeleteComment"
+	[imageUrl]=confirmDeleteImageUrl
+    (callback)="deleteConfirmed()"></delete-confirm>

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

@@ -9,6 +9,14 @@
 	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
 }
 
+
+.title {
+	width: 90%;
+	margin: 0 auto;
+	font-size: 50px;
+	text-align: center;
+}
+
 .request_raw {
 	width: 90%;
 	margin: 0 auto;

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

@@ -14,6 +14,8 @@ import { fadeInAnimation } from '../../_animations/index';
 import { SeriesService } from '../../service/series';
 import { DataService } from '../../service/data';
 import { ArianeService } from '../../service/ariane';
+import { UploadProgress } from '../../popin/upload-progress/upload-progress';
+import { PopInService } from '../../service/popin';
 
 export class ElementList {
 	value: number;
@@ -43,14 +45,34 @@ export class SeriesEditScene implements OnInit {
 	upload_file_value:string = ""
 	selectedFiles:FileList;
 	
-	covers_display:Array<string> = [];
+	covers_display:Array<any> = [];
+	// section tha define the upload value to display in the pop-in of upload 
+	public upload:UploadProgress = new UploadProgress();
+
+	// ---------------  confirm section  ------------------ 
+	public confirmDeleteComment:string = null;
+	public confirmDeleteImageUrl:string = null;
+	private deleteCoverId:number = null;
+	deleteConfirmed() {
+		if (this.deleteCoverId !== null) {
+			this.removeCoverAfterConfirm(this.deleteCoverId);
+			this.cleanConfirm();
+		}
+	}
+	cleanConfirm() {
+		this.confirmDeleteComment = null;
+		this.confirmDeleteImageUrl = null;
+		this.deleteCoverId = null;
+	}
+	
 	
 	constructor(private route: ActivatedRoute,
 	            private router: Router,
 	            private locate: Location,
 	            private dataService: DataService,
 	            private seriesService: SeriesService,
-	            private arianeService: ArianeService) {
+	            private arianeService: ArianeService,
+	            private popInService: PopInService) {
 		
 	}
 	
@@ -60,17 +82,11 @@ export class SeriesEditScene implements OnInit {
 		let self = this;
 		this.seriesService.get(this.id_series)
 			.then(function(response) {
-				console.log("get response of video : " + JSON.stringify(response, null, 2));
+				//console.log("get response of video : " + JSON.stringify(response, null, 2));
 				self.name = response.name;
 				self.description = response.description;
-				if (response.covers !== undefined && response.covers !== null) {
-					for (let iii=0; iii<response.covers.length; iii++) {
-						self.covers_display.push(self.seriesService.getCoverUrl(response.covers[iii]));
-					}
-				} else {
-					self.covers_display = []
-				}
-				console.log("covers_list : " + JSON.stringify(self.covers_display, null, 2));
+				self.updateCoverList(response.covers);
+				//console.log("covers_list : " + JSON.stringify(self.covers_display, null, 2));
 			}).catch(function(response) {
 				self.error = "Can not get the data";
 				self.name = "";
@@ -78,6 +94,20 @@ export class SeriesEditScene implements OnInit {
 				self.covers_display = [];
 			});
 	}
+
+	updateCoverList(_covers: any) {
+		this.covers_display = [];
+		if (_covers !== undefined && _covers !== null) {
+			for (let iii=0; iii<_covers.length; iii++) {
+				this.covers_display.push({
+					id:_covers[iii],
+					url:this.seriesService.getCoverThumbnailUrl(_covers[iii])
+					});
+			}
+		} else {
+			this.covers_display = []
+		}
+	}
 	
 	onName(_value:any):void {
 		this.name = _value;
@@ -93,6 +123,9 @@ export class SeriesEditScene implements OnInit {
 			"name": this.name,
 			"description": this.description
 		};
+		if (this.description === undefined) {
+			data["description"] = null;
+		}
 		this.seriesService.put(this.id_series, data);
 	}
 	
@@ -100,7 +133,7 @@ export class SeriesEditScene implements OnInit {
 	// (drop)="onDropFile($event)"
 	onDropFile(_event: DragEvent) {
 		_event.preventDefault();
-		this.uploadFile(_event.dataTransfer.files[0]);
+		//this.uploadFile(_event.dataTransfer.files[0]);
 	}
 	
 	// At the drag drop area
@@ -116,29 +149,51 @@ export class SeriesEditScene implements OnInit {
 		this.selectedFiles = _value.files
 		this.coverFile = this.selectedFiles[0];
 		console.log("select file " + this.coverFile.name);
-		this.uploadFile(this.coverFile);
+		this.uploadCover(this.coverFile);
 	}
 	
-	uploadFile(_file:File) {
+	uploadCover(_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.seriesService.addCover(self.id_series, id_of_image)
-					.then(function(response) {
-						console.log("cover added");
-						self.covers_display.push(self.seriesService.getCoverUrl(id_of_image));
-					}).catch(function(response) {
-						console.log("Can not cover in the cover_list...");
-					});
-			}).catch(function(response) {
+		// clean upload labels
+		this.upload.clear();
+		// display the upload pop-in
+		this.popInService.open("popin-upload-progress");
+		this.seriesService.uploadCover(_file, this.id_series, function(count, total) {
+		    	self.upload.mediaSendSize = count;
+		    	self.upload.mediaSize = total;
+		    })
+			.then(function (response:any) {
+				self.upload.result = "Cover added done";
+				// TODO: we retrive the whiole media ==> update data ...
+				self.updateCoverList(response.covers);
+			}).catch(function (response:any) {
 				//self.error = "Can not get the data";
-				console.log("Can not add the data in the system...");
+				console.log("Can not add the cover in the video...");
+			});
+	}
+
+	removeCover(_id:number) {
+		this.cleanConfirm();
+		this.confirmDeleteComment = "Delete the cover ID: " + _id; 
+		this.confirmDeleteImageUrl = this.seriesService.getCoverThumbnailUrl(_id);
+		this.deleteCoverId = _id;
+		this.popInService.open("popin-delete-confirm");
+	}
+	removeCoverAfterConfirm(_id:number) {
+		console.log("Request remove cover: " + _id);
+		let self = this;
+		this.seriesService.deleteCover(this.id_series, _id)
+			.then(function (response:any) {
+				self.upload.result = "Cover remove done";
+				// TODO: we retrive the whiole media ==> update data ...
+				self.updateCoverList(response.covers);
+			}).catch(function (response:any) {
+				//self.error = "Can not get the data";
+				console.log("Can not remove the cover of the video...");
 			});
 	}
 

front/src/app/scene/series/series.ts

@@ -29,9 +29,9 @@ export class SeriesScene implements OnInit {
 	cover: string = ""
 	covers: Array<string> = []
 	seasons_error: string = "";
-	seasons: Array<number> = [];
+	seasons: Array<any> = [];
 	videos_error: string = "";
-	videos: Array<number> = [];
+	videos: Array<any> = [];
 	constructor(private route: ActivatedRoute,
 	            private router: Router,
 	            private locate: Location,

front/src/app/scene/upload/upload.html

@@ -141,11 +141,12 @@
 		<div class="clear"></div>
 	</div>
 </div>
-<upload-progress [mediaTitle]="uploadLabelMediaTitle"
-	[mediaUploaded]="uploadMediaSendSize"
-	[mediaSize]="uploadMediaSize"
-	[result]="uploadResult"
-	[error]="uploadError"></upload-progress>
+<upload-progress [mediaTitle]="upload.labelMediaTitle"
+	[mediaUploaded]="upload.mediaSendSize"
+	[mediaSize]="upload.mediaSize"
+	[result]="upload.result"
+	[error]="upload.error"></upload-progress>
+
 <!--
 TODO: add a pop-in with:
   - upload done

front/src/app/scene/upload/upload.ts

@@ -21,6 +21,7 @@ import { SeriesService } from '../../service/series';
 import { VideoService } from '../../service/video';
 import { DataService } from '../../service/data';
 import { ArianeService } from '../../service/ariane';
+import { UploadProgress } from '../../popin/upload-progress/upload-progress';
 
 export class ElementList {
 	value: number;
@@ -53,13 +54,10 @@ export class UploadScene implements OnInit {
 	need_send: boolean = false;
 
 	covers_display: Array<any> = [];
-	
+
 	// section tha define the upload value to display in the pop-in of upload 
-	uploadLabelMediaTitle: string = "";
-	uploadMediaSendSize: number = 0;
-	uploadMediaSize: number = 0;
-	uploadResult: string = null;
-	uploadError: string = null;
+	public upload:UploadProgress = new UploadProgress();
+
 	
 
 	listType: ElementList[] = [
@@ -383,42 +381,37 @@ export class UploadScene implements OnInit {
 		this.parse_episode = null;
 		this.parse_title = "";
 		*/
-		// clean upload labels
-		this.uploadMediaSendSize = 0;
-    	this.uploadMediaSize = 0;
-		this.uploadLabelMediaTitle = "";
-		this.uploadResult = null;
-		this.uploadError = null;
+		this.upload = new UploadProgress();
 		// add universe
 		if (this.parse_universe != null) {
-			this.uploadLabelMediaTitle += this.parse_universe;
+			this.upload.labelMediaTitle += this.parse_universe;
 		}
 		// add series
 		if (this.parse_series != null) {
-			if (this.uploadLabelMediaTitle.length != 0) {
-				this.uploadLabelMediaTitle += "/";
+			if (this.upload.labelMediaTitle.length != 0) {
+				this.upload.labelMediaTitle += "/";
 			}
-			this.uploadLabelMediaTitle += this.parse_series;
+			this.upload.labelMediaTitle += this.parse_series;
 		}
 		// add season
 		if (this.parse_season != null) {
-			if (this.uploadLabelMediaTitle.length != 0) {
-				this.uploadLabelMediaTitle += "-";
+			if (this.upload.labelMediaTitle.length != 0) {
+				this.upload.labelMediaTitle += "-";
 			}
-			this.uploadLabelMediaTitle += "s" + this.parse_season.toString();
+			this.upload.labelMediaTitle += "s" + this.parse_season.toString();
 		}
 		// add episode ID
 		if (this.parse_episode != null) {
-			if (this.uploadLabelMediaTitle.length != 0) {
-				this.uploadLabelMediaTitle += "-";
+			if (this.upload.labelMediaTitle.length != 0) {
+				this.upload.labelMediaTitle += "-";
 			}
-			this.uploadLabelMediaTitle += "e" + this.parse_episode.toString();
+			this.upload.labelMediaTitle += "e" + this.parse_episode.toString();
 		}
 		// add title
-		if (this.uploadLabelMediaTitle.length != 0) {
-			this.uploadLabelMediaTitle += "-";
+		if (this.upload.labelMediaTitle.length != 0) {
+			this.upload.labelMediaTitle += "-";
 		}
-		this.uploadLabelMediaTitle += this.parse_title;
+		this.upload.labelMediaTitle += this.parse_title;
 		// display the upload pop-in
 		this.popInService.open("popin-upload-progress");
 		this.videoService.uploadFile(_file,
@@ -430,17 +423,17 @@ export class UploadScene implements OnInit {
 				this.type_id,
 				function(count, total) {
 	    	//console.log("upload : " + count*100/total);
-	    	self.uploadMediaSendSize = count;
-	    	self.uploadMediaSize = total;
+	    	self.upload.mediaSendSize = count;
+	    	self.upload.mediaSize = total;
 	    	
 	    })
 		.then(function (response) {
 			console.log("get response of video : " + JSON.stringify(response, null, 2));
-			self.uploadResult = "Media creation done";
+			self.upload.result = "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);
+			self.upload.error = "Error in the upload of the data..." + JSON.stringify(response, null, 2);
 		});
 	}
 	removeCover (_id) {

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

@@ -1,5 +1,25 @@
 <div class="main-reduce">
-	<div class="fill-all">
+	<div class="fill-all" *ngIf="mediaIsRemoved">
+		<div class="title">
+			Edit media<br/><br/><br/><br/><br/>
+			The media has been removed
+		</div>
+	</div>
+	<div class="fill-all" *ngIf="mediaIsNotFound">
+		<div class="title">
+			Edit media<br/><br/><br/><br/><br/>
+			The media does not exist
+		</div>
+	</div>
+	<div class="fill-all" *ngIf="mediaIsLoading">
+		<div class="title">
+			Edit media<br/><br/><br/><br/><br/>
+			Loading ...<br/> 
+			Please wait.
+		</div>
+	</div>
+	
+	<div class="fill-all" *ngIf="!mediaIsRemoved  && !mediaIsNotFound && !mediaIsLoading">
 		<div class="title">
 			Edit media
 		</div>
@@ -170,12 +190,16 @@
 
 <create-type ></create-type>
 
-<upload-progress [mediaTitle]="uploadLabelMediaTitle"
-	[mediaUploaded]="uploadMediaSendSize"
-	[mediaSize]="uploadMediaSize"
-	[result]="uploadResult"
-	[error]="uploadError"></upload-progress>
+<upload-progress [mediaTitle]="upload.labelMediaTitle"
+	[mediaUploaded]="upload.mediaSendSize"
+	[mediaSize]="upload.mediaSize"
+	[result]="upload.result"
+	[error]="upload.error"></upload-progress>
 
+<delete-confirm
+	[comment]="confirmDeleteComment"
+	[imageUrl]=confirmDeleteImageUrl
+    (callback)="deleteConfirmed()"></delete-confirm>
 
 <popin id="popin-new-season"
        popTitle="Create a new season"

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

@@ -22,6 +22,7 @@ import { SeasonService } from '../../service/season';
 import { VideoService } from '../../service/video';
 import { DataService } from '../../service/data';
 import { ArianeService } from '../../service/ariane';
+import { UploadProgress } from '../../popin/upload-progress/upload-progress';
 
 export class ElementList {
 	value: number;
@@ -72,6 +73,9 @@ class DataToSend {
 // https://www.sitepoint.com/angular-forms/
 export class VideoEditScene implements OnInit {
 	id_video:number = -1;
+	mediaIsRemoved:boolean = false
+	mediaIsNotFound:boolean = false
+	mediaIsLoading:boolean = true
 	
 	error:string = ""
 	
@@ -84,12 +88,28 @@ export class VideoEditScene implements OnInit {
 	
 
 	// section tha define the upload value to display in the pop-in of upload 
-	uploadLabelMediaTitle: string = "";
-	uploadMediaSendSize: number = 0;
-	uploadMediaSize: number = 0;
-	uploadResult: string = null;
-	uploadError: string = null;
-
+	upload:UploadProgress = new UploadProgress();
+	// ---------------  confirm section  ------------------ 
+	public confirmDeleteComment:string = null;
+	public confirmDeleteImageUrl:string = null;
+	private deleteCoverId:number = null;
+	private deleteMediaId:number = null;
+	deleteConfirmed() {
+		if (this.deleteCoverId !== null) {
+			this.removeCoverAfterConfirm(this.deleteCoverId);
+			this.cleanConfirm();
+		}
+		if (this.deleteMediaId !== null) {
+			this.removeMediaAfterConfirm(this.deleteMediaId);
+			this.cleanConfirm();
+		}
+	}
+	cleanConfirm() {
+		this.confirmDeleteComment = null;
+		this.confirmDeleteImageUrl = null;
+		this.deleteCoverId = null;
+		this.deleteMediaId = null;
+	}
 
 	covers_display:Array<any> = [];
 	
@@ -228,12 +248,15 @@ export class VideoEditScene implements OnInit {
 				self.updateCoverList(response.covers);
 				self.updateNeedSend();
 				console.log("covers_list : " + JSON.stringify(self.covers_display, null, 2));
+				self.mediaIsLoading = false;
 			}).catch(function(response) {
 				self.error = "Can not get the data";
 				self.data = new DataToSend();
 				self.covers_display = [];
 				self.data_ori = self.data.clone();
 				self.updateNeedSend();
+				self.mediaIsNotFound = true;
+				self.mediaIsLoading = false;
 			});
 	}
 	
@@ -328,7 +351,11 @@ export class VideoEditScene implements OnInit {
 			data["name"] = this.data.name;
 		}
 		if (this.data.description != this.data_ori.description) {
-			data["description"] = this.data.description;
+			if (this.data.description == undefined) {
+				data["description"] = null;
+			} else {
+				data["description"] = this.data.description;
+			}
 		}
 		if (this.data.episode != this.data_ori.episode) {
 			data["episode"] = this.data.episode;
@@ -407,52 +434,63 @@ export class VideoEditScene implements OnInit {
 			return;
 		}
 		let self = this;
-		// clean upload labels
-		this.uploadMediaSendSize = 0;
-    	this.uploadMediaSize = 0;
-		this.uploadLabelMediaTitle = "";
-		this.uploadResult = null;
-		this.uploadError = null;
+		// clean upload labels*
+		this.upload.clear();
 		// display the upload pop-in
 		this.popInService.open("popin-upload-progress");
 		this.videoService.uploadCover(_file, this.id_video, function(count, total) {
-	    	self.uploadMediaSendSize = count;
-	    	self.uploadMediaSize = total;
+	    	self.upload.mediaSendSize = count;
+	    	self.upload.mediaSize = total;
 	    })
 		.then(function (response:any) {
 			console.log("get response of cover : " + JSON.stringify(response, null, 2));
-			self.uploadResult = "Cover added done";
+			self.upload.result = "Cover added done";
 			// TODO: we retrive the whiole media ==> update data ...
 			self.updateCoverList(response.covers);
 		}).catch(function (response:any) {
 			//self.error = "Can not get the data";
 			console.log("Can not add the cover in the video...");
-			self.uploadError = "Error in the upload of the cover..." + JSON.stringify(response, null, 2);
+			self.upload.error = "Error in the upload of the cover..." + JSON.stringify(response, null, 2);
 		});
 	}
+
 	removeCover(_id:number) {
+		this.cleanConfirm();
+		this.confirmDeleteComment = "Delete the cover ID: " + _id; 
+		this.confirmDeleteImageUrl = this.seriesService.getCoverThumbnailUrl(_id);
+		this.deleteCoverId = _id;
+		this.popInService.open("popin-delete-confirm");
+	}
+	removeCoverAfterConfirm(_id:number) {
 		console.log("Request remove cover: " + _id);
 		let self = this;
 		this.videoService.deleteCover(this.id_video, _id)
 			.then(function (response:any) {
 				console.log("get response of remove cover : " + JSON.stringify(response, null, 2));
-				self.uploadResult = "Cover remove done";
+				self.upload.result = "Cover remove done";
 				// TODO: we retrive the whiole media ==> update data ...
 				self.updateCoverList(response.covers);
 			}).catch(function (response:any) {
 				//self.error = "Can not get the data";
 				console.log("Can not remove the cover of the video...");
-				self.uploadError = "Error in the upload of the cover..." + JSON.stringify(response, null, 2);
+				self.upload.error = "Error in the upload of the cover..." + JSON.stringify(response, null, 2);
 			});
 	}
 	removeMedia() {
 		console.log("Request remove Media...");
-		this.videoService.delete(this.id_video)
+		this.cleanConfirm();
+		this.confirmDeleteComment = "Delete the Media: " + this.id_video; 
+		this.deleteMediaId = this.id_video;
+		this.popInService.open("popin-delete-confirm");
+	}
+	removeMediaAfterConfirm(_id:number) {
+		let self = this;
+		this.videoService.delete(_id)
 			.then(function(response3) {
 				//self.data_ori = tmpp;
 				//self.updateNeedSend();
+				self.mediaIsRemoved = true;
 			}).catch(function(response3) {
-				
 				//self.updateNeedSend();
 			});
 	}

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

@@ -1,5 +1,19 @@
 <div class="main-reduce">
-	<div class="fill-all">
+	<div class="fill-all" *ngIf="mediaIsNotFound">
+		<div class="title">
+			Edit media<br/><br/><br/><br/><br/>
+			The media does not exist
+		</div>
+	</div>
+	<div class="fill-all" *ngIf="mediaIsLoading">
+		<div class="title">
+			Edit media<br/><br/><br/><br/><br/>
+			Loading ...<br/> 
+			Please wait.
+		</div>
+	</div>
+	
+	<div class="fill-all" *ngIf="!mediaIsNotFound && !mediaIsLoading">
 		<div class="title">
 			{{name}}
 		</div>

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

@@ -24,7 +24,9 @@ import { ArianeService } from '../../service/ariane';
 
 export class VideoScene implements OnInit {
 	id_video:number = -1;
-	
+
+	mediaIsNotFound:boolean = false
+	mediaIsLoading:boolean = true
 	error:string = ""
 	
 	name:string = ""
@@ -124,6 +126,7 @@ export class VideoScene implements OnInit {
 							// nothing to do ...
 						});
 				}
+				self.mediaIsLoading = false;
 				//console.log("display source " + self.video_source);
 				//console.log("set transformed : " + JSON.stringify(self, null, 2));
 			}).catch(function(response) {
@@ -140,6 +143,8 @@ export class VideoScene implements OnInit {
 				self.cover = null;
 				self.series_name = undefined;
 				self.season_name = undefined;
+				self.mediaIsNotFound = true;
+				self.mediaIsLoading = false;
 			});
 	}
 

front/src/app/service/season.ts

@@ -61,14 +61,53 @@ export class SeasonService {
 		let ret = this.http.put_specific(this.serviceName, _id, _data);
 		return this.bdd.setAfterPut(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);
 	}
 	getCoverThumbnailUrl(_coverId:number):any {
 		return this.http.createRESTCall("data/thumbnail/" + _coverId);
 	}
+	deleteCover(_node_id:number,
+				_cover_id:number) {
+	    let self = this;
+		return new Promise((resolve, reject) => {
+			self.http.get_specific(this.serviceName + "/" + _node_id + "/rm_cover" , _cover_id)
+				.then(function(response) {
+					let data = response;
+					if (data === null || data === undefined) {
+						reject("error retrive data from server");
+						return;
+					}
+					self.bdd.asyncSetInDB(self.serviceName, _node_id, data);
+					resolve(data);
+				}).catch(function(response) {
+					reject(response);
+				});
+		});
+		
+	}
+	uploadCover(_file:File,
+				_node_id:number,
+			    _progress:any = null) {
+	    const formData = new FormData();
+	    formData.append('file_name', _file.name);
+		formData.append('node_id', _node_id.toString());
+	    formData.append('file', _file);
+	    let self = this;
+		return new Promise((resolve, reject) => {
+			self.http.uploadMultipart(this.serviceName + "/" + _node_id + "/add_cover/", formData, _progress)
+				.then(function(response) {
+					let data = response;
+					if (data === null || data === undefined) {
+						reject("error retrive data from server");
+						return;
+					}
+					self.bdd.asyncSetInDB(self.serviceName, _node_id, data);
+					resolve(data);
+				}).catch(function(response) {
+					reject(response);
+				});
+		});
+	}
 }
 

front/src/app/service/series.ts

@@ -107,11 +107,7 @@ export class SeriesService {
 		let ret = this.http.put_specific(this.serviceName, _id, _data);
 		return this.bdd.setAfterPut(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);
 	}
@@ -137,5 +133,47 @@ export class SeriesService {
 				});
 		});
 	}
+	deleteCover(_node_id:number,
+				_cover_id:number) {
+	    let self = this;
+		return new Promise((resolve, reject) => {
+			self.http.get_specific(this.serviceName + "/" + _node_id + "/rm_cover" , _cover_id)
+				.then(function(response) {
+					let data = response;
+					if (data === null || data === undefined) {
+						reject("error retrive data from server");
+						return;
+					}
+					self.bdd.asyncSetInDB(self.serviceName, _node_id, data);
+					resolve(data);
+				}).catch(function(response) {
+					reject(response);
+				});
+		});
+		
+	}
+	uploadCover(_file:File,
+				_node_id:number,
+			    _progress:any = null) {
+	    const formData = new FormData();
+	    formData.append('file_name', _file.name);
+		formData.append('node_id', _node_id.toString());
+	    formData.append('file', _file);
+	    let self = this;
+		return new Promise((resolve, reject) => {
+			self.http.uploadMultipart(this.serviceName + "/" + _node_id + "/add_cover/", formData, _progress)
+				.then(function(response) {
+					let data = response;
+					if (data === null || data === undefined) {
+						reject("error retrive data from server");
+						return;
+					}
+					self.bdd.asyncSetInDB(self.serviceName, _node_id, data);
+					resolve(data);
+				}).catch(function(response) {
+					reject(response);
+				});
+		});
+	}
 }
 

front/src/app/service/universe.ts

@@ -56,11 +56,50 @@ export class UniverseService {
 		let ret = this.http.put_specific(this.serviceName, _id, _data);
 		return this.bdd.setAfterPut(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);
 	}
+	deleteCover(_node_id:number,
+			_cover_id:number) {
+	    let self = this;
+		return new Promise((resolve, reject) => {
+			self.http.get_specific(this.serviceName + "/" + _node_id + "/rm_cover" , _cover_id)
+				.then(function(response) {
+					let data = response;
+					if (data === null || data === undefined) {
+						reject("error retrive data from server");
+						return;
+					}
+					self.bdd.asyncSetInDB(self.serviceName, _node_id, data);
+					resolve(data);
+				}).catch(function(response) {
+					reject(response);
+				});
+		});
+		
+	}
+	uploadCover(_file:File,
+				_node_id:number,
+			    _progress:any = null) {
+	    const formData = new FormData();
+	    formData.append('file_name', _file.name);
+		formData.append('node_id', _node_id.toString());
+	    formData.append('file', _file);
+	    let self = this;
+		return new Promise((resolve, reject) => {
+			self.http.uploadMultipart(this.serviceName + "/" + _node_id + "/add_cover/", formData, _progress)
+				.then(function(response) {
+					let data = response;
+					if (data === null || data === undefined) {
+						reject("error retrive data from server");
+						return;
+					}
+					self.bdd.asyncSetInDB(self.serviceName, _node_id, data);
+					resolve(data);
+				}).catch(function(response) {
+					reject(response);
+				});
+		});
+	}
 }