Merge pull request #1 from marijan111/events-list

Events list

src/app/Event.ts

@@ -0,0 +1,63 @@
+export interface Event {
+  isLive: boolean,
+  sportId: string,
+  id: string,
+  linkedId: string,
+  fixture: {
+    startDate: string,
+    type: string,
+    participants: Participants[],
+    league: League
+  },
+  markets: Market[],
+  topLeagues?: any[],
+  marketsTotal: number,
+  isHighlighted: boolean,
+  willBeLive: boolean,
+  picksTotal: number,
+  visualizationInfo: {
+    betRadar: {
+      eventId: string
+    }
+  }
+}
+
+export interface League {
+  id: string,
+  name: string,
+  order: number,
+  iconId?: string,
+  seasonOriented: boolean,
+  eventless: boolean,
+  locationName?: string,
+  locationId?: string,
+  locationOrder?: number
+}
+
+export interface Participants {
+  id: string,
+  name: string,
+  position: string
+}
+
+export interface Market {
+  marketId: string,
+  bl: number,
+  name: string,
+  picks: Pick[],
+  order: number,
+  isValid: boolean
+}
+
+export interface Pick {
+  id: string,
+  name: string,
+  odds?: number,
+  order: number,
+  status: number
+}
+
+export interface Quota {
+  event: Event,
+  pick: Pick
+}

src/app/Events.ts

@@ -0,0 +1,29 @@
+import { League, Market } from "./Event";
+
+export interface Events {
+  markets: Market[],
+  locations: Locations[],
+  sport: {
+    id: string,
+    order: number,
+    name: string,
+    seasonal: boolean
+  },
+  league: League
+}
+
+export interface Locations {
+  id: string,
+  name: string,
+  leagues: Leagues[],
+  order: number
+}
+
+export interface Leagues extends League {
+  eventDateGroups: EventGroup[]
+}
+
+export interface EventGroup {
+  date: string,
+  events: Event[]
+}

src/app/app.component.html

@@ -1 +1,4 @@
-<app-events></app-events>
+<div class="app">
+  <app-events class="events-container"></app-events>
+  <app-ticket class="ticket-container"></app-ticket>
+</div>

src/app/app.component.scss

@@ -0,0 +1,14 @@
+.app {
+  display: flex;
+  flex-direction: row;
+
+  .events-container {
+    margin: 0 20px;
+    flex: 4;
+  }
+
+  .ticket-container {
+    margin: 20px;
+    flex: 1;
+  }
+}

src/app/app.module.ts

@@ -6,19 +6,26 @@ import { AppComponent } from './app.component';
 import { EventsComponent } from './components/events/events.component';
 import { EventComponent } from './components/event/event.component';
 import { FilterPipe } from './pipes/filter.pipe';
+import { TicketComponent } from './components/ticket/ticket.component';
+import { TicketService } from './services/ticket.service';
+import { EventsService } from './services/events.service';
 
 @NgModule({
   declarations: [
     AppComponent,
     EventsComponent,
     EventComponent,
-    FilterPipe
+    FilterPipe,
+    TicketComponent
   ],
   imports: [
     BrowserModule,
     HttpClientModule
   ],
-  providers: [],
+  providers: [
+    TicketService,
+    EventsService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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.name : ''}}</p>
+    <div class="markets" *ngFor="let market of event.markets | filter: filterMarketId">
+      <p class="pick" [ngClass]="{'active': pick.odds == targetQuota}" *ngFor="let pick of market.picks"
+        (click)="onQuotaClick($event, {event: event, pick: pick})" >
+        {{ pick.odds | number: '1.2-2' }}</p>
     </div>
   </li>
 </ul>

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

@@ -15,11 +15,11 @@
     }
 
     .event-info {
-      margin: 0 5px;
       flex: 2;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      padding: 0 10px;
     }
 
     .markets {
@@ -29,7 +29,28 @@
       justify-content: space-between;
 
       .pick {
+        box-sizing: border-box;
+        margin: 0 auto;
+        flex: 1;
         font-size: 1.2rem;
+        cursor: pointer;
+        text-align: center;
+        border-left: 1px solid hsla(0, 0, 0, 0.2);
+        background-color: hsla(0, 0, 20%, 0.1);
+        user-select: none;
+
+        &:hover {
+          background-color: hsla(0, 0, 20%, 0.2);
+        }
+      }
+
+      .active {
+        background-color: hsla(0, 100%, 34%, 1);
+        color: #fff;
+
+        &:hover {
+          background-color: hsla(0, 100%, 34%, 1);
+        }
       }
     }
   }

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

