admin panel working

src/app/admin/admin.component.html

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-md-6">
       <h3>Dodawanie nowych urządzeń</h3>
-      <form class="admin-form">
+      <form class="admin-form" (ngSubmit)="onAddDevice()">
         <div class="input-wrapper">
           <mat-form-field class="admin-full-width">
             <input
@@ -10,6 +10,7 @@
               #nameDevice
               maxlength="256"
               placeholder="Nazwa urządzenia"
+              [formControl]="name"
             />
             <mat-hint align="start"
               ><strong
@@ -26,6 +27,7 @@
               #ipDevice
               maxlength="256"
               placeholder="Adres IP urządzenia"
+              [formControl]="ip"
             />
             <mat-hint align="start"
               ><strong>Podaj przypisany do urządzenia stały adres IP</strong>
@@ -40,23 +42,20 @@
     </div>
     <div class="col-md-6">
       <h3>Usuwanie urządzeń</h3>
-      <form class="admin-form">
+      <form class="admin-form" (ngSubmit)="onDeviceDelete()">
         <div class="input-wrapper">
           <mat-form-field class="admin-full-width">
             <input
               matInput
-              #nameDeleteDevice
+              #ipDeviceDel
               maxlength="256"
-              placeholder="Nazwa urządzenia"
+              placeholder="Adres IP urządzenia"
+              [formControl]="ipDelete"
             />
             <mat-hint align="start"
-              ><strong
+              ><strong>Podaj przypisany do urządzenia stały adres IP</strong>
-                >Podaj nazwę czujnika (w przypadku ESPEasy name device)</strong
-              >
             </mat-hint>
-            <mat-hint align="end"
+            <mat-hint align="end">{{ ipDeviceDel.value.length }} / 15</mat-hint>
-              >{{ nameDeleteDevice.value.length }} / 100</mat-hint
-            >
           </mat-form-field>
         </div>
         <div class="example-button-row">

src/app/admin/admin.component.ts

@@ -1,11 +1,8 @@
 import { Component, OnInit } from "@angular/core";
-import {
+import { FormControl } from "@angular/forms";
-  FormControl,
+import { HttpClient } from "@angular/common/http";
-  FormGroupDirective,
+import { Observable } from "rxjs/Observable";
-  NgForm,
+import "rxjs/Rx";
-  Validators
-} from "@angular/forms";
-import { ErrorStateMatcher } from "@angular/material/core";
 
 @Component({
   selector: "app-admin",
@@ -13,7 +10,35 @@ import { ErrorStateMatcher } from "@angular/material/core";
   styleUrls: ["./admin.component.less"]
 })
 export class AdminComponent implements OnInit {
-  constructor() {}
+  name = new FormControl("");
+  ip = new FormControl("");
+  ipDelete = new FormControl("");
+
+  constructor(private http: HttpClient) {}
+
+  onAddDevice() {
+    if (this.name.value.length > 0 && this.ip.value.length > 0) {
+      this.http
+        .post("http://localhost:3000/device", {
+          name: this.name.value,
+          ip: this.ip.value
+        })
+        .subscribe(data => {
+          this.name.reset();
+          this.ip.reset();
+        });
+    }
+  }
+
+  onDeviceDelete() {
+    if (this.ipDelete.value.length > 0) {
+      this.http
+        .delete("http://localhost:3000/device/" + this.ipDelete.value)
+        .subscribe(data => {
+          this.ipDelete.reset();
+        });
+    }
+  }
 
   ngOnInit() {}
 }

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

@@ -7,17 +7,17 @@ import "rxjs/Rx";
   providedIn: "root"
 })
 export class StatusService {
-  private url_pilkarzyki1 =
+  // private url_pilkarzyki1 =
-    "http://localhost:3000/chillroom-server?ip=192.168.8.107";
+  //   "http://localhost:3000/chillroom-server?ip=192.168.8.107";
 
   private url_db = "http://localhost:3000/all";
   private status_url = "http://localhost:3000/status/";
 
   constructor(private http: HttpClient) {}
 
-  getPilkarzyki1(): Observable<any> {
+  // getPilkarzyki1(): Observable<any> {
-    return this.http.get(this.url_pilkarzyki1);
+  //   return this.http.get(this.url_pilkarzyki1);
-  }
+  // }
   getDB(): Observable<any> {
     return this.http.get(this.url_db);
   }