tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

⚡ choice component JS logic and type constraints. demo for dev environment

Browse Source
This commit is contained in:
Baptiste Lemoine 2019-10-02 14:45:50 +02:00
parent e059d45f73
commit f48d05b518
3 changed files with 118 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/app/vote-choice/vote-choice.component.html
View File

@ -1,15 +1,46 @@
<div class="choice_container"> <div class="choice_container">
<section id="info"> <div class="info">
<h3>Jeudi <span>17</span> aout</h3> <div class="date" *ngIf="choice.date">
<h3>08:00</h3> <div class="date-day">
</section> {{choice.date | date:'Y-m-d'}}
<section id="nombre_vote"> </div>
<p>14</p><img width="20px" height="21px" src="../../assets/img/votant-sur.svg"> <div class="date-hour">
<p>76</p><img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg"> {{choice.date | date:'H:i:s'}}
</section> </div>
<section id="vote">
<img width="16px" height="12px" src="../../assets/img/check.svg"> <div class="description">
<img width="19px" height="15px" src="../../assets/img/check-2.svg"> {{choice.text}}
<img width="12px" height="12px" src="../../assets/img/croix.svg"> </div>
</section> <h3>Jeudi <span>17</span> aout</h3>
</div> <h3>08:00</h3>
</div>
<div id="nombre_vote">
<span class="count-yes">
<p>{{choice.votesCount.yes}}</p><img width="20px" height="21px" src="../../assets/img/votant-sur.svg">
</span>
<span class="count-maybe">
<p>{{choice.votesCount.maybe}}</p><img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg">
</span>
<span class="count-no">
<p>{{choice.votesCount.no}}</p>
</span>
<span class="count-didnt-answer">
<p>{{choice.votesCount.notAnswered}}</p>
</span>
</div>
<div class="vote">
<!-- show only the yes check if the config is set to simpleAnswer -->
<img width="16px" height="12px"
src="../../assets/img/check.svg"
(click)="setAnswserTo('yes')">
<img width="19px" height="15px"
src="../../assets/img/check-2.svg"
(click)="setAnswserTo('maybe')"
*ngIf="!choice.simpleAnswer">
<img width="12px" height="12px"
src="../../assets/img/croix.svg"
(click)="setAnswserTo('no')"
*ngIf="!choice.simpleAnswer">
</div>
</div>
</div>

44
src/app/vote-choice/vote-choice.component.scss
View File

@ -1,26 +1,32 @@
.choice_container{ .choice_container {
width:320px; width: 320px;
height:172px; height: 172px;
box-shadow: 0 3px 6px 0 rgba(black, 0.2); box-shadow: 0 3px 6px 0 rgba(black, 0.2);
overflow: auto; overflow: auto;
display:flex; display: flex;
} }
#vote img{
border: 1px solid #aeafb1; #vote img {
border-radius: 48px; border: 1px solid #aeafb1;
border-radius: 48px;
} }
h2,h3{
font-weight: normal; h2, h3 {
font-weight: normal;
} }
span{
font-weight: bold; span {
font-size:24px; font-weight: bold;
font-size: 24px;
} }
#nombre_vote{
vertical-align: middle; #nombre_vote {
float:left; vertical-align: middle;
float: left;
} }
#nombre_vote p{
line-height: 20px; // TODO intricate selectors
#nombre_vote p {
line-height: 20px;
} }

56
src/app/vote-choice/vote-choice.component.ts
View File

@ -1,15 +1,55 @@
import { Component, OnInit } from '@angular/core'; import {Component, Input} from '@angular/core';
import {environment} from "../../environments/environment";
interface VoteChoice {
votesCount: {
yes: number
no: number
maybe: number
notAnswered: number
};
text: string;
date: Date;
answer: 'yes' | 'no' | 'maybe' | null;
simpleAnswer: boolean; // 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
*/
@Component({ @Component({
selector: 'framadate-vote-choice', selector: 'framadate-vote-choice',
templateUrl: './vote-choice.component.html', templateUrl: './vote-choice.component.html',
styleUrls: ['./vote-choice.component.scss'] styleUrls: ['./vote-choice.component.scss']
}) })
export class VoteChoiceComponent implements OnInit { export class VoteChoiceComponent {
constructor() { } @Input() choice: VoteChoice;
ngOnInit() { constructor() {
} if (!environment.production) {
// demo content for dev env
this.choice = {
date: new Date(),
text: 'description ',
simpleAnswer: false
}
}
}
setAnswserTo(newAnswer: 'yes' | 'no' | 'maybe' | null) {
if (this.choice.simpleAnswer) {
// only toggle yes to no
if (this.choice.answer && this.choice.answer === 'yes') {
this.choice.answer = 'no';
} else {
this.choice.answer = 'yes';
}
} else {
this.choice.answer = newAnswer;
}
}
} }