@ -8,6 +8,11 @@ import {AuthService} from "../../services/auth.service";
import { Player } from "../../entities/servers/Player" ; import { Player } from "../../entities/servers/Player" ;
import { MatDialog } from "@angular/material/dialog" ; import { MatDialog } from "@angular/material/dialog" ;
import { SimpleActionDialog } from "../internal-components/dialogs/simple-action-dialog.component" ; import { SimpleActionDialog } from "../internal-components/dialogs/simple-action-dialog.component" ;
import { GraphData } from "../../entities/graph/GraphData" ;
import { Chart } from "chart.js/auto" ;
import { Period } from "../statistic-page/statistic-page.component" ;
import { GraphService } from "../../services/graph.service" ;
import { ServerService } from "../../services/server.service" ;
@Component ( { @Component ( {
selector : 'app-servers-page' , selector : 'app-servers-page' ,
@ -18,12 +23,40 @@ export class ServersPageComponent implements OnInit {
servers : { [ srv_name : string ] : Server | any } = { } ; servers : { [ srv_name : string ] : Server | any } = { } ;
constructor ( private servers_ws :WebsocketServersListenerService , //хуйня для графиков
serverList : { name : string , server_id : string } [ ] = [
{ name : 'Выбрать все' , server_id : '%' }
] ;
loading : boolean = false ;
init : boolean = true ;
periods :Period [ ] = [
{ name : 'По дням' , value : 'days' } ,
{ name : 'По минутам' , value : 'minutes' }
] ;
selectedPeriod :Period = this . periods [ 0 ] ;
days :number [ ] = [ 1 , 7 , 14 , 21 , 30 , 60 , 90 , 180 ] ;
selectedDays :number = 30 ;
minutes :number [ ] = [ 1 , 5 , 10 , 15 , 30 ]
selectedMinute :number = 5 ;
selectedServer : { name : string , server_id : string } = this . serverList [ 0 ] ;
chart ! : Chart ;
constructor ( private graphService : GraphService ,
private serverService : ServerService ,
private servers_ws :WebsocketServersListenerService ,
public actionService : ActionService , public actionService : ActionService ,
public tf2data : Tf2dataService , public tf2data : Tf2dataService ,
public authService : AuthService ) { } public authService : AuthService ) { }
ngOnInit ( ) : void { ngOnInit ( ) : void {
this . getServers ( ) ;
this . servers_ws . getServers ( ) . subscribe ( ( r ) = > { this . servers_ws . getServers ( ) . subscribe ( ( r ) = > {
this . setServers ( r . servers ) ; this . setServers ( r . servers ) ;
} ) ; } ) ;
@ -68,4 +101,55 @@ export class ServersPageComponent implements OnInit {
serversExists ( ) : boolean { serversExists ( ) : boolean {
return Object . keys ( this . servers ) . length > 0 ; return Object . keys ( this . servers ) . length > 0 ;
} }
getServers() {
this . serverService . getServers ( ) . subscribe (
( res ) = > {
const keys = Object . keys ( res . data ) ;
for ( const key of keys ) {
this . serverList . push ( { name : res.data [ key ] . name , server_id : key } ) ;
}
}
)
}
getGraph() {
if ( this . loading ) {
return ;
}
this . init = false ;
this . loading = true ;
console . log ( this . selectedPeriod , this . selectedMinute , this . selectedDays , this . selectedServer ) ;
switch ( this . selectedPeriod . value ) {
case 'days' : {
this . graphService . getOnlineStatsOfDays ( this . selectedDays , this . selectedServer ? this . selectedServer . server_id : '%' ) . subscribe (
( d ) = > this . processingData ( GraphData . fromStatsOfPeakOfDay ( d . reverse ( ) , "red" ) ) ,
( err ) = > this . actionService . showSnack ( 'Произошла ошибка во время загрузки данных, попробуй позже' ) ,
( ) = > this . loading = false
) ; break ;
}
case 'minutes' : {
this . graphService . getOnlineStatsOfMinutes ( this . selectedMinute , this . selectedDays , this . selectedServer ? this . selectedServer . server_id : '%' ) . subscribe (
( d ) = > this . processingData ( GraphData . fromStatsOfPeakOfPerFiveMinutes ( d . reverse ( ) , "red" ) ) ,
( err ) = > this . actionService . showSnack ( 'Произошла ошибка во время загрузки данных, попробуй позже' ) ,
( ) = > this . loading = false
) ; break ;
}
}
}
processingData ( data :GraphData , reversed : boolean = true ) {
if ( this . chart )
this . chart . destroy ( ) ;
this . chart = new Chart ( "MyChart" , {
type : "line" ,
data : {
labels : data.labels ,
datasets : data.data
}
} ) ;
}
} }
gsd
5 months ago
