👽 translate 2 first pages

src/app/app.component.html

@@ -4,17 +4,18 @@
             <span class="logo_first">Frama</span>
             <span class="logo_second">date</span>
         </h1>
-        <i i18n="demo title|introduction header saying just demo @@demo">
+
-            Ceci est une démo
-        </i>
-        <span class="demo">
-        {{"config.demo"|translate}}
-        </span>
-        <span i18n="@@plural_example">
-            Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}
-        </span>
-        <input i18n-placeholder placeholder="placeholder à traduire" i18n="@@demoPlaceholder"/>
     </a>
+    <div id="translate_example">
+        <div class="lang-choices">
+            <button class="btn btn-info" (click)="switchLanguage('en')">en</button>
+            <button class="btn btn-info" (click)="switchLanguage('fr')">fr</button>
+        </div>
+        <h1 translate>Title</h1>
+        <div>
+            {{ 'Intro' | translate:user }}
+        </div>
+    </div>
 
 </header>
 <framadate-navigation></framadate-navigation>
@@ -22,13 +23,3 @@
     <router-outlet></router-outlet>
 </main>
 <framadate-debugger></framadate-debugger>
-<div id="translate_example">
-    <div class="lang-choices">
-        <button (click)="switchLanguage('en')">en</button>
-        <button (click)="switchLanguage('fr')">fr</button>
-    </div>
-    <h1 translate>Title</h1>
-    <div>
-        {{ 'Intro' | translate:user }}
-    </div>
-</div>

src/app/app.module.ts

@@ -21,6 +21,7 @@ import {EndConfirmationComponent} from './pages/end-confirmation/end-confirmatio
 import {CreateOrRetrieveComponent} from './pages/create-or-retrieve/create-or-retrieve.component';
 import {CalendarComponent} from './calendar/calendar.component';
 import localeFr from '@angular/common/locales/fr';
+import localeEn from '@angular/common/locales/en';
 import {VotingSummaryComponent} from './pages/voting-summary/voting-summary.component';
 import {VotingGraphComponent} from './pages/voting-graph/voting-graph.component';
 import {VotingChoiceComponent} from './pages/voting-choice/voting-choice.component';
@@ -43,6 +44,7 @@ export class MyMissingTranslationHandler implements MissingTranslationHandler {
 }
 
 registerLocaleData(localeFr, 'fr');
+registerLocaleData(localeEn, 'en');
 
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http);
@@ -80,7 +82,7 @@ export function HttpLoaderFactory(http: HttpClient) {
                 provide: MissingTranslationHandler,
                 useClass: MyMissingTranslationHandler,
             },
