minor changes

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) {

src/app/app-routing.module.ts

@@ -8,8 +8,8 @@ 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

@@ -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,9 +16,9 @@ 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 == "admin" && password == "cap_login") {
       this.user.setUserLoggedIn();
-      this.router.navigate(["admin"]);
+      this.router.navigate(["cap_password_123"]);
       this.statusLog = 1;
     } else {
       this.statusLog = 2;

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">
-      - <span>{{ activeDevice.name }}</span> -
-    </p>
-
+    <p class="machine-status-title">{{ activeDevice.name }}</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'
         "
@@ -118,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;
+  }
+}