@@ -1,16 +1,34 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Event, Quota } from 'src/app/Event';
 
 @Component({
   selector: 'app-event',
   templateUrl: './event.component.html',
   styleUrls: ['./event.component.scss']
 })
 export class EventComponent implements OnInit {
-  @Input() eventsByDay: any
+  targetQuota!: number;
+  @Input() event!: any;
+  @Input() filterMarketId!: number;
+  @Output() onAddToTicket: EventEmitter<Quota> = new EventEmitter();
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  onQuotaClick($event: any, {event, pick}: Quota): void {
+    this.onAddToTicket.emit({event, pick});
+    this.toggleSelectedQuota($event);
+  }
+
+  toggleSelectedQuota($event: any) {
+    const clickedQuota = parseFloat($event.target.innerText);
+
+    if (this.targetQuota != clickedQuota) {
+      this.targetQuota = clickedQuota;
+    } else {
+      this.targetQuota = -1;
+    }
+  }
 }

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

@@ -1,14 +1,17 @@
-<div class="league" *ngFor="let league of events.locations[0].leagues">
-  <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="locations" *ngFor="let location of events.locations">
+  <div class="league" *ngFor="let league of location.leagues">
+    <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" *ngFor="let market of events.markets | filter: filterMarketId">
+          <p class="market" *ngFor="let pick of market.picks">{{ pick.name }}</p>
+        </div>
       </div>
+      <app-event *ngFor="let event of eventsByDay.events"
+        [event]="event"
+        [filterMarketId]="filterMarketId"
+        (onAddToTicket)="toggleAddToTicket($event)"></app-event>
     </div>
-    <app-event [eventsByDay]="eventsByDay"></app-event>
   </div>
 </div>

src/app/components/events/events.component.scss

@@ -2,10 +2,11 @@
   margin: 20px 0;
 
   h1 {
-    // margin: 10px 0;
-    color: #fff;
-    background-color: hsla(0, 86%, 57%, 1);
+    padding-left: 5px;
+    background-color: hsla(0, 100%, 34%, 1);
     font-size: 1.5rem;
+    color: #fff;
+    border-radius: 3px;
   }
 
   .events {
@@ -20,8 +21,11 @@
       background-color: hsla(0, 100%, 0, 0.5);
       color: #fff;
       font-size: 1.2rem;
+      border-radius: 3px 3px 0 0;
 
       .date {
+        padding-left: 5px;
+        margin-right: 13px;
         flex: 2;
       }
 
@@ -30,6 +34,11 @@
         display: flex;
         flex-direction: row;
         justify-content: space-between;
+
+        .market {
+          flex: 1;
+          text-align: center;
+        }
       }
     }
   }

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

@@ -1,18 +1,47 @@
 import { Component, OnInit } from '@angular/core';
+import { Event, Pick, Quota } from 'src/app/Event';
+import { Events } from 'src/app/Events';
 import { EventsService } from 'src/app/services/events.service';
+import { TicketService } from 'src/app/services/ticket.service';
 
 @Component({
   selector: 'app-events',
   templateUrl: './events.component.html',
   styleUrls: ['./events.component.scss']
 })
 export class EventsComponent implements OnInit {
-  events: any = [];
+  events!: Events;
+  filterMarketId: number;
 
-  constructor(private eventsService: EventsService) { }
+  constructor(
+    private eventsService: EventsService, 
+    private ticketService: TicketService
+  ) { 
+    this.filterMarketId = 1
+  }
 
   ngOnInit(): void {
     this.eventsService.getEvents().subscribe(events => this.events = events);
   }
 
+  toggleAddToTicket({event, pick}: Quota): void {
+    if (this.isEventOnTicket(event)) {
+      if(this.isQuotaOnTicket(pick)) {
+        this.ticketService.removeFromTicket(event);
+      } else {
+        this.ticketService.removeFromTicket(event);
+        this.ticketService.addToTicket({event, pick});
+      }
+    } else {
+      this.ticketService.addToTicket({event, pick});
+    }
+  }
+
+  isEventOnTicket(event: Event): boolean {
+    return this.ticketService.ticketList.some((e: Quota) => e.event.id === event.id);
+  }
+
+  isQuotaOnTicket(pick: Pick): boolean {
+    return this.ticketService.ticketList.some((q: Quota) => q.pick.id === pick.id);
+  }
 }

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

@@ -0,0 +1,26 @@
+<div class="ticket">
+  <div class="bet-selected-list">
+    <div class="bet-selected">
+      <h5>group</h5>
+      <p>play time</p>
+      <p class="pick">X</p>
+      <p>qouta</p>
+      <button class="remove-btn">&#120;</button>
+    </div>
+    <div class="bet-selected">
+      <h5>group</h5>
+      <p>play time</p>
+      <p class="pick">X</p>
+      <p>qouta</p>
+      <button class="remove-btn">&#120;</button>
+    </div>
+  </div>
+  <div class="bet-info">
+    <p>Total quota <span>7.56</span></p>
+    <br>
+    <label>Place your bet:</label>
+    <input type="number" name="bet">
+    <label>Win:</label>
+    <input type="number" name="win">
+  </div>
+</div>