adding devices layout added

src/app/admin/admin.component.html

@@ -0,0 +1,25 @@
+<div class="container">
+  <div class="row">
+    <h3>Dodawanie nowych urządzeń</h3>
+    <form class="admin-form">
+      <div class="input-wrapper">
+        <mat-form-field class="admin-full-width">
+          <input matInput #message maxlength="256" placeholder="Message" />
+          <mat-hint align="start"
+            ><strong>Don't disclose personal info</strong>
+          </mat-hint>
+          <mat-hint align="end">{{ message.value.length }} / 256</mat-hint>
+        </mat-form-field>
+      </div>
+      <div class="input-wrapper">
+        <mat-form-field class="admin-full-width">
+          <input matInput #message maxlength="256" placeholder="Message" />
+          <mat-hint align="start"
+            ><strong>Don't disclose personal info</strong>
+          </mat-hint>
+          <mat-hint align="end">{{ message.value.length }} / 256</mat-hint>
+        </mat-form-field>
+      </div>
+    </form>
+  </div>
+</div>

src/app/admin/admin.component.less

@@ -0,0 +1,19 @@
+.container {
+  .row {
+    margin-top: 40px;
+    .admin-form {
+      min-width: 150px;
+      max-width: 500px;
+      width: 100%;
+      margin-top: 50px;
+
+      .input-wrapper {
+        margin-bottom: 30px;
+      }
+
+      .admin-full-width {
+        width: 100%;
+      }
+    }
+  }
+}

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

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

src/app/admin/admin.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from "@angular/core";
+import {
+  FormControl,
+  FormGroupDirective,
+  NgForm,
+  Validators
+} from "@angular/forms";
+import { ErrorStateMatcher } from "@angular/material/core";
+
+@Component({
+  selector: "app-admin",
+  templateUrl: "./admin.component.html",
+  styleUrls: ["./admin.component.less"]
+})
+export class AdminComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/app.component.html

@@ -1,5 +1,6 @@
 <div class="container">
   <router-outlet></router-outlet>
   <app-header></app-header>
-  <app-status-list> </app-status-list>
+  <!--<app-status-list> </app-status-list>-->
+  <app-admin></app-admin>
 </div>

src/app/app.module.ts

@@ -9,17 +9,51 @@ import { StatusListComponent } from "./status-list/status-list.component";
 import { HeaderComponent } from "./header/header.component";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import {
+  MatAutocompleteModule,
   MatButtonModule,
+  MatButtonToggleModule,
   MatCardModule,
-  MatMenuModule,
-  MatToolbarModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatDividerModule,
+  MatExpansionModule,
+  MatGridListModule,
   MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
+  MatRadioModule,
+  MatRippleModule,
+  MatSelectModule,
   MatSidenavModule,
-  MatListModule
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatSortModule,
+  MatStepperModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+  MatFormFieldModule,
+  MatFormFieldControl
 } from "@angular/material";
+import { AdminComponent } from "./admin/admin.component";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
 @NgModule({
-  declarations: [AppComponent, StatusListComponent, HeaderComponent],
+  declarations: [
+    AppComponent,
+    StatusListComponent,
+    HeaderComponent,
+    AdminComponent
+  ],
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -33,7 +67,11 @@ import {
     MatToolbarModule,
     MatIconModule,
     MatSidenavModule,
-    MatListModule
+    MatListModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule
   ],
   providers: [StatusService],
   bootstrap: [AppComponent]

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

@@ -11,7 +11,7 @@
       >
         {{ device.name }}
       </button>
-      {{ device.lastStatus == 1 ? "Zajęte" : "Wolne" }}
+      <b>{{ device.lastStatus == 1 ? "Zajęte" : "Wolne" }}</b>
     </div>
   </div>
 </div>