edit works

dist/client/main.js

@@ -357,7 +357,7 @@ var AdminComponent = /** @class */ (function () {
         var _this = this;
         if (this.name.value.length > 0 && this.ip.value.length > 0) {
             this.http
-                .post("http://localhost:3000/device", {
+                .post("http://192.168.8.101:3000/device", {
                 name: this.name.value,
                 ip: this.ip.value
             })
@@ -371,7 +371,7 @@ var AdminComponent = /** @class */ (function () {
         var _this = this;
         if (this.ipDelete.value.length > 0) {
             this.http
-                .delete("http://localhost:3000/device/" + this.ipDelete.value)
+                .delete("http://192.168.8.101:3000/device/" + this.ipDelete.value)
                 .subscribe(function (data) {
                 _this.ipDelete.reset();
             });
@@ -642,11 +642,15 @@ __webpack_require__.r(__webpack_exports__);
 
 var StatusService = /** @class */ (function () {
     function StatusService(http) {
+        var _this = this;
         this.http = http;
         // private url_pilkarzyki1 =
         //   "http://localhost:3000/chillroom-server?ip=192.168.8.107";
-        this.url_db = "http://localhost:3000/all";
+        this.url_db = "http://192.168.8.101:3000/all";
-        this.status_url = "http://localhost:3000/status/";
+        this.status_url = "http://192.168.8.101:3000/status/";
+        this.getStatus = function (ip) {
+            return _this.http.get(_this.status_url + ip);
+        };
     }
     // getPilkarzyki1(): Observable<any> {
     //   return this.http.get(this.url_pilkarzyki1);
@@ -654,9 +658,6 @@ var StatusService = /** @class */ (function () {
     StatusService.prototype.getDB = function () {
         return this.http.get(this.url_db);
     };
-    StatusService.prototype.getStatus = function (ip) {
-        return this.http.get(this.status_url + ip);
-    };
     StatusService = tslib__WEBPACK_IMPORTED_MODULE_0__["__decorate"]([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Injectable"])({
             providedIn: "root"
@@ -677,7 +678,7 @@ var StatusService = /** @class */ (function () {
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = "<div class=\"lists\"><span>Wybierz urządzenie:</span></div>\n<div class=\"machine-list\">\n  <div class=\"row row-list\">\n    <div class=\"col-md-3 col-xs-3\" *ngFor=\"let device of devices\">\n      <button\n        class=\"room-button\"\n        [ngStyle]=\"{\n          color: 'black',\n          backgroundColor:\n            device.lastStatus == 1\n              ? 'red'\n              : device.lastStatus == 0\n              ? 'green'\n              : 'yellow',\n          borderColor:\n            device.lastStatus == 1\n              ? 'red'\n              : device.lastStatus == 0\n              ? 'green'\n              : 'yellow'\n        }\"\n      >\n        {{ device.name }}\n      </button>\n      <b>{{\n        device.lastStatus == 1\n          ? \"Zajęte\"\n          : device.lastStatus == 0\n          ? \"Wolne\"\n          : \"Brak połączenia z czujnikiem\"\n      }}</b>\n    </div>\n  </div>\n</div>\n\n<div class=\"row machine-row\">\n  <div class=\"col-md-5  col-xs-11\">\n    <p class=\"text-center machine-text\">\n      - <span>{{ activeDevice.name }}</span> -\n    </p>\n\n    <p class=\"machine-status\">\n      Status:\n      <img\n        [src]=\"\n          activeDevice.lastStatus == 1\n            ? '../assets/img/busy.png'\n            : '../assets/img/free.png'\n        \"\n        alt=\"\"\n      />\n      <span>{{ activeDevice.lastStatus == 1 ? \"Zajęte\" : \"Wolne\" }}</span>\n    </p>\n    <p *ngIf=\"activeDevice.lastStatus == 1\" class=\"machine-status2\">\n      Zajęte od: <span>{{ this.time }}</span>\n    </p>\n  </div>\n  <div class=\"col-md-7 col-xs-1\">\n    <img\n      class=\"machine-image\"\n      src=\"../assets/img/football2.jpg\"\n      alt=\"{{ status }}\"\n    />\n  </div>\n</div>\n<div class=\"row statistics-row\">\n  <div class=\"col-md-6 stat-wrapper\">\n    <p class=\"stat-text\"><span>Statystyki szczegółowe:</span></p>\n    <ul class=\"list-group\">\n      <p style=\"margin-bottom:15px\">\n        <span>Średni czas gry: </span> <span class=\"boldMe\">23</span\n        ><span> min</span><br />\n      </p>\n\n      <span>Przewidywane zakończenie: </span>\n      <span class=\"boldMe\">10</span\n      ><span> min</span>\n    </ul>\n  </div>\n</div>\n<div class=\"row\">\n  <div id=\"tabel\" class=\"col-md-6\"><canvas id=\"lineChart\"></canvas></div>\n  <div id=\"tabel\" class=\"col-md-6\"><canvas id=\"barChart\"></canvas></div>\n</div>\n"
+module.exports = "<div class=\"lists\"><span>Wybierz urządzenie:</span></div>\n<div class=\"machine-list\">\n  <div class=\"row row-list\">\n    <div\n      class=\"col-md-3 col-xs-3\"\n      *ngFor=\"let device of devices; let i = index\"\n      [attr.data-index]=\"i\"\n    >\n      <button\n        class=\"room-button\"\n        [ngStyle]=\"{\n          color: 'white',\n          backgroundColor:\n            device.lastStatus == 1\n              ? '#D13'\n              : device.lastStatus == 0\n              ? '#4CC355'\n              : '#5A17ED',\n          borderColor:\n            device.lastStatus == 1\n              ? '#D13'\n              : device.lastStatus == 0\n              ? '#4CC355'\n              : '#5A17ED'\n        }\"\n        (click)=\"onChangeDevice(i)\"\n      >\n        {{ device.name }}\n      </button>\n      <b>{{\n        device.lastStatus == 1\n          ? \"Zajęte\"\n          : device.lastStatus == 0\n          ? \"Wolne\"\n          : \"Brak połączenia z czujnikiem\"\n      }}</b>\n    </div>\n  </div>\n</div>\n\n<div class=\"row machine-row\">\n  <div class=\"col-md-5  col-xs-11\">\n    <p class=\"text-center machine-text\">\n      - <span>{{ activeDevice.name }}</span> -\n    </p>\n\n    <p class=\"machine-status\">\n      Status:\n      <img\n        [src]=\"\n          activeDevice.lastStatus == 1\n            ? '../assets/img/busy.png'\n            : '../assets/img/free.png'\n        \"\n        alt=\"\"\n      />\n      <span>{{\n        activeDevice.lastStatus == 1\n          ? \"Zajęte\"\n          : activeDevice.lastStatus == 0\n          ? \"Wolne\"\n          : \"Brak połączenia z czujnikiem\"\n      }}</span>\n    </p>\n    <p class=\"machine-status2\">\n      {{\n        activeDevice.lastStatus == 1\n          ? \"Zajęte\"\n          : activeDevice.lastStatus == 0\n          ? \"Wolne\"\n          : \"Brak połączenia z czujnikiem\"\n      }}\n      od:\n      <span\n        >{{ time > 60 ? this.Math.floor(time / 60) : this.Math.floor(time) }}\n        {{ time > 60 ? \"min\" : \"sek\" }}\n      </span>\n    </p>\n  </div>\n  <div class=\"col-md-7 col-xs-1\">\n    <img\n      class=\"machine-image\"\n      src=\"../assets/img/football2.jpg\"\n      alt=\"{{ status }}\"\n    />\n  </div>\n</div>\n<div class=\"row statistics-row\">\n  <div class=\"col-md-6 stat-wrapper\">\n    <p class=\"stat-text\"><span>Statystyki szczegółowe:</span></p>\n    <ul class=\"list-group\">\n      <p style=\"margin-bottom:15px\">\n        <span>Średni czas gry: </span> <span class=\"boldMe\">23</span\n        ><span> min</span><br />\n      </p>\n\n      <span>Przewidywane zakończenie: </span>\n      <span class=\"boldMe\">10</span\n      ><span> min</span>\n    </ul>\n  </div>\n</div>\n<div class=\"row\">\n  <div id=\"tabel\" class=\"col-md-6\"><canvas id=\"lineChart\"></canvas></div>\n  <div id=\"tabel\" class=\"col-md-6\"><canvas id=\"barChart\"></canvas></div>\n</div>\n"
 
 /***/ }),
 
@@ -713,6 +714,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var StatusListComponent = /** @class */ (function () {
     function StatusListComponent(statusService) {
+        var _this = this;
         this.statusService = statusService;
         //statuses: {} = {};
         //statusesKeys = Object.keys(this.statuses);
@@ -720,7 +722,32 @@ var StatusListComponent = /** @class */ (function () {
         this.BarChart = [];
         this.devices = [];
         this.activeDevice = { name: "", lastStatus: "", ip: "", _id: "" };
+        this.activeID = 0;
         this.time = 0;
+        this.onChangeDevice = function (index) {
+            _this.activeID = index;
+            _this.activeDevice = _this.devices[index];
+            //console.log(this.activeDevice);
+            _this.statusService.getStatus(_this.activeDevice._id).subscribe(function (status) {
+                var i = status.findIndex(function (item) {
+                    return item.value != status[0].value;
+                });
+                //console.log(i);
+                var newStatus;
+                if (i == -1) {
+                    newStatus = status;
+                }
+                else {
+                    newStatus = status.splice(0, i);
+                }
+                var first = new Date(newStatus[0].time).getTime();
+                var last = new Date(newStatus[newStatus.length - 1].time).getTime();
+                var time = first - last;
+                //console.log(this);
+                _this.time = time / 1000;
+                //console.log(this.time);
+            });
+        };
         this.readSensors = function (data) {
             console.log(data);
             //const parsedData = data.split(",");
@@ -728,29 +755,20 @@ var StatusListComponent = /** @class */ (function () {
             //this.statusesKeys = Object.keys(this.statuses);
             //this.statuses = [JSON.parse(data)];
         };
+        this.Math = Math;
     }
     StatusListComponent.prototype.ngOnInit = function () {
         var _this = this;
         this.statusService.getDB().subscribe(function (data) {
             _this.devices = data;
-            _this.activeDevice = _this.devices[0];
+            _this.onChangeDevice(0);
-            _this.statusService.getStatus(_this.activeDevice._id).subscribe(function (status) {
-                var index = status.findIndex(function (item) {
-                    return item.value != status[0].value;
-                });
-                var newStatus = status.splice(0, index);
-                var first = new Date(newStatus[0].time).getTime();
-                var last = new Date(newStatus[newStatus.length - 1].time).getTime();
-                var time = first - last;
-                _this.time = time / 1000;
-                console.log(time);
-            });
         });
         setInterval(function () {
-            return _this.statusService.getDB().subscribe(function (data) {
+            _this.statusService.getDB().subscribe(function (data) {
                 _this.devices = data;
+                _this.onChangeDevice(_this.activeID);
             });
-        }, 1000);
+        }, 5000);
         this.showChart();
     };
     StatusListComponent.prototype.showChart = function () {

src/app/admin/admin.component.html

@@ -64,4 +64,13 @@
       </form>
     </div>
   </div>
+  <div class="row">
+    <div class="col-md-6">
+      <app-form
+        *ngFor="let device of devices"
+        [device]="device"
+        (onUpdateDeviceEmit)="onUpdateDevice($event)"
+      ></app-form>
+    </div>
+  </div>
 </div>

src/app/admin/admin.component.less

@@ -1,4 +1,8 @@
 .container {
+  table {
+    width: 100%;
+  }
+
   .row {
     margin-top: 40px;
     .admin-form {

src/app/admin/admin.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { HttpClient } from "@angular/common/http";
 import { Observable } from "rxjs/Observable";
+import { StatusService } from "../shared/status/status.service";
 import "rxjs/Rx";
 
 @Component({
@@ -13,13 +14,16 @@ export class AdminComponent implements OnInit {
   name = new FormControl("");
   ip = new FormControl("");
   ipDelete = new FormControl("");
+  devices = [];
+  updateName = new FormControl("");
+  updateID = new FormControl("");
 
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient, private statusService: StatusService) {}
 
   onAddDevice() {
     if (this.name.value.length > 0 && this.ip.value.length > 0) {
       this.http
-        .post("http://localhost:3000/device", {
+        .post("http://192.168.8.101:3000/device", {
           name: this.name.value,
           ip: this.ip.value
         })
@@ -33,12 +37,33 @@ export class AdminComponent implements OnInit {
   onDeviceDelete() {
     if (this.ipDelete.value.length > 0) {
       this.http
-        .delete("http://localhost:3000/device/" + this.ipDelete.value)
+        .delete("http://192.168.8.101:3000/device/" + this.ipDelete.value)
         .subscribe(data => {
           this.ipDelete.reset();
         });
     }
   }
 
-  ngOnInit() {}
+  onUpdateDevice(device) {
+    console.log(device);
+    this.http
+      .put("http://localhost:3000/device/" + device.id, {
+        name: device.name,
+        ip: device.ip
+      })
+      .subscribe(data => {
+        this.statusService.getDB().subscribe(data => {
+          console.log(data);
+          this.devices = data;
+        });
+      });
+    console.log(device);
+  }
+
+  ngOnInit() {
+    this.statusService.getDB().subscribe(data => {
+      console.log(data);
+      this.devices = data;
+    });
+  }
 }

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

@@ -0,0 +1,5 @@
+<form *ngIf="device" (ngSubmit)="onUpdateDevice(device._id)">
+  <input type="text" [value]="device.name" [formControl]="name" />
+  <input type="text" [value]="device.ip" [formControl]="ip" />
+  <button>Edycja</button>
+</form>

src/app/admin/form/form.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormComponent } from './form.component';
+
+describe('FormComponent', () => {
+  let component: FormComponent;
+  let fixture: ComponentFixture<FormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/form/form.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+import { FormControl } from "@angular/forms";
+
+@Component({
+  selector: "app-form",
+  templateUrl: "./form.component.html",
+  styleUrls: ["./form.component.less"]
+})
+export class FormComponent implements OnInit {
+  _device;
+  get device() {
+    return this._device;
+  }
+
+  @Input()
+  set device(device: any) {
+    this._device = device;
+    this.name.setValue(device.name);
+    this.ip.setValue(device.ip);
+  }
+  @Output() onUpdateDeviceEmit = new EventEmitter();
+
+  name = new FormControl("");
+  ip = new FormControl("");
+
+  constructor() {}
+
+  onUpdateDevice(id: string) {
+    console.log(this.name.value, this.ip.value);
+
+    this.onUpdateDeviceEmit.emit({
+      name: this.name.value,
+      ip: this.ip.value,
+      id
+    });
+  }
+
+  ngOnInit() {}
+}

src/app/app.module.ts

@@ -46,13 +46,15 @@ import {
 } from "@angular/material";
 import { AdminComponent } from "./admin/admin.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { FormComponent } from './admin/form/form.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     StatusListComponent,
     HeaderComponent,
-    AdminComponent
+    AdminComponent,
+    FormComponent
   ],
   imports: [
     BrowserModule,

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

@@ -32,7 +32,7 @@ export class StatusListComponent implements OnInit {
         this.devices = data;
         this.onChangeDevice(this.activeID);
       });
-    }, 1000);
+    }, 5000);
 
     this.showChart();
   }