121 lines
3.0 KiB
TypeScript
121 lines
3.0 KiB
TypeScript
import { Component, OnInit } from "@angular/core";
|
|
import { StatusService } from "../shared/status/status.service";
|
|
import { Observable } from "rxjs";
|
|
import { Time } from "@angular/common";
|
|
import { Chart } from "chart.js";
|
|
|
|
@Component({
|
|
selector: "app-status-list",
|
|
templateUrl: "./status-list.component.html",
|
|
styleUrls: ["./status-list.component.less"]
|
|
})
|
|
export class StatusListComponent implements OnInit {
|
|
//statuses: {} = {};
|
|
//statusesKeys = Object.keys(this.statuses);
|
|
LineChart = [];
|
|
BarChart = [];
|
|
|
|
devices = [];
|
|
activeDevice = { name: "", lastStatus: "", ip: "", _id: "" };
|
|
|
|
time = 0;
|
|
|
|
ngOnInit() {
|
|
this.statusService.getDB().subscribe(data => {
|
|
this.devices = data;
|
|
this.activeDevice = this.devices[0];
|
|
this.statusService.getStatus(this.activeDevice._id).subscribe(status => {
|
|
const index = status.findIndex(item => {
|
|
return item.value != status[0].value;
|
|
});
|
|
const newStatus = status.splice(0, index);
|
|
const first = new Date(newStatus[0].time).getTime();
|
|
const last = new Date(newStatus[newStatus.length - 1].time).getTime();
|
|
const time = first - last;
|
|
this.time = time / 1000;
|
|
console.log(time);
|
|
});
|
|
});
|
|
setInterval(
|
|
() =>
|
|
this.statusService.getDB().subscribe(data => {
|
|
this.devices = data;
|
|
}),
|
|
1000
|
|
);
|
|
|
|
this.showChart();
|
|
}
|
|
|
|
showChart() {
|
|
this.LineChart = new Chart("lineChart", {
|
|
type: "line",
|
|
data: {
|
|
labels: ["8:00", "10:00", "12:00", "14:00", "16:00"],
|
|
datasets: [
|
|
{
|
|
label: "Ruch w ciągu dnia",
|
|
data: [6, 7, 8, 5, 4],
|
|
fill: false,
|
|
lineTension: 0.2,
|
|
borderColor: "rgba(75,192,192,0.6)",
|
|
borderWidth: 1
|
|
}
|
|
]
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
]
|
|
}
|
|
});
|
|
|
|
this.BarChart = new Chart("barChart", {
|
|
type: "bar",
|
|
data: {
|
|
labels: ["Jan", "Feb", "March", "Apr", "May"],
|
|
datasets: [
|
|
{
|
|
label: "Rozegranych gier",
|
|
data: [60, 70, 80, 50, 40],
|
|
fill: true,
|
|
lineTension: 0.2,
|
|
borderColor: "white",
|
|
borderWidth: 1,
|
|
backgroundColor: [
|
|
"rgba(255,99,132,0.6)",
|
|
"rgba(54,162,235,0.6)",
|
|
"rgba(255,206,86,0.6)",
|
|
"rgba(75,192,192,0.6)",
|
|
"rgba(153,102,255,0.6)"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
ticks: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
]
|
|
}
|
|
});
|
|
}
|
|
|
|
constructor(private statusService: StatusService) {}
|
|
|
|
readSensors = data => {
|
|
console.log(data);
|
|
//const parsedData = data.split(",");
|
|
//this.statuses = { ...this.statuses, [parsedData[0]]: parsedData[1] };
|
|
//this.statusesKeys = Object.keys(this.statuses);
|
|
//this.statuses = [JSON.parse(data)];
|
|
};
|
|
}
|