This commit is contained in:
marcin-szczepanski 2020-05-24 18:14:34 +02:00
parent b5c24a47ef
commit 310a27f385
9 changed files with 398 additions and 16 deletions

View File

@ -28,7 +28,13 @@
"./node_modules/primeng/resources/primeng.min.css", "./node_modules/primeng/resources/primeng.min.css",
"./node_modules/primeicons/primeicons.css", "./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/luna-blue/theme.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": [] "scripts": []
}, },

View File

@ -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;
}
}

View File

@ -6,6 +6,87 @@
</header> </header>
<main role="main" class="inner cover"> <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> </main>
</div> </div>

View File

@ -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({ @Component({
selector: 'app-root', selector: 'app-root',
@ -8,11 +14,107 @@ import { Component, OnInit } from '@angular/core';
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
title = 'EkstraklasaPrzewidywanieWynikow'; 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() { onActivate() {
window.scroll(0, 0); 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);
}
} }

View File

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

View File

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

View File

@ -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() {}
}

View File

@ -28,13 +28,10 @@ export class ApiHelper {
return options; return options;
} }
public getJson(urlPart, authorized = false): Observable<ApiResponse> { public getJson(urlPart, authorized = false): Observable<any> {
const url = urlPart; const url = urlPart;
const options = this.generateRequestOptionsJSON(authorized); 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> { public postJson(urlPart, object, authorized = false): Observable<ApiResponse> {

View File

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