⚡ example of navigation

src/app/app.component.html

@@ -1,12 +1,17 @@
-<!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
+	<a [routerLink]="'home'"
+				class="home_link"
+				aria-roledescription="home">
 		<h1>
 			<span i18n>Bienvenue sur </span>
 			<span class="logo_first">Frama</span>
 			<span class="logo_second">date</span>
 		</h1>
-  <p i18n>
+	</a>
+	<i i18n>
 		Ceci est une démo
-  </p>
+	</i>
 </div>
 <router-outlet></router-outlet>
+<framadate-navigation></framadate-navigation>
+<framadate-debugger></framadate-debugger>

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: [

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');
+    }
+}

src/app/config/PollConfig.ts

@@ -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,
-};

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: 'home', component: FormContainerComponent},
+        {path: 'step/date', component: DatesComponent},
+        {path: 'step/kind', component: PageKindComponent}
     ]
 ;

src/app/form-container/form-container.component.html

@@ -1,12 +1,15 @@
 <div class="description">
+	<fieldset>
+
 		<router-outlet></router-outlet>
-	<h2 class="title" i18n>
-		titre de question
-	</h2>
 		<span class="pre-selector" i18n>
 	  Je veux créer un sondage
 	  </span>
-	<select id="selector" name="selector" [(ngModel)]="pollConfig.poll_type">
+		<select
+					id="selector"
+					name="selector"
+					[(ngModel)]="config.pollType"
+		>
 			<option value="dates">
 				spécial dates
 			</option>
@@ -17,76 +20,37 @@
 		<span class="post-selector">
   </span>
 		<hr>
+		<div>
+
 			<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">
+			<input
+						type="text"
+						id="poll_title"
+						name="poll_title"
+						[(ngModel)]="config.title">
+
+		</div>
+		<div>
 
 			<label for="poll_description" class="title-label" 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:
-  </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>
+			<textarea
+						id="poll_description"
+						name="poll_description"
+						[(ngModel)]="config.description"
+						cols="50" lines="5"></textarea>
 
 		</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}}
-		</li>
-		<li>
-			formulaire valide : {{formIsValid}}
-		</li>
-		<li>
-			type de formulaire: {{pollConfig.poll_type}}
-		</li>
-		<li>
-			pollConfig:
-			<pre>
-      {{pollConfig|json}}
-      </pre>
-		</li>
-	</ul>
+		<a
+					[routerLink]="'/step/kind'"
+					class="btn striked"
+					i18n="start_form">
+			C'est parti
+		</a>
+		<hr>
+	</fieldset>
 </div>

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

src/app/pages/base-page/base-page.component.ts

@@ -1,4 +1,5 @@
 import {Component, OnInit} from '@angular/core';
+import {ConfigService} from '../../config.service';
 
 @Component({
     selector: 'framadate-base-page',
@@ -10,7 +11,8 @@ import { Component, OnInit } from '@angular/core';
  */
 export class BasePageComponent implements OnInit {
 
-  constructor() { }
+    constructor(private config: ConfigService) {
+    }
 
     ngOnInit() {
     }

src/app/pages/dates/dates.component.html

@@ -0,0 +1,30 @@
+<div i18n>
+	Config spécialement pour les dates
+</div>
+<div>
+	<select name="multi_hours" id="multi_hours"
+				[(ngModel)]="config.allowSeveralHours">
+		<option value="yes"></option>
+		<option value="no"></option>
+	</select>
+	<label for="multi_hours" i18n>
+		Je souhaite mettre des créneaux horaires différents pour chaque jour
+	</label>
+
+</div>
+<button
+			(click)="addDate()"
+			i18n>
+	Ajouter une plage de dates
+</button>
+<div class="dates-list">
+	{{config.dateList.length}}
+	<span i18n>
+		choix de Dates
+	</span>
+	<div
+				*ngFor="let choice of config.dateList"
+				class="date-choice">
+		{{choice.text}}
+	</div>
+</div>

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<DatesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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');
+    }
+}

src/app/pages/page-kind/page-kind.component.html

@@ -1 +1,2 @@
-<p>page-kind works!</p>
+<p>cette étape est en cours de développement. <br> S'inspirer de la page de FormContainer pour réaliser d'autres pages
+</p>

src/app/pages/page-kind/page-kind.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {BasePageComponent} from '../base-page/base-page.component';
+import {ConfigService} from '../../config.service';
 
 @Component({
     selector: 'framadate-page-kind',
@@ -8,8 +9,8 @@ import {BasePageComponent} from '../base-page/base-page.component';
 })
 export class PageKindComponent extends BasePageComponent implements OnInit {
 
-  constructor() {
-    super();
+    constructor(config: ConfigService) {
+        super(config);
     }
 
     ngOnInit() {

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();
   });
 });

src/app/progression.service.ts

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

src/app/ui/navigation/navigation.component.html

@@ -1,4 +1,21 @@
 <div class="choices">
+
+	<a
+				class="btn btn-primary"
+				[routerLink]="'/step/date'">
+		Aller aux dates
+	</a>
+	<a
+				class="btn btn-primary"
+				[routerLink]="'/step/kind'">
+		Aller aux options classiques
+	</a>
+	<a
+				class="btn btn-primary"
+				[routerLink]="'/home'">
+		Accueil
+	</a>
+	<br>
 	<button
 				(click)="nextPage()"
 				[disabled]="!formIsValid"

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";
+}

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 {
-  background: $light;
-  padding: 0.5em;
-  border:0;
-  border-bottom: 3px solid $main_color_strong;
+  @extend .funky-box;
 }
 
+.funky-box {
+  background: $light;
+  padding: 1em;
+  border-radius: 0.25em;
+  border: 1px solid $main_color;
+  border-bottom: 3px solid $main_color_strong;
+
+  &:focus {
+    color: $main_color_strong;
+  }
+}
+
+// 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);
+}

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";