-            useDefaultLang: false,
+            // useDefaultLang: false,
             loader: {
                 provide: TranslateLoader,
                 useFactory: HttpLoaderFactory,

src/app/debugger/debugger.component.html

@@ -4,6 +4,9 @@
         <h2 i18n>
             infos de debug
         </h2>
+        <span class="demo">
+        {{"config.demo"|translate}}
+        </span>
     </strong>
     <ul>
         <li>
@@ -24,39 +27,6 @@
     </ul>
 </div>
 
-<span i18n>
-  Choix cornélien syncronisé:
-  </span>
-<!--  todo: factoriser les boutons-->
-<button
-    (click)="config.set('pollType' , 'classic')"
-    [class.active]="config.pollType == 'classic'"
-    [disabled]="!formIsValid"
-    class="btn btn-primary next"
->
-    <span i18n>
-    sondage classique
-    </span>
-    <span *ngIf="config.pollType == 'classic'">
-      [x]
-    </span>
-
-</button>
-<button
-    (click)="selectOption('pollType' ,'dates')"
-    [class.active]="config.pollType == 'dates'"
-    [disabled]="!formIsValid"
-    class="btn btn-primary next"
->
-    <span i18n>
-    sondage spécial date
-    </span>
-    <span *ngIf="config.pollType == 'dates'">
-      [x]
-    </span>
-
-</button>
-
 <button
     class="btn"
     i18n

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

@@ -1,2 +1,4 @@
 <h1>Ce composant est celui de base pour les pages</h1>
-<a [routerLink]="'/step/end'" class="btn btn-block" i18n="@@confirm">C'est parfait!</a>
+<a [routerLink]="'/step/end'" class="btn btn-block" i18n="@@confirm">
+    {{"config.perfect"|translate}}
+</a>

src/app/pages/create-or-retrieve/create-or-retrieve.component.html

@@ -1,13 +1,12 @@
 <section class="creation">
-    <h1 i18n>
+    <h1>
-        Créer un sondage
+        {{"creation.title"|translate}}
     </h1>
     <p
         class="description"
         i18n
     >
-        Planifiez des rendez-vous avec vos amis ou votre famille ou créez un sondage avec du texte, des images ou des
+        {{"config.title"|translate}}
-        liens… un sondage quoi !
     </p>
     <div class="btn-next">
         <a
@@ -17,7 +16,7 @@
                 class="text"
                 i18n
             >
-				C'est parti
+				 {{"config.letsgo"|translate}}
 			</span>
             <span class="icon right">
 				>
@@ -26,8 +25,8 @@
     </div>
 </section>
 <section class="recuperation">
-    <h1 i18n>
+    <h1>
-        Où sont mes sondages ?
+        {{"config.find_my_polls"|translate}}
     </h1>
     <form
         action="https://framadate.org/find_polls.php"
@@ -38,7 +37,7 @@
             for="email"
             i18n
         >
-            Je cherche les sondages qui correspondent à mon mail :
+            {{"config.find_helper"|translate}} :
         </label>
         <input
             type="email"
@@ -49,8 +48,7 @@
         <input
             type="submit"
             class="btn btn-block"
-            i18n
+            i18n-value="'config.find_button'|translate"
-            value="Retrouver mes sondages"
         />
     </form>
 </section>

src/app/pages/home/home.component.html

@@ -2,13 +2,13 @@
 
     <router-outlet></router-outlet>
     <h1 i18n>
-        Pour commencer
+        {{"creation.title"|translate}}
     </h1>
     <span
         class="pre-selector"
         i18n
     >
-	  Je veux créer un sondage
+	  {{"creation.want"|translate}}
 	  </span>
     <select
         id="selector"
@@ -17,10 +17,10 @@
         [(ngModel)]="config.pollType"
     >
         <option value="dates">
-            spécial dates
+            {{"creation.kind.date"|translate}}
         </option>
         <option value="classic">
-            classique
+            {{"creation.kind.classic"|translate}}
         </option>
     </select>
     <span class="post-selector">
@@ -32,7 +32,7 @@
             class="title-label"
             i18n
         >
-            Dont le titre sera
+            {{"creation.choose_title"|translate}}
         </label>
         <input
             type="text"
@@ -45,7 +45,7 @@
     </div>
     <div>
         <label for="my_name">
-            Je peux aussi préciser mon nom si je le souhaite :
+            {{"creation.name"|translate}} :
         </label>
         <input
             type="text"
@@ -62,7 +62,7 @@
             class="title-label"
             i18n
         >
-            et la description serait
+            {{"creation.description"|translate}}
         </label>
         <textarea
             id="poll_description"

src/assets/i18n/en.json

@@ -7,28 +7,28 @@
     "config": {
         "demo": "this is a demo",
         "demo_other": "this is an other demo",
-        "continue": "Continuer",
+        "continue": "Continue",
-        "perfect": "C'est parfait",
+        "perfect": "That's perfect",
-        "title": "Créer un sondage",
+        "title": "Create a poll",
-        "letsgo": "C'est parti'",
+        "letsgo": "Lets go!",
         "description": "Planifiez des rendez-vous avec vos amis ou votre famille ou créez un sondage avec du texte, des images ou des liens… un sondage quoi !",
-        "find_my_polls": "Où sont mes sondages ?",
+        "find_my_polls": "Where are my polls ?",
-        "find_helper": "Je cherche les sondages qui correspondent à mon mail",
+        "find_helper": "I am looking for polls linked to my email",
-        "find_button": "Retrouver mes sondages"
+        "find_button": "Find my polls"
     },
     "creation": {
-        "title": "Pour commencer ",
+        "title": "To begin with",
-        "want": "Je veux créer un sondage",
+        "want": "I want to create a poll",
         "kind": {
-            "classic": "classique",
+            "classic": "classic",
-            "date": "spécial dates"
+            "date": "special dates"
         },
-        "choose_title": "Dont le titre sera",
+        "choose_title": "Whom title will be",
-        "choose_title_placeholder": "titre",
+        "choose_title_placeholder": "title",
-        "name": "Je peux aussi préciser mon nom si je le souhaite",
+        "name": "I can also specify my name if i want",
-        "name_placeholder": "mon nom",
+        "name_placeholder": "my name",
-        "description": "et la description serait",
+        "description": "and the description would be",
-        "description_placeholder": "description"
+        "description_placeholder": "summary of the poll's purpose"
     },
     "dates": {
         "title": "Config spécialement pour les dates ",