admin usuwanie + wylistowanie

src/app/admin/admin.component.html

@@ -8,7 +8,7 @@
             <input
               matInput
               #nameDevice
-              maxlength="256"
+              maxlength="20"
               placeholder="Nazwa urządzenia"
               [formControl]="name"
             />
@@ -17,7 +17,7 @@
                 >Podaj nazwę czujnika (w przypadku ESPEasy name device)</strong
               >
             </mat-hint>
-            <mat-hint align="end">{{ nameDevice.value.length }} / 100</mat-hint>
+            <mat-hint align="end">{{ nameDevice.value.length }} / 20</mat-hint>
           </mat-form-field>
         </div>
         <div class="input-wrapper">
@@ -25,7 +25,7 @@
             <input
               matInput
               #ipDevice
-              maxlength="256"
+              maxlength="15"
               placeholder="Adres IP urządzenia"
               [formControl]="ip"
             />
@@ -48,7 +48,7 @@
             <input
               matInput
               #ipDeviceDel
-              maxlength="256"
+              maxlength="15"
               placeholder="Adres IP urządzenia"
               [formControl]="ipDelete"
             />
@@ -64,5 +64,33 @@
       </form>
     </div>
   </div>
-</div>
+
+
+
+<table class="table">
+  <thead>
+    <tr>
+      
+      <th scope="col">Nazwa</th>
+      <th scope="col">IP</th>
+     
+      <th scope="col">Edytuj</th>
+      <th scope="col">Usuń</th>
+    </tr>
+  </thead>
+  <tbody>
+
+  <tr *ngFor="let device of devices; let i = index"
+      [attr.data-index]="i"
+    >
+
+    
+      <td>{{device.name}}</td>
+      <td>{{device.ip}}</td>
+   
+      <td>edytuj</td>
+      <td><button (click)="onDeviceDelete(i)">usuń</button> </td>
+</tr>
+</tbody>
+</table>
 

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 {UserService} from '../user.service';
 import "rxjs/Rx";
 
@@ -14,8 +15,8 @@ export class AdminComponent implements OnInit {
   name = new FormControl("");
   ip = new FormControl("");
   ipDelete = new FormControl("");
-
-  constructor(private http: HttpClient, private user: UserService) {}
+  devices = [];
+  constructor(private http: HttpClient, private user: UserService, private statusService: StatusService) {}
 
   onAddDevice() {
     if (this.name.value.length > 0 && this.ip.value.length > 0) {
@@ -31,15 +32,35 @@ export class AdminComponent implements OnInit {
     }
   }
 
-  onDeviceDelete() {
-    if (this.ipDelete.value.length > 0) {
+  onDeviceDelete(i) {
+ 
+    if (this.devices[i].ip.length > 0) {
       this.http
-        .delete("http://localhost:3000/device/" + this.ipDelete.value)
+        .delete("http://localhost:3000/device/" + this.devices[i].ip)
         .subscribe(data => {
-          this.ipDelete.reset();
+         
         });
     }
+    
+    
   }
 
-  ngOnInit() {}
+
+  onDeviceEdit() {
+    
+ 
+    
+  }
+
+
+
+  ngOnInit() {
+
+      this.statusService.getDB().subscribe(data => {
+      this.devices = data;
+      
+    });
+  }
+
+
 }

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

@@ -94,7 +94,7 @@
         ><span> min</span><br />
       </p>
 
-      <span>Przewidywane zakończenie: </span>
+      <span>Przewidywane zakończenie za: </span>
       <span class="boldMe">10</span
       ><span> min</span>
     </ul>