make routing, link data with poll config.

🎨 style sheets
This commit is contained in:
tykayn 2019-08-09 17:43:23 +02:00
parent 512d569c54
commit d5f71504dc
19 changed files with 253 additions and 25 deletions

View File

@ -1,11 +1,12 @@
<!--The content below is only a placeholder and can be replaced.--> <!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center"> <div style="text-align:center">
<h1 i18n> <h1 >
Bienvenue sur Framadate <span i18n>Bienvenue sur </span>
<span class="logo_first">Frama</span>
<span class="logo_second">date</span>
</h1> </h1>
<p i18n> <p i18n>
Ceci est une démo Ceci est une démo
</p> </p>
</div> </div>
<framadate-form-container></framadate-form-container>
<router-outlet></router-outlet> <router-outlet></router-outlet>

View File

@ -1,13 +1,17 @@
import { BrowserModule } from '@angular/platform-browser'; import {BrowserModule} from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import {NgModule} from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; import {AppRoutingModule} from './app-routing.module';
import { AppComponent } from './app.component'; import {AppComponent} from './app.component';
import { FormContainerComponent } from './form-container/form-container.component'; import {FormContainerComponent} from './form-container/form-container.component';
import { BasePageComponent } from './pages/base-page/base-page.component'; import {BasePageComponent} from './pages/base-page/base-page.component';
import { PageKindComponent } from './pages/page-kind/page-kind.component'; import {PageKindComponent} from './pages/page-kind/page-kind.component';
import { HeaderComponent } from './header/header.component'; import {HeaderComponent} from './header/header.component';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {NavigationComponent} from './ui/navigation/navigation.component';
import {RouterModule} from '@angular/router';
import {Routes} from './config/Routes';
import {CommonModule} from '@angular/common';
@NgModule({ @NgModule({
@ -17,14 +21,18 @@ import {FormsModule} from '@angular/forms';
BasePageComponent, BasePageComponent,
PageKindComponent, PageKindComponent,
HeaderComponent, HeaderComponent,
NavigationComponent,
], ],
imports: [ imports: [
CommonModule,
BrowserModule, BrowserModule,
AppRoutingModule, AppRoutingModule,
FormsModule, FormsModule,
RouterModule.forRoot(Routes)
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule {
}

View File

@ -0,0 +1,7 @@
/**
* used as a global form configuration object to generate the form to send
*/
export var PollConfig = {
poll_type: "simple",
allow_stuff: true,
};

12
src/app/config/Routes.ts Normal file
View File

@ -0,0 +1,12 @@
import {FormContainerComponent} from '../form-container/form-container.component';
import {PageKindComponent} from '../pages/page-kind/page-kind.component';
/**
* each step in the form is a component inheriting from the base
*/
export const Routes =
[
{path: '', component: FormContainerComponent},
{path: 'step/1', component: PageKindComponent}
]
;

View File

@ -1,13 +1,70 @@
<p>form-container works!</p>
<div class="description"> <div class="description">
<router-outlet></router-outlet>
<h2 class="title" i18n>
titre de question
</h2>
<span class="pre-selector" i18n>
blah blah
</span>
<select id="selector" name="selector">
<option value="yes">
oui
</option>
<option value="no">
non
</option>
</select>
<span class="post-selector">
blah blah blah.
</span>
<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"
>
<span i18n>
sondage classique
</span>
<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"
>
<span i18n>
sondage spécial date
</span>
<span *ngIf="pollConfig.poll_type == 'dates'">
[x]
</span>
</button>
</div> </div>
<div class="choices"> <hr>
<button *ngDisable="!formIsValid" class="btn btn-primary"> <framadate-navigation></framadate-navigation>
suivant <hr>
</button>
</div>
<div class="well debug"> <div class="well debug">
<strong>
<span i18n>
infos de debug
</span>
</strong>
<ul> <ul>
<li> <li>
étape actuelle {{progressionStep}} / {{progressionStepMax}} étape actuelle {{progressionStep}} / {{progressionStepMax}}
@ -15,5 +72,14 @@
<li> <li>
formulaire valide : {{formIsValid}} formulaire valide : {{formIsValid}}
</li> </li>
<li>
type de formulaire: {{pollConfig.poll_type}}
</li>
<li>
pollConfig:
<pre>
{{pollConfig|json}}
</pre>
</li>
</ul> </ul>
</div> </div>

View File

@ -1,6 +1,8 @@
import {Component, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {ProgressionService} from '../progression.service'; import {ProgressionService} from '../progression.service';
// 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',
@ -12,12 +14,16 @@ import {ProgressionService} from '../progression.service';
*/ */
export class FormContainerComponent implements OnInit { export class FormContainerComponent implements OnInit {
private pollConfig: any; private pollConfig: any = {
poll_type: 'classic',
allow_stuff: true,
};
private progressionStep = 0; private progressionStep = 0;
private progressionStepMax = 0; private progressionStepMax = 0;
private formIsValid = true; private formIsValid = true;
constructor(private progression: ProgressionService) { constructor(private progression: ProgressionService) {
} }
ngOnInit() { ngOnInit() {
@ -31,11 +37,19 @@ export class FormContainerComponent implements OnInit {
} }
} }
selectOption(key: string, val: any) {
this.pollConfig[key] = val;
return true;
}
checkValidity() { checkValidity() {
// TODO with form controls
return true; return true;
} }
displayErrorMessage() { displayErrorMessage() {
// TODO
return true; return true;
} }
} }

View File

@ -5,6 +5,9 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './base-page.component.html', templateUrl: './base-page.component.html',
styleUrls: ['./base-page.component.scss'] styleUrls: ['./base-page.component.scss']
}) })
/**
* base page is aware of the state of the filling
*/
export class BasePageComponent implements OnInit { export class BasePageComponent implements OnInit {
constructor() { } constructor() { }

View File

@ -1,13 +1,16 @@
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {BasePageComponent} from '../base-page/base-page.component';
@Component({ @Component({
selector: 'framadate-page-kind', selector: 'framadate-page-kind',
templateUrl: './page-kind.component.html', templateUrl: './page-kind.component.html',
styleUrls: ['./page-kind.component.scss'] styleUrls: ['./page-kind.component.scss']
}) })
export class PageKindComponent implements OnInit { export class PageKindComponent extends BasePageComponent implements OnInit {
constructor() { } constructor() {
super();
}
ngOnInit() { ngOnInit() {
} }

View File

@ -1,9 +1,12 @@
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class ProgressionService { export class ProgressionService {
private step: number;
constructor() { } constructor() {
}
} }

View File

@ -0,0 +1,22 @@
<div class="choices">
<button
(click)="nextPage()"
[disabled]="!formIsValid"
class="btn btn-primary next"
>
<span i18n>
précédent
</span>
<i class="fa fa-arrow-right"></i>
</button>
<button
(click)="nextPage()"
[disabled]="!formIsValid"
class="btn btn-primary next"
>
<span i18n>
suivant
</span>
<i class="fa fa-arrow-right"></i>
</button>
</div>

View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NavigationComponent } from './navigation.component';
describe('NavigationComponent', () => {
let component: NavigationComponent;
let fixture: ComponentFixture<NavigationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavigationComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavigationComponent);
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-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

8
src/assets/_debug.scss Normal file
View File

@ -0,0 +1,8 @@
.debug{
background: #dedede;
margin:2em;
padding: 2em;
ul{
list-style-type: none;
}
}

View File

@ -0,0 +1,21 @@
input{
background: $light;
padding: 0.5em;
border:0;
border-bottom: 3px solid $main_color;
}
select{
background: $light;
padding: 0.5em;
border:0;
border-bottom: 3px solid $main_color_strong;
}
.btn{
background: $main_color_strong;
color: $light;
border: 0;
margin: 0 0.5em;
min-height: 1.5rem;
}

7
src/assets/_logo.scss Normal file
View File

@ -0,0 +1,7 @@
.logo_first {
color: $logo_color;
}
.logo_second {
color: $logo_color_2;
}

View File

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

View File

@ -1 +1,5 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@import "assets/variables";
@import "assets/global_layout";
@import "assets/logo";
@import "assets/debug";

View File

@ -13,12 +13,14 @@
true, true,
"attribute", "attribute",
"app", "app",
"framadate",
"camelCase" "camelCase"
], ],
"component-selector": [ "component-selector": [
true, true,
"element", "element",
"app", "app",
"framadate",
"kebab-case" "kebab-case"
], ],
"import-blacklist": [ "import-blacklist": [