[DEV] better UI & add confirm of the delete

This commit is contained in:
Edouard DUPIN 2020-10-24 21:46:00 +02:00
parent 578054df58
commit 06039dbe12
27 changed files with 616 additions and 159 deletions

View File

@ -24,10 +24,12 @@ import { ElementTypeComponent } from './component/element-type/element-type';
import { ElementSeriesComponent } from './component/element-series/element-series'; import { ElementSeriesComponent } from './component/element-series/element-series';
import { ElementSeasonComponent } from './component/element-season/element-season'; import { ElementSeasonComponent } from './component/element-season/element-season';
import { ElementVideoComponent } from './component/element-video/element-video'; 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 { 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 { HelpScene } from './scene/help/help';
import { LoginScene } from './scene/login/login'; import { LoginScene } from './scene/login/login';
import { SignUpScene } from './scene/sign-up/sign-up'; import { SignUpScene } from './scene/sign-up/sign-up';
@ -92,6 +94,7 @@ import { AppComponent } from './app.component';
SeriesEditScene, SeriesEditScene,
PopInComponent, PopInComponent,
PopInUploadProgress, PopInUploadProgress,
PopInDeleteConfirm,
CreateTypeComponent, CreateTypeComponent,
UploadScene UploadScene
], ],

View File

@ -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>

View File

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

View File

@ -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);
}
}
}

View File

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

View File

@ -109,4 +109,20 @@ export class PopInUploadProgress implements OnInit {
this.validateButtonTitle = "Ok"; 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;
}
};

View File

@ -1,5 +1,8 @@
<div class="main-reduce"> <div class="main-reduce">
<div class="fill-all"> <div class="fill-all">
<div class="title">
Edit season
</div>
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Number: Number:
@ -23,20 +26,12 @@
(input)="onDescription($event.target.value)"/> (input)="onDescription($event.target.value)"/>
</div> </div>
</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"> <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> <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>
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Covers: Add cover:
</div> </div>
<div class="input"> <div class="input">
<input type="file" <input type="file"
@ -45,5 +40,30 @@
accept=".png,.jpg,.jpeg,.webp"/>{{upload_file_value}} accept=".png,.jpg,.jpeg,.webp"/>{{upload_file_value}}
</div> </div>
</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> </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>

View File

