src/app/admin/admin.component.html

@@ -1,3 +1,4 @@
+<a style="float: right" routerLink="/"> Wyloguj </a>
 <div class="container">
   <div class="row">
     <div class="col-md-6">
@@ -8,7 +9,7 @@
             <input
               matInput
               #nameDevice
-              maxlength="256"
+              maxlength="20"
               placeholder="Nazwa urządzenia"
               [formControl]="name"
             />
@@ -17,7 +18,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 +26,7 @@
             <input
               matInput
               #ipDevice
-              maxlength="256"
+              maxlength="15"
               placeholder="Adres IP urządzenia"
               [formControl]="ip"
             />
@@ -48,7 +49,7 @@
             <input
               matInput
               #ipDeviceDel
-              maxlength="256"
+              maxlength="15"
               placeholder="Adres IP urządzenia"
               [formControl]="ipDelete"
             />
@@ -64,4 +65,35 @@
       </form>
     </div>
   </div>
-</div>
+
+
+
+<table style="margin-top:40px;" 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><button style="background-color:white;border: 1px blue solid; color: blue; opacity:0.5;" (click)="onDeviceDelete(i)">edytuj</button></td>
+
+      <td><button style="background-color:white;border: 1px red solid; color: red; opacity:0.5;" (click)="onDeviceDelete(i); deleteRow(i)">usuń</button> </td>
+</tr>
+</tbody>
+</table>
+
+

src/app/admin/admin.component.ts

