From 5657f57fc75b05c055c63798032c8eae0514a0e0 Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Wed, 15 Jan 2020 17:55:22 +0100 Subject: [PATCH] :zap: get poll data in vote choices --- karma.conf.js | 2 +- src/app/app.module.ts | 2 + src/app/config/Routes.ts | 2 + src/app/config/mock-poll3.ts | 186 ++++++++++++++++++ src/app/debugger/debugger.component.html | 49 ++--- src/app/debugger/debugger.component.ts | 4 + src/app/pages/admin/admin.component.html | 4 +- src/app/pages/answers/answers.component.html | 2 +- .../create-or-retrieve.component.html | 13 +- .../create-or-retrieve.component.ts | 4 +- src/app/pages/dates/dates.component.html | 4 +- src/app/pages/home/home.component.html | 4 +- src/app/pages/kind/kind.component.html | 12 +- .../poll-display/poll-display.component.html | 16 ++ .../poll-display/poll-display.component.scss | 0 .../poll-display.component.spec.ts | 25 +++ .../poll-display/poll-display.component.ts | 23 +++ .../visibility/visibility.component.html | 4 +- src/app/services/config.service.ts | 6 +- .../ui/navigation/navigation.component.html | 3 + .../vote-choice/vote-choice.component.html | 58 ++++-- .../vote-choice/vote-choice.component.scss | 56 +++--- src/app/vote-choice/vote-choice.component.ts | 27 +-- 23 files changed, 392 insertions(+), 114 deletions(-) create mode 100644 src/app/config/mock-poll3.ts create mode 100644 src/app/pages/poll-display/poll-display.component.html create mode 100644 src/app/pages/poll-display/poll-display.component.scss create mode 100644 src/app/pages/poll-display/poll-display.component.spec.ts create mode 100644 src/app/pages/poll-display/poll-display.component.ts diff --git a/karma.conf.js b/karma.conf.js index a568270f..cca0956f 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -17,7 +17,7 @@ module.exports = function (config) { }, coverageIstanbulReporter: { dir: require('path').join(__dirname, './coverage/framadate'), - reports: ['html', 'lcovonly', 'text-summary'], + reports: ['html', 'lcovonly', 'name-summary'], fixWebpackSourcePaths: true }, reporters: ['progress', 'kjhtml'], diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a977073f..6e18ab24 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -45,6 +45,7 @@ import {ConfigService} from "./services/config.service"; import {PollService} from "./services/poll.service"; import {ToastModule} from 'primeng/toast'; import {MessageService} from "primeng"; +import { PollDisplayComponent } from './pages/poll-display/poll-display.component'; export class MyMissingTranslationHandler implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { @@ -83,6 +84,7 @@ export function HttpLoaderFactory(http: HttpClient) { VoteChoiceComponent, AdminComponent, SelectorComponent, + PollDisplayComponent, ], imports: [ diff --git a/src/app/config/Routes.ts b/src/app/config/Routes.ts index c9fcf5c7..fa981741 100644 --- a/src/app/config/Routes.ts +++ b/src/app/config/Routes.ts @@ -11,6 +11,7 @@ import {BaseComponent} from '../pages/base-page/base.component'; import {HomeComponent} from "../pages/home/home.component"; import {PollGraphicComponent} from '../poll-graphic/poll-graphic.component'; import {VoteChoiceComponent} from "../vote-choice/vote-choice.component"; +import {PollDisplayComponent} from "../pages/poll-display/poll-display.component"; /** * each step in the form is a component @@ -31,6 +32,7 @@ export const Routes = {path: 'step/resume', component: ResumeComponent}, {path: 'step/end', component: EndConfirmationComponent}, {path: 'graphic/:poll', component: PollGraphicComponent}, + {path: 'vote/poll/id/:poll', component: PollDisplayComponent}, {path: 'votechoice', component: VoteChoiceComponent}, {path: '**', redirectTo: '/home', pathMatch: 'full'}, ] diff --git a/src/app/config/mock-poll3.ts b/src/app/config/mock-poll3.ts new file mode 100644 index 00000000..779b2e69 --- /dev/null +++ b/src/app/config/mock-poll3.ts @@ -0,0 +1,186 @@ +export const mockPoll3 = { + "message": "your poll config", + "data": { + "id": 3, + "title": "dessin animé préféré", + "customUrl": null, + "description": "choisissez votre animé préféré", + "creationDate": { + "date": "2020-01-15 15:07:53.000000", + "timezone_type": 3, + "timezone": "Europe/Paris" + }, + "expiracyDate": { + "date": "2020-01-15 15:07:53.000000", + "timezone_type": 3, + "timezone": "Europe/Paris" + }, + "owner": { + "__initializer__": {}, + "__cloner__": {}, + "__isInitialized__": false + }, + "kind": "text", + "allowedAnswers": [ + "yes" + ], + "modificationPolicy": "self", + "mailOnComment": null, + "mailOnVote": null, + "hideResults": null, + "showResultEvenIfPasswords": null, + "votes": {}, + "stacksOfVotes": {}, + "choices": {}, + "comments": {}, + "defaultExpiracyDaysFromNow": 60 + }, + "stacks_count": 2, + "stacks": [ + { + "pseudo": "Wulfila", + "votes": {} + }, + { + "pseudo": "Tykayn", + "votes": {} + } + ], + "choices_count": 7, + "choices": [ + { + "id": 5, + "name": "Vic le viking", + "dateTime": { + "date": "2020-01-15 15:07:53.000000", + "timezone_type": 3, + "timezone": "Europe/Paris" + }, + "votes": { + "count": { + "yes": 0, + "no": 0, + "maybe": 0, + "null": 0, + } + }, + simpleAnswer: true, + "answer": null + }, + { + "id": 6, + "name": "Boumbo petite automobile", + "dateTime": { + "date": "2020-01-15 15:07:53.000000", + "timezone_type": 3, + "timezone": "Europe/Paris" + }, + "votes": { + "count": { + "yes": 0, + "no": 0, + "maybe": 0, + "null": 0, + } + }, + simpleAnswer: true, + "answer": null + }, + { + "id": 7, + "name": "Les mystérieuses cités d'or", + "dateTime": { + "date": "2020-01-15 15:07:53.000000", + "timezone_type": 3, + "timezone": "Europe/Paris" + }, + "votes": { + "count": { + "yes": 0, + "no": 0, + "maybe": 0, + "null": 0, + } + }, + simpleAnswer: true, + "answer": null + }, + { + "id": 8, + "name": "Les mondes engloutis", + "dateTime": { + "date": "2020-01-15 15:07:53.000000", + "timezone_type": 3, + "timezone": "Europe/Paris" + }, + "votes": { + "count": { + "yes": 0, + "no": 0, + "maybe": 0, + "null": 0, + } + }, + simpleAnswer: true, + "answer": null + }, + { + "id": 9, + "name": "Foot 2 rue", + "dateTime": { + "date": "2020-01-15 15:07:53.000000", + "timezone_type": 3, + "timezone": "Europe/Paris" + }, + "votes": { + "count": { + "yes": 0, + "no": 0, + "maybe": 0, + "null": 0, + } + }, + simpleAnswer: true, + "answer": null + }, + { + "id": 10, + "name": "Le chat, la vache, et l'océan", + "dateTime": { + "date": "2020-01-15 15:07:53.000000", + "timezone_type": 3, + "timezone": "Europe/Paris" + }, + "votes": { + "count": { + "yes": 0, + "no": 0, + "maybe": 0, + "null": 0, + } + }, + simpleAnswer: true, + "answer": null + }, + { + "id": 11, + "name": "Digimon", + "dateTime": { + "date": "2020-01-15 15:07:53.000000", + "timezone_type": 3, + "timezone": "Europe/Paris" + }, + "votes": { + "count": { + "yes": 0, + "no": 0, + "maybe": 0, + "null": 0, + } + }, + simpleAnswer: true, + "answer": null + } + ], + "comments": [] +} diff --git a/src/app/debugger/debugger.component.html b/src/app/debugger/debugger.component.html index b7f72cfe..bae653fd 100644 --- a/src/app/debugger/debugger.component.html +++ b/src/app/debugger/debugger.component.html @@ -18,26 +18,31 @@ type de formulaire: {{config.pollType}} + + + + + + See example of vote page + - - - - diff --git a/src/app/debugger/debugger.component.ts b/src/app/debugger/debugger.component.ts index 2dac8523..2cb828ff 100644 --- a/src/app/debugger/debugger.component.ts +++ b/src/app/debugger/debugger.component.ts @@ -23,4 +23,8 @@ export class DebuggerComponent implements OnInit { return true; } + + launchToast() { + this.config.handleError({message: "hop"}) + } } diff --git a/src/app/pages/admin/admin.component.html b/src/app/pages/admin/admin.component.html index db4f9c73..f2b4063b 100644 --- a/src/app/pages/admin/admin.component.html +++ b/src/app/pages/admin/admin.component.html @@ -3,11 +3,11 @@

Informations du sondage

- + - +

Paramètres

Visibilité des réponses

diff --git a/src/app/pages/answers/answers.component.html b/src/app/pages/answers/answers.component.html index fa2027fa..bfdfdd3e 100644 --- a/src/app/pages/answers/answers.component.html +++ b/src/app/pages/answers/answers.component.html @@ -11,7 +11,7 @@
  • -
    +
    • poll
    -
    - -
    -
    + +
    Aucun sondage.
    +
    + +
    + + diff --git a/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts b/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts index 469f80ab..fdaefbc9 100644 --- a/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts +++ b/src/app/pages/create-or-retrieve/create-or-retrieve.component.ts @@ -1,7 +1,6 @@ import {Component, OnInit} from '@angular/core'; import {BaseComponent} from "../base-page/base.component"; import {ConfigService} from "../../services/config.service"; -import {PollService} from "../../services/poll.service"; @Component({ selector: 'framadate-create-or-retrieve', @@ -12,8 +11,7 @@ export class CreateOrRetrieveComponent extends BaseComponent implements OnInit { loadedMyPolls: boolean = false; - constructor(public config: ConfigService, - public pollService: PollService) { + constructor(public config: ConfigService) { super(config); } diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html index 43b43923..9ac26db3 100644 --- a/src/app/pages/dates/dates.component.html +++ b/src/app/pages/dates/dates.component.html @@ -89,7 +89,7 @@ @@ -133,7 +133,7 @@ - - + +
    -
    diff --git a/src/app/vote-choice/vote-choice.component.scss b/src/app/vote-choice/vote-choice.component.scss index 243bc75a..f532b1b9 100644 --- a/src/app/vote-choice/vote-choice.component.scss +++ b/src/app/vote-choice/vote-choice.component.scss @@ -8,19 +8,17 @@ @import "../../assets/scss/variables"; - // -- VARIABLES // ---------------------------- -$box-padding : 2rem; -$box-border-width : .6rem; -$btn-size : 5rem; -$btn-margin-x : 1rem; -$btn-margin-y : 1.5rem; -$btn-wrap-size : calc(2 * #{$btn-size} + 4 * #{$btn-margin-x}); -$img-maxheight : 12rem; -$breakpoint-responsive : 640px; // à définir - +$box-padding: 2rem; +$box-border-width: .6rem; +$btn-size: 5rem; +$btn-margin-x: 1rem; +$btn-margin-y: 1.5rem; +$btn-wrap-size: calc(2 * #{$btn-size} + 4 * #{$btn-margin-x}); +$img-maxheight: 12rem; +$breakpoint-responsive: 640px; // à définir // -- GLOBAL @@ -34,11 +32,17 @@ $breakpoint-responsive : 640px; // à définir border-left: $box-border-width solid transparent; background-color: $white; box-shadow: 0 0 .6rem 0 rgba($black, .2); + &--active { padding-left: $box-padding; border-left-color: $primary_color; } + &.selection-yes { + font-weight: 700; + background: #e9bdeb; + } + @media (min-width: $breakpoint-responsive) { display: flex; align-items: center; @@ -58,7 +62,6 @@ $breakpoint-responsive : 640px; // à définir } - // -- DATE // ---------------------------- @@ -79,7 +82,6 @@ $breakpoint-responsive : 640px; // à définir } - // -- IMG // ---------------------------- @@ -89,7 +91,6 @@ $breakpoint-responsive : 640px; // à définir } - // -- TXT // ---------------------------- @@ -99,7 +100,6 @@ $breakpoint-responsive : 640px; // à définir } - // -- VOTE BTNS // ---------------------------- @@ -129,25 +129,29 @@ $breakpoint-responsive : 640px; // à définir align-items: center; justify-content: center; margin: $btn-margin-y $btn-margin-x; - border: .1rem solid $primary_color; + border: .3rem solid #ccc9c9; background-color: transparent; border-radius: 50%; - @media (min-width: $breakpoint-responsive) { margin-top: 0; margin-bottom: 0; } - &:focus, - &:hover, - &:active { - border-color: #ccc9c9; - background-color: #f7f7f7; - } + //&:focus, + //&:hover, + //&:active { + // + // border-color: #ccc9c9; + // background-color: #f7f7f7; + // + // &--active { + // border-color: #bf83c2 !important; + // } + //} &--maybe { position: relative; - top: calc( (#{$btn-size} + 2 * #{$btn-margin-y}) / 2 ); + top: calc((#{$btn-size} + 2 * #{$btn-margin-y}) / 2); @media (min-width: $breakpoint-responsive) { top: auto; left: auto; @@ -155,13 +159,11 @@ $breakpoint-responsive : 640px; // à définir } &--active { - border-width: .3rem; border-color: #bf83c2; } } - // -- VOTE COUNT // ---------------------------- @@ -195,6 +197,7 @@ $breakpoint-responsive : 640px; // à définir .choicebox__vote { display: inline-block; vertical-align: middle; + & + .choicebox__vote { margin-left: 1.5rem; } @@ -203,6 +206,7 @@ $breakpoint-responsive : 640px; // à définir .choicebox__countxt { display: none; margin-top: .5rem; + .choicebox--active & { display: block; @media (min-width: $breakpoint-responsive) { @@ -212,7 +216,6 @@ $breakpoint-responsive : 640px; // à définir } - // -- TOOLTIP // ---------------------------- @@ -265,6 +268,7 @@ $breakpoint-responsive : 640px; // à définir & + .choicebox__tooltiplist { padding-left: 3rem; } + ul { max-height: 11rem; overflow: auto; diff --git a/src/app/vote-choice/vote-choice.component.ts b/src/app/vote-choice/vote-choice.component.ts index ab31a590..9ecc8f28 100644 --- a/src/app/vote-choice/vote-choice.component.ts +++ b/src/app/vote-choice/vote-choice.component.ts @@ -1,21 +1,22 @@ -import {Component, Input} from '@angular/core'; +import {Component, ElementRef, Input} from '@angular/core'; interface VoteChoice { - votesCount: { + votes?: { yes: number no: number maybe: number notAnswered: number }; - text?: string; + name?: string; date?: Date; answer: 'yes' | 'no' | 'maybe' | null; - simpleAnswer: boolean; // enable if we display only a togglable "yes" + simpleAnswer?: boolean + false; // enable if we display only a togglable "yes" } /** * each vote choice takes a configuration from the container of all choices. - * this component is used to select a date choice, or a text answer + * this component is used to select a date choice, or a name answer */ @Component({ selector: 'framadate-vote-choice', @@ -24,20 +25,9 @@ interface VoteChoice { }) export class VoteChoiceComponent { - @Input() choice: VoteChoice = { - date: new Date(), - text: 'description ', - votesCount: { - yes: 0, - no: 0, - maybe: 0, - notAnswered: 0 - }, - simpleAnswer: false, - answer: null - }; + @Input() private choice: any; - constructor() { + constructor(private el: ElementRef) { } @@ -53,6 +43,7 @@ export class VoteChoiceComponent { } else { this.choice.answer = newAnswer; } + this.el.nativeElement.blur(); } }