pull request #1
@ -1,17 +1,22 @@
|
||||
<nav class="navbar">
|
||||
<div class="row">
|
||||
<div class="logo col-md-4 col-xs-5">
|
||||
<div class="logo col-md-9 col-xs-9">
|
||||
<a routerLinkActive="/">
|
||||
<img
|
||||
src="/assets/img/logo.png"
|
||||
routerLink="/"
|
||||
class="logo-img"
|
||||
alt="logo"
|
||||
/>
|
||||
<img src="/assets/img/logo.png" routerLink="/" class="logo-img" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-5 col-xs-5">
|
||||
<p><span matBadge="4" matBadgeOverlap="false">Status serwerals</span></p>
|
||||
<div class="battery col-md-3 col-xs-3">
|
||||
<img src="/assets/img/battery.png" class="battery-img" alt="battery">
|
||||
<div class="battery-percent">
|
||||
<span>98</span>
|
||||
<span>%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
<!-- <p><span matBadge="4" matBadgeOverlap="false">Status serwerals</span></p> -->
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
.flag {
|
||||
outline: none !important;
|
||||
cursor: pointer;
|
||||
text-align:center;
|
||||
|
||||
.flag-img {
|
||||
width: 28px;
|
||||
@ -37,19 +38,22 @@
|
||||
display: inline-block;
|
||||
outline: none !important;
|
||||
|
||||
|
||||
|
||||
.active {
|
||||
border-bottom: 1px solid black;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 15px;
|
||||
|
||||
font-weight: 300;
|
||||
color: #000000;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
span:hover {
|
||||
opacity: 0.5;
|
||||
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 { Observable } from "rxjs";
|
||||
import { Time } from "@angular/common";
|
||||
import {Chart} from 'chart.js';
|
||||
|
||||
@Component({
|
||||
selector: "app-status-list",
|
||||
@ -11,7 +12,80 @@ import { Time } from "@angular/common";
|
||||
export class StatusListComponent implements OnInit {
|
||||
//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) {}
|
||||
|
||||
readSensors = data => {
|
||||
@ -22,13 +96,5 @@ export class StatusListComponent implements OnInit {
|
||||
//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">
|
||||
<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>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user