Frontend

Front/angular.json

@@ -28,7 +28,13 @@
               "./node_modules/primeng/resources/primeng.min.css",
               "./node_modules/primeicons/primeicons.css",
               "./node_modules/primeng/resources/themes/luna-blue/theme.css",
-              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "./node_modules/primeng/resources/components/inputtext/inputtext.css",
+              "./node_modules/primeng/resources/components/paginator/paginator.css",
+              "./node_modules/primeng/resources/components/button/button.css",
+              "./node_modules/primeng/resources/components/dropdown/dropdown.css",
+              "./node_modules/primeng/resources/components/calendar/calendar.css",
+              "./node_modules/primeng/resources/components/table/table.css"
             ],
             "scripts": []
           },

Front/src/app/app.component.css

@@ -0,0 +1,149 @@
+:host ::ng-deep .ui-table-customers {
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
+}
+:host ::ng-deep .ui-table-customers .customer-badge {
+    border-radius: 2px;
+    padding: 0.25em 0.5em;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: 0.3px;
+}
+:host ::ng-deep .ui-table-customers .customer-badge.status-qualified {
+    background-color: #c8e6c9;
+    color: #256029;
+}
+:host ::ng-deep .ui-table-customers .customer-badge.status-unqualified {
+    background-color: #ffcdd2;
+    color: #c63737;
+}
+:host ::ng-deep .ui-table-customers .customer-badge.status-negotiation {
+    background-color: #feedaf;
+    color: #8a5340;
+}
+:host ::ng-deep .ui-table-customers .customer-badge.status-new {
+    background-color: #b3e5fc;
+    color: #23547b;
+}
+:host ::ng-deep .ui-table-customers .customer-badge.status-renewal {
+    background-color: #eccfff;
+    color: #694382;
+}
+:host ::ng-deep .ui-table-customers .customer-badge.status-proposal {
+    background-color: #ffd8b2;
+    color: #805b36;
+}
+:host ::ng-deep .ui-table-customers .flag {
+    vertical-align: middle;
+    width: 30px;
+    height: 20px;
+}
+:host ::ng-deep .ui-table-customers .ui-multiselect-representative-option {
+    display: inline-block;
+    vertical-align: middle;
+}
+:host ::ng-deep .ui-table-customers .ui-multiselect-representative-option img {
+    vertical-align: middle;
+    width: 24px;
+}
+:host ::ng-deep .ui-table-customers .ui-multiselect-representative-option span {
+    margin-top: 0.125em;
+    vertical-align: middle;
+    margin-left: 0.5em;
+}
+:host ::ng-deep .ui-table-customers .ui-paginator .ui-dropdown {
+    float: left;
+}
+:host ::ng-deep .ui-table-customers .ui-paginator .ui-paginator-current {
+    float: right;
+}
+:host ::ng-deep .ui-table-customers .ui-progressbar {
+    height: 8px;
+    background-color: #d8dadc;
+}
+:host ::ng-deep .ui-table-customers .ui-progressbar .ui-progressbar-value {
+    background-color: #00acad;
+}
+:host ::ng-deep .ui-table-customers .ui-column-filter {
+    display: block;
+}
+:host ::ng-deep .ui-table-customers .ui-column-filter input {
+    width: 100%;
+}
+:host ::ng-deep .ui-table-customers .ui-table-globalfilter-container {
+    float: right;
+}
+:host ::ng-deep .ui-table-customers .ui-table-globalfilter-container input {
+    width: 200px;
+}
+:host ::ng-deep .ui-table-customers .ui-datepicker {
+    min-width: 25em;
+}
+:host ::ng-deep .ui-table-customers .ui-datepicker td {
+    font-weight: 400;
+}
+:host ::ng-deep .ui-table-customers .ui-table-caption {
+    border: 0 none;
+    padding: 12px;
+    text-align: left;
+    font-size: 20px;
+}
+:host ::ng-deep .ui-table-customers .ui-paginator {
+    border: 0 none;
+    padding: 1em;
+}
+:host ::ng-deep .ui-table-customers .ui-table-thead > tr > th {
+    border: 0 none;
+    text-align: left;
+}
+:host ::ng-deep .ui-table-customers .ui-table-thead > tr > th.ui-filter-column {
+    border-top: 1px solid #c8c8c8;
+}
+:host ::ng-deep .ui-table-customers .ui-table-thead > tr > th:first-child {
+    width: 5em;
+    text-align: center;
+}
+:host ::ng-deep .ui-table-customers .ui-table-thead > tr > th:last-child {
+    width: 8em;
+    text-align: center;
+}
+:host ::ng-deep .ui-table-customers .ui-table-tbody > tr > td {
+    border: 0 none;
+    cursor: auto;
+}
+:host ::ng-deep .ui-table-customers .ui-table-tbody > tr > td:first-child {
+    width: 3em;
+    text-align: center;
+}
+:host ::ng-deep .ui-table-customers .ui-table-tbody > tr > td:last-child {
+    width: 8em;
+    text-align: center;
+}
+:host ::ng-deep .ui-table-customers .ui-dropdown-label:not(.ui-placeholder) {
+    text-transform: uppercase;
+}
+:host ::ng-deep .ui-table-customers .ui-table-tbody > tr > td .ui-column-title {
+    display: none;
+}
+/* Responsive */
+@media screen and (max-width: 64em) {
+    :host ::ng-deep .ui-table.ui-table-customers .ui-table-thead > tr > th, :host ::ng-deep .ui-table.ui-table-customers .ui-table-tfoot > tr > td {
+        display: none !important;
+   }
+    :host ::ng-deep .ui-table.ui-table-customers .ui-table-tbody > tr > td {
+        text-align: left;
+        display: block;
+        border: 0 none !important;
+        width: 100% !important;
+        float: left;
+        clear: left;
+        border: 0 none;
+   }
+    :host ::ng-deep .ui-table.ui-table-customers .ui-table-tbody > tr > td .ui-column-title {
+        padding: 0.4em;
+        min-width: 30%;
+        display: inline-block;
+        margin: -0.4em 1em -0.4em -0.4em;
+        font-weight: bold;
+   }
+}

