Assemble schedule from events

apps/schedule/src/app/app.module.ts

@@ -27,7 +27,6 @@ import { ScheduleService } from './services/schedule.service';
 import { TimeZonePickerService } from './services/timezonepicker.service';
 import { CountryNamePipe } from './pipes/countryname.pipe';
 import { DaysHoursMinutesPipe } from './pipes/dayshoursminutes.pipe';
-import { GetDateTimePipe } from './pipes/getdatetime.pipe';
 import { TimePipe } from './pipes/time.pipe';
 
 
@@ -43,7 +42,6 @@ const routes: Routes = [
         TimeZonePickerComponent,
         CountryNamePipe,
         DaysHoursMinutesPipe,
-        GetDateTimePipe,
         TimePipe
     ],
     imports: [

apps/schedule/src/app/models/event.ts

@@ -0,0 +1,12 @@
+export interface Event {
+    id: string;
+    start: Date;
+    end: Date;
+    title: string;
+    description: string;
+    game_id: number;
+    game_name: string;
+    game_box_small: string;
+    game_box_medium: string;
+    game_box_large: string;
+}

apps/schedule/src/app/pipes/time.pipe.ts

@@ -11,10 +11,12 @@ import * as moment from 'moment-timezone';
 })
 export class TimePipe implements PipeTransform {
 
-    transform(time: Date, timeZone: string): string {
+    transform(time: string, timeZone: string): string {
+        let m = moment(new Date(time + 'Z')).tz(timeZone);
+
         if ((new Date()).toLocaleString().match(/am|pm/i))
-            return moment(time).tz(timeZone).format('h:mm A [GMT]Z');
+            return m.format('ll') + ' ' + m.format('h:mm A [GMT]Z');
         else
-            return moment(time).tz(timeZone).format('H:mm [GMT]Z');
+            return m.format('ll') + ' ' + m.format('H:mm [GMT]Z');
     }
 }

apps/schedule/src/app/schedule/schedule.component.css

@@ -14,6 +14,10 @@
     font-size: 125%;
 }
 
