From 06039dbe1280c928816e03edc73b59cf58360e1c Mon Sep 17 00:00:00 2001 From: Edouard DUPIN Date: Sat, 24 Oct 2020 21:46:00 +0200 Subject: [PATCH] [DEV] better UI & add confirm of the delete --- front/src/app/app.module.ts | 7 +- .../create-type/create-type.html | 0 .../create-type/create-type.less | 0 .../create-type/create-type.ts | 0 .../popin/delete-confirm/delete-confirm.html | 16 +++ .../popin/delete-confirm/delete-confirm.less | 15 +++ .../popin/delete-confirm/delete-confirm.ts | 52 ++++++++ .../upload-progress/.less | 0 .../upload-progress/upload-progress.html | 6 +- .../upload-progress/upload-progress.less | 0 .../upload-progress/upload-progress.ts | 18 ++- .../app/scene/season-edit/season-edit.html | 40 +++++-- .../app/scene/season-edit/season-edit.less | 8 ++ .../src/app/scene/season-edit/season-edit.ts | 112 +++++++++++++----- .../app/scene/series-edit/series-edit.html | 41 +++++-- .../app/scene/series-edit/series-edit.less | 8 ++ .../src/app/scene/series-edit/series-edit.ts | 109 ++++++++++++----- front/src/app/scene/series/series.ts | 4 +- front/src/app/scene/upload/upload.html | 11 +- front/src/app/scene/upload/upload.ts | 51 ++++---- .../src/app/scene/video-edit/video-edit.html | 36 +++++- front/src/app/scene/video-edit/video-edit.ts | 80 +++++++++---- front/src/app/scene/video/video.html | 16 ++- front/src/app/scene/video/video.ts | 7 +- front/src/app/service/season.ts | 45 ++++++- front/src/app/service/series.ts | 48 +++++++- front/src/app/service/universe.ts | 45 ++++++- 27 files changed, 616 insertions(+), 159 deletions(-) rename front/src/app/{component => popin}/create-type/create-type.html (100%) rename front/src/app/{component => popin}/create-type/create-type.less (100%) rename front/src/app/{component => popin}/create-type/create-type.ts (100%) create mode 100644 front/src/app/popin/delete-confirm/delete-confirm.html create mode 100644 front/src/app/popin/delete-confirm/delete-confirm.less create mode 100644 front/src/app/popin/delete-confirm/delete-confirm.ts rename front/src/app/{component => popin}/upload-progress/.less (100%) rename front/src/app/{component => popin}/upload-progress/upload-progress.html (75%) rename front/src/app/{component => popin}/upload-progress/upload-progress.less (100%) rename front/src/app/{component => popin}/upload-progress/upload-progress.ts (90%) diff --git a/front/src/app/app.module.ts b/front/src/app/app.module.ts index 8fef425..527950e 100644 --- a/front/src/app/app.module.ts +++ b/front/src/app/app.module.ts @@ -24,10 +24,12 @@ import { ElementTypeComponent } from './component/element-type/element-type'; import { ElementSeriesComponent } from './component/element-series/element-series'; import { ElementSeasonComponent } from './component/element-season/element-season'; import { ElementVideoComponent } from './component/element-video/element-video'; -import { CreateTypeComponent } from './component/create-type/create-type'; -import { PopInUploadProgress } from './component/upload-progress/upload-progress'; import { PopInComponent } from './component/popin/popin'; +import { CreateTypeComponent } from './popin/create-type/create-type'; +import { PopInUploadProgress } from './popin/upload-progress/upload-progress'; +import { PopInDeleteConfirm } from './popin/delete-confirm/delete-confirm'; + import { HelpScene } from './scene/help/help'; import { LoginScene } from './scene/login/login'; import { SignUpScene } from './scene/sign-up/sign-up'; @@ -92,6 +94,7 @@ import { AppComponent } from './app.component'; SeriesEditScene, PopInComponent, PopInUploadProgress, + PopInDeleteConfirm, CreateTypeComponent, UploadScene ], diff --git a/front/src/app/component/create-type/create-type.html b/front/src/app/popin/create-type/create-type.html similarity index 100% rename from front/src/app/component/create-type/create-type.html rename to front/src/app/popin/create-type/create-type.html diff --git a/front/src/app/component/create-type/create-type.less b/front/src/app/popin/create-type/create-type.less similarity index 100% rename from front/src/app/component/create-type/create-type.less rename to front/src/app/popin/create-type/create-type.less diff --git a/front/src/app/component/create-type/create-type.ts b/front/src/app/popin/create-type/create-type.ts similarity index 100% rename from front/src/app/component/create-type/create-type.ts rename to front/src/app/popin/create-type/create-type.ts diff --git a/front/src/app/popin/delete-confirm/delete-confirm.html b/front/src/app/popin/delete-confirm/delete-confirm.html new file mode 100644 index 0000000..7fbaf96 --- /dev/null +++ b/front/src/app/popin/delete-confirm/delete-confirm.html @@ -0,0 +1,16 @@ +
+ +
+ +
+

