* api stuff started

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { AwardeeListComponent } from "./awardee-list/awardee-list.component";
 import { JudgeListComponent } from "./judge-list/judge-list.component";
 import { AwardeeEditorComponent } from "./awardee-editor/awardee-editor.component";
 import { JudgeEditorComponent } from "./judge-editor/judge-editor.component";
+import { JudgeService } from "./shared/judge.service";
 
 const routes: Routes = [
   {
@@ -17,7 +18,10 @@ const routes: Routes = [
     // canActivate: [AuthGuardService, RoleGuardService],
   }, {
     path: 'judges',
-    component: JudgeListComponent
+    component: JudgeListComponent,
+    resolve: {
+      judges: JudgeService,
+    }
     // canActivate: [AuthGuardService, RoleGuardService],
   }, {
     path: 'judge/new',

src/app/app.module.ts

@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
 import { LayoutModule } from '@angular/cdk/layout';
 import {
   MatToolbarModule,
@@ -40,8 +42,10 @@ import { JudgeEditorComponent } from './judge-editor/judge-editor.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule,
     BrowserAnimationsModule,
+    FormsModule,
+    HttpClientModule,
+    AppRoutingModule,
     LayoutModule,
     MatToolbarModule,
     MatButtonModule,

src/app/awardee-editor/awardee-editor.component.css

@@ -5,7 +5,7 @@
 
 .awardee-form {
     min-width: 150px;
-    max-width: 500px;
+    max-width: 800px;
     width: 100%;
 }
 

src/app/awardee-editor/awardee-editor.component.html

@@ -9,9 +9,7 @@
   <mat-divider></mat-divider>
   <mat-form-field class="full-width">
     <mat-select placeholder="Year">
-      <mat-option *ngFor="let year of years" [value]="year">
+      <mat-option *ngFor="let year of years" [value]="year">{{ year }}</mat-option>
-        {{ year }}
-      </mat-option>
     </mat-select>
   </mat-form-field>
 

src/app/awardee-editor/awardee-editor.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { YearService } from "../shared/year.service";
+import { Title } from "@angular/platform-browser";
 
 @Component({
   selector: 'app-awardee-editor',
@@ -7,18 +9,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AwardeeEditorComponent implements OnInit {
 
-  public years: Array<number> = [
+  constructor(
-    2018,
+      private yearProvider: YearService,
-    2017,
+      private titleService: Title
-    2016,
+  ) {}
-    2015,
-    2014,
-    2013,
-  ];
-
-  constructor() { }
 
   ngOnInit() {
+    this.titleService.setTitle('Edit awardee');
+  }
+
+  get years(): Array<number> {
+    return this.yearProvider.years;
   }
 
 }

src/app/awardee-list/awardee-list.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Title } from "@angular/platform-browser";
 
 @Component({
   selector: 'app-awardee-list',
@@ -7,9 +8,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AwardeeListComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+      private titleService: Title
+  ) { }
 
   ngOnInit() {
+    this.titleService.setTitle('Awardee list');
   }
 
 }

src/app/judge-editor/judge-editor.component.css

@@ -5,7 +5,7 @@
 
 .judge-form {
     min-width: 150px;
-    max-width: 500px;
+    max-width: 800px;
     width: 100%;
 }
 
@@ -13,17 +13,15 @@
     width: 100%;
 }
 
-.half-width {
+.year-select {
-    width: calc(50% - 10px);
+    margin-right: 20px;
-    margin-right: 10px;
-}
-
-.half-width:last-of-type {
-    width: calc(50%);
-    margin-right: 0;
 }
 
 button + mat-divider {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
+.title-table {
+    margin-bottom: 20px;
+}

src/app/judge-editor/judge-editor.component.html

@@ -1,6 +1,6 @@
-<form class="judge-form">
+<form class="judge-form" name="judge-form">
   <mat-form-field class="full-width">
-    <input type="text" matInput placeholder="Display name">
+    <input name="name" type="text" matInput placeholder="Display name">
   </mat-form-field>
   <button type="button" mat-raised-button>
     <i class="far fa-image"></i>
@@ -8,15 +8,26 @@
   </button>
   <mat-divider></mat-divider>
 
-
+  <mat-form-field class="full-width">
-  <mat-form-field class="half-width">
+    <input name="title" type="text" matInput placeholder="Title" [(ngModel)]="judgedYearInput.title">
-    <input type="number" matInput placeholder="Year">
   </mat-form-field>
-  <mat-form-field class="half-width">
+  <mat-form-field class="year-select">
-    <input type="text" matInput placeholder="Title">
+    <mat-select name="year" placeholder="Year" [(ngModel)]="judgedYearInput.year">
+      <mat-option *ngFor="let year of years" [value]="year">{{ year }}</mat-option>
+    </mat-select>
   </mat-form-field>
+  <button name="add_to_year" type="button" mat-raised-button color="primary" [disabled]="!canAdd" (click)="addToYear()">
+    <i class="fas fa-plus"></i> Add
+  </button>
+
+  <mat-table [dataSource]="judge.yearlyData" class="title-table">
+    <ng-container matColumnDef="buttons">
+      <mat-header-cell *matHeaderCellDef class="controls"></mat-header-cell>
+      <mat-cell *matCellDef="let row" class="controls"><button type="button" mat-icon-button (click)="removeFromYear(row.year)">
+        <mat-icon fontSet="fas" fontIcon="fa-trash"></mat-icon>
+      </button></mat-cell>
+    </ng-container>
 
-  <mat-table [dataSource]="judge.yearlyData">
     <ng-container matColumnDef="year">
       <mat-header-cell *matHeaderCellDef>Year</mat-header-cell>
       <mat-cell *matCellDef="let row">{{row.year}}</mat-cell>

src/app/judge-editor/judge-editor.component.ts

@@ -1,4 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { YearService } from "../shared/year.service";
+import { Title } from "@angular/platform-browser";
+import { JudgedYear } from "../shared/judged-year";
+import { MatTable } from "@angular/material";
+import { ActivatedRoute } from "@angular/router";
+import { Judge } from "../shared/judge";
+import { JudgeService } from "../shared/judge.service";
 
 @Component({
   selector: 'app-judge-editor',
@@ -6,8 +13,11 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./judge-editor.component.css']
 })
 export class JudgeEditorComponent implements OnInit {
+  @ViewChild(MatTable) private table;
+
+  public judgedYearInput: JudgedYear = new JudgedYear();
+  public displayedColumns = ['buttons', 'year', 'title'];
 
-  public displayedColumns = ['year', 'title'];
   public judge = {
     yearlyData: [
       {
@@ -17,9 +27,49 @@ export class JudgeEditorComponent implements OnInit {
     ]
   };
 
-  constructor() {}
+  constructor(
+      private yearProvider: YearService,
+      private judgeService: JudgeService,
+      private titleService: Title,
+      private route: ActivatedRoute
+  ) {}
 
   ngOnInit() {
+    this.titleService.setTitle('Edit judge');
+    this.route.data.subscribe((data: {
+      judges: Array<Judge>,
+    }) => {
+      this.judges = data.judges;
+    });
   }
 
+  get judges(): Array<Judge> {
+    return this.judgeService.judges;
+  }
+
+  set judges(judges: Array<Judge>) {
+    this.judgeService.judges = judges;
+  }
+
+  get years(): Array<number> {
+    return this.yearProvider.years;
+  }
+
+  get canAdd(): boolean {
+    return this.judgedYearInput.year != null
+        && this.judgedYearInput.title.trim().length > 0;
+  }
+
+  public addToYear() {
+    let appendable = Object.assign({}, this.judgedYearInput);
+    this.judge.yearlyData.push(appendable);
+    this.judgedYearInput = new JudgedYear();
+    this.table.renderRows();
+  }
+
+  public removeFromYear(year: number) {
+    this.judge.yearlyData = this.judge.yearlyData.filter(
+        row => row.year !== year
+    );
+  }
 }

src/app/judge-list-table/judge-list-table-datasource.ts

@@ -2,46 +2,22 @@ import { DataSource } from '@angular/cdk/collections';
 import { MatPaginator, MatSort } from '@angular/material';
 import { map } from 'rxjs/operators';
 import { Observable, of as observableOf, merge } from 'rxjs';
+import { JudgeService } from "../shared/judge.service";
+import { Judge } from "../shared/judge";
 
-// TODO: Replace this with your own data model type
-export interface JudgeListTableItem {
-  name: string;
-  id: number;
-}
-
-// TODO: replace this with real data from your application
-const EXAMPLE_DATA: JudgeListTableItem[] = [
-  {id: 1, name: 'Hydrogen'},
-  {id: 2, name: 'Helium'},
-  {id: 3, name: 'Lithium'},
-  {id: 4, name: 'Beryllium'},
-  {id: 5, name: 'Boron'},
-  {id: 6, name: 'Carbon'},
-  {id: 7, name: 'Nitrogen'},
-  {id: 8, name: 'Oxygen'},
-  {id: 9, name: 'Fluorine'},
-  {id: 10, name: 'Neon'},
-  {id: 11, name: 'Sodium'},
-  {id: 12, name: 'Magnesium'},
-  {id: 13, name: 'Aluminum'},
-  {id: 14, name: 'Silicon'},
-  {id: 15, name: 'Phosphorus'},
-  {id: 16, name: 'Sulfur'},
-  {id: 17, name: 'Chlorine'},
-  {id: 18, name: 'Argon'},
-  {id: 19, name: 'Potassium'},
-  {id: 20, name: 'Calcium'},
-];
 
 /**
  * Data source for the JudgeListTable view. This class should
  * encapsulate all logic for fetching and manipulating the displayed data
  * (including sorting, pagination, and filtering).
  */
-export class JudgeListTableDataSource extends DataSource<JudgeListTableItem> {
+export class JudgeListTableDataSource extends DataSource<Judge> {
-  data: JudgeListTableItem[] = EXAMPLE_DATA;
 
-  constructor(private paginator: MatPaginator, private sort: MatSort) {
+  constructor(
+    private paginator: MatPaginator,
+    private sort: MatSort,
+    private judgeService: JudgeService,
+  ) {
     super();
   }
 
@@ -50,20 +26,20 @@ export class JudgeListTableDataSource extends DataSource<JudgeListTableItem> {
    * the returned stream emits new items.
    * @returns A stream of the items to be rendered.
    */
-  connect(): Observable<JudgeListTableItem[]> {
+  connect(): Observable<Judge[]> {
     // Combine everything that affects the rendered data into one update
     // stream for the data-table to consume.
     const dataMutations = [
-      observableOf(this.data),
+      observableOf(this.judgeService.judges),
       this.paginator.page,
       this.sort.sortChange
     ];
 
     // Set the paginators length
-    this.paginator.length = this.data.length;
+    this.paginator.length = this.judgeService.judges.length;
 
     return merge(...dataMutations).pipe(map(() => {
-      return this.getPagedData(this.getSortedData([...this.data]));
+      return this.getPagedData(this.getSortedData([...this.judgeService.judges]));
     }));
   }
 
@@ -77,7 +53,7 @@ export class JudgeListTableDataSource extends DataSource<JudgeListTableItem> {
    * Paginate the data (client-side). If you're using server-side pagination,
    * this would be replaced by requesting the appropriate data from the server.
    */
-  private getPagedData(data: JudgeListTableItem[]) {
+  private getPagedData(data: Judge[]) {
     const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
     return data.splice(startIndex, this.paginator.pageSize);
   }
@@ -86,7 +62,7 @@ export class JudgeListTableDataSource extends DataSource<JudgeListTableItem> {
    * Sort the data (client-side). If you're using server-side sorting,
    * this would be replaced by requesting the appropriate data from the server.
    */
-  private getSortedData(data: JudgeListTableItem[]) {
+  private getSortedData(data: Judge[]) {
     if (!this.sort.active || this.sort.direction === '') {
       return data;
     }

src/app/judge-list-table/judge-list-table.component.html

@@ -18,9 +18,9 @@
   </mat-table>
 
   <mat-paginator #paginator
-    [length]="dataSource.data.length"
+    [length]="judges.length"
     [pageIndex]="0"
-    [pageSize]="50"
+    [pageSize]="15"
-    [pageSizeOptions]="[25, 50, 100, 250]">
+    [pageSizeOptions]="[15, 25, 50]">
   </mat-paginator>
 </div>

src/app/judge-list-table/judge-list-table.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, MatSort } from '@angular/material';
 import { JudgeListTableDataSource } from './judge-list-table-datasource';
+import { JudgeService } from "../shared/judge.service";
+import { Judge } from "../shared/judge";
 
 @Component({
   selector: 'judge-list-table',
@@ -15,7 +17,13 @@ export class JudgeListTableComponent implements OnInit {
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'name'];
 
+  constructor(private judgeService: JudgeService) {}
+
   ngOnInit() {
-    this.dataSource = new JudgeListTableDataSource(this.paginator, this.sort);
+    this.dataSource = new JudgeListTableDataSource(this.paginator, this.sort, this.judgeService);
+  }
+
+  get judges(): Array<Judge> {
+    return this.judgeService.judges;
   }
 }

src/app/judge-list/judge-list.component.ts

@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { Title } from "@angular/platform-browser";
+import { Judge } from "../shared/judge";
+import { ActivatedRoute } from "@angular/router";
+import { JudgeService } from "../shared/judge.service";
 
 @Component({
   selector: 'app-judge-list',
@@ -7,9 +11,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class JudgeListComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+      private judgeService: JudgeService,
+      private titleService: Title,
+      private route: ActivatedRoute
+  ) { }
 
   ngOnInit() {
+    this.titleService.setTitle('Judge list');
+      this.route.data.subscribe((data: {
+          judges: Array<Judge>,
+      }) => {
+          this.judgeService.judges = data.judges;
+      });
   }
-
 }

src/app/navigation/navigation.component.html

@@ -8,9 +8,8 @@
     [opened]="!(isHandset | async)!.matches">
     <mat-toolbar color="primary">Menu</mat-toolbar>
     <mat-nav-list>
-      <a mat-list-item [routerLink]="['awardees']">Awardees</a>
       <a mat-list-item [routerLink]="['judges']">Judges</a>
-      <a mat-list-item [routerLink]="['awardees']">Years</a>
+      <a mat-list-item [routerLink]="['awardees']">Awardees</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>

src/app/shared/judge-title.ts

@@ -0,0 +1,5 @@
+export class JudgeTitle {
+    id: number;
+    year: number;
+    title: string;
+}

src/app/shared/judge.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { JudgeService } from './judge.service';
+
+describe('JudgeService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [JudgeService]
+    });
+  });
+
+  it('should be created', inject([JudgeService], (service: JudgeService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/shared/judge.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { HttpClient } from "@angular/common/http";
+
+import { Judge } from "./judge";
+import { environment } from '../../environments/environment';
+import { Observable } from "rxjs/internal/Observable";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class JudgeService implements Resolve<Array<Judge>> {
+
+  private apiEndPoint = `${environment.apiUrl}/judge`;
+  private cachedJudges: Array<Judge> = [];
+
+  constructor(private httpClient: HttpClient) {}
+
+  public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Array<Judge>> {
+    return this.getJudges().toPromise();
+  }
+
+  public getJudges(): Observable<Array<Judge>> {
+    return this.httpClient.get<Array<Judge>>(this.apiEndPoint);
+  }
+
+  get judges(): Array<Judge> {
+    return this.cachedJudges;
+  }
+
+  set judges(judges: Array<Judge>) {
+    this.cachedJudges = judges;
+  }
+}

src/app/shared/judge.ts

@@ -0,0 +1,7 @@
+import { JudgeTitle } from "./judge-title";
+
+export class Judge {
+    public id: number;
+    public name: string;
+    public titles: Array<JudgeTitle>;
+}

src/app/shared/judged-year.ts

@@ -0,0 +1,4 @@
+export class JudgedYear {
+    public year: number = null;
+    public title = '';
+}

src/app/shared/year.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { YearService } from './year.service';
+
+describe('YearService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [YearService]
+    });
+  });
+
+  it('should be created', inject([YearService], (service: YearService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/shared/year.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class YearService {
+
+  private cachedYears: Array<number> = [
+      2018,
+      2017,
+      2016,
+      2015,
+      2014,
+      2013,
+  ];
+
+  constructor() {}
+
+  get years(): Array<number> {
+      return this.cachedYears;
+  }
+}

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  apiUrl: 'https://',
 };

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  apiUrl: 'http://localhost:8888/api',
 };
 
 /*