wykresy
This commit is contained in:
Unknown
parent
ae91beb640
commit
8f58f1bc82
@ -1,17 +1,22 @@
|
|||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="logo col-md-4 col-xs-5">
|
<div class="logo col-md-9 col-xs-9">
|
||||||
<a routerLinkActive="/">
|
<a routerLinkActive="/">
|
||||||
<img
|
<img src="/assets/img/logo.png" routerLink="/" class="logo-img" alt="logo">
|
||||||
src="/assets/img/logo.png"
|
</a>
|
||||||
routerLink="/"
|
</div>
|
||||||
class="logo-img"
|
<div class="battery col-md-3 col-xs-3">
|
||||||
alt="logo"
|
<img src="/assets/img/battery.png" class="battery-img" alt="battery">
|
||||||
/>
|
<div class="battery-percent">
|
||||||
</a>
|
<span>98</span>
|
||||||
</div>
|
<span>%</span>
|
||||||
<div class="col-md-5 col-xs-5">
|
</div>
|
||||||
<p><span matBadge="4" matBadgeOverlap="false">Status serwerals</span></p>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<!-- <p><span matBadge="4" matBadgeOverlap="false">Status serwerals</span></p> -->
|
||||||
|
|
||||||
@ -28,6 +28,7 @@
|
|||||||
.flag {
|
.flag {
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-align:center;
|
||||||
|
|
||||||
.flag-img {
|
.flag-img {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
@ -37,19 +38,22 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
border-bottom: 1px solid black;
|
border-bottom: 1px solid black;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
outline: none !important;
|
outline: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
span:hover {
|
span:hover {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -64,3 +68,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.navbar {
|
||||||
|
.row {
|
||||||
|
.logo-img{
|
||||||
|
width:140px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-size:15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,81 @@
|
|||||||
<h2>Lista urządzeń</h2>
|
<div class="lists">
|
||||||
|
<span>Wybierz urządzenie:</span>
|
||||||
|
</div>
|
||||||
|
<div class="machine-list">
|
||||||
|
<div class="row row-list">
|
||||||
|
<div class="col-md-3 col-xs-3">
|
||||||
|
<button class="room-button" style="color: green; border-color: green;">
|
||||||
|
PLAYSTATION
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 col-xs-3">
|
||||||
|
<button class="room-button">
|
||||||
|
PIŁKARZYKI 1
|
||||||
|
</button >
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 col-xs-3">
|
||||||
|
<button class="room-button">
|
||||||
|
PIŁKARZYKI 2
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 col-xs-3">
|
||||||
|
<button class="room-button">
|
||||||
|
DART
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row machine-row">
|
||||||
|
<div class="col-md-5 col-xs-11">
|
||||||
|
<p class="text-center machine-text">
|
||||||
|
- <span>Playstation</span> -
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="machine-status">
|
||||||
|
Status: <img src="../assets/img/busy.png" alt="{{status}}">
|
||||||
|
<span>Zajęte</span>
|
||||||
|
</p>
|
||||||
|
<p class="machine-status2">
|
||||||
|
Zajęte od: <span>23 min</span>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="col-md-7 col-xs-1">
|
||||||
|
<img class="machine-image" src="../assets/img/football2.jpg" alt="{{status}}">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row statistics-row">
|
||||||
|
<div class="col-md-6 stat-wrapper">
|
||||||
|
<p class="stat-text">
|
||||||
|
<span>Statystyki szczegółowe:</span>
|
||||||
|
</p>
|
||||||
|
<ul class="list-group">
|
||||||
|
|
||||||
|
<p style="margin-bottom:15px"> <span>Średni czas gry: </span> <span class="boldMe">23</span><span> min</span><br/></p>
|
||||||
|
|
||||||
|
<span>Przewidywane zakończenie: </span> <span class="boldMe">10</span><span> min</span>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div id="tabel" class="col-md-6">
|
||||||
|
<canvas id="lineChart"></canvas>
|
||||||
|
</div>
|
||||||
|
<div id="tabel" class="col-md-6">
|
||||||
|
<canvas id="barChart"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!--<div *ngFor="let key of statusesKeys">
|
|
||||||
Status: {{ statuses[key] == "1.00" ? "Zajete" : "Wolne" }}
|
|
||||||
</div>-->
|
|
||||||
|
|||||||
@ -0,0 +1,230 @@
|
|||||||
|
table{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.machine-row{
|
||||||
|
margin-top: 60px;
|
||||||
|
|
||||||
|
.machine-text{
|
||||||
|
|
||||||
|
color: #000000;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.machine-status{
|
||||||
|
color: #000000;
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top: 50px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
|
||||||
|
img{
|
||||||
|
width: 15px;
|
||||||
|
margin-top: -3px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
font-size: 24px;
|
||||||
|
margin-left: 15px;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.machine-status2{
|
||||||
|
color: #000000;
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top: 10px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
|
||||||
|
img{
|
||||||
|
width: 15px;
|
||||||
|
margin-top: -3px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span{
|
||||||
|
font-size: 24px;
|
||||||
|
margin-left: 15px;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.machine-image{
|
||||||
|
width: 230px;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-left:50px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.stat-wrapper {
|
||||||
|
|
||||||
|
margin-left: 30px;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 23px;
|
||||||
|
font-weight: 300;
|
||||||
|
|
||||||
|
.stat-text {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 300;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.button-use{
|
||||||
|
margin-left: 30px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boldMe{
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists{
|
||||||
|
text-align: center;
|
||||||
|
font-size:20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.machine-list{
|
||||||
|
margin-right:0px;
|
||||||
|
margin-top:60px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-list{
|
||||||
|
width:700px;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.room-button{
|
||||||
|
border-radius: 12px;
|
||||||
|
background-color: white;
|
||||||
|
border: solid 1px red;
|
||||||
|
color: red;
|
||||||
|
padding:10px;
|
||||||
|
width:120px;
|
||||||
|
margin-bottom:20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.room-button:hover{
|
||||||
|
-webkit-box-shadow:inset 0 0 0 2px #24a1fc;
|
||||||
|
box-shadow:inset 0 0 0 2px #24a1fc;
|
||||||
|
}
|
||||||
|
.room-button:active {
|
||||||
|
-webkit-box-shadow:inset 0 0 0 2px #24a1fc;
|
||||||
|
box-shadow:inset 0 0 0 2px #24a1fc;
|
||||||
|
}
|
||||||
|
.room-button:focus {
|
||||||
|
-webkit-box-shadow:inset 0 0 0 2px #24a1fc;
|
||||||
|
box-shadow:inset 0 0 0 2px #24a1fc;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 1000px) {
|
||||||
|
.machine-image{
|
||||||
|
margin-left:50px;
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.machine-row{
|
||||||
|
.machine-text{
|
||||||
|
font-size:30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.stat-wrapper{
|
||||||
|
.stat-text{
|
||||||
|
font-size:30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-3{
|
||||||
|
margin-left:-5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 700px) {
|
||||||
|
.row-list{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.room-button{
|
||||||
|
width:100px;
|
||||||
|
font-size:12px;
|
||||||
|
padding:3px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.machine-list{
|
||||||
|
margin-top:60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: 500px) {
|
||||||
|
table{
|
||||||
|
width:50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.room-button{
|
||||||
|
width:80px;
|
||||||
|
font-size:10px;
|
||||||
|
padding-top:10px;
|
||||||
|
padding-bottom:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.machine-row{
|
||||||
|
.machine-text{
|
||||||
|
font-size:24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.stat-wrapper{
|
||||||
|
.stat-text{
|
||||||
|
font-size:20px;
|
||||||
|
font-weight:600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.stat-wrapper{
|
||||||
|
.list-group{
|
||||||
|
span{
|
||||||
|
font-size:18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
|
|||||||
import { StatusService } from "../shared/status/status.service";
|
import { StatusService } from "../shared/status/status.service";
|
||||||
import { Observable } from "rxjs";
|
import { Observable } from "rxjs";
|
||||||
import { Time } from "@angular/common";
|
import { Time } from "@angular/common";
|
||||||
|
import {Chart} from 'chart.js';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "app-status-list",
|
selector: "app-status-list",
|
||||||
@ -11,7 +12,80 @@ import { Time } from "@angular/common";
|
|||||||
export class StatusListComponent implements OnInit {
|
export class StatusListComponent implements OnInit {
|
||||||
//statuses: {} = {};
|
//statuses: {} = {};
|
||||||
//statusesKeys = Object.keys(this.statuses);
|
//statusesKeys = Object.keys(this.statuses);
|
||||||
|
LineChart=[];
|
||||||
|
BarChart=[];
|
||||||
|
ngOnInit(){
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
setInterval(
|
||||||
|
() => this.statusService.getPilkarzyki1().subscribe(this.readSensors),
|
||||||
|
1000
|
||||||
|
);
|
||||||
|
this.statusService.getDB().subscribe(data => {
|
||||||
|
console.log(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
constructor(private statusService: StatusService) {}
|
constructor(private statusService: StatusService) {}
|
||||||
|
|
||||||
readSensors = data => {
|
readSensors = data => {
|
||||||
@ -22,13 +96,5 @@ export class StatusListComponent implements OnInit {
|
|||||||
//this.statuses = [JSON.parse(data)];
|
//this.statuses = [JSON.parse(data)];
|
||||||
};
|
};
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
setInterval(
|
|
||||||
() => this.statusService.getPilkarzyki1().subscribe(this.readSensors),
|
|
||||||
1000
|
|
||||||
);
|
|
||||||
this.statusService.getDB().subscribe(data => {
|
|
||||||
console.log(data);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,6 +7,8 @@
|
|||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-root></app-root>
|
<app-root></app-root>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user