144 lines
3.6 KiB
TypeScript
144 lines
3.6 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: "" };
|
|
activeID = 0;
|
|
time = 0;
|
|
|
|
Math: any;
|
|
|
|
ngOnInit() {
|
|
this.statusService.getDB().subscribe(data => {
|
|
this.devices = data;
|
|
this.onChangeDevice(0);
|
|
});
|
|
setInterval(() => {
|
|
this.statusService.getDB().subscribe(data => {
|
|
this.devices = data;
|
|
this.onChangeDevice(this.activeID);
|
|
});
|
|
}, 5000);
|
|
|
|
this.showChart();
|
|
}
|
|
|
|
onChangeDevice = (index: number) => {
|
|
this.activeID = index;
|
|
|
|
this.activeDevice = this.devices[index];
|
|
//console.log(this.activeDevice);
|
|
this.statusService.getStatus(this.activeDevice._id).subscribe(status => {
|
|
let i = status.findIndex(item => {
|
|
return item.value != status[0].value;
|
|
});
|
|
//console.log(i);
|
|
let newStatus;
|
|
if (i == -1) {
|
|
newStatus = status;
|
|
} else {
|
|
newStatus = status.splice(0, i);
|
|
}
|
|
const first = Date.now(); //new Date(newStatus[0].time).getTime();
|
|
const last = new Date(newStatus[0].time).getTime(); //new Date(newStatus[newStatus.length - 1].time).getTime();
|
|
const time = first - last;
|
|
this.time = time / 1000;
|
|
if (
|
|
this.activeDevice.lastStatus == "0" &&
|
|
this.time < 10 &&
|
|
newStatus[1].value == "1"
|
|
) {
|
|
this.activeDevice.lastStatus = "1";
|
|
}
|
|
console.log(this.time);
|
|
});
|
|
};
|
|
|
|
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) {
|
|
this.Math = Math;
|
|
}
|
|
|
|
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)];
|
|
};
|
|
}
|