Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

real example of config

Browse Source
This commit is contained in:
tykayn 2019-08-10 11:06:13 +02:00
parent d5f71504dc
commit c048c35b9d
2 changed files with 98 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
src/app/form-container/form-container.component.html
View File

@ -1,85 +1,92 @@
<div class="description">
<router-outlet></router-outlet>
<h2 class="title" i18n>
titre de question
</h2>
<span class="pre-selector" i18n>
blah blah
<router-outlet></router-outlet>
<h2 class="title" i18n>
titre de question
</h2>
<span class="pre-selector" i18n>
Je veux créer un sondage
</span>
<select id="selector" name="selector">
<option value="yes">
oui
</option>
<option value="no">
non
</option>
</select>
<span class="post-selector">
blah blah blah.
<select id="selector" name="selector" [(ngModel)]="pollConfig.poll_type">
<option value="dates">
spécial dates
</option>
<option value="classic">
classique
</option>
</select>
<span class="post-selector">
</span>
<hr>
<label for="poll_title" class="title-label" i18n>
Dont le titre sera
</label>
<input type="text" id="poll_title" name="poll_title" [(ngModel)]="pollConfig.title">
<hr>
<span i18n>
<label for="poll_description" class="title-label" i18n>
et la description serait
</label>
<input type="text" id="poll_description" name="poll_description" [(ngModel)]="pollConfig.description" max="1000">
<hr>
<span i18n>
Choix cornélien:
</span>
<!-- todo: factoriser les boutons-->
<button
(click)="selectOption('poll_type' , 'classic')"
[class.active]="pollConfig.type_classic"
[disabled]="!formIsValid"
class="btn btn-primary next"
>
<!-- todo: factoriser les boutons-->
<button
(click)="selectOption('poll_type' , 'classic')"
[class.active]="pollConfig.type_classic"
[disabled]="!formIsValid"
class="btn btn-primary next"
>
<span i18n>
sondage classique
</span>
<span *ngIf="pollConfig.poll_type == 'classic'">
<span *ngIf="pollConfig.poll_type == 'classic'">
[x]
</span>
</button>
<button
(click)="selectOption('poll_type' ,'dates')"
[class.active]="pollConfig.type_dates"
[disabled]="!formIsValid"
class="btn btn-primary next"
>
</button>
<button
(click)="selectOption('poll_type' ,'dates')"
[class.active]="pollConfig.type_dates"
[disabled]="!formIsValid"
class="btn btn-primary next"
>
<span i18n>
sondage spécial date
</span>
<span *ngIf="pollConfig.poll_type == 'dates'">
<span *ngIf="pollConfig.poll_type == 'dates'">
[x]
</span>
</button>
</button>
</div>
<hr>
<framadate-navigation></framadate-navigation>
<hr>
<div class="well debug">
<strong>
<strong>
<span i18n>
infos de debug
</span>
</strong>
<ul>
<li>
étape actuelle {{progressionStep}} / {{progressionStepMax}}
</li>
<li>
formulaire valide : {{formIsValid}}
</li>
<li>
type de formulaire: {{pollConfig.poll_type}}
</li>
<li>
pollConfig:
<pre>
</strong>
<ul>
<li>
étape actuelle {{progressionStep}} / {{progressionStepMax}}
</li>
<li>
formulaire valide : {{formIsValid}}
</li>
<li>
type de formulaire: {{pollConfig.poll_type}}
</li>
<li>
pollConfig:
<pre>
{{pollConfig|json}}
</pre>
</li>
</ul>
</li>
</ul>
</div>

71
src/app/form-container/form-container.component.ts
View File

@ -4,9 +4,9 @@ import {ProgressionService} from '../progression.service';
// import {PollConfig} from '../config/PollConfig';
@Component({
selector: 'framadate-form-container',
templateUrl: './form-container.component.html',
styleUrls: ['./form-container.component.scss']
selector: 'framadate-form-container',
templateUrl: './form-container.component.html',
styleUrls: ['./form-container.component.scss']
})
/**
* gestion de la progression dans le formulaire.
@ -14,42 +14,45 @@ import {ProgressionService} from '../progression.service';
*/
export class FormContainerComponent implements OnInit {
private pollConfig: any = {
poll_type: 'classic',
allow_stuff: true,
};
private progressionStep = 0;
private progressionStepMax = 0;
private formIsValid = true;
// todo make a class in the config folder of this
private pollConfig: any = {
poll_type: 'classic',
title: '',
description: '',
allow_stuff: true,
};
private progressionStep = 0;
private progressionStepMax = 0;
private formIsValid = true;
constructor(private progression: ProgressionService) {
constructor(private progression: ProgressionService) {
}
ngOnInit() {
}
nextPage() {
if (this.checkValidity()) {
this.progressionStep++;
} else {
this.displayErrorMessage();
}
}
selectOption(key: string, val: any) {
this.pollConfig[key] = val;
ngOnInit() {
}
return true;
}
nextPage() {
if (this.checkValidity()) {
this.progressionStep++;
} else {
this.displayErrorMessage();
}
}
checkValidity() {
// TODO with form controls
return true;
}
selectOption(key: string, val: any) {
this.pollConfig[key] = val;
displayErrorMessage() {
// TODO
return true;
}
return true;
}
checkValidity() {
// TODO with form controls
return true;
}
displayErrorMessage() {
// TODO
return true;
}
}