diff --git a/front/src/app/app-routing.module.ts b/front/src/app/app-routing.module.ts index a04b7e1..e1d468f 100644 --- a/front/src/app/app-routing.module.ts +++ b/front/src/app/app-routing.module.ts @@ -16,6 +16,7 @@ import { VideoDetailComponent } from './video-detail/video-detail.component'; import { LoginComponent } from './login/login.component'; import { SignUpComponent } from './sign-up/sign-up.component'; import { SettingsComponent } from './settings/settings.component'; +import { VideoEditComponent } from './scene/video-edit/video-edit'; //import { HelpComponent } from './help/help.component'; @@ -26,6 +27,7 @@ const routes: Routes = [ { path: 'group/:id', component: GroupDetailComponent }, { path: 'saison/:id', component: SaisonDetailComponent }, { path: 'video/:id', component: VideoDetailComponent }, + { path: 'video-edit/:id', component: VideoEditComponent }, { path: 'login', component: LoginComponent }, { path: 'signup', component: SignUpComponent }, { path: 'settings', component: SettingsComponent }, diff --git a/front/src/app/app.module.ts b/front/src/app/app.module.ts index 289dcfe..e88c8d7 100644 --- a/front/src/app/app.module.ts +++ b/front/src/app/app.module.ts @@ -9,6 +9,7 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpClientModule } from '@angular/common/http'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { routing } from './app-routing.module'; @@ -32,6 +33,7 @@ import { VideoDetailComponent } from './video-detail/video-detail.component'; import { SettingsComponent } from './settings/settings.component'; import { ErrorViewerComponent } from './error-viewer/error-viewer.component'; import { ErrorComponent } from './error/error.component'; +import { VideoEditComponent } from './scene/video-edit/video-edit'; import { ArianeService } from './ariane.service'; import { CookiesService } from './cookies.service'; @@ -68,14 +70,17 @@ import { AppComponent } from './app.component'; VideoDetailComponent, SettingsComponent, ErrorViewerComponent, - ErrorComponent + ErrorComponent, + VideoEditComponent ], imports: [ BrowserModule, RouterModule, routing, BrowserAnimationsModule, - HttpClientModule + HttpClientModule, + FormsModule, + ReactiveFormsModule ], providers: [ HttpWrapperService, diff --git a/front/src/app/ariane.service.ts b/front/src/app/ariane.service.ts index c473144..09739c9 100644 --- a/front/src/app/ariane.service.ts +++ b/front/src/app/ariane.service.ts @@ -29,6 +29,9 @@ export class ArianeService { public saison_name: string = null; @Output() saison_change: EventEmitter = new EventEmitter(); + public video_id: number = null; + @Output() video_change: EventEmitter = new EventEmitter(); + constructor( private typeService: TypeService, private universService: UniversService, @@ -50,6 +53,8 @@ export class ArianeService { this.saison_id = null; this.saison_name = null; this.saison_change.emit(this.saison_id); + this.video_id = null; + this.video_change.emit(this.video_id); } setType(id:number):void { @@ -127,4 +132,12 @@ export class ArianeService { getSaisonName():string { return this.saison_name; } + + setVideo(id:number):void { + this.video_id = id; + this.video_change.emit(this.video_id); + } + getVideoId():number { + return this.video_id; + } } \ No newline at end of file diff --git a/front/src/app/group-detail/group-detail.component.ts b/front/src/app/group-detail/group-detail.component.ts index c91d240..7060725 100644 --- a/front/src/app/group-detail/group-detail.component.ts +++ b/front/src/app/group-detail/group-detail.component.ts @@ -62,6 +62,7 @@ export class GroupDetailComponent implements OnInit { onSelectVideo(_idSelected: number):void { this.router.navigate(['video/' + _idSelected ]); + this.arianeService.setVideo(_idSelected); } } diff --git a/front/src/app/saison-detail/saison-detail.component.ts b/front/src/app/saison-detail/saison-detail.component.ts index 9076836..f305b10 100644 --- a/front/src/app/saison-detail/saison-detail.component.ts +++ b/front/src/app/saison-detail/saison-detail.component.ts @@ -48,6 +48,7 @@ export class SaisonDetailComponent implements OnInit { onSelectVideo(_idSelected: number):void { this.router.navigate(['video/' + _idSelected ]); + this.arianeService.setVideo(_idSelected); } } diff --git a/front/src/app/scene/video-edit/video-edit.html b/front/src/app/scene/video-edit/video-edit.html new file mode 100644 index 0000000..3f307d6 --- /dev/null +++ b/front/src/app/scene/video-edit/video-edit.html @@ -0,0 +1,42 @@ +
+
+
+ + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ +
+
+
\ 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 new file mode 100644 index 0000000..2b0a202 --- /dev/null +++ b/front/src/app/scene/video-edit/video-edit.less @@ -0,0 +1,110 @@ +.fill-all{ + //width:100%; + max-width:80%; + height:100%; + margin: 20px auto; + padding: 20px; + border:0; + background-color: rgba(200, 200, 200, 0.5); + box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); +} + +table { + border-collapse: collapse; +} +table, th, td { + border-radius: 9px; + padding: 10px; +} +.error { + color: rgba(248, 141, 18, 0.842); +} +.success { + color: green; +} + +.title { + width: 90%; + margin: 0 auto; + font-size: 50px; + text-align: center; +} + +.description { + width: 80%; + margin: 0 auto; +} + +.episode { + width: 80%; + margin: 0 auto; +} + +.generated_name { + width: 80%; + margin: 0 auto; +} + +.video_div { + width: 80%; + margin: 0 auto; +} + +.video_object { + width: 100%; + margin: 0 auto; +} + +.item { + font-size: 20px; + height: 21%; + width: 23%; + margin: 1%; + padding: 0; + overflow: hidden; + //box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24); + box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); + line-height: normal; + border: none; + font-family: "Roboto","Helvetica","Arial",sans-serif; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0; + will-change: box-shadow; + outline: none; + cursor: pointer; + text-decoration: none; + text-align: center; + vertical-align: middle; + transition-duration: 0.4s; + float:left; + display:block; + + h1 { + font-size: 24px; + } + + &:hover { + background-color: #F00; + } + + .material-icons { + vertical-align: middle; + } + + .material-icons { + position: absolute; + top: 50%; + left: 50%; + transform: ~"translate(-12px,-12px)"; + line-height: 24px; + width: 24px; + } +} + +.item-video { + &:hover { + background-color: #0F0; + } +} + diff --git a/front/src/app/scene/video-edit/video-edit.ts b/front/src/app/scene/video-edit/video-edit.ts new file mode 100644 index 0000000..d0d1c82 --- /dev/null +++ b/front/src/app/scene/video-edit/video-edit.ts @@ -0,0 +1,109 @@ +/** @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 '../../http-wrapper.service'; + +import { VideoService } from '../../video.service'; + +@Component({ + selector: 'app-video-edit', + templateUrl: './video-edit.html', + styleUrls: ['./video-edit.less'], + animations: [fadeInAnimation], + host: { '[@fadeInAnimation]': '' } +}) +/* +export class Video { + name: string; + description: string; + episode: number; + constructor() { + } +} +*/ +// https://www.sitepoint.com/angular-forms/ +export class VideoEditComponent implements OnInit { + id_video:number = -1; + + error:string = "" + + name:string = "" + description:string = "" + episode:number = undefined + group_id:number = undefined + saison_id:number = undefined + data_id:number = -1 + time:number = undefined + type_id:number = undefined + generated_name:string = "" + video_source:string = "" + + videoForm = new FormGroup({ + name: new FormControl("kjhkjhk"), + description: new FormControl(), + episode: new FormControl() + }) + //video = new Video(); + + constructor(private route: ActivatedRoute, + private router: Router, + private locate: Location, + private videoService: VideoService, + private httpService: HttpWrapperService) { + + } + + ngOnInit() { + this.id_video = parseInt(this.route.snapshot.paramMap.get('id')); + let self = this; + this.videoService.get(this.id_video) + .then(function(response) { + console.log("get response of video : " + JSON.stringify(response, null, 2)); + self.error = ""; + self.videoForm.get("name").setValue(response.name); + self.videoForm.get("description").setValue(response.description); + self.videoForm.get("episode").setValue(response.episode); + + self.name = response.name; + self.description = response.description; + self.episode = response.episode; + self.group_id = response.group_id; + self.saison_id = response.saison_id; + self.data_id = response.data_id; + self.time = response.time; + self.generated_name = response.generated_name; + if (self.data_id != -1) { + self.video_source = self.httpService.createRESTCall("data/" + self.data_id); + } else { + self.video_source = ""; + } + console.log("display source " + self.video_source); + //console.log("set transformed : " + JSON.stringify(self, null, 2)); + }).catch(function(response) { + self.error = "Can not get the data"; + self.name = ""; + self.description = ""; + self.episode = undefined; + self.group_id = undefined; + self.saison_id = undefined; + self.data_id = -1; + self.time = undefined; + self.generated_name = ""; + self.video_source = ""; + }); + } + submitChange(videoForm:NgForm):void { + console.log("videoForm form display" + videoForm); + + } + +} diff --git a/front/src/app/top-menu/top-menu.component.html b/front/src/app/top-menu/top-menu.component.html index 1c64e4c..3909a9f 100644 --- a/front/src/app/top-menu/top-menu.component.html +++ b/front/src/app/top-menu/top-menu.component.html @@ -31,6 +31,12 @@ (click)="onAvatar()"> +
diff --git a/front/src/app/top-menu/top-menu.component.ts b/front/src/app/top-menu/top-menu.component.ts index 8e947a1..cf4bb6a 100644 --- a/front/src/app/top-menu/top-menu.component.ts +++ b/front/src/app/top-menu/top-menu.component.ts @@ -35,12 +35,21 @@ export class TopMenuComponent implements OnInit { public ariane_saison_id: number = null; public ariane_saison_name: string = null; + public editable:boolean = false; + constructor(private router: Router, private sessionService: SessionService, private arianeService: ArianeService) { } + updateEditable() { + if (this.arianeService.getVideoId() != null) { + this.editable = true; + } else { + this.editable = false; + } + } ngOnInit() { this.sessionService.change.subscribe(isConnected => { console.log("receive event from session ..." + isConnected); @@ -59,18 +68,25 @@ export class TopMenuComponent implements OnInit { this.arianeService.type_change.subscribe(type_id => { this.ariane_type_id = type_id; this.ariane_type_name = this.arianeService.getTypeName(); + this.updateEditable(); }); this.arianeService.univers_change.subscribe(univers_id => { this.ariane_univers_id = univers_id; this.ariane_univers_name = this.arianeService.getUniversName(); + this.updateEditable(); }); this.arianeService.group_change.subscribe(group_id => { this.ariane_group_id = group_id; this.ariane_group_name = this.arianeService.getGroupName(); + this.updateEditable(); }); this.arianeService.saison_change.subscribe(saison_id => { this.ariane_saison_id = saison_id; this.ariane_saison_name = this.arianeService.getSaisonName(); + this.updateEditable(); + }); + this.arianeService.video_change.subscribe(video_id => { + this.updateEditable(); }); } onAvatar(): void { @@ -78,6 +94,13 @@ export class TopMenuComponent implements OnInit { this.displayUserMenu = !this.displayUserMenu; } + onEdit(): void { + console.log("onEdit()"); + if (this.arianeService.getVideoId() != null) { + this.router.navigate(['video-edit/' + this.arianeService.getVideoId()]); + } + } + onHome(): void { console.log("onHome()"); this.router.navigate(['home']); diff --git a/front/src/app/type-detail/type-detail.component.ts b/front/src/app/type-detail/type-detail.component.ts index 9600739..cc26a45 100644 --- a/front/src/app/type-detail/type-detail.component.ts +++ b/front/src/app/type-detail/type-detail.component.ts @@ -69,6 +69,7 @@ export class TypeDetailComponent implements OnInit { onSelectVideo(_idSelected: number):void { this.router.navigate(['video/' + _idSelected ]); + this.arianeService.setVideo(_idSelected); } }