@@ -2,6 +2,8 @@ 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";
 
 @Component({
@@ -13,8 +15,8 @@ export class AdminComponent implements OnInit {
   name = new FormControl("");
   ip = new FormControl("");
   ipDelete = new FormControl("");
-
-  constructor(private http: HttpClient) {}
+  devices = [];
+  constructor(private http: HttpClient, private user: UserService, private statusService: StatusService) {}
 
   onAddDevice() {
     if (this.name.value.length > 0 && this.ip.value.length > 0) {
@@ -30,15 +32,47 @@ 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() {}
+
+  deleteRow(i){
+       
+          
+                this.devices.splice(i,1);
+            
+        
+    }
+
+
+
+
+
+  onDeviceEdit() {
+    
+ 
+    
+  }
+
+
+
+  ngOnInit() {
+
+      this.statusService.getDB().subscribe(data => {
+      this.devices = data;
+      
+    });
+  }
+
+
 }

src/app/app-routing.module.ts

@@ -2,13 +2,14 @@ import { NgModule } from "@angular/core";
 import { Routes, RouterModule } from "@angular/router";
 import { AppComponent } from "./app.component";
 import { AdminComponent } from "./admin/admin.component";
+import { LoginComponent } from "./login/login.component";
 import { StatusListComponent } from "./status-list/status-list.component";
 
 const routes: Routes = [
   { path: "", component: StatusListComponent },
   {
-    path: "admin",
-    component: AdminComponent
+    path: "login",
+    component: LoginComponent
   }
 ];
 

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { HttpClientModule } from "@angular/common/http";
 import { StatusListComponent } from "./status-list/status-list.component";
 import { HeaderComponent } from "./header/header.component";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import {UserService} from './user.service';
 import {
   MatAutocompleteModule,
   MatButtonModule,
@@ -46,15 +47,34 @@ import {
 } from "@angular/material";
 import { AdminComponent } from "./admin/admin.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { LoginComponent } from './login/login.component';
+import {RouterModule, Routes} from '@angular/router';
+import {AuthgardGuard} from './authgard.guard';
+
+const appRoutes:Routes = [
+{
+  path: '',
+  component: LoginComponent
+},
+{
+  path: 'admin',
+  component: AdminComponent,
+  canActivate: [AuthgardGuard]
+}
+]
+
+
 
 @NgModule({
   declarations: [
     AppComponent,
     StatusListComponent,
     HeaderComponent,
-    AdminComponent
+    AdminComponent,
+    LoginComponent
   ],
   imports: [
+    RouterModule.forRoot(appRoutes),
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
@@ -73,7 +93,7 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
     MatFormFieldModule,
     MatInputModule
   ],
-  providers: [StatusService],
+  providers: [StatusService, UserService, AuthgardGuard],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/authgard.guard.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+
+import { AuthgardGuard } from './authgard.guard';
+
+describe('AuthgardGuard', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthgardGuard]
+    });
+  });
+
+  it('should ...', inject([AuthgardGuard], (guard: AuthgardGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+});

src/app/authgard.guard.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import {UserService} from './user.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthgardGuard implements CanActivate {
+	constructor( private user: UserService) {}
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    return this.user.getUserLoggedIn();
+  }
+}

src/app/header/header.component.html

@@ -5,13 +5,7 @@
                 <img src="/assets/img/logo.png" routerLink="/" class="logo-img" alt="logo">
             </a>
         </div>
-        <div class="battery col-md-3 col-xs-3">
-            <img src="/assets/img/battery.png" class="battery-img" alt="battery">
-            <div class="battery-percent">
-                <span>98</span>
-                <span>%</span>
-            </div>
-        </div>
+       
         
         </div>
        

src/app/login/login.component.html

@@ -0,0 +1,22 @@
+
+
+<div style="margin-top:30px"><form (submit)="loginUser($event)">
+<div class="input">
+<label> Nazwa użytkownika</label>
+<input type="text">
+</div>
+<div class="input">
+	<label>Hasło</label>
+	<input type="password">
+</div>
+<span style="color: red">{{ statusLog == 1
+          ? " "
+          : statusLog == 2
+          ? "Niepoprawny login lub hasło"
+          : " "}}</span>
+<div class="input">
+	<input type="submit" value="Login">
+</div>
+</form>
+
+</div>

src/app/login/login.component.less

@@ -0,0 +1,37 @@
+:host {
+	flex-grow: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+div.input{
+	position:relative;
+}
+
+div.input label {
+	position: absolute;
+	top:0;
+	transform: translateY(-50%);
+	left:10px;
+	background:white;
+	padding: 5px 2px;
+}
+
+div.input input{
+	padding:10px 10px;
+	font-size:20px;
+	outline: 0px;
+	
+}
+
+div{
+	margin-bottom:15px;
+}
+
+input[type=submit]{
+	background-color: #0099ff;
+	border: none;
+	color: white;
+	border-radius: 5px;
+}

src/app/login/login.component.spec.ts

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

src/app/login/login.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import {UserService} from '../user.service';
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.less']
+})
+export class LoginComponent implements OnInit {
+  
+  constructor(private router: Router, private user:UserService) { }
+  statusLog = 0;
+  ngOnInit() {
+  }
+
+  loginUser(e) {
+  e.preventDefault();
+  var username = e.target.elements[0].value;
+  var password = e.target.elements[1].value;
+ 
+  if(username == 'admin' && password == 'admin'){
+  this.user.setUserLoggedIn();
+    this.router.navigate(['admin']);
+    this.statusLog=1;
+
+  }
+  else{
+  this.statusLog=2;
+
+  }
+ 
+  }
+
+}

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

@@ -32,7 +32,7 @@
           ? "Zajęte"
           : device.lastStatus == 0
           ? "Wolne"
-          : "Brak połączenia z czujnikiem"
+          : "Rozładowana bateria"
       }}</b>
     </div>
   </div>
@@ -59,18 +59,18 @@
           ? "Zajęte"
           : activeDevice.lastStatus == 0
           ? "Wolne"
-          : "Brak połączenia z czujnikiem"
+          : "Rozładowana bateria"
       }}</span>
     </p>
     <p class="machine-status2">
       {{
         activeDevice.lastStatus == 1
-          ? "Zajęte"
+          ? "Zajęte od:"
           : activeDevice.lastStatus == 0
-          ? "Wolne"
-          : "Brak połączenia z czujnikiem"
+          ? "Wolne od:"
+          : "Rozładowana bateria"
       }}
-      od:
+      
       <span
         >{{ time > 60 ? this.Math.floor(time / 60) : this.Math.floor(time) }}
         {{ time > 60 ? "min" : "sek" }}
@@ -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>

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

@@ -110,18 +110,7 @@ table {
   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;

src/app/user.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UserService = TestBed.get(UserService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/user.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+private isUserLoggedIn;
+private username;
+
+
+  constructor() {
+this.isUserLoggedIn = false; 
+   }
+   setUserLoggedIn(){
+   this.isUserLoggedIn = true;
+   }
+
+   getUserLoggedIn(){
+   return this.isUserLoggedIn;
+   }
+}