From 42f229f686bcf61ea4d8e3c877847937a12ae16e Mon Sep 17 00:00:00 2001 From: tykayn Date: Sat, 10 Aug 2019 16:20:59 +0200 Subject: [PATCH] :zap: example of navigation --- src/app/app.component.html | 23 +-- src/app/app.module.ts | 4 + src/app/config.service.ts | 39 ++++++ src/app/config/PollConfig.ts | 7 - src/app/config/Routes.ts | 13 +- .../form-container.component.html | 132 +++++++----------- .../form-container.component.ts | 19 +-- .../pages/base-page/base-page.component.ts | 16 ++- src/app/pages/dates/dates.component.html | 30 ++++ src/app/pages/dates/dates.component.scss | 0 src/app/pages/dates/dates.component.spec.ts | 25 ++++ src/app/pages/dates/dates.component.ts | 22 +++ .../pages/page-kind/page-kind.component.html | 3 +- .../pages/page-kind/page-kind.component.ts | 17 +-- src/app/progression.service.spec.ts | 6 +- src/app/progression.service.ts | 12 -- .../ui/navigation/navigation.component.html | 45 ++++-- src/assets/_font.scss | 7 + src/assets/_global_layout.scss | 39 ++++-- src/styles.scss | 1 + 20 files changed, 284 insertions(+), 176 deletions(-) create mode 100644 src/app/config.service.ts delete mode 100644 src/app/config/PollConfig.ts create mode 100644 src/app/pages/dates/dates.component.html create mode 100644 src/app/pages/dates/dates.component.scss create mode 100644 src/app/pages/dates/dates.component.spec.ts create mode 100644 src/app/pages/dates/dates.component.ts delete mode 100644 src/app/progression.service.ts create mode 100644 src/assets/_font.scss diff --git a/src/app/app.component.html b/src/app/app.component.html index 5c4be3f9..c7385bbb 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,12 +1,17 @@ -
-

- Bienvenue sur - Frama - date -

-

- Ceci est une démo -

+ +

+ Bienvenue sur + Frama + date +