@ -9,6 +9,14 @@
box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); 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 { .request_raw {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;

View File

@ -14,6 +14,8 @@ import { fadeInAnimation } from '../../_animations/index';
import { SeasonService } from '../../service/season'; import { SeasonService } from '../../service/season';
import { DataService } from '../../service/data'; import { DataService } from '../../service/data';
import { ArianeService } from '../../service/ariane'; import { ArianeService } from '../../service/ariane';
import { UploadProgress } from '../../popin/upload-progress/upload-progress';
import { PopInService } from '../../service/popin';
export class ElementList { export class ElementList {
value: number; value: number;
@ -43,14 +45,33 @@ export class SeasonEditScene implements OnInit {
upload_file_value:string = "" upload_file_value:string = ""
selectedFiles:FileList; 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, constructor(private route: ActivatedRoute,
private router: Router, private router: Router,
private locate: Location, private locate: Location,
private dataService: DataService, private dataService: DataService,
private seasonService: SeasonService, 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) this.seasonService.get(this.id_season)
.then(function(response) { .then(function(response) {
console.log("get response of season : " + JSON.stringify(response, null, 2)); console.log("get response of season : " + JSON.stringify(response, null, 2));
self.numberVal = response.number; self.numberVal = response.name;
self.description = response.description; self.description = response.description;
if (response.covers !== undefined && response.covers !== null) { self.updateCoverList(response.covers);
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));
}).catch(function(response) { }).catch(function(response) {
self.error = "Can not get the data"; self.error = "Can not get the data";
self.numberVal = null; self.numberVal = null;
@ -78,7 +92,20 @@ export class SeasonEditScene implements OnInit {
self.covers_display = []; 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 { onNumber(_value:any):void {
this.numberVal = _value; this.numberVal = _value;
} }
@ -90,9 +117,12 @@ export class SeasonEditScene implements OnInit {
sendValues():void { sendValues():void {
console.log("send new values...."); console.log("send new values....");
let data = { let data = {
"number": this.numberVal, "name": this.numberVal,
"description": this.description "description": this.description
}; };
if (this.description === undefined) {
data["description"] = null;
}
this.seasonService.put(this.id_season, data); this.seasonService.put(this.id_season, data);
} }
@ -100,7 +130,7 @@ export class SeasonEditScene implements OnInit {
// (drop)="onDropFile($event)" // (drop)="onDropFile($event)"
onDropFile(_event: DragEvent) { onDropFile(_event: DragEvent) {
_event.preventDefault(); _event.preventDefault();
this.uploadFile(_event.dataTransfer.files[0]); //this.uploadFile(_event.dataTransfer.files[0]);
} }
// At the drag drop area // At the drag drop area
@ -109,36 +139,58 @@ export class SeasonEditScene implements OnInit {
_event.stopPropagation(); _event.stopPropagation();
_event.preventDefault(); _event.preventDefault();
} }
// At the file input element // At the file input element
// (change)="selectFile($event)" // (change)="selectFile($event)"
onChangeCover(_value:any):void { onChangeCover(_value:any):void {
this.selectedFiles = _value.files this.selectedFiles = _value.files
this.coverFile = this.selectedFiles[0]; this.coverFile = this.selectedFiles[0];
console.log("select file " + this.coverFile.name); console.log("select file " + this.coverFile.name);
this.uploadFile(this.coverFile); this.uploadCover(this.coverFile);
} }
uploadFile(_file:File) { uploadCover(_file:File) {
if (_file == undefined) { if (_file == undefined) {
console.log("No file selected!"); console.log("No file selected!");
return; return;
} }
let self = this; let self = this;
this.dataService.sendFile(_file) // clean upload labels
.then(function(response) { this.upload.clear();
console.log("get response of season : " + JSON.stringify(response, null, 2)); // display the upload pop-in
let id_of_image = response.id; this.popInService.open("popin-upload-progress");
self.seasonService.addCover(self.id_season, id_of_image) this.seasonService.uploadCover(_file, this.id_season, function(count, total) {
.then(function(response) { self.upload.mediaSendSize = count;
console.log("cover added"); self.upload.mediaSize = total;
self.covers_display.push(self.seasonService.getCoverUrl(id_of_image)); })
}).catch(function(response) { .then(function (response:any) {
console.log("Can not cover in the cover_list..."); self.upload.result = "Cover added done";
}); // TODO: we retrive the whiole media ==> update data ...
}).catch(function(response) { self.updateCoverList(response.covers);
}).catch(function (response:any) {
//self.error = "Can not get the data"; //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...");
}); });
} }

View File

@ -1,5 +1,8 @@
<div class="main-reduce"> <div class="main-reduce">
<div class="fill-all"> <div class="fill-all">
<div class="title">
Edit series
</div>
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Name: Name:
@ -23,20 +26,12 @@
(input)="onDescription($event.target.value)"/> (input)="onDescription($event.target.value)"/>
</div> </div>
</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"> <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> <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>
<div class="request_raw"> <div class="request_raw">
<div class="label"> <div class="label">
Covers: Add cover:
</div> </div>
<div class="input"> <div class="input">
<input type="file" <input type="file"
@ -45,5 +40,31 @@
accept=".png,.jpg,.jpeg,.webp"/>{{upload_file_value}} accept=".png,.jpg,.jpeg,.webp"/>{{upload_file_value}}
</div> </div>
</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> </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>

View File

@ -9,6 +9,14 @@
box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); 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 { .request_raw {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,25 @@
<div class="main-reduce"> <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"> <div class="title">
Edit media Edit media
</div> </div>
@ -170,12 +190,16 @@
<create-type ></create-type> <create-type ></create-type>
<upload-progress [mediaTitle]="uploadLabelMediaTitle" <upload-progress [mediaTitle]="upload.labelMediaTitle"
[mediaUploaded]="uploadMediaSendSize" [mediaUploaded]="upload.mediaSendSize"
[mediaSize]="uploadMediaSize" [mediaSize]="upload.mediaSize"
[result]="uploadResult" [result]="upload.result"
[error]="uploadError"></upload-progress> [error]="upload.error"></upload-progress>
<delete-confirm
[comment]="confirmDeleteComment"
[imageUrl]=confirmDeleteImageUrl
(callback)="deleteConfirmed()"></delete-confirm>
<popin id="popin-new-season" <popin id="popin-new-season"
popTitle="Create a new season" popTitle="Create a new season"

View File

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

View File

@ -1,5 +1,19 @@
<div class="main-reduce"> <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"> <div class="title">
{{name}} {{name}}
</div> </div>

View File

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

View File

@ -61,14 +61,53 @@ export class SeasonService {
let ret = this.http.put_specific(this.serviceName, _id, _data); let ret = this.http.put_specific(this.serviceName, _id, _data);
return this.bdd.setAfterPut(this.serviceName, _id, ret); 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 { getCoverUrl(_coverId:number):any {
return this.http.createRESTCall("data/" + _coverId); return this.http.createRESTCall("data/" + _coverId);
} }
getCoverThumbnailUrl(_coverId:number):any { getCoverThumbnailUrl(_coverId:number):any {
return this.http.createRESTCall("data/thumbnail/" + _coverId); 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);
});
});
}
} }

View File

@ -107,11 +107,7 @@ export class SeriesService {
let ret = this.http.put_specific(this.serviceName, _id, _data); let ret = this.http.put_specific(this.serviceName, _id, _data);
return this.bdd.setAfterPut(this.serviceName, _id, ret); 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 { getCoverUrl(_coverId:number):any {
return this.http.createRESTCall("data/" + _coverId); 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);
});
});
}
} }

View File

@ -56,11 +56,50 @@ export class UniverseService {
let ret = this.http.put_specific(this.serviceName, _id, _data); let ret = this.http.put_specific(this.serviceName, _id, _data);
return this.bdd.setAfterPut(this.serviceName, _id, ret); 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 { getCoverUrl(_coverId:number):any {
return this.http.createRESTCall("data/" + _coverId); 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);
});
});
}
} }