[DEV] better UI & add confirm of the delete
This commit is contained in:
parent
578054df58
commit
06039dbe12
@ -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
|
||||||
],
|
],
|
||||||
|
16
front/src/app/popin/delete-confirm/delete-confirm.html
Normal file
16
front/src/app/popin/delete-confirm/delete-confirm.html
Normal 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>
|
15
front/src/app/popin/delete-confirm/delete-confirm.less
Normal file
15
front/src/app/popin/delete-confirm/delete-confirm.less
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
|
||||||
|
|
||||||
|
.expand {
|
||||||
|
width: 100%;
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
};
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
};
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
};
|
||||||
|
text-align:center;
|
||||||
|
}
|
52
front/src/app/popin/delete-confirm/delete-confirm.ts
Normal file
52
front/src/app/popin/delete-confirm/delete-confirm.ts
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -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}}%"> {{progress}}%</div>
|
<div class="progress-bar" style="width:{{progress}}%"> {{progress}}%</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="progress != 100" >
|
<div *ngIf="progress != 100" >
|
||||||
<label class="unselectable">upload: {{uploadDisplay}}</label><br/>
|
<label class="unselectable">Upload:</label><label style="text-align: right;">{{uploadDisplay}}</label><br/>
|
||||||
<label class="unselectable">size: {{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>
|
@ -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;
|
||||||
|
}
|
||||||
|
};
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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...");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
@ -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;
|
||||||
|
@ -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...");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
@ -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
|
||||||
|
@ -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) {
|
||||||
|
@ -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"
|
||||||
|
@ -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();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user