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.-->
<div style="text-align:center">
<h1 i18n>
Bienvenue sur Framadate
<h1 >
<span i18n>Bienvenue sur </span>
<span class="logo_first">Frama</span>
<span class="logo_second">date</span>
</h1>
<p i18n>
Ceci est une démo
</p>
</div>
<framadate-form-container></framadate-form-container>
<router-outlet></router-outlet>

View File

@ -1,13 +1,17 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormContainerComponent } from './form-container/form-container.component';
import { BasePageComponent } from './pages/base-page/base-page.component';
import { PageKindComponent } from './pages/page-kind/page-kind.component';
import { HeaderComponent } from './header/header.component';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {FormContainerComponent} from './form-container/form-container.component';
import {BasePageComponent} from './pages/base-page/base-page.component';
import {PageKindComponent} from './pages/page-kind/page-kind.component';
import {HeaderComponent} from './header/header.component';
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({
@ -17,14 +21,18 @@ import {FormsModule} from '@angular/forms';
BasePageComponent,
PageKindComponent,
HeaderComponent,
NavigationComponent,
],
imports: [
CommonModule,
BrowserModule,
AppRoutingModule,
FormsModule,
RouterModule.forRoot(Routes)
],
providers: [],
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">
<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 class="choices">
<button *ngDisable="!formIsValid" class="btn btn-primary">
suivant
</button>
</div>
<hr>
<framadate-navigation></framadate-navigation>
<hr>
<div class="well debug">
<strong>
<span i18n>
infos de debug
</span>
</strong>
<ul>
<li>
étape actuelle {{progressionStep}} / {{progressionStepMax}}
@ -15,5 +72,14 @@
<li>
formulaire valide : {{formIsValid}}
</li>
<li>
type de formulaire: {{pollConfig.poll_type}}
</li>
<li>
pollConfig:
<pre>
{{pollConfig|json}}
</pre>
</li>
</ul>
</div>

View File

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

View File

@ -5,6 +5,9 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './base-page.component.html',
styleUrls: ['./base-page.component.scss']
})
/**
* base page is aware of the state of the filling
*/
export class BasePageComponent implements OnInit {
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({
selector: 'framadate-page-kind',
templateUrl: './page-kind.component.html',
styleUrls: ['./page-kind.component.scss']
})
export class PageKindComponent implements OnInit {
export class PageKindComponent extends BasePageComponent implements OnInit {
constructor() { }
constructor() {
super();
}
ngOnInit() {
}

View File

@ -1,9 +1,12 @@
import { Injectable } from '@angular/core';
import {Injectable} from '@angular/core';
@Injectable({
providedIn: 'root'
})
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 */
@import "assets/variables";
@import "assets/global_layout";
@import "assets/logo";
@import "assets/debug";

View File

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