+ +

+ +
\ No newline at end of file diff --git a/front/src/app/popin/delete-confirm/delete-confirm.less b/front/src/app/popin/delete-confirm/delete-confirm.less new file mode 100644 index 0000000..95fc9fd --- /dev/null +++ b/front/src/app/popin/delete-confirm/delete-confirm.less @@ -0,0 +1,15 @@ + + +.expand { + width: 100%; + input { + width: 100%; + }; + div { + width: 100%; + }; + textarea { + width: 100%; + }; + text-align:center; +} diff --git a/front/src/app/popin/delete-confirm/delete-confirm.ts b/front/src/app/popin/delete-confirm/delete-confirm.ts new file mode 100644 index 0000000..935e935 --- /dev/null +++ b/front/src/app/popin/delete-confirm/delete-confirm.ts @@ -0,0 +1,52 @@ +/** @file + * @author Edouard DUPIN + * @copyright 2018, Edouard DUPIN, all right reserved + * @license PROPRIETARY (see license file) + */ +import { Injectable, Component, OnInit, Input, Output, SimpleChanges, EventEmitter} from '@angular/core'; + +//import { AppRoutingModule } from "../app-routing.module"; + +import { Router } from "@angular/router"; +import { ActivatedRoute, Params } from '@angular/router'; +import { TypeService } from '../../service/type'; +import { PopInService } from '../../service/popin'; + +@Component({ + selector: 'delete-confirm', + templateUrl: './delete-confirm.html', + styleUrls: ['./delete-confirm.less'] +}) + +@Injectable() +export class PopInDeleteConfirm implements OnInit { + + @Input() comment: string = null; + @Input() imageUrl: string = null; + @Output() callback: EventEmitter = 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); + } + } + +} diff --git a/front/src/app/component/upload-progress/.less b/front/src/app/popin/upload-progress/.less similarity index 100% rename from front/src/app/component/upload-progress/.less rename to front/src/app/popin/upload-progress/.less diff --git a/front/src/app/component/upload-progress/upload-progress.html b/front/src/app/popin/upload-progress/upload-progress.html similarity index 75% rename from front/src/app/component/upload-progress/upload-progress.html rename to front/src/app/popin/upload-progress/upload-progress.html index 742091c..3670867 100644 --- a/front/src/app/component/upload-progress/upload-progress.html +++ b/front/src/app/popin/upload-progress/upload-progress.html @@ -10,11 +10,11 @@

-
   {{progress}}%
+
   {{progress}}%
