src/app/header/header.component.html

@@ -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
+                <img src="/assets/img/logo.png" routerLink="/" class="logo-img" alt="logo">
-          src="/assets/img/logo.png"
-          routerLink="/"
-          class="logo-img"
-          alt="logo"
-        />
             </a>
         </div>
-    <div class="col-md-5 col-xs-5">
+        <div class="battery col-md-3 col-xs-3">
-      <p><span matBadge="4" matBadgeOverlap="false">Status serwerals</span></p>
+            <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> -->
+ 

src/app/header/header.component.less

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

src/app/status-list/status-list.component.html

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

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

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

src/index.html

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