🎨 style on current page from the route data, and texts in the confirm page, step end

2019-12-31 19:08:50 +01:00 · 2019-12-31 19:08:50 +01:00 · 809aa0f02f
commit 809aa0f02f
parent 32cbecf0f4
8 changed files with 1495 additions and 461 deletions
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -1,19 +1,41 @@
 <header style="text-align:center">
-    <a [routerLink]="'home'" class="home_link" aria-roledescription="home">
+    <a
+        [routerLink]="'home'"
+        class="home_link"
+        aria-roledescription="home"
+    >
        <h1>
            <span class="logo_first">Frama</span>
            <span class="logo_second">date</span>
        </h1>
-        <div class="legend">proposé par <span class="legend_first">Frama</span><span class="legend_second">soft</span></div>
+        <div class="legend">proposé par
+            <span class="legend_first">Frama</span>
+            <span class="legend_second">soft</span>
+        </div>
    </a>
    <div id="translate_example">
        <div class="wrapper">
-            <img src="assets/img/icone-langue.svg" alt="location icon" class="lang_icon">
-            <img src="assets/img/icone-menu.svg" alt="menu icon" class="menu_icon">
-            <select name="language" class="Language-" (change)="switchLanguage($event.target.value)">
-                <option value="d" default class="select_language">{{"Language" | translate}}</option>
-                <option value="en" >English</option>
-                <option value="fr" >Français</option>
+            <img
+                src="assets/img/icone-langue.svg"
+                alt="location icon"
+                class="lang_icon"
+            > <img
+            src="assets/img/icone-menu.svg"
+            alt="menu icon"
+            class="menu_icon"
+        >
+            <select
+                name="language"
+                class="Language-"
+                (change)="switchLanguage($event.target.value)"
+            >
+                <option
+                    value="d"
+                    default
+                    class="select_language"
+                >{{"Language" | translate}}</option>
+                <option value="en">English</option>
+                <option value="fr">Français</option>
            </select>
            <span class="menu_label">Menu</span>
        </div>
@ -24,7 +46,7 @@
    </div>

 </header>
-<framadate-navigation></framadate-navigation>
+<framadate-navigation [step]="step"></framadate-navigation>
 <main>
    <router-outlet></router-outlet>
 </main>
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {TranslateService} from "@ngx-translate/core";
+import {TranslateService} from '@ngx-translate/core';
+import {Router} from '@angular/router';

