Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

⚡ disabled button when nothing is selected, detect counts

Browse Source
This commit is contained in:
Baptiste Lemoine 2020-01-29 16:30:07 +01:00
parent e227344647
commit 0369d934bd
10 changed files with 324 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/config/PollConfig.ts
View File

@ -33,6 +33,7 @@ export class PollConfig {
myComment: string = 'wouah trop bien framadate!';
isAdmin: boolean = true;
myVoteStack: any;
myTempVoteStack =0;
myEmail: string = "tktest@tktest.com";
myPolls: any = [];// list of retrieved polls from the backend api
// date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates

226
src/app/config/mocks/mock-poll3.ts
View File

@ -1,6 +1,6 @@
export const mockPoll3 = {
"message": "your poll config",
"data": {
"poll": {
"id": 3,
"title": "dessin animé préféré",
"customUrl": null,
@ -37,7 +37,7 @@ export const mockPoll3 = {
"comments": {},
"defaultExpiracyDaysFromNow": 60
},
"stacks_count": 10,
"stacks_count": 14,
"stacks": [
{
"id": 3,
@ -351,9 +351,206 @@ export const mockPoll3 = {
"text": "Les mystérieuses cités d'or"
}
]
},
{
"id": 13,
"pseudo": "tk_TEST",
"creation_date": {
"date": "2020-01-23 14:31:07.000000",
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"votes": [
{
"id": 13,
"vote_id": 33,
"value": "yes",
"choice_id": 2,
"text": null
}
]
},
{
"id": 14,
"pseudo": "tk_TEST",
"creation_date": {
"date": "2020-01-23 14:33:07.000000",
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"votes": [
{
"id": 14,
"vote_id": 34,
"value": "yes",
"choice_id": 2,
"text": null
}
]
},
{
"id": 15,
"pseudo": "tk_TEST",
"creation_date": {
"date": "2020-01-23 14:33:11.000000",
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"votes": [
{
"id": 15,
"vote_id": 35,
"value": "yes",
"choice_id": 2,
"text": null
}
]
},
{
"id": 16,
"pseudo": "tk_TEST",
"creation_date": {
"date": "2020-01-23 14:34:11.000000",
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"votes": [
{
"id": 16,
"vote_id": 36,
"value": "no",
"choice_id": 1,
"text": "orange"
},
{
"id": 16,
"vote_id": 37,
"value": "yes",
"choice_id": 2,
"text": null
}
]
}
],
"choices_count": 7,
"choices_count": {
"counts": {
"7": {
"yes": {
"count": 10,
"people": [
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST"
]
},
"maybe": {
"count": 0,
"people": []
},
"no": {
"count": 1,
"people": [
"voting_people_TEST"
]
}
},
"6": {
"yes": {
"count": 1,
"people": [
"voting_people_TEST"
]
},
"maybe": {
"count": 9,
"people": [
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST"
]
},
"no": {
"count": 0,
"people": []
}
},
"5": {
"yes": {
"count": 0,
"people": []
},
"maybe": {
"count": 0,
"people": []
},
"no": {
"count": 8,
"people": [
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST",
"voting_people_TEST"
]
}
},
"2": {
"yes": {
"count": 4,
"people": [
"tk_TEST",
"tk_TEST",
"tk_TEST",
"tk_TEST"
]
},
"maybe": {
"count": 0,
"people": []
},
"no": {
"count": 0,
"people": []
}
},
"1": {
"yes": {
"count": 0,
"people": []
},
"maybe": {
"count": 0,
"people": []
},
"no": {
"count": 1,
"people": [
"tk_TEST"
]
}
}
},
"people": {
"voting_people_TEST": "yes",
"tk_TEST": "yes"
}
},
"choices": [
{
"id": 5,
@ -362,7 +559,8 @@ export const mockPoll3 = {
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"text": "Vic le viking"
"text": "Vic le viking",
"url": null
},
{
"id": 6,
@ -371,7 +569,8 @@ export const mockPoll3 = {
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"text": "Boumbo petite automobile"
"text": "Boumbo petite automobile",
"url": null
},
{
"id": 7,
@ -380,7 +579,8 @@ export const mockPoll3 = {
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"text": "Les mystérieuses cités d'or"
"text": "Les mystérieuses cités d'or",
"url": null
},
{
"id": 8,
@ -389,7 +589,8 @@ export const mockPoll3 = {
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"text": "Les mondes engloutis"
"text": "Les mondes engloutis",
"url": null
},
{
"id": 9,
@ -398,7 +599,8 @@ export const mockPoll3 = {
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"text": "Foot 2 rue"
"text": "Foot 2 rue",
"url": null
},
{
"id": 10,
@ -407,7 +609,8 @@ export const mockPoll3 = {
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"text": "Le chat, la vache, et l'océan"
"text": "Le chat, la vache, et l'océan",
"url": null
},
{
"id": 11,
@ -416,7 +619,8 @@ export const mockPoll3 = {
"timezone_type": 3,
"timezone": "Europe/Berlin"
},
"text": "Digimon"
"text": "Digimon",
"url": null
}
],
"comments": [
@ -562,4 +766,4 @@ export const mockPoll3 = {
}
],
"comments_count": 14
};
}

55
src/app/config/mocks/mock1.ts
View File

@ -1,19 +1,19 @@
export const mockPoll1 = {
"message": "your poll config",
"data": {
"poll": {
"id": 1,
"title": "citron ou orange",
"customUrl": null,
"description": "votre sorbert préféré",
"creationDate": {
"date": "2020-01-22 14:28:19.000000",
"date": "2020-01-20 16:45:48.000000",
"timezone_type": 3,
"timezone": "Europe/Paris"
"timezone": "Europe/Berlin"
},
"expiracyDate": {
"date": "2020-01-22 14:28:19.000000",
"date": "2020-01-20 16:45:48.000000",
"timezone_type": 3,
"timezone": "Europe/Paris"
"timezone": "Europe/Berlin"
},
"owner": {
"__initializer__": {},
@ -41,9 +41,9 @@ export const mockPoll1 = {
"id": 1,
"pseudo": "voting_people_TEST",
"creation_date": {
"date": "2020-01-22 14:28:19.000000",
"date": "2020-01-20 16:45:48.000000",
"timezone_type": 3,
"timezone": "Europe/Paris"
"timezone": "Europe/Berlin"
},
"votes": [
{
@ -66,9 +66,9 @@ export const mockPoll1 = {
"id": 2,
"pseudo": "voting_people_TEST",
"creation_date": {
"date": "2020-01-22 14:28:19.000000",
"date": "2020-01-20 16:45:48.000000",
"timezone_type": 3,
"timezone": "Europe/Paris"
"timezone": "Europe/Berlin"
},
"votes": [
{
@ -81,14 +81,30 @@ export const mockPoll1 = {
]
}
],
"choices_count": 2,
"choices_count": {
"counts": {
"1": {
"yes": 1,
"maybe": 1,
"no": 0
},
"2": {
"yes": 1,
"maybe": 0,
"no": 0
}
},
"people": {
"voting_people_TEST": "maybe"
}
},
"choices": [
{
"id": 1,
"date": {
"date": "2020-01-22 14:28:19.000000",
"date": "2020-01-20 16:45:48.000000",
"timezone_type": 3,
"timezone": "Europe/Paris"
"timezone": "Europe/Berlin"
},
"text": "orange",
"url": null
@ -96,23 +112,14 @@ export const mockPoll1 = {
{
"id": 2,
"date": {
"date": "2020-01-22 14:28:19.000000",
"date": "2020-01-20 16:45:48.000000",
"timezone_type": 3,
"timezone": "Europe/Paris"
"timezone": "Europe/Berlin"
},
"text": "citron",
"url": null
}
],
"comments": [{
"id": 4,
"text": "wouah trop bien framadate HOUHOUUUU!",
"pseudo": "tk_TEST",
"date": {
"date": "2020-01-22 16:00:22.000000",
"timezone_type": 3,
"timezone": "Europe/Paris"
}
},],
"comments": [],
"comments_count": 0
};

8
src/app/pages/poll-display/poll-display.component.html
View File

@ -73,18 +73,22 @@
<framadate-vote-choice
[choice]="choice"
[choices_count]="config.currentPoll.choices_count"
[pollIsSpecialDate]="config.currentPoll.poll.kind == 'date'"
[poll]='config.currentPoll' ></framadate-vote-choice >
</div >
</div >
<button
class='btn btn--primary btn-block'
class='btn btn-block submit-votestack'
(click)='config.addVote()'
[disabled]='!config.myTempVoteStack'
[ngClass]='{"btn--primary" : config.myTempVoteStack } '
*ngIf='!config.myVoteStack || !config.myVoteStack.id' >
<i class='fa fa-paper-plane' ></i > Envoyer
<!-- ( {{config.myTempVoteStack}} )-->
</button >
<button
class='btn btn--primary btn-block'
class='btn btn--primary btn-block submit-votestack update'
(click)='config.updateVote(config.myVoteStack)'
*ngIf='config.myVoteStack && config.myVoteStack.id' >
<i class='fa fa-pencil' ></i > Mettre à jour

6
src/app/pages/poll-display/poll-display.component.scss
View File

@ -1 +1,7 @@
@import "../../../assets/scss/variables";
.submit-votestack {
position: fixed;
bottom: 5px;
right: 5px;
}

8
src/app/pages/poll-display/poll-display.component.ts
View File

@ -3,6 +3,8 @@ import {BaseComponent} from "../base-page/base.component";
import {ConfigService} from "../../services/config.service";
import {mockComments} from "../../config/mocks/mock-comments";
import {ActivatedRoute, Router} from "@angular/router";
import {environment} from "../../../environments/environment";
import {mockPoll3} from "../../config/mocks/mock-poll3";
@Component({
selector: 'framadate-poll-display',
@ -38,6 +40,11 @@ export class PollDisplayComponent extends BaseComponent implements OnInit {
const id = this.activeRoute.snapshot.params.poll;
const pollSlug = this.activeRoute.snapshot.params.pollSlug;
if (!environment.production) {
console.log('mockPoll3', mockPoll3)
this.config.currentPoll = mockPoll3;
return;
}
if (id) {
this.config.loading = true;
this.config.pollId = id;
@ -46,6 +53,7 @@ export class PollDisplayComponent extends BaseComponent implements OnInit {
(res: any) => {
console.log('res', res);
this.config.currentPoll = res;
this.config.loading = false;
}, (e) => {

12
src/app/services/config.service.ts
View File

@ -6,7 +6,7 @@ import {ConfirmationService, MessageService} from 'primeng/api';
import {Router} from "@angular/router";
import {mockMyPolls} from "../config/mocks/mockmypolls";
import {defaultAnswers, defaultDates, defaultTimeOfDay} from "../config/defaultConfigs";
import {mockPoll1} from "../config/mocks/mock1";
import {mockPoll3} from "../config/mocks/mock-poll3";
/**
* le service transverse à chaque page qui permet de syncroniser la configuration de sondage souhaitée
@ -29,7 +29,7 @@ export class ConfigService extends PollConfig {
// fill in mock values if we are not in production environment
if (!environment.production) {
console.info(' ######### framadate ######### we are not in production env, filling with mock values');
this.currentPoll = mockPoll1;
this.currentPoll = mockPoll3;
this.myPolls = mockMyPolls;
this.dateList = defaultDates;
this.timeList = defaultTimeOfDay;
@ -279,8 +279,8 @@ export class ConfigService extends PollConfig {
}
updateCurrentPollFromResponse(res: any) {
this.currentPoll = res.poll;
this.currentPoll.admin_key = res.admin_key;
console.log('update res', res);
this.currentPoll = res;
this.pollId = res.poll.id;
this.urlPublic = this.baseHref + '#/vote/poll/id/' + res.poll.id;
this.urlSlugPublic = this.baseHref + '#/vote/poll/slug/' + res.poll.id;
@ -520,6 +520,7 @@ export class ConfigService extends PollConfig {
* UPDATE
* /api/v1/poll/{id}/vote
* @param voteStack
* TODO
*/
updatePoll(voteStack: any) {
this.http.put(
@ -540,11 +541,12 @@ export class ConfigService extends PollConfig {
}
/**
* TODO
* export all the poll data available to the public as a CSV single file
*/
exportCSV() {
// TODO
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]

58
src/app/ui/vote-choice/vote-choice.component.html
View File

@ -6,14 +6,14 @@
(click)=' choice.simpleAnswer = !choice.simpleAnswer' >
<i class='fa fa-gears' ></i >
</button >
<div
class="text title clickable"
(click)="setAnswserTo('yes')" >
{{choice.text}}
</div >
<div class="choicebox__subject" >
<div
class="text title clickable"
(click)="setAnswserTo('yes')" >
<!-- {{choice.id}} )-->
{{choice.text}}
</div >
<!-- TEXT CASE --><!--
<p class="choicebox__txt">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla nobis nam culpa !
@ -82,13 +82,19 @@
</div >
<div class="choicebox__count" >
<div
class='no-votes'
*ngIf='! poll.choices_count.counts[choice.id] ' >
aucun vote
</div >
<button
type="button"
aria-describedby="choicebox-tooltip"
class="choicebox__votes"
*ngIf="choice.votes" >
*ngIf="poll.choices_count && choice && poll.choices_count.counts[choice.id]" >
<div class="choicebox__vote" >
{{choice.votes.count.yes}}
{{poll.choices_count.counts[choice.id].yes.count}}
<img
width="20px"
height="21px"
@ -96,7 +102,7 @@
alt="" >
</div >
<div class="choicebox__vote" >
{{choice.votes.count.maybe}}
{{poll.choices_count.counts[choice.id].maybe.count}}
<img
width="22px"
height="24px"
@ -113,33 +119,37 @@
height="21px"
src="../../../assets/img/votant-sur.svg"
alt="" >
{{choice.votes.count.yes}} "Oui"
{{poll.choices_count.counts[choice.id].yes.count}} "Oui"
</div >
<!-- liste des gens qui ont répondu oui-->
<ul >
<li >Lorem</li >
<li >Ipsum dolor</li >
<li >Sit amet</li >
<li >Consectetur</li >
<li *ngFor='let pseudo of choices_count.counts[choice.id].yes.people ' >{{pseudo}}</li >
</ul >
</div >
<div class="choicebox__tooltiplist" >
<div
class="choicebox__tooltiplist"
*ngIf='!simpleAnswer' >
<div class="choicebox__tooltipttl" >
<img
width="22px"
height="24px"
src="../../../assets/img/votant-pas-sur.svg"
alt="" >
{{choice.votes.count.maybe}} "Peut-être"
{{poll.choices_count.counts[choice.id].maybe.count}} "Peut-être"
</div >
<ul >
<li >Lorem</li >
<li >Ipsum dolor</li >
<li >Sit amet</li >
<li >Consectetur</li >
<li >Lorem</li >
<li >Ipsum dolor</li >
<li >Sit amet</li >
<li >Consectetur</li >
<li *ngFor='let pseudo of choices_count.counts[choice.id].maybe.people ' >{{pseudo}}</li >
</ul >
</div >
<div
class="choicebox__tooltiplist"
*ngIf='!simpleAnswer' >
<div class="choicebox__tooltipttl" >
<i class='fa fa-times' ></i >
{{poll.choices_count.counts[choice.id].no.count}} "Non"
</div >
<ul >
<li *ngFor='let pseudo of choices_count.counts[choice.id].no.people ' >{{pseudo}}</li >
</ul >
</div >
</div >

26
src/app/ui/vote-choice/vote-choice.component.scss
View File

@ -44,7 +44,6 @@ $breakpoint-responsive: 640px; // à définir
}
@media (min-width: $breakpoint-responsive) {
display: flex;
align-items: center;
justify-content: space-between;
min-height: auto;
@ -109,24 +108,20 @@ $breakpoint-responsive: 640px; // à définir
.choicebox__actions {
position: absolute;
z-index: 1;
display: flex;
max-width: $btn-wrap-size;
top: 50%;
right: $box-padding;
flex-flow: row-reverse wrap;
transform: translateY(-50%);
@media (min-width: $breakpoint-responsive) {
position: static;
max-width: none;
flex-flow: row nowrap;
transform: none;
margin: 0 1.5rem;
}
}
.choicebox__btn {
display: flex;
width: $btn-size;
height: $btn-size;
align-items: center;
@ -136,17 +131,6 @@ $breakpoint-responsive: 640px; // à définir
background-color: transparent;
border-radius: 50%;
cursor: pointer;
//&:focus,
//&:hover,
//&:active {
//
// border-color: #ccc9c9;
// background-color: #f7f7f7;
//
// &--active {
// border-color: #bf83c2 !important;
// }
//}
&--maybe {
position: relative;
@ -176,7 +160,6 @@ $breakpoint-responsive: 640px; // à définir
position: relative;
padding-right: $btn-wrap-size;
@media (min-width: $breakpoint-responsive) {
flex-shrink: 0;
text-align: right;
padding-right: 0;
}
@ -189,13 +172,6 @@ $breakpoint-responsive: 640px; // à définir
background-color: transparent;
@media (min-width: $breakpoint-responsive) {
padding: 1.5rem;
&:focus,
&:hover,
&:active {
& .choicebox__tooltip {
display: flex;
}
}
}
}

16
src/app/ui/vote-choice/vote-choice.component.ts
View File

@ -1,4 +1,5 @@
import {Component, ElementRef, Input} from '@angular/core';
import {ConfigService} from "../../services/config.service";
interface VoteChoice {
votes?: {
@ -27,11 +28,14 @@ export class VoteChoiceComponent {
public showChangeChoicebutton = false;
@Input() public choice: any;
@Input() public choices_count: any;
@Input() public choice_id: any;
@Input() public poll: any;
@Input() public simpleAnswer: boolean = true;
@Input() public pollIsSpecialDate: boolean = false;
constructor(private el: ElementRef) {
constructor(private el: ElementRef,
private config: ConfigService) {
if (this.poll && this.poll.data && this.poll.data.allowedAnswers) {
this.simpleAnswer = this.poll.data.allowedAnswers.length == 1
@ -43,12 +47,22 @@ export class VoteChoiceComponent {
// only toggle yes to no
if (this.choice.answer && this.choice.answer === 'yes') {
this.choice.answer = 'no';
this.config.myTempVoteStack--;
} else {
this.choice.answer = 'yes';
this.config.myTempVoteStack++;
}
} else {
this.choice.answer = newAnswer;
if (this.choice.answer !== newAnswer) {
if (newAnswer == 'maybe' || newAnswer == 'yes') {
this.config.myTempVoteStack++;
}
} else {
console.info('same answer as before')
}
}
this.el.nativeElement.blur();
}