From 8f58f1bc827746e7169fb3da79f4efdbb2e006f7 Mon Sep 17 00:00:00 2001 From: Unknown Date: Sat, 12 Jan 2019 12:51:09 +0100 Subject: [PATCH] wykresy --- src/app/header/header.component.html | 35 +-- src/app/header/header.component.less | 20 +- .../status-list/status-list.component.html | 84 ++++++- .../status-list/status-list.component.less | 230 ++++++++++++++++++ src/app/status-list/status-list.component.ts | 84 ++++++- src/index.html | 2 + 6 files changed, 426 insertions(+), 29 deletions(-) diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 923e278..165f7ff 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,17 +1,22 @@ + + + \ No newline at end of file diff --git a/src/app/header/header.component.less b/src/app/header/header.component.less index ce78fcd..7d6063f 100644 --- a/src/app/header/header.component.less +++ b/src/app/header/header.component.less @@ -28,6 +28,7 @@ .flag { outline: none !important; cursor: pointer; + text-align:center; .flag-img { width: 28px; @@ -36,6 +37,8 @@ position: relative; display: inline-block; outline: none !important; + + .active { border-bottom: 1px solid black; @@ -43,13 +46,14 @@ } 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; + } + + } + } +} \ No newline at end of file diff --git a/src/app/status-list/status-list.component.html b/src/app/status-list/status-list.component.html index 3babefd..61ba777 100644 --- a/src/app/status-list/status-list.component.html +++ b/src/app/status-list/status-list.component.html @@ -1,5 +1,81 @@ -

Lista urządzeń

+
+Wybierz urządzenie: +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
- + + + + + + + + + +
+
+

+ - Playstation - +

+ +

+ Status: {{status}} + Zajęte +

+

+ Zajęte od: 23 min + +

+ +
+
+ {{status}} +
+
+
+
+

+ Statystyki szczegółowe: +

+
    + +

    Średni czas gry: 23 min

    + + Przewidywane zakończenie: 10 min + +
+
+
+
+
+ +
+
+ +
+
+ \ No newline at end of file diff --git a/src/app/status-list/status-list.component.less b/src/app/status-list/status-list.component.less index e69de29..74f3107 100644 --- a/src/app/status-list/status-list.component.less +++ b/src/app/status-list/status-list.component.less @@ -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; + } + } + } +} + diff --git a/src/app/status-list/status-list.component.ts b/src/app/status-list/status-list.component.ts index 163381d..cb87aaf 100644 --- a/src/app/status-list/status-list.component.ts +++ b/src/app/status-list/status-list.component.ts @@ -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); - }); - } + } diff --git a/src/index.html b/src/index.html index 87d768a..0715619 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,8 @@ + +