Frontend
This commit is contained in:
marcin-szczepanski
parent
b5c24a47ef
commit
310a27f385
@ -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": []
|
||||
},
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]
|
||||
})
|
||||
|
||||
@ -2,8 +2,8 @@ import { Team } from './team';
|
||||
|
||||
export class Match {
|
||||
|
||||
public result: number;
|
||||
public date: string;
|
||||
public result?: number;
|
||||
public date?: string;
|
||||
public teamsMatchStatistics1: Team;
|
||||
public teamsMatchStatistics2: Team;
|
||||
|
||||
|
||||
14
Front/src/app/models/predictedMatch.ts
Normal file
14
Front/src/app/models/predictedMatch.ts
Normal 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() {}
|
||||
|
||||
}
|
||||
@ -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(
|
||||
map((res: Response) => res.json()),
|
||||
catchError(this.handleError)
|
||||
);
|
||||
return this.http.get(url, options);
|
||||
}
|
||||
|
||||
public postJson(urlPart, object, authorized = false): Observable<ApiResponse> {
|
||||
|
||||
@ -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
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user