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

src/app/vote-choice/vote-choice.component.html

@@ -1,15 +1,46 @@
 <div class="choice_container">
-  <section id="info">
-  <h3>Jeudi <span>17</span> aout</h3>
-  <h3>08:00</h3>
-  </section>
-  <section id="nombre_vote">
-    <p>14</p><img width="20px" height="21px" src="../../assets/img/votant-sur.svg">
-    <p>76</p><img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg">
-    </section>
-<section id="vote">
-  <img width="16px" height="12px" src="../../assets/img/check.svg">
-  <img width="19px" height="15px" src="../../assets/img/check-2.svg">
-  <img width="12px" height="12px" src="../../assets/img/croix.svg">
-  </section>
-  </div>
+    <div class="info">
+        <div class="date" *ngIf="choice.date">
+            <div class="date-day">
+                {{choice.date | date:'Y-m-d'}}
+            </div>
+            <div class="date-hour">
+                {{choice.date | date:'H:i:s'}}
+            </div>
+
+            <div class="description">
+                {{choice.text}}
+            </div>
+            <h3>Jeudi <span>17</span> aout</h3>
+            <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>

src/app/vote-choice/vote-choice.component.scss

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

src/app/vote-choice/vote-choice.component.ts

@@ -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({
-  selector: 'framadate-vote-choice',
-  templateUrl: './vote-choice.component.html',
-  styleUrls: ['./vote-choice.component.scss']
+    selector: 'framadate-vote-choice',
+    templateUrl: './vote-choice.component.html',
+    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;
+        }
+    }
 
 }