add-remove quota selection

src/app/components/event/event.component.html

@@ -1,12 +1,14 @@
-<ul class="events-by-day" *ngFor="let event of eventsByDay.events">
+<ul class="events-by-day">
   <li class="event">
     <div class="event-info">
       <h3>{{ event.fixture.participants[0].name }} | 
         {{ event.fixture.participants[1].name }}</h3>
       <p>{{ event.fixture.startDate | date :'shortTime' }}</p>
     </div>
     <div class="markets" *ngFor="let market of event.markets | filter: 1">
-      <p class="pick" *ngFor="let pick of market.picks">{{ market.marketId == 1 ? pick.odds : ''}}</p>
+      <p class="pick" *ngFor="let pick of market.picks"
+        (click)="onQuotaClick({event: event, pick: pick})" >
+        {{ market.marketId == 1 ? pick.odds : ''}}</p>
     </div>
   </li>
 </ul>

src/app/components/event/event.component.scss

@@ -30,6 +30,7 @@
 
       .pick {
         font-size: 1.2rem;
+        cursor: pointer;
       }
     }
   }

src/app/components/event/event.component.ts

@@ -1,16 +1,21 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-event',
   templateUrl: './event.component.html',
   styleUrls: ['./event.component.scss']
 })
 export class EventComponent implements OnInit {
-  @Input() eventsByDay: any
+  @Input() event: any;
+  @Input() eventsByDay: any;
+  @Output() onAddToTicket: EventEmitter<any> = new EventEmitter();
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  onQuotaClick({event, pick}: any) {
+    this.onAddToTicket.emit({event, pick});
+  }
 }

src/app/components/events/events.component.html

@@ -3,12 +3,13 @@ <h1>{{ league.name }}</h1>
   <div class="events" *ngFor="let eventsByDay of league.eventDateGroups">
     <div class="day-market">
       <p class="date">{{ eventsByDay.date | date :'mediumDate' }}</p>
-      <div class="main-markets">
-        <p>1</p>
-        <p>x</p>
-        <p>2</p>
+      <div class="main-markets" *ngFor="let market of events.markets | filter: 1">
+        <p *ngFor="let pick of market.picks">{{ pick.name }}</p>
       </div>
     </div>
-    <app-event [eventsByDay]="eventsByDay"></app-event>
+    <app-event *ngFor="let event of eventsByDay.events"
+      [event]="event"
+      [eventsByDay]="eventsByDay"
+      (onAddToTicket)="toggleAddToTicket($event)"></app-event>
   </div>
 </div>

src/app/components/events/events.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { EventsService } from 'src/app/services/events.service';
+import { TicketService } from 'src/app/services/ticket.service';
 
 @Component({
   selector: 'app-events',
@@ -9,10 +10,32 @@ import { EventsService } from 'src/app/services/events.service';
 export class EventsComponent implements OnInit {
   events: any = [];
 
-  constructor(private eventsService: EventsService) { }
+  constructor(
+    private eventsService: EventsService, 
+    private ticketService: TicketService
+  ) { }
 
   ngOnInit(): void {
     this.eventsService.getEvents().subscribe(events => this.events = events);
   }
 
+  toggleAddToTicket({event, pick}: any) {
+    const isEventOnTicket = this.ticketService.ticketList.some(
+        (e: any) => e.event.id === event.id
+      );
+    const isQuotaOnTicket = this.ticketService.ticketList.some(
+        (q: any) => q.pick.id === pick.id
+      );
+
+    if (isEventOnTicket) {
+      if(isQuotaOnTicket) {
+        this.ticketService.removeFromTicket(event);
+      } else {
+        this.ticketService.removeFromTicket(event);
+        this.ticketService.addToTicket({event, pick});
+      }
+    } else {
+      this.ticketService.addToTicket({event, pick});
+    }
+  }
 }

src/app/components/ticket/ticket.component.html

@@ -17,9 +17,9 @@ <h5>group</h5>
   </div>
   <div class="bet-info">
     <p>Total quota <span>7.56</span></p>
+    <br>
     <label>Place your bet:</label>
     <input type="number" name="bet">
-    <br>
     <label>Win:</label>
     <input type="number" name="win">
   </div>

src/app/services/ticket.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TicketService } from './ticket.service';
+
+describe('TicketService', () => {
+  let service: TicketService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TicketService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/ticket.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TicketService {
+  ticketList: any = [];
+
+  constructor() { }
+
+  addToTicket({event, pick}: any) {
+    this.ticketList.push({event, pick});
+  }
+
+  removeFromTicket(event: any) {
+    this.ticketList = this.ticketList.filter(
+      (e: any) => e.event.id !== event.id
+    );
+  }
+}