make pages components and nav

This commit is contained in:
tykayn 2019-08-10 17:41:01 +02:00
parent 56aa09df3b
commit 49f4b4c13b
29 changed files with 297 additions and 32 deletions

View File

@ -12,6 +12,6 @@
Ceci est une démo Ceci est une démo
</i> </i>
</div> </div>
<router-outlet></router-outlet>
<framadate-navigation></framadate-navigation> <framadate-navigation></framadate-navigation>
<router-outlet></router-outlet>
<framadate-debugger></framadate-debugger> <framadate-debugger></framadate-debugger>

View File

@ -8,7 +8,7 @@ export interface DateOption {
} }
/** /**
* configuration * configuration of the poll, add new fields at will
*/ */
export class PollConfig { export class PollConfig {
step = 0; step = 0;
@ -16,9 +16,21 @@ export class PollConfig {
pollType = 'classic'; pollType = 'classic';
title = ''; title = '';
description = ''; description = '';
visibility = 'link_only';
// date specific poll // date specific poll
allowSeveralHours = false; allowSeveralHours = false;
dateList: DateOption[] = []; dateList: DateOption[] = [];
answers: string[] = []; answers: string[] = [];
addAnswer() {
this.answers.push('');
}
removeAnswer(answer: string) {
const indexFound = this.answers.indexOf(answer);
if (indexFound !== -1) {
this.answers.splice(indexFound);
}
}
} }

View File

@ -5,6 +5,7 @@ import {VisibilityComponent} from '../pages/visibility/visibility.component';
import {ResumeComponent} from '../pages/resume/resume.component'; import {ResumeComponent} from '../pages/resume/resume.component';
import {PicturesComponent} from '../pages/pictures/pictures.component'; import {PicturesComponent} from '../pages/pictures/pictures.component';
import {EndConfirmationComponent} from '../pages/end-confirmation/end-confirmation.component'; import {EndConfirmationComponent} from '../pages/end-confirmation/end-confirmation.component';
import {AnswersComponent} from '../pages/answers/answers.component';
/** /**
* each step in the form is a component * each step in the form is a component
@ -15,7 +16,8 @@ export const Routes =
{path: 'home', component: FormContainerComponent}, {path: 'home', component: FormContainerComponent},
{path: 'step/date', component: DatesComponent}, {path: 'step/date', component: DatesComponent},
{path: 'step/kind', component: KindComponent}, {path: 'step/kind', component: KindComponent},
{path: 'step/picture', component: PicturesComponent}, {path: 'step/answers', component: AnswersComponent},
{path: 'step/pictures', component: PicturesComponent},
{path: 'step/visibility', component: VisibilityComponent}, {path: 'step/visibility', component: VisibilityComponent},
{path: 'step/recapitulatif', component: ResumeComponent}, {path: 'step/recapitulatif', component: ResumeComponent},
{path: 'step/end', component: EndConfirmationComponent}, {path: 'step/end', component: EndConfirmationComponent},

View File

@ -24,22 +24,5 @@ export class FormContainerComponent implements OnInit {
ngOnInit() { ngOnInit() {
} }
nextPage() {
if (this.checkValidity()) {
this.progressionStep++;
} else {
this.displayErrorMessage();
}
}
checkValidity() {
// TODO with form controls
return true;
}
displayErrorMessage() {
// TODO
return true;
}
} }

View File

@ -0,0 +1,15 @@
<h1 i18n>
Choisir les propositions
</h1>
<p class="subtitle" i18n>
vous pouvez utiliser la syntaxe markdown
</p>
<ol
*ngFor="let answer of config.answers"
class="anwser">
<li>
<input type="text" [(ngModel)]="answer" (keydown)="addWhenEnterKey($event)">
<button (click)="config.removeAnswer(answer)">X</button>
</li>
</ol>
<a [routerLink]="'/step/recapitulatif'" class="btn btn-block">Voyons ce que ça donne</a>

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AnswersComponent } from './answers.component';
describe('AnswersComponent', () => {
let component: AnswersComponent;
let fixture: ComponentFixture<AnswersComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AnswersComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AnswersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,26 @@
import {Component, OnInit} from '@angular/core';
import {BaseComponent} from '../base-page/base.component';
import {ConfigService} from '../../config.service';
@Component({
selector: 'framadate-answers',
templateUrl: './answers.component.html',
styleUrls: ['./answers.component.scss']
})
export class AnswersComponent extends BaseComponent implements OnInit {
constructor(config: ConfigService) {
super(config);
}
// todo, manage validation of each page in a common way
ngOnInit() {
}
// add a new answer on the press of ENTER in an input
addWhenEnterKey(event) {
if (event.keyCode === 13) {
this.config.addAnswer();
}
}
}

View File

@ -1 +1,2 @@
<h1>Ce composant est celui de base pour les pages</h1> <h1>Ce composant est celui de base pour les pages</h1>
<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

View File

@ -11,10 +11,21 @@ import {ConfigService} from '../../config.service';
*/ */
export class BaseComponent implements OnInit { export class BaseComponent implements OnInit {
constructor(private config: ConfigService) { constructor(protected config: ConfigService) {
} }
ngOnInit() { ngOnInit() {
} }
checkValidity() {
// TODO with form controls
return true;
}
displayErrorMessage() {
// TODO
return true;
}
} }

View File

@ -32,3 +32,4 @@
{{choice.text}} {{choice.text}}
</div> </div>
</div> </div>
<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

View File

@ -0,0 +1,6 @@
<h1 i18n>
Et c'est tout pour nous!
</h1>
<h2 i18n>Coté administrateur-ice-eux</h2>
<h2 i18n>Coté sondés</h2>
<h2 i18n>recevoir les liens par e-mail</h2>

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EndConfirmationComponent } from './end-confirmation.component';
describe('EndConfirmationComponent', () => {
let component: EndConfirmationComponent;
let fixture: ComponentFixture<EndConfirmationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EndConfirmationComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EndConfirmationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'framadate-end-confirmation',
templateUrl: './end-confirmation.component.html',
styleUrls: ['./end-confirmation.component.scss']
})
export class EndConfirmationComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

