issue 36 : select daltonien

src/app/config/Routes.ts

@@ -1,29 +1,29 @@
-import {KindComponent} from '../pages/kind/kind.component';
-import {DatesComponent} from '../pages/dates/dates.component';
-import {VisibilityComponent} from '../pages/visibility/visibility.component';
-import {ResumeComponent} from '../pages/resume/resume.component';
-import {PicturesComponent} from '../pages/pictures/pictures.component';
-import {EndConfirmationComponent} from '../pages/end-confirmation/end-confirmation.component';
-import {AnswersComponent} from '../pages/answers/answers.component';
-import {CreateOrRetrieveComponent} from '../pages/create-or-retrieve/create-or-retrieve.component';
-import {BaseComponent} from '../pages/base-page/base.component';
-import {HomeComponent} from "../pages/home/home.component";
+import { KindComponent } from "../pages/kind/kind.component";
+import { DatesComponent } from "../pages/dates/dates.component";
+import { VisibilityComponent } from "../pages/visibility/visibility.component";
+import { ResumeComponent } from "../pages/resume/resume.component";
+import { PicturesComponent } from "../pages/pictures/pictures.component";
+import { EndConfirmationComponent } from "../pages/end-confirmation/end-confirmation.component";
+import { AnswersComponent } from "../pages/answers/answers.component";
+import { CreateOrRetrieveComponent } from "../pages/create-or-retrieve/create-or-retrieve.component";
+import { BaseComponent } from "../pages/base-page/base.component";
+import { HomeComponent } from "../pages/home/home.component";
+import { PollGraphicComponent } from '../poll-graphic/poll-graphic.component';
 
 /**
  * each step in the form is a component
  */
-export const Routes =
-    [
-        {path: '', component: CreateOrRetrieveComponent},
-        {path: 'home', component: HomeComponent},
-        {path: 'base', component: BaseComponent},
-        {path: 'step/creation', component: CreateOrRetrieveComponent},
-        {path: 'step/date', component: DatesComponent},
-        {path: 'step/kind', component: KindComponent},
-        {path: 'step/answers', component: AnswersComponent},
-        {path: 'step/pictures', component: PicturesComponent},
-        {path: 'step/visibility', component: VisibilityComponent},
-        {path: 'step/resume', component: ResumeComponent},
-        {path: 'step/end', component: EndConfirmationComponent},
-    ]
-;
+export const Routes = [
+    { path: "", component: CreateOrRetrieveComponent },
+    { path: "home", component: HomeComponent },
+    { path: "base", component: BaseComponent },
+    { path: "step/creation", component: CreateOrRetrieveComponent },
+    { path: "step/date", component: DatesComponent },
+    { path: "step/kind", component: KindComponent },
+    { path: "step/answers", component: AnswersComponent },
+    { path: "step/pictures", component: PicturesComponent },
+    { path: "step/visibility", component: VisibilityComponent },
+    { path: "step/resume", component: ResumeComponent },
+    { path: "step/end", component: EndConfirmationComponent },
+    { path: "graphic/:poll", component: PollGraphicComponent },
+];

src/app/poll-graphic/poll-graphic.component.html

@@ -1 +1,15 @@
-<p>poll-graphic works!</p>
+<select
+    id="selectColorblind"
+    name="selector"
+    autofocus="autofocus"
+    [(ngModel)]="isColorblind"
+    (change)="setColorblind()"
+>
+    <option value="colorblind">
+        {{ "pollGraphic.choiceColorblind" | translate }}
+    </option>
+    <option value="notColorblind">
+        {{ "pollGraphic.choiceNotColorblind" | translate }}
+    </option>
+</select>
+ {{ "pollGraphic.colorblindText" | translate }}

src/app/poll-graphic/poll-graphic.component.scss

@@ -0,0 +1,4 @@
+#selectColorblind {
+    direction: rtl;
+    padding:0;
+}

src/app/poll-graphic/poll-graphic.component.ts

@@ -7,7 +7,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PollGraphicComponent implements OnInit {
 
-  constructor() { }
+  isColorblind:boolean;
+
+  constructor() {
+    this.isColorblind = false;
+   }
+
+   setColorblind(){
+     this.isColorblind = !this.isColorblind;
+   }
 
   ngOnInit() {
   }

src/assets/i18n/en.json

@@ -60,5 +60,10 @@
         "votes": "Votes",
         "archiving": "Archiving",
         "access": "Access to the pool"
+    },
+    "pollGraphic":{
+        "choiceColorblind":"I am",
+        "choiceNotColorblind":"I am not",
+        "colorblindText":"colorblind."
     }
 }

src/assets/i18n/fr.json

@@ -60,5 +60,10 @@
         "votes": "Votes",
         "archiving": "Archivage",
         "access": "Accès au sondage"
+    },
+    "pollGraphic":{
+        "choiceColorblind":"Je suis",
+        "choiceNotColorblind":"Je ne suis pas",
+        "colorblindText":"daltonien."
     }
 }