Adds card liking button to cards

src/app/card-component/card.component.html

@@ -1,10 +1,18 @@
 <mat-card>
-    <mat-card-title class="card-word">{{ card.word }}</mat-card-title>
+    <mat-card-header>
+        <mat-card-title class="card-word">{{ card.word }}</mat-card-title>
+    </mat-card-header>
     <mat-divider></mat-divider>
     <mat-card-content>
-        <div class="card-synonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(1) != -1}"><div class="card-desc">Synonym:</div> <div class="card-cont">{{ card.synonym }}</div></div>
-        <div class="card-antonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(2) != -1}"><div class="card-desc">Antonym:</div> <div class="card-cont">{{ card.antonym }}</div></div>
-        <div class="card-general-usage card-line" [ngClass]="{'hint-selected': this.selected.indexOf(3) != -1}"><div class="card-desc">General usage:</div> <div class="card-cont">{{ card.general_sense }}</div></div>
+        <div class="card-synonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(1) != -1}"><div class="card-desc">Synonym:</div> <div class="card-cont">{{ card.synonym }}</div></div><br>
+        <div class="card-antonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(2) != -1}"><div class="card-desc">Antonym:</div> <div class="card-cont">{{ card.antonym }}</div></div><br>
+        <div class="card-general-usage card-line" [ngClass]="{'hint-selected': this.selected.indexOf(3) != -1}"><div class="card-desc">General usage:</div> <div class="card-cont">{{ card.general_sense }}</div></div><br>
         <div class="card-example-usage card-line" [ngClass]="{'hint-selected': this.selected.indexOf(4) != -1}"><div class="card-desc">Example usage:</div> <div class="card-cont">{{ card.example_usage }}</div></div>
     </mat-card-content>
+    <mat-card-actions align="end">
+        <button mat-icon-button color="primary" [disabled]="DisableButton" class="card-vote"(click)= "hitUpvote()">
+            <mat-icon>thumb_up</mat-icon>
+        </button>
+    </mat-card-actions>
+
 </mat-card>

src/app/card-component/card.component.scss

@@ -1,13 +1,8 @@
 .hint-selected {
     background-color: yellow;
 }
-.card-line {
-    margin-top: 5px;
-
-}
+.card-line {  margin-top: 5px; }
 .card-desc { float: left; width: 120px; }
 .card-cont { margin-left: 120px; }
-
-.card-word, .card-cont {
-    word-wrap: break-word;
-}
+.card-vote { bottom: 0; position: absolute;}
+.card-word, .card-cont {  word-wrap: break-word; }

src/app/card-component/card.component.ts

@@ -8,6 +8,8 @@ import {Card} from "../card/card";
 })
 export class CardComponent implements OnInit {
 
+    DisableButton: boolean = false;
+
   constructor() {
   }
 
@@ -18,4 +20,11 @@ export class CardComponent implements OnInit {
   ngOnInit() {
   }
 
+  hitUpvote(): number {
+      this.card.likes += 1;
+      this.DisableButton = true;
+      console.log(this.card.likes);
+      return this.card.likes;
+  }
+
 }

src/app/card/card.ts

@@ -4,5 +4,6 @@ export interface Card {
     synonym: string,
     antonym: string,
     general_sense: string,
-    example_usage: string
+    example_usage: string,
+    likes: number;
 }

src/app/deck/deck.service.ts

@@ -34,13 +34,14 @@ export class DeckService {
     }
 
     public addNewCard(deckID: string, word: string, synonym: string, antonym: string, general: string, example: string) {
-        const body : Card = {
+        const body: Card = {
             word: word,
             synonym: synonym,
             antonym: antonym,
             general_sense: general,
-            example_usage: example
-        }
+            example_usage: example,
+            likes: 0
+        };
         console.log(body);
 
         return this.db.doc('decks/' + deckID).collection('cards').add(body);

src/app/new-card-dialog/new-card-dialog.component.ts

@@ -51,7 +51,8 @@ export class NewCardDialogComponent implements OnInit {
             this.newCardSynonym,
             this.newCardAntonym,
             this.newCardGeneral,
-            this.newCardExample).then(
+            this.newCardExample,
+            ).then(
             succeeded => {
                 //this.cardAddSuccess = true;
                 this.matDialogRef.close(succeeded);