View File

@ -1,2 +1,3 @@
<p>cette étape est en cours de développement. <br> S'inspirer de la page de FormContainer pour réaliser d'autres pages <p>cette étape est en cours de développement. <br> S'inspirer de la page de FormContainer pour réaliser d'autres pages
</p> </p>
<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

View File

@ -0,0 +1,3 @@
<h1 i18n>
Images
</h1>

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PicturesComponent } from './pictures.component';
describe('PicturesComponent', () => {
let component: PicturesComponent;
let fixture: ComponentFixture<PicturesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PicturesComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PicturesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,19 @@
import {Component, OnInit} from '@angular/core';
import {ConfigService} from '../../config.service';
import {BaseComponent} from '../base-page/base.component';
@Component({
selector: 'framadate-pictures',
templateUrl: './pictures.component.html',
styleUrls: ['./pictures.component.scss']
})
export class PicturesComponent extends BaseComponent implements OnInit {
constructor(config: ConfigService) {
super(config);
}
ngOnInit() {
}
}

View File

@ -0,0 +1,7 @@
<h1 i18n>
Résumé avant validation
</h1>
<section>
TODO
</section>
<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ResumeComponent } from './resume.component';
describe('ResumeComponent', () => {
let component: ResumeComponent;
let fixture: ComponentFixture<ResumeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ResumeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ResumeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,19 @@
import {Component, OnInit} from '@angular/core';
import {BaseComponent} from '../base-page/base.component';
import {ConfigService} from '../../config.service';
@Component({
selector: 'framadate-resume',
templateUrl: './resume.component.html',
styleUrls: ['./resume.component.scss']
})
export class ResumeComponent extends BaseComponent implements OnInit {
constructor(config: ConfigService) {
super(config);
}
ngOnInit() {
}
}

View File

@ -11,3 +11,4 @@
<h1 i18n> <h1 i18n>
Accès au sondage Accès au sondage
</h1> </h1>
<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

View File

@ -5,6 +5,31 @@
[routerLink]="'/step/date'"> [routerLink]="'/step/date'">
Aller aux dates Aller aux dates
</a> </a>
<a
class="btn btn-primary"
[routerLink]="'/step/answers'">
Réponses
</a>
<a
class="btn btn-primary"
[routerLink]="'/step/visibility'">
Visibilité
</a>
<a
class="btn btn-primary"
[routerLink]="'/step/answers'">
Base
</a>
<a
class="btn btn-primary"
[routerLink]="'/step/pictures'">
Images
</a>
<a
class="btn btn-primary"
[routerLink]="'/step/resume'">
Résumé
</a>
<a <a
class="btn btn-primary" class="btn btn-primary"
[routerLink]="'/step/kind'"> [routerLink]="'/step/kind'">

View File

@ -1,15 +1,29 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {BaseComponent} from '../../pages/base-page/base.component';
import {ConfigService} from '../../config.service';
@Component({ @Component({
selector: 'framadate-navigation', selector: 'framadate-navigation',
templateUrl: './navigation.component.html', templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss'] styleUrls: ['./navigation.component.scss']
}) })
export class NavigationComponent implements OnInit { export class NavigationComponent extends BaseComponent implements OnInit {
constructor() { } constructor(config: ConfigService) {
super(config);
}
ngOnInit() { ngOnInit() {
} }
nextPage() {
if (this.checkValidity()) {
if (this.config.step < this.config.stepMax) {
this.config.step++;
}
} else {
this.displayErrorMessage();
}
}
} }

View File

@ -3,6 +3,10 @@ select {
@extend .funky-box; @extend .funky-box;
} }
textarea {
border-left: 3px solid $main_color_strong;
}
.funky-box { .funky-box {
background: $light; background: $light;
padding: 1em; padding: 1em;

View File

@ -1,7 +1,7 @@
$main_color: #fdffbf; $main_color: #fdffbf;
$main_color_strong: #ffa300; $main_color_strong: #FFD52C;
$second_color: cyan; $second_color: cyan;
$light: white; $light: white;
$logo_color: violet; $logo_color: #000;
$logo_color_2: green; $logo_color_2: #8A9B51;