bootstrap and material design added + grid change

src/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

src/app/app.component.html

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

src/app/app.module.ts

@@ -5,11 +5,36 @@ import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
 import { StatusService } from "./shared/status/status.service";
 import { HttpClientModule } from "@angular/common/http";
-import { StatusListComponent } from './status-list/status-list.component';
+import { StatusListComponent } from "./status-list/status-list.component";
+import { HeaderComponent } from "./header/header.component";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import {
+  MatButtonModule,
+  MatCardModule,
+  MatMenuModule,
+  MatToolbarModule,
+  MatIconModule,
+  MatSidenavModule,
+  MatListModule
+} from "@angular/material";
 
 @NgModule({
-  declarations: [AppComponent, StatusListComponent],
-  imports: [BrowserModule, AppRoutingModule, HttpClientModule],
+  declarations: [AppComponent, StatusListComponent, HeaderComponent],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    BrowserModule,
+    BrowserAnimationsModule,
+    HttpClientModule,
+    MatButtonModule,
+    MatMenuModule,
+    MatCardModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatSidenavModule,
+    MatListModule
+  ],
   providers: [StatusService],
   bootstrap: [AppComponent]
 })

src/app/header/header.component.html

@@ -0,0 +1,17 @@
+<nav class="navbar">
+  <div class="row">
+    <div class="logo col-md-4 col-xs-5">
+      <a routerLinkActive="/">
+        <img
+          src="/assets/img/logo.png"
+          routerLink="/"
+          class="logo-img"
+          alt="logo"
+        />
+      </a>
+    </div>
+    <div class="col-md-5 col-xs-5">
+      <p><span matBadge="4" matBadgeOverlap="false">Status serwerals</span></p>
+    </div>
+  </div>
+</nav>

src/app/header/header.component.less

@@ -0,0 +1,66 @@
+.navbar {
+  margin-top: 30px;
+  outline: none !important;
+  .row {
+    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;
+
+      .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-size: 15px;
+          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;
+    }
+  }
+}

src/app/header/header.component.spec.ts

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

src/app/header/header.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-header",
+  templateUrl: "./header.component.html",
+  styleUrls: ["./header.component.less"]
+})
+export class HeaderComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -8,11 +8,16 @@ import "rxjs/Rx";
 })
 export class StatusService {
   private url_pilkarzyki1 =
-    "http://localhost:3000/chillroom-server?ip=http://172.20.10.7";
+    "http://localhost:3000/chillroom-server?ip=http://192.168.8.106/json";
+
+  private url_db = "http://localhost:3000/all";
 
   constructor(private http: HttpClient) {}
 
   getPilkarzyki1(): Observable<any> {
     return this.http.get(this.url_pilkarzyki1);
   }
+  getDB(): Observable<any> {
+    return this.http.get(this.url_db);
+  }
 }

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

@@ -1,5 +1,5 @@
 <h2>Lista urządzeń</h2>
 
-<div *ngFor="let key of statusesKeys">
+<!--<div *ngFor="let key of statusesKeys">
   Status: {{ statuses[key] == "1.00" ? "Zajete" : "Wolne" }}
-</div>
+</div>-->

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

@@ -9,16 +9,16 @@ import { Time } from "@angular/common";
   styleUrls: ["./status-list.component.less"]
 })
 export class StatusListComponent implements OnInit {
-  statuses: {} = {};
-  statusesKeys = Object.keys(this.statuses);
+  //statuses: {} = {};
+  //statusesKeys = Object.keys(this.statuses);
 
   constructor(private statusService: StatusService) {}
 
   readSensors = data => {
     console.log(data);
-    const parsedData = data.split(",");
-    this.statuses = { ...this.statuses, [parsedData[0]]: parsedData[1] };
-    this.statusesKeys = Object.keys(this.statuses);
+    //const parsedData = data.split(",");
+    //this.statuses = { ...this.statuses, [parsedData[0]]: parsedData[1] };
+    //this.statusesKeys = Object.keys(this.statuses);
     //this.statuses = [JSON.parse(data)];
   };
 
@@ -27,5 +27,8 @@ export class StatusListComponent implements OnInit {
       () => this.statusService.getPilkarzyki1().subscribe(this.readSensors),
       1000
     );
+    this.statusService.getDB().subscribe(data => {
+      console.log(data);
+    });
   }
 }

src/styles.less

@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

src/tsconfig.app.json

@@ -2,10 +2,9 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "types": []
+    "types": [],
+    "experimentalDecorators": true,
+    "allowJs": true
   },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
-  ]
+  "exclude": ["test.ts", "**/*.spec.ts"]
 }