still minor changes

src/app/admin/admin.component.html

@@ -59,7 +59,7 @@
           </mat-form-field>
         </div>
         <div class="example-button-row">
-          <button mat-flat-button color="accent">Usuń urządzenie</button>
+          <button mat-flat-button color="warn">Usuń urządzenie</button>
         </div>
       </form>
     </div>

src/app/admin/admin.component.ts

@@ -3,6 +3,7 @@ import { FormControl } from "@angular/forms";
 import { HttpClient } from "@angular/common/http";
 import { Observable } from "rxjs/Observable";
 import { StatusService } from "../shared/status/status.service";
+import { UserService } from "../user.service";
 import "rxjs/Rx";
 
 @Component({
@@ -18,7 +19,11 @@ export class AdminComponent implements OnInit {
   updateName = new FormControl("");
   updateID = new FormControl("");
 
-  constructor(private http: HttpClient, private statusService: StatusService) {}
+  constructor(
+    private http: HttpClient,
+    private user: UserService,
+    private statusService: StatusService
+  ) {}
 
   onAddDevice() {
     if (this.name.value.length > 0 && this.ip.value.length > 0) {
@@ -47,7 +52,7 @@ export class AdminComponent implements OnInit {
   onUpdateDevice(device) {
     console.log(device);
     this.http
-      .put("http://localhost:3000/device/" + device.id, {
+      .put("http://192.168.8.101:3000/device/" + device.id, {
         name: device.name,
         ip: device.ip
       })

src/app/admin/form/form.component.html

@@ -1,5 +1,19 @@
-<form *ngIf="device" (ngSubmit)="onUpdateDevice(device._id)">
+<form
-  <input type="text" [value]="device.name" [formControl]="name" />
+  class="example-form"
-  <input type="text" [value]="device.ip" [formControl]="ip" />
+  *ngIf="device"
-  <button>Edycja</button>
+  (ngSubmit)="onUpdateDevice(device._id)"
+>
+  <input
+    type="text"
+    class="input-edit"
+    [value]="device.name"
+    [formControl]="name"
+  />
+  <input
+    type="text"
+    class="input-edit"
+    [value]="device.ip"
+    [formControl]="ip"
+  />
+  <button mat-flat-button color="accent" class="button-edit">Edycja</button>
 </form>

src/app/admin/form/form.component.less

@@ -0,0 +1,5 @@
+.input-edit {
+  margin-right: 10px;
+  padding: 5px 8px;
+  margin-bottom: 10px;
+}

src/app/app.module.ts

@@ -49,8 +49,56 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { FormComponent } from "./admin/form/form.component";
 import { LoginComponent } from "./login/login.component";
 import { UserService } from "./user.service";
+import { RouterModule, Routes } from "@angular/router";
+import { AuthguardGuard } from "./authguard.guard";
+
+const appRoutes: Routes = [
+  {
+    path: "",
+    component: LoginComponent
+  },
+  {
+    path: "admin",
+    component: AdminComponent,
+    canActivate: [AuthguardGuard]
+  }
+];
 
 @NgModule({
+  exports: [
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule
+  ],
   declarations: [
     AppComponent,
     StatusListComponent,
@@ -60,6 +108,7 @@ import { UserService } from "./user.service";
     LoginComponent
   ],
   imports: [
+    RouterModule.forRoot(appRoutes),
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
@@ -78,7 +127,7 @@ import { UserService } from "./user.service";
     MatFormFieldModule,
     MatInputModule
   ],
-  providers: [StatusService],
+  providers: [StatusService, UserService, AuthguardGuard],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/authguard.guard.ts

@@ -10,7 +10,7 @@ import { UserService } from "./user.service";
 @Injectable({
   providedIn: "root"
 })
-export class AuthgardGuard implements CanActivate {
+export class AuthguardGuard implements CanActivate {
   constructor(private user: UserService) {}
   canActivate(
     next: ActivatedRouteSnapshot,

src/app/header/header.component.html

@@ -2,15 +2,15 @@
   <div class="row">
     <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>
-       
-    
 </nav>
 
 <!--  <p><span matBadge="4" matBadgeOverlap="false">Status serwerals</span></p> -->
- 

src/app/login/login.component.ts

@@ -16,7 +16,7 @@ export class LoginComponent implements OnInit {
     var username = e.target.elements[0].value;
     var password = e.target.elements[1].value;
 
-    if (username == "admin" && password == "admin") {
+    if (username == "cap_login" && password == "cap_password_123") {
       this.user.setUserLoggedIn();
       this.router.navigate(["admin"]);
       this.statusLog = 1;

src/app/shared/status/status.service.ts

@@ -10,8 +10,8 @@ export class StatusService {
   // private url_pilkarzyki1 =
   //   "http://localhost:3000/chillroom-server?ip=192.168.8.107";
 
-  private url_db = "http://localhost:3000/all";
+  private url_db = "http://192.168.8.101:3000/all";
-  private status_url = "http://localhost:3000/status/";
+  private status_url = "http://192.168.8.101:3000/status/";
 
   constructor(private http: HttpClient) {}
 

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

@@ -40,15 +40,14 @@
 
 <div class="row machine-row">
   <div class="col-md-5  col-xs-11">
-    <p class="text-center machine-text">
+    <p class="machine-status-title">{{ activeDevice.name }}</p>
-      - <span>{{ activeDevice.name }}</span> -
-    </p>
-
     <p class="machine-status">
       Status:
       <img
         [src]="
           activeDevice.lastStatus == 1
+            ? '../assets/img/busy.png'
+            : activeDevice.lastStatus == 2
             ? '../assets/img/busy.png'
             : '../assets/img/free.png'
         "
@@ -90,13 +89,27 @@
     <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>Średni czas gry: </span>
-        ><span> min</span><br />
+        <span class="boldMe"
+          >{{
+            average > 60
+              ? this.Math.floor(average / 60)
+              : this.Math.floor(average)
+          }}
+          {{ average > 60 ? "min" : "sek" }}</span
+        ><br />
       </p>
 
+      <div *ngIf="this.activeDevice.lastStatus == 1">
         <span>Przewidywane zakończenie: </span>
-      <span class="boldMe">10</span
+        <span class="boldMe">{{
-      ><span> min</span>
+          average - time < 0
+            ? "Zaraz koniec !"
+            : average - time > 60
+            ? this.Math.floor((average - time) / 60)
+            : this.Math.floor(average - time)
+        }}</span>
+      </div>
     </ul>
   </div>
 </div>
@@ -104,3 +117,22 @@
   <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>
+<footer>
+  <div class="row">
+    <div class="logo col-md-6">
+      <a routerLinkActive="/">
+        <img
+          src="/assets/img/logo.png"
+          routerLink="/"
+          class="logo-img"
+          alt="logo"
+        />
+      </a>
+    </div>
+    <div class="col-md-6" style="text-align: right">
+      <div class="example-button-row">
+        <button mat-flat-button color="primary">Instrukcja obsługi</button>
+      </div>
+    </div>
+  </div>
+</footer>

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

@@ -53,6 +53,26 @@ table {
     }
   }
 
+  .machine-status-title {
+    color: #000000;
+    font-size: 33px;
+    font-weight: 400;
+    margin-left: 30px;
+    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;
@@ -200,3 +220,76 @@ table {
 .example-button-row a {
   margin-right: 8px;
 }
+
+footer {
+  margin-bottom: 50px;
+  .row {
+    margin-top: 100px;
+    margin-bottom: 50px;
+    span {
+      font-size: 20px;
+      font-weight: 200;
+      color: #000000;
+    }
+
+    .logo-img {
+      width: 200px;
+      margin-top: -1px;
+      cursor: pointer;
+    }
+    .battery-img {
+      width: 13px;
+      margin-top: -6px;
+      position: relative;
+    }
+    .battery {
+      .battery-percent {
+        position: relative;
+        display: inline-block;
+        margin-left: 10px;
+      }
+    }
+    .flag {
+      outline: none !important;
+      cursor: pointer;
+      text-align: center;
+
+      .flag-img {
+        width: 28px;
+      }
+      .lang-change {
+        position: relative;
+        display: inline-block;
+        outline: none !important;
+
+        .active {
+          border-bottom: 1px solid black;
+          outline: none !important;
+        }
+
+        span {
+          font-weight: 300;
+          color: #000000;
+          margin-left: 5px;
+          margin-right: 5px;
+          outline: none !important;
+        }
+
+        span:hover {
+          opacity: 0.5;
+          cursor: pointer;
+          outline: none !important;
+        }
+      }
+    }
+    .menu-img {
+      cursor: pointer;
+      float: right;
+      margin-top: 5px;
+    }
+  }
+  .example-button-row button,
+  .example-button-row a {
+    margin-right: 8px;
+  }
+}

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

@@ -19,8 +19,35 @@ export class StatusListComponent implements OnInit {
   activeDevice = { name: "", lastStatus: "", ip: "", _id: "" };
   activeID = 0;
   time = 0;
-
+  days = [0, 0, 0, 0, 0, 0, 0];
+  average = 0;
   Math: any;
+  hours = [
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0
+  ];
 
   ngOnInit() {
     this.statusService.getDB().subscribe(data => {
@@ -43,10 +70,89 @@ export class StatusListComponent implements OnInit {
     this.activeDevice = this.devices[index];
     //console.log(this.activeDevice);
     this.statusService.getStatus(this.activeDevice._id).subscribe(status => {
+      let tempStatus = [...status];
+      tempStatus.reverse();
       let i = status.findIndex(item => {
         return item.value != status[0].value;
       });
-      //console.log(i);
+      this.days = [0, 0, 0, 0, 0, 0, 0];
+      status.forEach(s => {
+        if (s.value === "1") {
+          const time = new Date(s.time);
+          //console.log(time);
+          const index = time.getDay();
+          this.days[index] = this.days[index] + 1;
+        }
+      });
+      let count = 0;
+      let allTime = 0;
+      status.reduce((prev, curr) => {
+        if (prev.value === "1") {
+          count++;
+          allTime +=
+            new Date(prev.time).valueOf() - new Date(curr.time).valueOf();
+        }
+        return curr;
+      });
+      this.average = allTime / count / 1000;
+
+      this.hours = [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+      ];
+      const now = new Date();
+      now.setDate(now.getDate());
+      now.setHours(8);
+      now.setMinutes(0);
+      now.setSeconds(0);
+      //console.log(now);
+      const index = tempStatus.findIndex(
+        s => new Date(s.time).valueOf() > now.valueOf()
+      );
+      let todayStatus = tempStatus.slice(index);
+      //console.log(todayStatus);
+      todayStatus.reduce((prev, curr) => {
+        if (prev.value === "1") {
+          const prevTime = new Date(prev.time);
+          const currTime = new Date(curr.time);
+          //console.log(prevTime.getHours());
+          if (prevTime.getHours() !== currTime.getHours()) {
+            this.hours[prevTime.getHours() - 8] +=
+              (60 - prevTime.getMinutes()) * 60 * 1000;
+            this.hours[currTime.getHours() - 8] +=
+              currTime.getMinutes() * 60 * 1000;
+          } else {
+            this.hours[prevTime.getHours() - 8] +=
+              currTime.valueOf() - prevTime.valueOf();
+          }
+        }
+        return curr;
+      });
+      this.hours = this.hours.map(h => h / 1000 / 60);
+      //console.log(this.hours);
+      this.showChart();
       let newStatus;
       if (i == -1) {
         newStatus = status;
@@ -72,11 +178,25 @@ export class StatusListComponent implements OnInit {
     this.LineChart = new Chart("lineChart", {
       type: "line",
       data: {
-        labels: ["8:00", "10:00", "12:00", "14:00", "16:00"],
+        labels: [
+          "8:00",
+          "9:00",
+          "10:00",
+          "11:00",
+          "12:00",
+          "13:00",
+          "14:00",
+          "15:00",
+          "16:00",
+          "17:00",
+          "18:00",
+          "19:00",
+          "20:00"
+        ],
         datasets: [
           {
             label: "Ruch w ciągu dnia",
-            data: [6, 7, 8, 5, 4],
+            data: this.hours,
             fill: false,
             lineTension: 0.2,
             borderColor: "rgba(75,192,192,0.6)",
@@ -92,17 +212,20 @@ export class StatusListComponent implements OnInit {
             }
           }
         ]
+      },
+      options: {
+        animation: false
       }
     });
 
     this.BarChart = new Chart("barChart", {
       type: "bar",
       data: {
-        labels: ["Jan", "Feb", "March", "Apr", "May"],
+        labels: ["Pon", "Wto", "Śro", "Czwa", "Pia", "Sob", "Niedz"],
         datasets: [
           {
-            label: "Rozegranych gier",
+            label: "Liczba rozegranych gier",
-            data: [60, 70, 80, 50, 40],
+            data: this.days,
             fill: true,
             lineTension: 0.2,
             borderColor: "white",
@@ -112,7 +235,9 @@ export class StatusListComponent implements OnInit {
               "rgba(54,162,235,0.6)",
               "rgba(255,206,86,0.6)",
               "rgba(75,192,192,0.6)",
-              "rgba(153,102,255,0.6)"
+              "rgba(153,102,255,0.6)",
+              "rgba(255,99,132,0.6)",
+              "rgba(54,162,235,0.6)"
             ]
           }
         ]
@@ -125,6 +250,9 @@ export class StatusListComponent implements OnInit {
             }
           }
         ]
+      },
+      options: {
+        animation: false
       }
     });
   }

src/index.html

@@ -1,14 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Client</title>
-  <base href="/">
+    <base href="/" />
-
-  <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">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
     <app-root></app-root>