From 70505394fe08541cd63d8fe43891271e0f07d080 Mon Sep 17 00:00:00 2001 From: Edouard DUPIN Date: Mon, 20 Jan 2020 23:22:06 +0100 Subject: [PATCH] [DEV] basic cover interface --- front/src/app/app.module.ts | 2 + .../element-group.component.html | 4 +- .../element-group.component.less | 12 +- .../element-group/element-group.component.ts | 14 ++ .../element-saison.component.html | 6 + .../element-saison.component.less | 11 ++ .../element-saison.component.ts | 14 ++ .../element-type/element-type.component.ts | 15 ++ .../element-video.component.html | 7 +- .../element-video.component.less | 13 +- .../element-video/element-video.component.ts | 15 ++ .../app/scene/saison/saison.component.less | 1 + .../src/app/scene/video-edit/video-edit.html | 19 +++ .../src/app/scene/video-edit/video-edit.less | 7 + front/src/app/scene/video-edit/video-edit.ts | 69 +++++++++- .../src/app/scene/video/video.component.html | 6 +- .../src/app/scene/video/video.component.less | 8 ++ front/src/app/scene/video/video.component.ts | 13 +- front/src/app/service/data.service.ts | 26 ++++ front/src/app/service/group.service.ts | 4 + front/src/app/service/http-wrapper.service.ts | 130 +++++++++++++++++- front/src/app/service/saison.service.ts | 3 + front/src/app/service/type.service.ts | 3 + front/src/app/service/video.service.ts | 7 + 24 files changed, 386 insertions(+), 23 deletions(-) create mode 100644 front/src/app/service/data.service.ts diff --git a/front/src/app/app.module.ts b/front/src/app/app.module.ts index b96e76a..23c084f 100644 --- a/front/src/app/app.module.ts +++ b/front/src/app/app.module.ts @@ -43,6 +43,7 @@ import { HttpWrapperService } from './service/http-wrapper.service'; import { UserService } from './service/user.service'; import { UniversService } from './service/univers.service'; import { GroupService } from './service/group.service'; +import { DataService } from './service/data.service'; import { TypeService } from './service/type.service'; import { SaisonService } from './service/saison.service'; import { VideoService } from './service/video.service'; @@ -92,6 +93,7 @@ import { AppComponent } from './app.component'; CookiesService, UserService, TypeService, + DataService, UniversService, GroupService, SaisonService, diff --git a/front/src/app/component/element-group/element-group.component.html b/front/src/app/component/element-group/element-group.component.html index 32309f2..6c210a3 100644 --- a/front/src/app/component/element-group/element-group.component.html +++ b/front/src/app/component/element-group/element-group.component.html @@ -1,7 +1,7 @@
-
- type image +
+
diff --git a/front/src/app/component/element-group/element-group.component.less b/front/src/app/component/element-group/element-group.component.less index bee53f1..6441247 100644 --- a/front/src/app/component/element-group/element-group.component.less +++ b/front/src/app/component/element-group/element-group.component.less @@ -1,15 +1,15 @@ .imgContainer { text-align: center; - width: 100%; + width: 80%; + margin: 0 auto; height: 180px; + img { + //width: 100%; + max-height: 180px; + } } -img.miniature { - width: 80px; - height: 120px; - //border-radius: 50%; -} .title { height: 60px; diff --git a/front/src/app/component/element-group/element-group.component.ts b/front/src/app/component/element-group/element-group.component.ts index 9b06edc..8e10af8 100644 --- a/front/src/app/component/element-group/element-group.component.ts +++ b/front/src/app/component/element-group/element-group.component.ts @@ -28,6 +28,9 @@ export class ElementGroupComponent implements OnInit { description:string = ""; imageSource:string = null; + cover:string = ""; + covers:Array = []; + constructor(private router: Router, private groupService: GroupService) { @@ -40,9 +43,20 @@ export class ElementGroupComponent implements OnInit { .then(function(response) { self.error = ""; self.name = response.name + if (response.covers == undefined || response.covers == null || response.covers.length == 0) { + self.cover = null; + //self.covers = []; + } else { + self.cover = self.groupService.getCoverUrl(response.covers[0]); + for (let iii=0; iii +
+ +
+
Saison {{numberSaison}}
\ No newline at end of file diff --git a/front/src/app/component/element-saison/element-saison.component.less b/front/src/app/component/element-saison/element-saison.component.less index 7aee5e5..402f1c3 100644 --- a/front/src/app/component/element-saison/element-saison.component.less +++ b/front/src/app/component/element-saison/element-saison.component.less @@ -1,4 +1,15 @@ +.imgContainer { + text-align: center; + width: 80%; + margin: 0 auto; + height: 180px; + img { + //width: 100%; + max-height: 180px; + } +} + .saison { height: 60px; font-size: 24px; diff --git a/front/src/app/component/element-saison/element-saison.component.ts b/front/src/app/component/element-saison/element-saison.component.ts index ae308e0..4e9333d 100644 --- a/front/src/app/component/element-saison/element-saison.component.ts +++ b/front/src/app/component/element-saison/element-saison.component.ts @@ -24,6 +24,9 @@ export class ElementSaisonComponent implements OnInit { error:string = "" numberSaison:number = -1 + cover:string = ""; + covers:Array = []; + constructor(private router: Router, private saisonService: SaisonService) { @@ -35,9 +38,20 @@ export class ElementSaisonComponent implements OnInit { .then(function(response) { self.error = ""; self.numberSaison = response.number + if (response.covers == undefined || response.covers == null || response.covers.length == 0) { + self.cover = null; + //self.covers = []; + } else { + self.cover = self.saisonService.getCoverUrl(response.covers[0]); + for (let iii=0; iii = [] + constructor(private router: Router, private typeService: TypeService) { @@ -39,6 +43,15 @@ export class ElementTypeComponent implements OnInit { self.error = ""; self.name = response.name self.description = response.description + if (response.covers == undefined || response.covers == null || response.covers.length == 0) { + self.cover = null; + //self.covers = []; + } else { + self.cover = self.typeService.getCoverUrl(response.covers[0]); + for (let iii=0; iii
-
- type image +
+
+
+ {{episode}} +
{{name}}
diff --git a/front/src/app/component/element-video/element-video.component.less b/front/src/app/component/element-video/element-video.component.less index bee53f1..bfdc7e7 100644 --- a/front/src/app/component/element-video/element-video.component.less +++ b/front/src/app/component/element-video/element-video.component.less @@ -1,14 +1,13 @@ .imgContainer { text-align: center; - width: 100%; + width: 80%; + margin: 0 auto; height: 180px; -} - -img.miniature { - width: 80px; - height: 120px; - //border-radius: 50%; + img { + //width: 100%; + max-height: 180px; + } } .title { diff --git a/front/src/app/component/element-video/element-video.component.ts b/front/src/app/component/element-video/element-video.component.ts index 812ab65..e37aa06 100644 --- a/front/src/app/component/element-video/element-video.component.ts +++ b/front/src/app/component/element-video/element-video.component.ts @@ -38,6 +38,10 @@ export class ElementVideoComponent implements OnInit { video_source:string = ""; video_enable:boolean = false; imageSource:string = null; + + cover:string = ""; + covers:Array = []; + constructor(private router: Router, private videoService: VideoService, private httpService: HttpWrapperService) { @@ -66,6 +70,15 @@ export class ElementVideoComponent implements OnInit { self.video_source = ""; self.video_enable = false; } + if (response.covers == undefined || response.covers == null || response.covers.length == 0) { + self.cover = null; + //self.covers = []; + } else { + self.cover = self.videoService.getCoverUrl(response.covers[0]); + for (let iii=0; iii
+
+
+ Covers: +
+
+
+
+
+
+
+ Covers: +
+
+ {{upload_file_value}} +
+
\ No newline at end of file diff --git a/front/src/app/scene/video-edit/video-edit.less b/front/src/app/scene/video-edit/video-edit.less index 83b9239..d6c2f02 100644 --- a/front/src/app/scene/video-edit/video-edit.less +++ b/front/src/app/scene/video-edit/video-edit.less @@ -33,6 +33,13 @@ font-size: 20px; } } + .cover_div { + //float: left; + display: block; + } + .cover { + max-width: 30%; + } } .send_value { width: 300px; diff --git a/front/src/app/scene/video-edit/video-edit.ts b/front/src/app/scene/video-edit/video-edit.ts index d44145f..8653675 100644 --- a/front/src/app/scene/video-edit/video-edit.ts +++ b/front/src/app/scene/video-edit/video-edit.ts @@ -11,12 +11,14 @@ import { NgForm } from '@angular/forms'; import { FormGroup, FormControl } from "@angular/forms"; import { fadeInAnimation } from '../../_animations/index'; import { HttpWrapperService } from '../../service/http-wrapper.service'; +import { HttpEventType, HttpResponse} from '@angular/common/http'; import { TypeService } from '../../service/type.service'; import { UniversService } from '../../service/univers.service'; import { GroupService } from '../../service/group.service'; import { VideoService } from '../../service/video.service'; +import { DataService } from '../../service/data.service'; export class ElementList { value: number; @@ -50,6 +52,12 @@ export class VideoEditComponent implements OnInit { time:number = undefined type_id:number = undefined generated_name:string = "" + coverFile:File; + upload_file_value:string = "" + selectedFiles:FileList; + + covers_display:Array = []; + listType: ElementList[] = [ {value: undefined, label: '---'}, ]; @@ -66,6 +74,7 @@ export class VideoEditComponent implements OnInit { constructor(private route: ActivatedRoute, private router: Router, private locate: Location, + private dataService: DataService, private typeService: TypeService, private universService: UniversService, private groupService: GroupService, @@ -110,7 +119,14 @@ export class VideoEditComponent implements OnInit { self.onChangeType(response.type_id); self.onChangeGroup(response.group_id); self.saison_id = response.saison_id; - //console.log("set transformed : " + JSON.stringify(self, null, 2)); + if (response.covers !== undefined && response.covers !== null) { + for (let iii=0; iii {{name}} +
+ +
{{description}}
@@ -13,10 +16,9 @@ generated_name {{generated_name}}
-
- \ No newline at end of file diff --git a/front/src/app/scene/video/video.component.less b/front/src/app/scene/video/video.component.less index d9b82a0..d99bee8 100644 --- a/front/src/app/scene/video/video.component.less +++ b/front/src/app/scene/video/video.component.less @@ -31,6 +31,14 @@ margin: 0 auto; } +.cover { + width: 30%; + margin: 0 auto; + img { + width: 100%; + } +} + .video_div { width: 80%; margin: 0 auto; diff --git a/front/src/app/scene/video/video.component.ts b/front/src/app/scene/video/video.component.ts index af5baf7..e565b53 100644 --- a/front/src/app/scene/video/video.component.ts +++ b/front/src/app/scene/video/video.component.ts @@ -34,6 +34,8 @@ export class VideoComponent implements OnInit { type_id:number = undefined generated_name:string = "" video_source:string = "" + cover:string = "" + covers:Array = [] constructor(private route: ActivatedRoute, private router: Router, @@ -63,7 +65,15 @@ export class VideoComponent implements OnInit { } else { self.video_source = ""; } - console.log("display source " + self.video_source); + if (response.covers == undefined || response.covers == null || response.covers.length == 0) { + self.cover = null; + } else { + self.cover = self.videoService.getCoverUrl(response.covers[0]); + for (let iii=0; iii = []):any { return this.http.get_specific("group", _id, "saison", _select); }; + + getCoverUrl(_coverId:number):any { + return this.http.createRESTCall("data/" + _coverId); + }; } diff --git a/front/src/app/service/http-wrapper.service.ts b/front/src/app/service/http-wrapper.service.ts index 7294404..b03bd2e 100644 --- a/front/src/app/service/http-wrapper.service.ts +++ b/front/src/app/service/http-wrapper.service.ts @@ -1,7 +1,8 @@ import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { HttpClient, HttpHeaders, HttpParams, HttpRequest, HttpEvent} from '@angular/common/http'; import { catchError, map, tap } from 'rxjs/operators'; +import {Observable} from "rxjs"; import { environment } from 'environments/environment'; @@ -138,6 +139,97 @@ export class HttpWrapperService { }); } + uploadFileMultipart(_base:string, _id:number, _file:File): any { + console.log("Upload file to " + _base); + + let url = _base; + if (_id != null) { + url += "/" + _id; + } + let formData = new FormData(); + formData.append('upload', _file); + let headers = new Headers(); + console.log("upload filename : " + _file.name); + let extention = _file.name.split('.').pop(); + if (extention == "jpg") { + headers.append('Content-Type', "image/jpeg"); + } else if (extention == "png") { + headers.append('Content-Type', "image/png"); + } else { + return null; + } + headers.append('filename', _file.name); + + const httpOption = { + headers: headers, + reportProgress: true, + }; + return new Promise((resolve, reject) => { + this.post(url, httpOption, formData) + .then(function(response: any) { + console.log("URL: " + url + "\nRespond(" + response.status + "): " + JSON.stringify(response.data, null, 2)); + if (response.status == 200) { + resolve(response.data); + return; + } + reject("An error occured"); + }, function(response: any) { + if (typeof response.data === 'undefined') { + reject("return ERROR undefined"); + } else { + reject("return ERROR " + JSON.stringify(response.data, null, 2)); + } + }); + }); + } + uploadFileBase64(_base:string, _id:number, _file:File): any { + console.log("Upload file to " + _base); + + let url = _base; + if (_id != null) { + url += "/" + _id; + } + let self = this; + let reader = new FileReader(); + reader.readAsArrayBuffer(_file); + return new Promise((resolve, reject) => { + reader.onload = () => { + let headers = {};//new Headers(); + console.log("upload filename : " + _file.name); + let extention = _file.name.split('.').pop(); + if (extention == "jpg") { + //headers.append('Content-Type', "image/jpeg"); + headers['Content-Type'] = "image/jpeg"; + headers['mime-type'] = "image/jpeg"; + } else if (extention == "png") { + //headers.append('Content-Type', "image/png"); + headers['Content-Type'] = "image/png"; + headers['mime-type'] = "image/png"; + } else { + return null; + } + //headers.append('filename', _file.name); + headers['filename'] = _file.name; + + self.post(url, headers, reader.result) + .then(function(response: any) { + console.log("URL: " + url + "\nRespond(" + response.status + "): " + JSON.stringify(response.data, null, 2)); + if (response.status == 200) { + resolve(response.data); + return; + } + reject("An error occured"); + }, function(response: any) { + if (typeof response.data === 'undefined') { + reject("return ERROR undefined"); + } else { + reject("return ERROR ...");// + JSON.stringify(response, null, 2)); + } + }); + }; + }); + } + // Complex wrapper to simplify interaction: get_specific(_base:string, _id:number = null, _subElement:string = "", _select:Array = []):any { console.log("Get All data from " + _base); @@ -216,4 +308,40 @@ export class HttpWrapperService { }); }); }; + // Complex wrapper to simplify interaction: + post_specific(_base:string, _id:number, _data:any, _subElement:string = ""):any { + console.log("put data to " + _base); + const httpOption = { 'Content-Type': 'application/json' }; + let url = _base; + if (_id != null) { + url += "/" + _id; + } + if (_subElement != "") { + url += "/" + _subElement; + } + console.log("call PUT: " + url); + console.log(" data: " + JSON.stringify(_data, null, 2)); + + return new Promise((resolve, reject) => { + this.post(url, httpOption, _data) + .then(function(response: any) { + console.log("URL: " + url + "\nRespond(" + response.status + "): " + JSON.stringify(response.data, null, 2)); + if (response.status == 200) { + resolve(response.data); + return; + } + if (response.status == 201) { + resolve(response.data); + return; + } + reject("An error occured"); + }, function(response: any) { + if (typeof response.data === 'undefined') { + reject("return ERROR undefined"); + } else { + reject("return ERROR " + JSON.stringify(response.data, null, 2)); + } + }); + }); + }; } diff --git a/front/src/app/service/saison.service.ts b/front/src/app/service/saison.service.ts index 70a6fa3..03bee5f 100644 --- a/front/src/app/service/saison.service.ts +++ b/front/src/app/service/saison.service.ts @@ -18,5 +18,8 @@ export class SaisonService { return this.http.get_specific("saison", _id, "video"); }; + getCoverUrl(_coverId:number):any { + return this.http.createRESTCall("data/" + _coverId); + }; } diff --git a/front/src/app/service/type.service.ts b/front/src/app/service/type.service.ts index 05c61f2..42545c8 100644 --- a/front/src/app/service/type.service.ts +++ b/front/src/app/service/type.service.ts @@ -41,5 +41,8 @@ export class TypeService { return this.http.get_specific("type", _id, "univers", _select); }; + getCoverUrl(_coverId:number):any { + return this.http.createRESTCall("data/" + _coverId); + }; } diff --git a/front/src/app/service/video.service.ts b/front/src/app/service/video.service.ts index 6298e23..a5c8fa8 100644 --- a/front/src/app/service/video.service.ts +++ b/front/src/app/service/video.service.ts @@ -13,8 +13,15 @@ export class VideoService { get(_id:number):any { return this.http.get_specific("video", _id); }; + put(_id:number, _data:any):any { return this.http.put_specific("video", _id, _data); }; + addCover(_id:number, _coverId:number):any { + return this.http.post_specific("video", _id, {"data_id":_coverId}, "add_cover"); + }; + getCoverUrl(_coverId:number):any { + return this.http.createRESTCall("data/" + _coverId); + }; }