@Component({
    selector: 'app-root',
@ -14,9 +15,26 @@ export class AppComponent {
        name: 'Arthur',
        age: 42
    };
+    private step: string;

-    constructor(private translate: TranslateService) {
+    constructor(private translate: TranslateService,
+                private route: Router) {
        this.translate.setDefaultLang('fr');
+        this.route.events.subscribe((event: any) => {
+
+            // console.log('event', event);
+            if (event.url) {
+
+                const tab = event.url.split('/');
+                console.log(tab);
+                if (tab && tab[2]) {
+                    this.step = tab[2];
+                } else {
+                    this.step = 'home';
+                }
+
+            }
+        });
    }

    switchLanguage(language: string) {
--- a/src/app/pages/end-confirmation/end-confirmation.component.html
+++ b/src/app/pages/end-confirmation/end-confirmation.component.html
@ -1,6 +1,72 @@
 <h1 i18n>
-	{{"resume.title"|translate}}
+    {{"resume.title"|translate}}
 </h1>
-<h2 i18n>{{"resume.admins"|translate}}</h2>
-<h2 i18n>{{"resume.users"|translate}}</h2>
-<h2 i18n>{{"resume.links_mail"|translate}}</h2>
+<section class="admin">
+    <h2 i18n>{{"resume.admins"|translate}}</h2>
+    <p>
+
+        Votre sondage « 
+        <span class="poll-title">
+        {{config.title}} </span>
+         » a bien été créé !
+    </p>
+    <p>
+        Voici les liens d’accès au sondage, conservez-les soigneusement !
+    </p>
+
+    <p>
+        Pour accéder au sondage et à tous ses paramètres : https://framadate.org/urladmindusondage
+    </p>
+    <button
+        class="btn"
+        (click)="copyLink(adminLink)"
+    >
+        Copier le lien
+    </button>
+    <a href="{{adminLink}}">
+        Voir le sondage coté administrateur·ice
+    </a>
+    <p class="note">
+        Note : Le sondage sera supprimé 180 jours après la date de sa dernière modification.
+    </p>
+
+
+</section>
+<section class="public">
+
+    <h2 i18n>{{"resume.users"|translate}}</h2>
+    <p>
+        Pour accéder au sondage : https://framadate.org/urladmindusondage
+    </p>
+    <button
+        class="btn"
+        (click)="copyLink(publicLink)"
+    >
+        Copier le lien
+    </button>
+</section>
+<section class="mail">
+
+    <h2 i18n>{{"resume.links_mail"|translate}}</h2>
+    <p>
+        Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail
+
+        mail :
+        <input
+            type="email"
+            [(ngModel)]="mailToRecieve"
+            paceholder="email"
+        >
+    </p>
+
+    <button
+        class="btn"
+        (click)="sendToEmail()"
+    >
+        Envoyer les liens du sondage
+    </button>
+    <a href="{{publicLink}}">
+        Voir le sondage
+    </a>
+
+</section>
--- a/src/app/pages/end-confirmation/end-confirmation.component.ts
+++ b/src/app/pages/end-confirmation/end-confirmation.component.ts
@ -1,19 +1,30 @@
-import { Component, OnInit } from '@angular/core';
-import {BaseComponent} from "../base-page/base.component";
-import {ConfigService} from "../../config.service";
+import {Component, OnInit} from '@angular/core';
+import {BaseComponent} from '../base-page/base.component';
+import {ConfigService} from '../../config.service';
+import {HttpClient} from '@angular/common/http';

@Component({
-  selector: 'framadate-end-confirmation',
-  templateUrl: './end-confirmation.component.html',
-  styleUrls: ['./end-confirmation.component.scss']
+    selector: 'framadate-end-confirmation',
+    templateUrl: './end-confirmation.component.html',
+    styleUrls: ['./end-confirmation.component.scss']
 })
 export class EndConfirmationComponent extends BaseComponent implements OnInit {
+    public adminLink = '';
+    public publicLink = '';
+    mailToRecieve = '';

-    constructor(public config: ConfigService) {
+    constructor(public config: ConfigService, public http: HttpClient) {
        super(config);
    }

    ngOnInit() {
-  }
+    }

+    copyLink(adminLink: any) {
+
+    }
+
+    sendToEmail() {
+
+    }
 }
--- a/src/app/ui/navigation/navigation.component.html
+++ b/src/app/ui/navigation/navigation.component.html
@ -1,35 +1,94 @@
 <nav class="choices">
-    <a [routerLink]="'/step/creation'" i18n>
+    <a
+        [routerLink]="'home'"
+        [ngClass]="{'active': step == 'home'}"
+        i18n
+    >
+        <i class="fa fa-home"></i>
+    </a>
+    <a
+        [routerLink]="'/step/creation'"
+        [ngClass]="{'active': step == 'creation'}"
+        i18n
+    >
        Création
    </a>
-    <a [routerLink]="'/step/date'" i18n>
+    <a
+        [routerLink]="'/step/date'"
+        [ngClass]="{'active': step == 'date'}"
+        i18n
+    >
        Les Dates
    </a>
-    <a [routerLink]="'/step/answers'" i18>
+    <a
+        [routerLink]="'/step/answers'"
+        [ngClass]="{'active': step == 'answers'}"
+        i18
+    >
        Réponses
    </a>
-    <a [routerLink]="'/step/visibility'" i18n>
+    <a
+        [routerLink]="'/step/visibility'"
+        [ngClass]="{'active': step == 'visibility'}"
+        i18n
+    >
        Visibilité
    </a>
-    <a [routerLink]="'/step/base'" i18n>
+    <a
+        [routerLink]="'/step/base'"
+        [ngClass]="{'active': step == 'base'}"
+        i18n
+    >
        Base
    </a>
-    <a [routerLink]="'/step/pictures'" i18n>
+    <a
+        [routerLink]="'/step/pictures'"
+        [ngClass]="{'active': step == 'pictures'}"
+        i18n
+    >
        Images
    </a>
-    <a [routerLink]="'/step/resume'" i18n>
+    <a
+        [routerLink]="'/step/resume'"
+        [ngClass]="{'active': step == 'resume'}"
+        i18n
+    >
        Résumé
    </a>
-    <a [routerLink]="'/step/kind'" i18n>
+    <a
+        [routerLink]="'/step/end'"
+        [ngClass]="{'active': step == 'end'}"
+        i18n
+    >
+        Confirmation
+    </a>
+    <a
+        [routerLink]="'/step/kind'"
+        [ngClass]="{'active': step == 'kind'}"
+        i18n
+    >
        Page démo
    </a>
-    <a [routerLink]="'/graphic/toto'" i18n>
+    <a
+        [routerLink]="'/graphic/toto'"
+        [ngClass]="{'active': step == 'graphic'}"
+        i18n
+    >
        Graphique
    </a>
-    <a [routerLink]="'/step/admin'" i18n>
+    <a
+        [routerLink]="'/step/admin'"
+        i18n
+    >
        Administration
    </a>
-    <a [routerLink]="'/home'" i18n>
+    <a
+        [routerLink]="'/home'"
+        i18n
+    >
        Accueil
    </a>
 </nav>
+<div class="well">
+    step: {{step}}
+</div>
--- a/src/app/ui/navigation/navigation.component.scss
+++ b/src/app/ui/navigation/navigation.component.scss
@ -1,27 +1,33 @@
@charset "UTF-8";

 nav {
-  text-align: center;
-  margin-bottom: 3.2rem;
-  padding-top: 1.6rem;
-  padding-bottom: 1.6rem;
-  border-top: 2px solid #ffd52c;
-  border-bottom: 2px solid #ffd52c;
+    text-align: center;
+    margin-bottom: 3.2rem;
+    padding-top: 1.6rem;
+    padding-bottom: 1.6rem;
+    border-top: 2px solid #ffd52c;
+    border-bottom: 2px solid #ffd52c;

-  a {
-    &::before {
-      display: inline-block;
-      position: relative;
-      width: auto;
-      background: none;
-    }
-    &::after {
-      display: none;
-    }
+    a {
+        &::before {
+            display: inline-block;
+            position: relative;
+            width: auto;
+            background: none;
+        }

-    &:not(:first-of-type)::before {
-      content: ' | ';
+        &::after {
+            display: none;
+        }

+        &:not(:first-of-type)::before {
+            content: ' | ';
+
+        }
+
+        &.active {
+            color: white;
+            background: black;
+        }
    }
-  }
 }
--- a/src/app/ui/navigation/navigation.component.ts
+++ b/src/app/ui/navigation/navigation.component.ts
@ -1,6 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {BaseComponent} from '../../pages/base-page/base.component';
 import {ConfigService} from '../../config.service';
+import {Router} from '@angular/router';

@Component({
    selector: 'framadate-navigation',
@ -9,11 +10,16 @@ import {ConfigService} from '../../config.service';
 })
 export class NavigationComponent extends BaseComponent implements OnInit {

-    constructor(public config: ConfigService) {
+    @Input() public step: 'home';
+
+    constructor(public config: ConfigService,
+                public route: Router) {
        super(config);
+
    }

    ngOnInit() {
+
    }

    nextPage() {
--- a/yarn.lock
+++ b/yarn.lock