This commit is contained in:
Unknown 2019-01-12 12:51:09 +01:00
parent ae91beb640
commit 8f58f1bc82
6 changed files with 426 additions and 29 deletions

View File

@ -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> -->

View File

@ -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;
@ -36,6 +37,8 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
outline: none !important; outline: none !important;
.active { .active {
border-bottom: 1px solid black; border-bottom: 1px solid black;
@ -43,13 +46,14 @@
} }
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;
}
}
}
}

View File

@ -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 *ngFor="let key of statusesKeys">
Status: {{ statuses[key] == "1.00" ? "Zajete" : "Wolne" }}
</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>

View File

@ -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;
}
}
}
}

View File

@ -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);
});
}
} }

View File

@ -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>