tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

real example of config

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"> <div class="description">
<router-outlet></router-outlet> <router-outlet></router-outlet>
<h2 class="title" i18n> <h2 class="title" i18n>
titre de question titre de question
</h2> </h2>
<span class="pre-selector" i18n> <span class="pre-selector" i18n>
Je veux créer un sondage
blah blah
</span> </span>
<select id="selector" name="selector"> <select id="selector" name="selector" [(ngModel)]="pollConfig.poll_type">
<option value="yes"> <option value="dates">
oui spécial dates
</option> </option>
<option value="no"> <option value="classic">
non classique
</option> </option>
</select> </select>
<span class="post-selector"> <span class="post-selector">
blah blah blah.
</span> </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> <label for="poll_description" class="title-label" i18n>
<span 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: Choix cornélien:
</span> </span>
<!-- todo: factoriser les boutons--> <!-- todo: factoriser les boutons-->
<button <button
(click)="selectOption('poll_type' , 'classic')" (click)="selectOption('poll_type' , 'classic')"
[class.active]="pollConfig.type_classic" [class.active]="pollConfig.type_classic"
[disabled]="!formIsValid" [disabled]="!formIsValid"
class="btn btn-primary next" class="btn btn-primary next"
> >
<span i18n> <span i18n>
sondage classique sondage classique
</span> </span>
<span *ngIf="pollConfig.poll_type == 'classic'"> <span *ngIf="pollConfig.poll_type == 'classic'">
[x] [x]
</span> </span>
</button> </button>
<button <button
(click)="selectOption('poll_type' ,'dates')" (click)="selectOption('poll_type' ,'dates')"
[class.active]="pollConfig.type_dates" [class.active]="pollConfig.type_dates"
[disabled]="!formIsValid" [disabled]="!formIsValid"
class="btn btn-primary next" class="btn btn-primary next"
> >
<span i18n> <span i18n>
sondage spécial date sondage spécial date
</span> </span>
<span *ngIf="pollConfig.poll_type == 'dates'"> <span *ngIf="pollConfig.poll_type == 'dates'">
[x] [x]
</span> </span>
</button> </button>
</div> </div>
<hr> <hr>
<framadate-navigation></framadate-navigation> <framadate-navigation></framadate-navigation>
<hr> <hr>
<div class="well debug"> <div class="well debug">
<strong> <strong>
<span i18n> <span i18n>
infos de debug infos de debug
</span> </span>
</strong> </strong>
<ul> <ul>
<li> <li>
étape actuelle {{progressionStep}} / {{progressionStepMax}} étape actuelle {{progressionStep}} / {{progressionStepMax}}
</li> </li>
<li> <li>
formulaire valide : {{formIsValid}} formulaire valide : {{formIsValid}}
</li> </li>
<li> <li>
type de formulaire: {{pollConfig.poll_type}} type de formulaire: {{pollConfig.poll_type}}
</li> </li>
<li> <li>
pollConfig: pollConfig:
<pre> <pre>
{{pollConfig|json}} {{pollConfig|json}}
</pre> </pre>
</li> </li>
</ul> </ul>
</div> </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'; // import {PollConfig} from '../config/PollConfig';
@Component({ @Component({
selector: 'framadate-form-container', selector: 'framadate-form-container',
templateUrl: './form-container.component.html', templateUrl: './form-container.component.html',
styleUrls: ['./form-container.component.scss'] styleUrls: ['./form-container.component.scss']
}) })
/** /**
* gestion de la progression dans le formulaire. * gestion de la progression dans le formulaire.
@ -14,42 +14,45 @@ import {ProgressionService} from '../progression.service';
*/ */
export class FormContainerComponent implements OnInit { export class FormContainerComponent implements OnInit {
private pollConfig: any = { // todo make a class in the config folder of this
poll_type: 'classic', private pollConfig: any = {
allow_stuff: true, poll_type: 'classic',
}; title: '',
private progressionStep = 0; description: '',
private progressionStepMax = 0; allow_stuff: true,
private formIsValid = 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) { ngOnInit() {
this.pollConfig[key] = val; }
return true; nextPage() {
} if (this.checkValidity()) {
this.progressionStep++;
} else {
this.displayErrorMessage();
}
}
checkValidity() { selectOption(key: string, val: any) {
// TODO with form controls this.pollConfig[key] = val;
return true;
}
displayErrorMessage() { return true;
// TODO }
return true;
} checkValidity() {
// TODO with form controls
return true;
}
displayErrorMessage() {
// TODO
return true;
}
} }