[DEV] update video-edit

This commit is contained in:
Edouard DUPIN 2020-01-14 00:02:35 +01:00
parent ace8bf5e85
commit f56e290dd5
3 changed files with 177 additions and 101 deletions

View File

@ -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>

View File

@ -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 {

View File

@ -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;