+ + + Ceci est une démo +
+ + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3d95f013..7b08fa84 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -12,6 +12,8 @@ import {NavigationComponent} from './ui/navigation/navigation.component'; import {RouterModule} from '@angular/router'; import {Routes} from './config/Routes'; import {CommonModule} from '@angular/common'; +import { DatesComponent } from './pages/dates/dates.component'; +import { DebuggerComponent } from './debugger/debugger.component'; @NgModule({ @@ -22,6 +24,8 @@ import {CommonModule} from '@angular/common'; PageKindComponent, HeaderComponent, NavigationComponent, + DatesComponent, + DebuggerComponent, ], imports: [ diff --git a/src/app/config.service.ts b/src/app/config.service.ts new file mode 100644 index 00000000..dc4cc228 --- /dev/null +++ b/src/app/config.service.ts @@ -0,0 +1,39 @@ +import {Injectable} from '@angular/core'; + +/** + * une option de date dans les sondages spéciaux + */ +export interface DateOption { + text: string; + start?: string; + end?: string; +} + +/** + * le service transverse à chaque page qui permet de syncroniser la configuration de sondage souhaitée + */ +@Injectable({ + providedIn: 'root' +}) +export class ConfigService { + step = 0; + stepMax = 3; + pollType = 'classic'; + title = ''; + description = ''; + allowSeveralHours = true; + dateList: DateOption[] = []; + + constructor() { + } + + set(key, val) { + this[key] = val; + } + + sendForm() { + // todo + console.log('sends the form'); + alert('envoi de formulaire en XHR à faire'); + } +} diff --git a/src/app/config/PollConfig.ts b/src/app/config/PollConfig.ts deleted file mode 100644 index 1c2bc6df..00000000 --- a/src/app/config/PollConfig.ts +++ /dev/null @@ -1,7 +0,0 @@ -/** - * used as a global form configuration object to generate the form to send - */ -export var PollConfig = { - poll_type: "simple", - allow_stuff: true, -}; diff --git a/src/app/config/Routes.ts b/src/app/config/Routes.ts index 0e199abb..be7f0780 100644 --- a/src/app/config/Routes.ts +++ b/src/app/config/Routes.ts @@ -1,12 +1,15 @@ import {FormContainerComponent} from '../form-container/form-container.component'; import {PageKindComponent} from '../pages/page-kind/page-kind.component'; +import {DatesComponent} from '../pages/dates/dates.component'; /** - * each step in the form is a component inheriting from the base + * each step in the form is a component */ export const Routes = - [ - {path: '', component: FormContainerComponent}, - {path: 'step/1', component: PageKindComponent} - ] + [ + {path: '', component: FormContainerComponent}, + {path: 'home', component: FormContainerComponent}, + {path: 'step/date', component: DatesComponent}, + {path: 'step/kind', component: PageKindComponent} + ] ; diff --git a/src/app/form-container/form-container.component.html b/src/app/form-container/form-container.component.html index 87af83c9..a557f6be 100644 --- a/src/app/form-container/form-container.component.html +++ b/src/app/form-container/form-container.component.html @@ -1,92 +1,56 @@
- -

- titre de question -

- - Je veux créer un sondage +
+ + + + Je veux créer un sondage + + + - - - -
- - +
+
- - + + -
- - Choix cornélien: - - -
+
- - +
-
-
- -
-
- - - - infos de debug - - - + + C'est parti + +
+
diff --git a/src/app/form-container/form-container.component.ts b/src/app/form-container/form-container.component.ts index 9b26594f..2aab4955 100644 --- a/src/app/form-container/form-container.component.ts +++ b/src/app/form-container/form-container.component.ts @@ -1,5 +1,5 @@ import {Component, OnInit} from '@angular/core'; -import {ProgressionService} from '../progression.service'; +import {ConfigService} from '../config.service'; // import {PollConfig} from '../config/PollConfig'; @@ -14,18 +14,10 @@ import {ProgressionService} from '../progression.service'; */ export class FormContainerComponent implements OnInit { - // 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 config: ConfigService) { } @@ -40,11 +32,6 @@ export class FormContainerComponent implements OnInit { } } - selectOption(key: string, val: any) { - this.pollConfig[key] = val; - - return true; - } checkValidity() { // TODO with form controls diff --git a/src/app/pages/base-page/base-page.component.ts b/src/app/pages/base-page/base-page.component.ts index f5ee13f6..53dc996b 100644 --- a/src/app/pages/base-page/base-page.component.ts +++ b/src/app/pages/base-page/base-page.component.ts @@ -1,18 +1,20 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import {ConfigService} from '../../config.service'; @Component({ - selector: 'framadate-base-page', - templateUrl: './base-page.component.html', - styleUrls: ['./base-page.component.scss'] + selector: 'framadate-base-page', + 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() { } + constructor(private config: ConfigService) { + } - ngOnInit() { - } + ngOnInit() { + } } diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html new file mode 100644 index 00000000..4bec61e6 --- /dev/null +++ b/src/app/pages/dates/dates.component.html @@ -0,0 +1,30 @@ +
+ Config spécialement pour les dates +
+
+ + + +
+ +
+ {{config.dateList.length}} + + choix de Dates + +
+ {{choice.text}} +
+
diff --git a/src/app/pages/dates/dates.component.scss b/src/app/pages/dates/dates.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/pages/dates/dates.component.spec.ts b/src/app/pages/dates/dates.component.spec.ts new file mode 100644 index 00000000..e5affef8 --- /dev/null +++ b/src/app/pages/dates/dates.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DatesComponent } from './dates.component'; + +describe('DatesComponent', () => { + let component: DatesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DatesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DatesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/dates/dates.component.ts b/src/app/pages/dates/dates.component.ts new file mode 100644 index 00000000..da1290fb --- /dev/null +++ b/src/app/pages/dates/dates.component.ts @@ -0,0 +1,22 @@ +import {Component, OnInit} from '@angular/core'; +import {ConfigService} from '../../config.service'; +import {BasePageComponent} from '../base-page/base-page.component'; + +@Component({ + selector: 'framadate-dates', + templateUrl: './dates.component.html', + styleUrls: ['./dates.component.scss'] +}) +export class DatesComponent extends BasePageComponent implements OnInit { + + constructor(config: ConfigService) { + super(config); + } + + ngOnInit() { + } + + addDate() { + console.log('TODO'); + } +} diff --git a/src/app/pages/page-kind/page-kind.component.html b/src/app/pages/page-kind/page-kind.component.html index 996244c5..dcc95f98 100644 --- a/src/app/pages/page-kind/page-kind.component.html +++ b/src/app/pages/page-kind/page-kind.component.html @@ -1 +1,2 @@ -

page-kind works!

+

cette étape est en cours de développement.
S'inspirer de la page de FormContainer pour réaliser d'autres pages +

diff --git a/src/app/pages/page-kind/page-kind.component.ts b/src/app/pages/page-kind/page-kind.component.ts index dbf6c981..605cd9be 100644 --- a/src/app/pages/page-kind/page-kind.component.ts +++ b/src/app/pages/page-kind/page-kind.component.ts @@ -1,18 +1,19 @@ import {Component, OnInit} from '@angular/core'; import {BasePageComponent} from '../base-page/base-page.component'; +import {ConfigService} from '../../config.service'; @Component({ - selector: 'framadate-page-kind', - templateUrl: './page-kind.component.html', - styleUrls: ['./page-kind.component.scss'] + selector: 'framadate-page-kind', + templateUrl: './page-kind.component.html', + styleUrls: ['./page-kind.component.scss'] }) export class PageKindComponent extends BasePageComponent implements OnInit { - constructor() { - super(); - } + constructor(config: ConfigService) { + super(config); + } - ngOnInit() { - } + ngOnInit() { + } } diff --git a/src/app/progression.service.spec.ts b/src/app/progression.service.spec.ts index d9e82023..c8fff3dd 100644 --- a/src/app/progression.service.spec.ts +++ b/src/app/progression.service.spec.ts @@ -1,12 +1,12 @@ import { TestBed } from '@angular/core/testing'; -import { ProgressionService } from './progression.service'; +import { ConfigService } from './config.service'; -describe('ProgressionService', () => { +describe('ConfigService', () => { beforeEach(() => TestBed.configureTestingModule({})); it('should be created', () => { - const service: ProgressionService = TestBed.get(ProgressionService); + const service: ConfigService = TestBed.get(ConfigService); expect(service).toBeTruthy(); }); }); diff --git a/src/app/progression.service.ts b/src/app/progression.service.ts deleted file mode 100644 index c028f37f..00000000 --- a/src/app/progression.service.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {Injectable} from '@angular/core'; - - -@Injectable({ - providedIn: 'root' -}) -export class ProgressionService { - private step: number; - - constructor() { - } -} diff --git a/src/app/ui/navigation/navigation.component.html b/src/app/ui/navigation/navigation.component.html index 33bc2724..e994d8e7 100644 --- a/src/app/ui/navigation/navigation.component.html +++ b/src/app/ui/navigation/navigation.component.html @@ -1,22 +1,39 @@
- - + + +
diff --git a/src/assets/_font.scss b/src/assets/_font.scss new file mode 100644 index 00000000..6c1bb39d --- /dev/null +++ b/src/assets/_font.scss @@ -0,0 +1,7 @@ +body { + font-family: "DejaVu Sans Light", "Arial", "DejaVu Sans Mono"; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Brie Light", "Arial", "DejaVu Sans Mono"; +} diff --git a/src/assets/_global_layout.scss b/src/assets/_global_layout.scss index 6bea0166..79dfb380 100644 --- a/src/assets/_global_layout.scss +++ b/src/assets/_global_layout.scss @@ -1,21 +1,40 @@ -input{ - background: $light; - padding: 0.5em; - border:0; - border-bottom: 3px solid $main_color; +input, textarea, +select { + @extend .funky-box; } -select{ +.funky-box { background: $light; - padding: 0.5em; - border:0; + padding: 1em; + border-radius: 0.25em; + border: 1px solid $main_color; border-bottom: 3px solid $main_color_strong; + + &:focus { + color: $main_color_strong; + } } -.btn{ +// buttons +.btn { + display: inline-block; + padding: 1em; + border-radius: 0.25em; background: $main_color_strong; color: $light; border: 0; - margin: 0 0.5em; + margin: 1em; min-height: 1.5rem; } + +a { + text-decoration: none; +} + +.home_link { + text-decoration: none; +} + +.striked { + background: linear-gradient($main_color, $main_color_strong); +} diff --git a/src/styles.scss b/src/styles.scss index 19461e90..de03bb14 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1,6 @@ /* You can add global styles to this file, and also import other style files */ @import "assets/variables"; +@import "assets/font"; @import "assets/global_layout"; @import "assets/logo"; @import "assets/debug";