Front/src/app/app.component.html

@@ -6,6 +6,87 @@
   </header>
   
   <main role="main" class="inner cover">
-    <router-outlet (activate)="onActivate()"></router-outlet>
+    <!--<router-outlet (activate)="onActivate()"></router-outlet>-->
+    <p-table #dt [value]="matches" dataKey="id" [rowHover]="true"
+      [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading"
+      [paginator]="true" currentPageReportTemplate="{first} - {last} z {totalRecords}"
+      [filterDelay]="0" [globalFilterFields]="['teamName1','teamName2','date','season', 'result', 'predictedResult']">
+      <ng-template pTemplate="caption">
+          <div class="ui-table-globalfilter-container">
+              <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Szukaj..." />
+          </div>
+      </ng-template>
+      <ng-template pTemplate="header">
+          <tr>
+              <th pSortableColumn="teamName1">Drużyna <p-sortIcon field="teamName1"></p-sortIcon></th>
+              <th pSortableColumn="teamName2">Przeciwnik <p-sortIcon field="teamName2"></p-sortIcon></th>
+              <th pSortableColumn="date">Data <p-sortIcon field="date"></p-sortIcon></th>
+              <th pSortableColumn="season">Sezon <p-sortIcon field="season"></p-sortIcon></th>
+              <th pSortableColumn="result">Wygrana <p-sortIcon field="result"></p-sortIcon></th>
+              <th pSortableColumn="predictedResult">Przewidywana wygrana <p-sortIcon field="predictedResult"></p-sortIcon></th>
+              <!--<th pSortableColumn="predictedGoals">Przewidywane gole<p-sortIcon field="predictedGoals"></p-sortIcon></th>-->
+          </tr>
+          <tr>
+            <th>
+              <input pInputText type="text" (input)="dt.filter($event.target.value, 'teamName1', 'startsWith')" placeholder="Drużyna" class="ui-column-filter">
+            </th>
+            <th>
+              <input pInputText type="text" (input)="dt.filter($event.target.value, 'teamName2', 'startsWith')" placeholder="Przeciwnik" class="ui-column-filter">
+            </th>
+            <th>
+              <input pInputText type="text" (input)="dt.filter($event.target.value, 'date', 'startsWith')" placeholder="Data" class="ui-column-filter">
+            </th>
+            <th>
+              <input pInputText type="text" (input)="dt.filter($event.target.value, 'season', 'startsWith')" placeholder="Sezon" class="ui-column-filter">
+            </th>
+            <th>
+              <input pInputText type="text" (input)="dt.filter($event.target.value, 'result', 'startsWith')" placeholder="Wygrana" class="ui-column-filter">
+            </th>
+            <th>
+              <input pInputText type="text" (input)="dt.filter($event.target.value, 'predictedResult', 'startsWith')" placeholder="Przewidywana wygrana" class="ui-column-filter">
+            </th>
+            <!--<th>
+              <input pInputText type="text" (input)="dt.filter($event.target.value, 'predictedGoals', 'startsWith')" placeholder="Przewidywane gole" class="ui-column-filter">
+            </th>-->
+          </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-match>
+          <tr class="ui-selectable-row">
+              <td>
+                <span class="ui-column-title"></span>
+                {{match.teamName1}}
+              </td>
+              <td>
+                <span class="ui-column-title"></span>
+                {{match.teamName2}}
+              </td>
+              <td>
+                <span class="ui-column-title"></span>
+                {{match.date}}
+              </td>
+              <td>
+                <span class="ui-column-title"></span>
+                {{match.season}}
+              </td>
+              <td>
+                <span class="ui-column-title"></span>
+                {{match.result}}
+              </td>
+              <td>
+                <span class="ui-column-title"></span>
+                {{match.predictedResult}}
+              </td>
+              <!--<td>
+                <span class="ui-column-title">Przewidywane gole</span>
+                {{match.predictedGoals1}}
+              </td>-->
+          </tr>
+      </ng-template>
+      <ng-template pTemplate="emptymessage">
+          <tr>
+              <td colspan="6" style="text-align:center;">Brak danych</td>
+          </tr>
+      </ng-template>
+  </p-table>
   </main>
 </div>

Front/src/app/app.component.ts

@@ -1,4 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Team, TeamName } from './models/team';
+import { ApiHelper } from './services/apiHelper';
+import { Match } from './models/match';
+import { GlobalConfig } from './common/globalConfig';
+import { PredictedMatch } from './models/predictedMatch';
+import { Table } from 'primeng/table/table';
 
 @Component({
   selector: 'app-root',
@@ -8,11 +14,107 @@ import { Component, OnInit } from '@angular/core';
 export class AppComponent implements OnInit {
   title = 'EkstraklasaPrzewidywanieWynikow';
 
-  constructor() {}
+  matches: PredictedMatch[] = [];
 
-  ngOnInit() {}
+  result: number;
+  err = false;
+  loading = true;
+
+  rmse: number;
+  mae: number;
+  precision: number;
+  recall: number;
+  fMeasure: number;
+
+  TP = 0;
+  FP = 0;
+  FN = 0;
+
+  @ViewChild('dt') table: Table;
+
+  constructor(private apiHelper: ApiHelper,
+              private globalConfig: GlobalConfig) {}
+
+  ngOnInit() {
+    this.globalConfig.loaded.subscribe(
+      data => {
+        this.getMatches();
+        console.log(data);
+      }
+    );
+  }
 
   onActivate() {
     window.scroll(0, 0);
   }
+
+  getMatches() {
+    this.apiHelper.getJson(this.globalConfig.apiAdress + 'matches').subscribe(
+      data => {
+        this.matches = data;
+        console.log(data);
+        this.loading = false;
+      },
+      error => {
+        this.err = true;
+        this.loading = false;
+        this.matches = [];
+        console.log(error);
+      }
+    );
+  }
+
+  onDateSelect(value) {
+    this.table.filter(this.formatDate(value), 'date', 'startsWith');
+  }
+
+  formatDate(date) {
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
+
+    if (month < 10) {
+        month = '0' + month;
+    }
+
+    if (day < 10) {
+        day = '0' + day;
+    }
+
+    return day + '-' + month + '-' + date.getFullYear();
+  }
+
+  countStatistics() {
+    this.countRMSE();
+    this.countMAE();
+    this.countTPFPFN();
+    this.countPrecision();
+    this.countRecall();
+    this.countFMeasure();
+  }
+
+  countRMSE() {
+
+  }
+
+  countMAE() {
+
+  }
+
+  countTPFPFN() {
+    /*this.matches.forEach(x => {
+      if 
+    });*/
+  }
+
+  countPrecision() {
+    this.precision = this.TP / (this.TP + this.FP);
+  }
+
+  countRecall() {
+    this.recall = this.TP / (this.TP + this.FN);
+  }
+
+  countFMeasure() {
+    this.fMeasure = (2 * this.precision * this.recall) / (this.precision + this.recall);
+  }
 }

Front/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, APP_INITIALIZER } from '@angular/core';
 
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -17,9 +17,22 @@ import { GlobalConfig } from './common/globalConfig';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { TableModule } from 'primeng/table';
+
+import {InputTextModule} from 'primeng/inputtext';
+import {DropdownModule} from 'primeng/dropdown';
+import {ButtonModule} from 'primeng/button';
+import {PaginatorModule} from 'primeng/paginator';
+import {CalendarModule} from 'primeng/calendar';
 
 library.add(fas);
 
+const appInitializerFn = (appConfig: GlobalConfig) => {
+  return () => {
+    return appConfig.setEnvironments();
+  };
+};
+
 @NgModule({
   declarations: [
     AppComponent
@@ -32,12 +45,24 @@ library.add(fas);
     ReactiveFormsModule,
     BrowserAnimationsModule,
     FontAwesomeModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    PaginatorModule,
+    ButtonModule,
+    InputTextModule,
+    DropdownModule,
+    CalendarModule,
+    TableModule,
   ],
   providers: [
     ApiHelper,
     ConfigService,
-    GlobalConfig
+    GlobalConfig,
+    {
+      provide: APP_INITIALIZER,
+      useFactory: appInitializerFn,
+      multi: true,
+      deps: [GlobalConfig]
+    },
   ],
   bootstrap: [AppComponent]
 })

Front/src/app/models/match.ts

@@ -2,8 +2,8 @@ import { Team } from './team';
 
 export class Match {
 
-    public result: number;
+    public result?: number;
-    public date: string;
+    public date?: string;
     public teamsMatchStatistics1: Team;
     public teamsMatchStatistics2: Team;
 

Front/src/app/models/predictedMatch.ts

@@ -0,0 +1,14 @@
+export class PredictedMatch {
+
+    public id: number;
+    public result?: string;
+    public predictedResult?: string;
+    public predictedGoals?: string;
+    public season?: string;
+    public date?: string;
+    public teamName1?: string;
+    public teamName2?: string;
+
+    constructor() {}
+
+}

Front/src/app/services/apiHelper.ts

@@ -28,13 +28,10 @@ export class ApiHelper {
         return options;
     }
 
-    public getJson(urlPart, authorized = false): Observable<ApiResponse> {
+    public getJson(urlPart, authorized = false): Observable<any> {
         const url = urlPart;
         const options = this.generateRequestOptionsJSON(authorized);
-        return this.http.get(url, options).pipe(
+        return this.http.get(url, options);
-          map((res: Response) => res.json()),
-          catchError(this.handleError)
-        );
     }
 
     public postJson(urlPart, object, authorized = false): Observable<ApiResponse> {

Front/src/styles.css

@@ -16,6 +16,10 @@
     }
 }
 
+body .ui-paginator .ui-paginator-current {
+  line-height: 1.25em !important;
+}
+
 /* Globals */
 
 *, *:active, *:disabled, *:focus {
@@ -194,10 +198,14 @@ body {
 }
 
 .cover-container {
-  max-width: 115em;
+  /*max-width: 115em;*/
   margin: 0 auto;
 }
 
+.ui-calendar .ui-datepicker {
+  width: 200% !important;
+}
+
 /*
  * Header
  */