-
- +
+
diff --git a/front/src/app/component/upload-progress/upload-progress.less b/front/src/app/popin/upload-progress/upload-progress.less similarity index 100% rename from front/src/app/component/upload-progress/upload-progress.less rename to front/src/app/popin/upload-progress/upload-progress.less diff --git a/front/src/app/component/upload-progress/upload-progress.ts b/front/src/app/popin/upload-progress/upload-progress.ts similarity index 90% rename from front/src/app/component/upload-progress/upload-progress.ts rename to front/src/app/popin/upload-progress/upload-progress.ts index 6470d0c..044b74d 100644 --- a/front/src/app/component/upload-progress/upload-progress.ts +++ b/front/src/app/popin/upload-progress/upload-progress.ts @@ -109,4 +109,20 @@ export class PopInUploadProgress implements OnInit { this.validateButtonTitle = "Ok"; } } -} \ No newline at end of file +} + + +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; + } +}; diff --git a/front/src/app/scene/season-edit/season-edit.html b/front/src/app/scene/season-edit/season-edit.html index c547c68..af722b0 100644 --- a/front/src/app/scene/season-edit/season-edit.html +++ b/front/src/app/scene/season-edit/season-edit.html @@ -1,5 +1,8 @@
+
+ Edit season +
Number: @@ -23,20 +26,12 @@ (input)="onDescription($event.target.value)"/>
-
-
- Covers: -
-
-
-
-
- Covers: + Add cover:
{{upload_file_value}}
+
+
+ Actual Covers: +
+
+
+ +
+ +
+
+
+
+
-
\ No newline at end of file +
+ + diff --git a/front/src/app/scene/season-edit/season-edit.less b/front/src/app/scene/season-edit/season-edit.less index d6c2f02..6d5c023 100644 --- a/front/src/app/scene/season-edit/season-edit.less +++ b/front/src/app/scene/season-edit/season-edit.less @@ -9,6 +9,14 @@ box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); } + +.title { + width: 90%; + margin: 0 auto; + font-size: 50px; + text-align: center; +} + .request_raw { width: 90%; margin: 0 auto; diff --git a/front/src/app/scene/season-edit/season-edit.ts b/front/src/app/scene/season-edit/season-edit.ts index b4d9a25..f64000d 100644 --- a/front/src/app/scene/season-edit/season-edit.ts +++ b/front/src/app/scene/season-edit/season-edit.ts @@ -14,6 +14,8 @@ import { fadeInAnimation } from '../../_animations/index'; import { SeasonService } from '../../service/season'; import { DataService } from '../../service/data'; import { ArianeService } from '../../service/ariane'; +import { UploadProgress } from '../../popin/upload-progress/upload-progress'; +import { PopInService } from '../../service/popin'; export class ElementList { value: number; @@ -43,14 +45,33 @@ export class SeasonEditScene implements OnInit { upload_file_value:string = "" selectedFiles:FileList; - covers_display:Array = []; + covers_display:Array = []; + // section tha define the upload value to display in the pop-in of upload + public upload:UploadProgress = new UploadProgress(); + // --------------- confirm section ------------------ + public confirmDeleteComment:string = null; + public confirmDeleteImageUrl:string = null; + private deleteCoverId:number = null; + deleteConfirmed() { + if (this.deleteCoverId !== null) { + this.removeCoverAfterConfirm(this.deleteCoverId); + this.cleanConfirm(); + } + } + cleanConfirm() { + this.confirmDeleteComment = null; + this.confirmDeleteImageUrl = null; + this.deleteCoverId = null; + } + constructor(private route: ActivatedRoute, private router: Router, private locate: Location, private dataService: DataService, private seasonService: SeasonService, - private arianeService: ArianeService) { + private arianeService: ArianeService, + private popInService: PopInService) { } @@ -61,16 +82,9 @@ export class SeasonEditScene implements OnInit { this.seasonService.get(this.id_season) .then(function(response) { console.log("get response of season : " + JSON.stringify(response, null, 2)); - self.numberVal = response.number; + self.numberVal = response.name; self.description = response.description; - if (response.covers !== undefined && response.covers !== null) { - for (let iii=0; iii update data ... + self.updateCoverList(response.covers); + }).catch(function (response:any) { //self.error = "Can not get the data"; - console.log("Can not add the data in the system..."); + console.log("Can not add the cover in the video..."); + }); + } + + removeCover(_id:number) { + this.cleanConfirm(); + this.confirmDeleteComment = "Delete the cover ID: " + _id; + this.confirmDeleteImageUrl = this.seasonService.getCoverThumbnailUrl(_id); + this.deleteCoverId = _id; + this.popInService.open("popin-delete-confirm"); + } + removeCoverAfterConfirm(_id:number) { + console.log("Request remove cover: " + _id); + let self = this; + this.seasonService.deleteCover(this.id_season, _id) + .then(function (response:any) { + self.upload.result = "Cover remove done"; + // TODO: we retrive the whiole media ==> update data ... + self.updateCoverList(response.covers); + }).catch(function (response:any) { + //self.error = "Can not get the data"; + console.log("Can not remove the cover of the video..."); }); } diff --git a/front/src/app/scene/series-edit/series-edit.html b/front/src/app/scene/series-edit/series-edit.html index c70f1a5..f754eb4 100644 --- a/front/src/app/scene/series-edit/series-edit.html +++ b/front/src/app/scene/series-edit/series-edit.html @@ -1,5 +1,8 @@
+
+ Edit series +
Name: @@ -23,20 +26,12 @@ (input)="onDescription($event.target.value)"/>
-
-
- Covers: -
-
-
-
-
- Covers: + Add cover:
{{upload_file_value}}
+
+
+ Actual Covers: +
+
+
+ +
+ +
+
+
+
+
-
\ No newline at end of file + + + + \ No newline at end of file diff --git a/front/src/app/scene/series-edit/series-edit.less b/front/src/app/scene/series-edit/series-edit.less index d6c2f02..6d5c023 100644 --- a/front/src/app/scene/series-edit/series-edit.less +++ b/front/src/app/scene/series-edit/series-edit.less @@ -9,6 +9,14 @@ box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); } + +.title { + width: 90%; + margin: 0 auto; + font-size: 50px; + text-align: center; +} + .request_raw { width: 90%; margin: 0 auto; diff --git a/front/src/app/scene/series-edit/series-edit.ts b/front/src/app/scene/series-edit/series-edit.ts index 2809e55..5fd42dc 100644 --- a/front/src/app/scene/series-edit/series-edit.ts +++ b/front/src/app/scene/series-edit/series-edit.ts @@ -14,6 +14,8 @@ import { fadeInAnimation } from '../../_animations/index'; import { SeriesService } from '../../service/series'; import { DataService } from '../../service/data'; import { ArianeService } from '../../service/ariane'; +import { UploadProgress } from '../../popin/upload-progress/upload-progress'; +import { PopInService } from '../../service/popin'; export class ElementList { value: number; @@ -43,14 +45,34 @@ export class SeriesEditScene implements OnInit { upload_file_value:string = "" selectedFiles:FileList; - covers_display:Array = []; + covers_display:Array = []; + // section tha define the upload value to display in the pop-in of upload + public upload:UploadProgress = new UploadProgress(); + + // --------------- confirm section ------------------ + public confirmDeleteComment:string = null; + public confirmDeleteImageUrl:string = null; + private deleteCoverId:number = null; + deleteConfirmed() { + if (this.deleteCoverId !== null) { + this.removeCoverAfterConfirm(this.deleteCoverId); + this.cleanConfirm(); + } + } + cleanConfirm() { + this.confirmDeleteComment = null; + this.confirmDeleteImageUrl = null; + this.deleteCoverId = null; + } + constructor(private route: ActivatedRoute, private router: Router, private locate: Location, private dataService: DataService, private seriesService: SeriesService, - private arianeService: ArianeService) { + private arianeService: ArianeService, + private popInService: PopInService) { } @@ -60,17 +82,11 @@ export class SeriesEditScene implements OnInit { let self = this; this.seriesService.get(this.id_series) .then(function(response) { - console.log("get response of video : " + JSON.stringify(response, null, 2)); + //console.log("get response of video : " + JSON.stringify(response, null, 2)); self.name = response.name; self.description = response.description; - if (response.covers !== undefined && response.covers !== null) { - for (let iii=0; iii update data ... + self.updateCoverList(response.covers); + }).catch(function (response:any) { //self.error = "Can not get the data"; - console.log("Can not add the data in the system..."); + console.log("Can not add the cover in the video..."); + }); + } + + removeCover(_id:number) { + this.cleanConfirm(); + this.confirmDeleteComment = "Delete the cover ID: " + _id; + this.confirmDeleteImageUrl = this.seriesService.getCoverThumbnailUrl(_id); + this.deleteCoverId = _id; + this.popInService.open("popin-delete-confirm"); + } + removeCoverAfterConfirm(_id:number) { + console.log("Request remove cover: " + _id); + let self = this; + this.seriesService.deleteCover(this.id_series, _id) + .then(function (response:any) { + self.upload.result = "Cover remove done"; + // TODO: we retrive the whiole media ==> update data ... + self.updateCoverList(response.covers); + }).catch(function (response:any) { + //self.error = "Can not get the data"; + console.log("Can not remove the cover of the video..."); }); } diff --git a/front/src/app/scene/series/series.ts b/front/src/app/scene/series/series.ts index e282c66..48c65ef 100644 --- a/front/src/app/scene/series/series.ts +++ b/front/src/app/scene/series/series.ts @@ -29,9 +29,9 @@ export class SeriesScene implements OnInit { cover: string = "" covers: Array = [] seasons_error: string = ""; - seasons: Array = []; + seasons: Array = []; videos_error: string = ""; - videos: Array = []; + videos: Array = []; constructor(private route: ActivatedRoute, private router: Router, private locate: Location, diff --git a/front/src/app/scene/upload/upload.html b/front/src/app/scene/upload/upload.html index b120947..90fccc4 100644 --- a/front/src/app/scene/upload/upload.html +++ b/front/src/app/scene/upload/upload.html @@ -141,11 +141,12 @@
- + +