[DEV] update video-edit
This commit is contained in:
parent
ace8bf5e85
commit
f56e290dd5
@ -1,42 +1,90 @@
|
|||||||
<div class="main-reduce">
|
<div class="main-reduce">
|
||||||
<div class="fill-all">
|
<div class="fill-all">
|
||||||
<form [formGroup]="videoForm"><!-- (ngSubmit)="submitChange(videoForm.form);" -->
|
<div class="request_raw">
|
||||||
<table>
|
<div class="label">
|
||||||
<tr>
|
Title:
|
||||||
<td>
|
</div>
|
||||||
<label>Name:</label>
|
<div class="input">
|
||||||
</td>
|
<input type="text"
|
||||||
<td>
|
placeholder="Name of the film"
|
||||||
<input type="text"
|
[(value)]="name"
|
||||||
formControlName="name"
|
/>
|
||||||
id="name"
|
</div>
|
||||||
class="form-control">
|
</div>
|
||||||
</td>
|
<div class="request_raw">
|
||||||
</tr>
|
<div class="label">
|
||||||
<tr>
|
Description:
|
||||||
<td>
|
</div>
|
||||||
<label>Description:</label>
|
<div class="input">
|
||||||
</td>
|
<input type="text" [(value)]="description"/>
|
||||||
<td>
|
</div>
|
||||||
<input type="text"
|
</div>
|
||||||
formControlName="description"
|
<div class="request_raw">
|
||||||
id="description"
|
<div class="label">
|
||||||
class="form-control">
|
Date:
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
<div class="input">
|
||||||
<tr>
|
<input type="text" [(value)]="time"/>
|
||||||
<td>
|
</div>
|
||||||
<label>Episode (id):</label>
|
</div>
|
||||||
</td>
|
<div class="request_raw">
|
||||||
<td>
|
<div class="label">
|
||||||
<input type="text"
|
Type:
|
||||||
formControlName="episode"
|
</div>
|
||||||
id="episode"
|
<div class="input">
|
||||||
class="form-control">
|
<select [(ngModel)]="type_id">
|
||||||
</td>
|
<option *ngFor="let element of listType" [ngValue]="element.value">{{element.label}}</option>
|
||||||
</tr>
|
</select>
|
||||||
</table>
|
</div>
|
||||||
<button class="btn btn-primary">Update</button>
|
</div>
|
||||||
</form>
|
<div class="request_raw">
|
||||||
|
<div class="label">
|
||||||
|
Univers:
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<select [(ngModel)]="univers_id">
|
||||||
|
<option *ngFor="let element of listUnivers" [ngValue]="element.value">{{element.label}}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="request_raw">
|
||||||
|
<div class="label">
|
||||||
|
Group:
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<select [(ngModel)]="group_id">
|
||||||
|
<option *ngFor="let element of listGroup" [ngValue]="element.value">{{element.label}}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="request_raw">
|
||||||
|
<div class="label">
|
||||||
|
Saison:
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<select [(ngModel)]="saison_id">
|
||||||
|
<option *ngFor="let element of listSaison" [ngValue]="element.value">{{element.label}}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="request_raw">
|
||||||
|
<div class="label">
|
||||||
|
Episode:
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input type="text" [(value)]="episode"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="request_raw">
|
||||||
|
<div class="label">
|
||||||
|
Data ID:
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
{{data_id}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -9,50 +9,36 @@
|
|||||||
box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
|
box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
.request_raw {
|
||||||
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%;
|
width: 90%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-size: 50px;
|
height: 45px;
|
||||||
text-align: center;
|
.label {
|
||||||
|
width: 20%;
|
||||||
|
margin-right: 10px;
|
||||||
|
text-align: right;
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.input {
|
||||||
|
width: 75%;
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
.send_value {
|
||||||
.description {
|
width: 300px;
|
||||||
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;
|
margin: 0 auto;
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
|
@ -12,8 +12,20 @@ import { FormGroup, FormControl } from "@angular/forms";
|
|||||||
import { fadeInAnimation } from '../../_animations/index';
|
import { fadeInAnimation } from '../../_animations/index';
|
||||||
import { HttpWrapperService } from '../../service/http-wrapper.service';
|
import { HttpWrapperService } from '../../service/http-wrapper.service';
|
||||||
|
|
||||||
|
|
||||||
|
import { TypeService } from '../../service/type.service';
|
||||||
|
import { UniversService } from '../../service/univers.service';
|
||||||
import { VideoService } from '../../service/video.service';
|
import { VideoService } from '../../service/video.service';
|
||||||
|
|
||||||
|
export class ElementList {
|
||||||
|
value: number;
|
||||||
|
label: string;
|
||||||
|
constructor(_value: number, _label: string) {
|
||||||
|
this.value = _value;
|
||||||
|
this.label = _label;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-video-edit',
|
selector: 'app-video-edit',
|
||||||
templateUrl: './video-edit.html',
|
templateUrl: './video-edit.html',
|
||||||
@ -21,15 +33,6 @@ import { VideoService } from '../../service/video.service';
|
|||||||
animations: [fadeInAnimation],
|
animations: [fadeInAnimation],
|
||||||
host: { '[@fadeInAnimation]': '' }
|
host: { '[@fadeInAnimation]': '' }
|
||||||
})
|
})
|
||||||
/*
|
|
||||||
export class Video {
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
episode: number;
|
|
||||||
constructor() {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
// https://www.sitepoint.com/angular-forms/
|
// https://www.sitepoint.com/angular-forms/
|
||||||
export class VideoEditComponent implements OnInit {
|
export class VideoEditComponent implements OnInit {
|
||||||
id_video:number = -1;
|
id_video:number = -1;
|
||||||
@ -39,6 +42,7 @@ export class VideoEditComponent implements OnInit {
|
|||||||
name:string = ""
|
name:string = ""
|
||||||
description:string = ""
|
description:string = ""
|
||||||
episode:number = undefined
|
episode:number = undefined
|
||||||
|
univers_id:number = undefined
|
||||||
group_id:number = undefined
|
group_id:number = undefined
|
||||||
saison_id:number = undefined
|
saison_id:number = undefined
|
||||||
data_id:number = -1
|
data_id:number = -1
|
||||||
@ -46,38 +50,75 @@ export class VideoEditComponent implements OnInit {
|
|||||||
type_id:number = undefined
|
type_id:number = undefined
|
||||||
generated_name:string = ""
|
generated_name:string = ""
|
||||||
video_source:string = ""
|
video_source:string = ""
|
||||||
|
listType: ElementList[] = [
|
||||||
videoForm = new FormGroup({
|
{value: undefined, label: '---'},
|
||||||
name: new FormControl("kjhkjhk"),
|
];
|
||||||
description: new FormControl(),
|
listUnivers: ElementList[] = [
|
||||||
episode: new FormControl()
|
{value: undefined, label: '---'},
|
||||||
})
|
{value: null, label: '---'},
|
||||||
//video = new Video();
|
];
|
||||||
|
listGroup: ElementList[] = [
|
||||||
|
{value: undefined, label: '---'},
|
||||||
|
];
|
||||||
|
listSaison: ElementList[] = [
|
||||||
|
{value: undefined, label: '---'},
|
||||||
|
];
|
||||||
constructor(private route: ActivatedRoute,
|
constructor(private route: ActivatedRoute,
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private locate: Location,
|
private locate: Location,
|
||||||
|
private typeService: TypeService,
|
||||||
|
private universService: UniversService,
|
||||||
private videoService: VideoService,
|
private videoService: VideoService,
|
||||||
private httpService: HttpWrapperService) {
|
private httpService: HttpWrapperService) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
sendValues():void {
|
||||||
|
console.log("send new values....");
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.id_video = parseInt(this.route.snapshot.paramMap.get('video_id'));
|
this.id_video = parseInt(this.route.snapshot.paramMap.get('video_id'));
|
||||||
let self = this;
|
let self = this;
|
||||||
|
this.universService.getData()
|
||||||
|
.then(function(response2) {
|
||||||
|
self.listUnivers = [{value: undefined, label: '---'}];
|
||||||
|
for(let iii= 0; iii < response2.length; iii++) {
|
||||||
|
self.listUnivers.push({value: response2[iii].id, label: response2[iii].name});
|
||||||
|
}
|
||||||
|
}).catch(function(response2) {
|
||||||
|
console.log("get response22 : " + JSON.stringify(response2, null, 2));
|
||||||
|
});
|
||||||
this.videoService.get(this.id_video)
|
this.videoService.get(this.id_video)
|
||||||
.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.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.name = response.name;
|
||||||
self.description = response.description;
|
self.description = response.description;
|
||||||
self.episode = response.episode;
|
self.episode = response.episode;
|
||||||
self.group_id = response.group_id;
|
self.type_id = response.type_id;
|
||||||
|
self.typeService.getData()
|
||||||
|
.then(function(response2) {
|
||||||
|
self.listType = [{value: undefined, label: '---'}];
|
||||||
|
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));
|
||||||
|
});
|
||||||
self.saison_id = response.saison_id;
|
self.saison_id = response.saison_id;
|
||||||
|
self.group_id = response.group_id;
|
||||||
|
self.listGroup = [{value: undefined, label: '---'}];
|
||||||
|
if (response.type_id != undefined) {
|
||||||
|
self.typeService.getSubGroup(response.type_id)
|
||||||
|
.then(function(response2) {
|
||||||
|
for(let iii= 0; iii < response2.length; iii++) {
|
||||||
|
self.listGroup.push({value: response2[iii].id, label: response2[iii].name});
|
||||||
|
}
|
||||||
|
}).catch(function(response2) {
|
||||||
|
console.log("get response22 : " + JSON.stringify(response2, null, 2));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
self.univers_id = response.univers_id;
|
||||||
self.data_id = response.data_id;
|
self.data_id = response.data_id;
|
||||||
self.time = response.time;
|
self.time = response.time;
|
||||||
self.generated_name = response.generated_name;
|
self.generated_name = response.generated_name;
|
||||||
@ -94,6 +135,7 @@ export class VideoEditComponent implements OnInit {
|
|||||||
self.description = "";
|
self.description = "";
|
||||||
self.episode = undefined;
|
self.episode = undefined;
|
||||||
self.group_id = undefined;
|
self.group_id = undefined;
|
||||||
|
self.univers_id = undefined;
|
||||||
self.saison_id = undefined;
|
self.saison_id = undefined;
|
||||||
self.data_id = -1;
|
self.data_id = -1;
|
||||||
self.time = undefined;
|
self.time = undefined;
|
||||||
|
Loading…
Reference in New Issue
Block a user