+.mat-column-game_name img, .mat-column-game_name span {
+    vertical-align: middle;
+}
+
 .spinner-container {
     position: fixed;
     left: 50%;

apps/schedule/src/app/schedule/schedule.component.html

@@ -24,9 +24,9 @@
 
                     <span [ngStyle]="{color: calcColor(countdown)}">
                         
-                        <span *ngIf="countdown / 60000 >= 1">In {{countdown | dayshoursminutes}}</span>
+                        <span *ngIf="countdown > 0">In {{countdown | dayshoursminutes}}</span>
 
-                        <span *ngIf="countdown / 60000 < 1">Right now!</span>
+                        <span *ngIf="countdown < 0">Right now!</span>
 
                     </span>
 
@@ -42,19 +42,39 @@
 
         <ng-container matColumnDef="title">
 
-            <mat-cell fxFlex="40%" *matCellDef="let slot">{{slot.description}}</mat-cell>
+            <mat-cell fxFlex="25%" *matCellDef="let event">
+
+                <a mat-button href="https://www.twitch.tv/events/{{event.id}}" target="_blank">
+
+                    {{event.title}}
+
+                </a>
+
+            </mat-cell>
 
         </ng-container>
 
-        <ng-container matColumnDef="day">
+        <ng-container matColumnDef="description">
+
+            <mat-cell fxFlex="25%" *matCellDef="let event">{{event.description}}</mat-cell>
+
+        </ng-container>
+
+        <ng-container matColumnDef="game_name">
+
+            <mat-cell fxFlex="25%" *matCellDef="let event">
+
+                <img src="{{event.game_box_small}}" alt="{{event.game_name}}">
+
+                <span>{{event.game_name}}</span>
 
-            <mat-cell fxFlex="40%" *matCellDef="let slot">{{slot.label}}</mat-cell>
+            </mat-cell>
 
         </ng-container>
 
         <ng-container matColumnDef="time">
 
-            <mat-cell fxFlex="20%" *matCellDef="let slot">{{slot | getdatetime | time : timeZone}}</mat-cell>
+            <mat-cell fxFlex="25%" *matCellDef="let event">{{event.start | time : timeZone}}</mat-cell>
 
         </ng-container>
 

apps/schedule/src/app/schedule/schedule.component.ts

@@ -24,7 +24,8 @@ export class ScheduleComponent implements OnInit {
 
     displayedColumns = [
         'title',
-        'day',
+        'description',
+        'game_name',
         'time'
     ];
 
@@ -33,7 +34,7 @@ export class ScheduleComponent implements OnInit {
 
     ngOnInit() {
         this.dataSource = new ScheduleDataSource(this.scheduleService);
-        this.dataSource.loadSchedule(false);
+        this.dataSource.loadSchedule();
     }
 
     changeTimeZone(value) {

apps/schedule/src/app/services/schedule.datasource.ts

@@ -13,15 +13,13 @@ import {
     finalize
 } from 'rxjs/operators';
 
-import { GetDateTimePipe } from '../pipes/getdatetime.pipe';
-
 import { ScheduleService } from './schedule.service';
 
-import { Slot } from '../models/slot';
+import { Event } from '../models/event';
 
 
-export class ScheduleDataSource implements DataSource<Slot> {
+export class ScheduleDataSource implements DataSource<Event> {
-    private scheduleSubject = new BehaviorSubject<Slot[]>([]);
+    private scheduleSubject = new BehaviorSubject<Event[]>([]);
     private loadingSubject = new BehaviorSubject<boolean>(false);
     private countdownSubject = new BehaviorSubject<number>(undefined);
 
@@ -32,17 +30,15 @@ export class ScheduleDataSource implements DataSource<Slot> {
 
     constructor(private scheduleService: ScheduleService) { }
 
-    loadSchedule(disabled: boolean) {
+    loadSchedule() {
         this.loadingSubject.next(true);
 
-        this.scheduleService.getSchedule(disabled)
+        this.scheduleService.findEvents()
             .pipe(
                 catchError(() => of([])),
                 finalize(() => this.loadingSubject.next(false))
             )
-            .subscribe((schedule: Slot[]) => {
+            .subscribe((schedule: Event[]) => {
-                schedule = this.sorted(schedule);
-
                 this.scheduleSubject.next(schedule);
 
                 timer(0, 1000).subscribe(() => {
@@ -50,18 +46,7 @@ export class ScheduleDataSource implements DataSource<Slot> {
                         return;
                     }
 
-                    let nearest = (new GetDateTimePipe()).transform(schedule[0]);
+                    let nearest = new Date(schedule[0].start + 'Z');
-
-                    if (schedule.length > 1) {
-                        let nearest2 = (new GetDateTimePipe()).transform(schedule[1]);
-
-                        if (nearest.getTime() > nearest2.getTime()) {
-                            schedule = this.sorted(schedule);
-                            this.scheduleSubject.next(schedule);
-                            return;
-                        }
-                    }
-
                     let countdown = nearest.getTime() - Date.now();
                     let h = countdown - this.lastCountdown;
 
@@ -76,17 +61,7 @@ export class ScheduleDataSource implements DataSource<Slot> {
             });
     }
 
-    private sorted(schedule) {
+    connect(collectionViewer: CollectionViewer): Observable<Event[]> {
-        schedule.sort(function(a, b) {
-            a = (new GetDateTimePipe()).transform(a);
-            b = (new GetDateTimePipe()).transform(b);
-            return a.getTime() - b.getTime();
-        });
-
-        return schedule;
-    }
-
-    connect(collectionViewer: CollectionViewer): Observable<Slot[]> {
         console.log('Connecting data source');
         return this.scheduleSubject.asObservable();
     }

apps/schedule/src/app/services/schedule.service.ts

@@ -9,20 +9,19 @@ import { Observable } from 'rxjs/Observable';
 
 import { map } from 'rxjs/operators';
 
-import { Slot } from '../models/slot';
+import { Event } from '../models/event';
 
 
 @Injectable()
 export class ScheduleService {
     constructor(private http: HttpClient) { }
 
-    getSchedule(disabled = false): Observable<Slot[]> {
+    findEvents(): Observable<any> {
-
+        return this.http.get('/twitch-cache/api/events', {
-        return this.http.get('https://schedule.twitch.serpent.ai/schedule/92737529')
+            params: new HttpParams()
-            .pipe(
+                .set('newer_than', (new Date()).toISOString())
-                map((res: any) => res.schedule.scheduleSlots.filter(
+                .set('sort_by', 'start')
-                    (slot: Slot) => disabled || slot.isEnabled
+                .set('sort_order', 'asc')
-                ))
+        });
-            );
     }
 }