534 lines
16 KiB
TypeScript
534 lines
16 KiB
TypeScript
/** @file
|
|
* @author Edouard DUPIN
|
|
* @copyright 2018, Edouard DUPIN, all right reserved
|
|
* @license PROPRIETARY (see license file)
|
|
*/
|
|
|
|
import { Component, OnInit } from '@angular/core';
|
|
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
|
|
import { Location } from '@angular/common';
|
|
import { NgForm } from '@angular/forms';
|
|
import { FormGroup, FormControl } from "@angular/forms";
|
|
import { fadeInAnimation } from '../../_animations/index';
|
|
import { HttpWrapperService } from '../../service/http-wrapper';
|
|
import { HttpEventType, HttpResponse} from '@angular/common/http';
|
|
|
|
|
|
import { PopInService } from '../../service/popin';
|
|
import { TypeService } from '../../service/type';
|
|
import { UniverseService } from '../../service/universe';
|
|
import { SeriesService } from '../../service/series';
|
|
import { SeasonService } from '../../service/season';
|
|
import { VideoService } from '../../service/video';
|
|
import { DataService } from '../../service/data';
|
|
import { ArianeService } from '../../service/ariane';
|
|
import { UploadProgress } from '../../popin/upload-progress/upload-progress';
|
|
|
|
export class ElementList {
|
|
value: number;
|
|
label: string;
|
|
constructor(_value: number, _label: string) {
|
|
this.value = _value;
|
|
this.label = _label;
|
|
}
|
|
}
|
|
|
|
|
|
class DataToSend {
|
|
name:string = ""
|
|
description:string = ""
|
|
episode:number = undefined
|
|
universe_id:number = null
|
|
series_id:number = null
|
|
season_id:number = null
|
|
data_id:number = -1
|
|
time:number = undefined
|
|
type_id:number = null
|
|
covers:Array<any> = [];
|
|
generated_name:string = ""
|
|
clone() {
|
|
let tmp = new DataToSend();
|
|
tmp.name = this.name
|
|
tmp.description = this.description
|
|
tmp.episode = this.episode
|
|
tmp.universe_id = this.universe_id
|
|
tmp.series_id = this.series_id
|
|
tmp.season_id = this.season_id
|
|
tmp.data_id = this.data_id
|
|
tmp.time = this.time
|
|
tmp.type_id = this.type_id
|
|
tmp.covers = this.covers
|
|
tmp.generated_name = this.generated_name
|
|
return tmp;
|
|
}
|
|
};
|
|
|
|
@Component({
|
|
selector: 'app-video-edit',
|
|
templateUrl: './video-edit.html',
|
|
styleUrls: ['./video-edit.less'],
|
|
animations: [fadeInAnimation],
|
|
host: { '[@fadeInAnimation]': '' }
|
|
})
|
|
// https://www.sitepoint.com/angular-forms/
|
|
export class VideoEditScene implements OnInit {
|
|
id_video:number = -1;
|
|
mediaIsRemoved:boolean = false
|
|
mediaIsNotFound:boolean = false
|
|
mediaIsLoading:boolean = true
|
|
|
|
error:string = ""
|
|
|
|
data:DataToSend = new DataToSend();
|
|
data_ori:DataToSend = new DataToSend();
|
|
coverFile:File;
|
|
upload_file_value:string = ""
|
|
selectedFiles:FileList;
|
|
need_send:boolean = false;
|
|
|
|
|
|
// section tha define the upload value to display in the pop-in of upload
|
|
upload:UploadProgress = new UploadProgress();
|
|
// --------------- confirm section ------------------
|
|
public confirmDeleteComment:string = null;
|
|
public confirmDeleteImageUrl:string = null;
|
|
private deleteCoverId:number = null;
|
|
private deleteMediaId:number = null;
|
|
deleteConfirmed() {
|
|
if (this.deleteCoverId !== null) {
|
|
this.removeCoverAfterConfirm(this.deleteCoverId);
|
|
this.cleanConfirm();
|
|
}
|
|
if (this.deleteMediaId !== null) {
|
|
this.removeMediaAfterConfirm(this.deleteMediaId);
|
|
this.cleanConfirm();
|
|
}
|
|
}
|
|
cleanConfirm() {
|
|
this.confirmDeleteComment = null;
|
|
this.confirmDeleteImageUrl = null;
|
|
this.deleteCoverId = null;
|
|
this.deleteMediaId = null;
|
|
}
|
|
|
|
covers_display:Array<any> = [];
|
|
|
|
listType: ElementList[] = [
|
|
{value: undefined, label: '---'},
|
|
];
|
|
listUniverse: ElementList[] = [
|
|
{value: undefined, label: '---'},
|
|
{value: null, label: '---'},
|
|
];
|
|
listSeries: ElementList[] = [
|
|
{value: undefined, label: '---'},
|
|
];
|
|
listSeason: ElementList[] = [
|
|
{value: undefined, label: '---'},
|
|
];
|
|
constructor(private route: ActivatedRoute,
|
|
private router: Router,
|
|
private locate: Location,
|
|
private dataService: DataService,
|
|
private typeService: TypeService,
|
|
private universeService: UniverseService,
|
|
private seriesService: SeriesService,
|
|
private seasonService: SeasonService,
|
|
private videoService: VideoService,
|
|
private httpService: HttpWrapperService,
|
|
private arianeService: ArianeService,
|
|
private popInService: PopInService) {
|
|
|
|
}
|
|
|
|
updateNeedSend(): boolean {
|
|
this.need_send = false;
|
|
if (this.data.name != this.data_ori.name) {
|
|
this.need_send = true;
|
|
}
|
|
if (this.data.description != this.data_ori.description) {
|
|
this.need_send = true;
|
|
}
|
|
if (this.data.episode != this.data_ori.episode) {
|
|
this.need_send = true;
|
|
}
|
|
if (this.data.time != this.data_ori.time) {
|
|
this.need_send = true;
|
|
}
|
|
if (this.data.type_id != this.data_ori.type_id) {
|
|
this.need_send = true;
|
|
}
|
|
if (this.data.universe_id != this.data_ori.universe_id) {
|
|
this.need_send = true;
|
|
}
|
|
if (this.data.series_id != this.data_ori.series_id) {
|
|
this.need_send = true;
|
|
}
|
|
if (this.data.season_id != this.data_ori.season_id) {
|
|
this.need_send = true;
|
|
}
|
|
return this.need_send;
|
|
}
|
|
|
|
updateCoverList(_covers: any) {
|
|
this.covers_display = [];
|
|
this.data.covers = [];
|
|
if (_covers !== undefined && _covers !== null) {
|
|
for (let iii=0; iii<_covers.length; iii++) {
|
|
this.data.covers.push(_covers[iii]);
|
|
this.covers_display.push({
|
|
id:_covers[iii],
|
|
url:this.videoService.getCoverThumbnailUrl(_covers[iii])
|
|
});
|
|
}
|
|
} else {
|
|
this.covers_display = []
|
|
}
|
|
}
|
|
ngOnInit() {
|
|
this.arianeService.updateManual(this.route.snapshot.paramMap);
|
|
this.id_video = this.arianeService.getVideoId();
|
|
let self = this;
|
|
this.listType = [{value: null, label: '---'}];
|
|
this.listUniverse = [{value: null, label: '---'}];
|
|
this.listSeries = [{value: null, label: '---'}];
|
|
this.listSeason = [{value: null, label: '---'}];
|
|
this.universeService.getData()
|
|
.then(function(response2) {
|
|
for(let iii= 0; iii < response2.length; iii++) {
|
|
self.listUniverse.push({value: response2[iii].id, label: response2[iii].name});
|
|
}
|
|
}).catch(function(response2) {
|
|
console.log("get response22 : " + JSON.stringify(response2, null, 2));
|
|
});
|
|
this.typeService.getData()
|
|
.then(function(response2) {
|
|
for(let iii= 0; iii < response2.length; iii++) {
|
|
self.listType.push({value: response2[iii].id, label: response2[iii].name});
|
|
}
|
|
}).catch(function(response2) {
|
|
console.log("get response22 : " + JSON.stringify(response2, null, 2));
|
|
});
|
|
//this.seriesService.getOrder()
|
|
this.seriesService.getData()
|
|
.then(function(response3) {
|
|
for(let iii= 0; iii < response3.length; iii++) {
|
|
self.listSeries.push({value: response3[iii].id, label: response3[iii].name});
|
|
console.log("[" + self.data.data_id + "] Get series: " + response3[iii].id + ", label:" + response3[iii].name)
|
|
}
|
|
}).catch(function(response3) {
|
|
console.log("get response3 : " + JSON.stringify(response3, null, 2));
|
|
});
|
|
this.videoService.get(this.id_video)
|
|
.then(function(response) {
|
|
console.log("get response of video : " + JSON.stringify(response, null, 2));
|
|
self.data.name = response.name;
|
|
self.data.description = response.description;
|
|
self.data.episode = response.episode;
|
|
self.data.universe_id = response.univers_id;
|
|
if (self.data.universe_id === undefined) {
|
|
self.data.universe_id = null;
|
|
}
|
|
self.data.data_id = response.data_id;
|
|
self.data.time = response.time;
|
|
self.data.generated_name = response.generated_name;
|
|
self.onChangeType(response.type_id);
|
|
if (self.data.type_id === undefined) {
|
|
self.data.type_id = null;
|
|
}
|
|
self.onChangeSeries(response.series_id);
|
|
if (self.data.series_id === undefined) {
|
|
self.data.series_id = null;
|
|
}
|
|
self.data.season_id = response.season_id;
|
|
if (self.data.season_id === undefined) {
|
|
self.data.season_id = null;
|
|
}
|
|
self.data_ori = self.data.clone();
|
|
self.updateCoverList(response.covers);
|
|
self.updateNeedSend();
|
|
console.log("covers_list : " + JSON.stringify(self.covers_display, null, 2));
|
|
self.mediaIsLoading = false;
|
|
}).catch(function(response) {
|
|
self.error = "Can not get the data";
|
|
self.data = new DataToSend();
|
|
self.covers_display = [];
|
|
self.data_ori = self.data.clone();
|
|
self.updateNeedSend();
|
|
self.mediaIsNotFound = true;
|
|
self.mediaIsLoading = false;
|
|
});
|
|
}
|
|
|
|
onChangeType(_value:any):void {
|
|
console.log("Change requested of type ... " + _value);
|
|
this.data.type_id = _value;
|
|
//this.data.series_id = null;
|
|
//this.data.season_id = null;
|
|
//this.listSeries = [{value: undefined, label: '---'}];
|
|
//this.listSeason = [{value: undefined, label: '---'}];
|
|
let self = this;
|
|
this.updateNeedSend();
|
|
/*
|
|
if (this.type_id != undefined) {
|
|
self.typeService.getSubSeries(this.type_id, ["id", "name"])
|
|
.then(function(response2) {
|
|
for(let iii= 0; iii < response2.length; iii++) {
|
|
self.listSeries.push({value: response2[iii].id, label: response2[iii].name});
|
|
}
|
|
}).catch(function(response2) {
|
|
console.log("get response22 : " + JSON.stringify(response2, null, 2));
|
|
});
|
|
}
|
|
*/
|
|
}
|
|
|
|
onChangeUniverse(_value:any):void {
|
|
this.data.universe_id = _value;
|
|
this.updateNeedSend();
|
|
}
|
|
|
|
onChangeSeries(_value:any):void {
|
|
this.data.series_id = _value;
|
|
this.data.season_id = null;
|
|
this.listSeason = [{value: undefined, label: '---'}];
|
|
let self = this;
|
|
if (this.data.series_id != undefined) {
|
|
self.seriesService.getSeason(this.data.series_id, ["id", "name"])
|
|
.then(function(response3) {
|
|
for(let iii= 0; iii < response3.length; iii++) {
|
|
self.listSeason.push({value: response3[iii].id, label: "season " + response3[iii].name});
|
|
}
|
|
}).catch(function(response3) {
|
|
console.log("get response22 : " + JSON.stringify(response3, null, 2));
|
|
});
|
|
}
|
|
this.updateNeedSend();
|
|
}
|
|
onChangeSeason(_value:any):void {
|
|
this.data.season_id = _value;
|
|
this.updateNeedSend();
|
|
}
|
|
|
|
onName(_value:any):void {
|
|
this.data.name = _value;
|
|
this.updateNeedSend();
|
|
}
|
|
|
|
onDescription(_value:any):void {
|
|
if (_value.length == 0) {
|
|
this.data.description = null;
|
|
} else {
|
|
this.data.description = _value;
|
|
}
|
|
this.updateNeedSend();
|
|
}
|
|
onDate(_value:any):void {
|
|
if (_value.value.length > 4) {
|
|
_value.value = this.data.time;
|
|
} else {
|
|
this.data.time = _value.value;
|
|
}
|
|
if (this.data.time < 10) {
|
|
this.data.time = null;
|
|
}
|
|
this.updateNeedSend();
|
|
}
|
|
|
|
onEpisode(_value:any):void {
|
|
if (_value.value.length > 4) {
|
|
_value.value = this.data.episode;
|
|
} else {
|
|
this.data.episode = parseInt(_value.value, 10);
|
|
}
|
|
this.updateNeedSend();
|
|
}
|
|
|
|
sendValues():void {
|
|
console.log("send new values....");
|
|
let data = {}
|
|
if (this.data.name != this.data_ori.name) {
|
|
data["name"] = this.data.name;
|
|
}
|
|
if (this.data.description != this.data_ori.description) {
|
|
if (this.data.description == undefined) {
|
|
data["description"] = null;
|
|
} else {
|
|
data["description"] = this.data.description;
|
|
}
|
|
}
|
|
if (this.data.episode != this.data_ori.episode) {
|
|
data["episode"] = this.data.episode;
|
|
}
|
|
if (this.data.time != this.data_ori.time) {
|
|
data["time"] = this.data.time;
|
|
}
|
|
if (this.data.type_id != this.data_ori.type_id) {
|
|
if (this.data.type_id == undefined) {
|
|
data["type_id"] = null;
|
|
} else {
|
|
data["type_id"] = this.data.type_id;
|
|
}
|
|
}
|
|
if (this.data.universe_id != this.data_ori.universe_id) {
|
|
if (this.data.universe_id == undefined) {
|
|
data["universe_id"] = null;
|
|
} else {
|
|
data["universe_id"] = this.data.universe_id;
|
|
}
|
|
}
|
|
if (this.data.series_id != this.data_ori.series_id) {
|
|
if (this.data.series_id == undefined) {
|
|
data["series_id"] = null;
|
|
} else {
|
|
data["series_id"] = this.data.series_id;
|
|
}
|
|
}
|
|
if (this.data.season_id != this.data_ori.season_id) {
|
|
if (this.data.season_id == undefined) {
|
|
data["season_id"] = null;
|
|
} else {
|
|
data["season_id"] = this.data.season_id;
|
|
}
|
|
}
|
|
let tmpp = this.data.clone();
|
|
let self = this;
|
|
this.videoService.put(this.id_video, data)
|
|
.then(function(response3) {
|
|
self.data_ori = tmpp;
|
|
self.updateNeedSend();
|
|
}).catch(function(response3) {
|
|
console.log("get response22 : " + JSON.stringify(response3, null, 2));
|
|
self.updateNeedSend();
|
|
});
|
|
}
|
|
|
|
// At the drag drop area
|
|
// (drop)="onDropFile($event)"
|
|
onDropFile(_event: DragEvent) {
|
|
_event.preventDefault();
|
|
//TODO : this.uploadFile(_event.dataTransfer.files[0]);
|
|
console.log("error in drag & drop ...");
|
|
}
|
|
|
|
// At the drag drop area
|
|
// (dragover)="onDragOverFile($event)"
|
|
onDragOverFile(_event) {
|
|
_event.stopPropagation();
|
|
_event.preventDefault();
|
|
}
|
|
|
|
// At the file input element
|
|
// (change)="selectFile($event)"
|
|
onChangeCover(_value:any):void {
|
|
this.selectedFiles = _value.files
|
|
this.coverFile = this.selectedFiles[0];
|
|
console.log("select file " + this.coverFile.name);
|
|
this.uploadCover(this.coverFile);
|
|
this.updateNeedSend();
|
|
}
|
|
|
|
uploadCover(_file:File) {
|
|
if (_file == undefined) {
|
|
console.log("No file selected!");
|
|
return;
|
|
}
|
|
let self = this;
|
|
// clean upload labels*
|
|
this.upload.clear();
|
|
// display the upload pop-in
|
|
this.popInService.open("popin-upload-progress");
|
|
this.videoService.uploadCover(_file, this.id_video, function(count, total) {
|
|
self.upload.mediaSendSize = count;
|
|
self.upload.mediaSize = total;
|
|
})
|
|
.then(function (response:any) {
|
|
console.log("get response of cover : " + JSON.stringify(response, null, 2));
|
|
self.upload.result = "Cover added done";
|
|
// TODO: we retrive the whiole media ==> update data ...
|
|
self.updateCoverList(response.covers);
|
|
}).catch(function (response:any) {
|
|
//self.error = "Can not get the data";
|
|
console.log("Can not add the cover in the video...");
|
|
self.upload.error = "Error in the upload of the cover..." + JSON.stringify(response, null, 2);
|
|
});
|
|
}
|
|
|
|
removeCover(_id:number) {
|
|
this.cleanConfirm();
|
|
this.confirmDeleteComment = "Delete the cover ID: " + _id;
|
|
this.confirmDeleteImageUrl = this.seriesService.getCoverThumbnailUrl(_id);
|
|
this.deleteCoverId = _id;
|
|
this.popInService.open("popin-delete-confirm");
|
|
}
|
|
removeCoverAfterConfirm(_id:number) {
|
|
console.log("Request remove cover: " + _id);
|
|
let self = this;
|
|
this.videoService.deleteCover(this.id_video, _id)
|
|
.then(function (response:any) {
|
|
console.log("get response of remove cover : " + JSON.stringify(response, null, 2));
|
|
self.upload.result = "Cover remove done";
|
|
// TODO: we retrive the whiole media ==> update data ...
|
|
self.updateCoverList(response.covers);
|
|
}).catch(function (response:any) {
|
|
//self.error = "Can not get the data";
|
|
console.log("Can not remove the cover of the video...");
|
|
self.upload.error = "Error in the upload of the cover..." + JSON.stringify(response, null, 2);
|
|
});
|
|
}
|
|
removeMedia() {
|
|
console.log("Request remove Media...");
|
|
this.cleanConfirm();
|
|
this.confirmDeleteComment = "Delete the Media: " + this.id_video;
|
|
this.deleteMediaId = this.id_video;
|
|
this.popInService.open("popin-delete-confirm");
|
|
}
|
|
removeMediaAfterConfirm(_id:number) {
|
|
let self = this;
|
|
this.videoService.delete(_id)
|
|
.then(function(response3) {
|
|
//self.data_ori = tmpp;
|
|
//self.updateNeedSend();
|
|
self.mediaIsRemoved = true;
|
|
}).catch(function(response3) {
|
|
//self.updateNeedSend();
|
|
});
|
|
}
|
|
|
|
eventPopUpSeason(_event: string): void {
|
|
console.log("GET event: " + _event);
|
|
this.popInService.close("popin-new-season");
|
|
}
|
|
eventPopUpSeries(_event: string): void {
|
|
console.log("GET event: " + _event);
|
|
this.popInService.close("popin-new-series");
|
|
}
|
|
eventPopUpType(_event: string): void {
|
|
console.log("GET event: " + _event);
|
|
this.popInService.close("popin-new-type");
|
|
}
|
|
eventPopUpUniverse(_event: string): void {
|
|
console.log("GET event: " + _event);
|
|
this.popInService.close("popin-new-universe");
|
|
}
|
|
|
|
newSeason(): void {
|
|
console.log("Request new Season...");
|
|
this.popInService.open("popin-new-season");
|
|
}
|
|
newSeries(): void {
|
|
console.log("Request new Series...");
|
|
this.popInService.open("popin-new-series");
|
|
}
|
|
newType(): void {
|
|
console.log("Request new Type...");
|
|
this.popInService.open("popin-create-type");
|
|
}
|
|
newUniverse() {
|
|
console.log("Request new Universe...");
|
|
this.popInService.open("popin-new-universe");
|
|
}
|
|
}
|
|
|
|
|